GAME-73

Author: kkartunov

README.md

@@ -273,6 +273,7 @@ The PlatformRoute model has several useful options:
 | `authRequired?: boolean` | Requiring authentication for a route means that users who are not logged in will be redirected to the Login Form when they try to access the route. |
 | `route: string` | The route property is the path to the route, relative to its parent(s). |
 | `title: string` | The title property is the text that will appear in the Tools or Utils Selectors (this is irrelevant on hidden routes). |
+| `rolesRequired: Array<string>` | Requiring roles for a route means that users who do not own the roles will be presented with restricted page when they try to access the route. |
 
 ## Git
 

src-ts/lib/profile-provider/profile-functions/profile-factory/profile.factory.ts

@@ -14,5 +14,7 @@ export function create(profile: UserProfile, token: TokenModel): UserProfile {
     // rolees.
     profile.isCustomer = !!token.roles?.some(role => role === UserRole.customer)
     profile.isMember = !profile.isCustomer
+    // store roles for custom capability checks
+    profile.roles = token.roles
     return profile
 }

src-ts/lib/profile-provider/user-profile.model.ts

@@ -10,7 +10,8 @@ export interface UserProfile {
     isMember?: boolean
     lastName: string
     photoURL?: string
+    roles?: Array<string>,
     status: string
     updatedAt: number
-    userId: number
+    userId: number,
 }

src-ts/lib/restricted-page/RestrictedPage.module.scss

@@ -0,0 +1,27 @@
+.contentLayout {
+  width: 100%;
+  padding-bottom: 0;
+
+  .contentLayout-outer {
+    width: 100%;
+
+    .contentLayout-inner {
+      width: 100%;
+      overflow: visible;
+    }
+  }
+}
+
+.container {
+  display: flex;
+  padding-top: 26px;
+
+  a {
+    color: #0D61BF;
+
+    &:hover {
+      color: #0D61BF;
+      text-decoration: underline;
+    }
+  }
+}

src-ts/lib/restricted-page/RestrictedPage.tsx

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react'
+
+import { ContentLayout } from '..'
+
+import styles from './RestrictedPage.module.scss'
+
+export const RestrictedPage: ReactElement =
+  <ContentLayout
+    contentClass={styles['contentLayout']}
+    outerClass={styles['contentLayout-outer']}
+    innerClass={styles['contentLayout-inner']}
+    title='Thanks for visiting'
+  >
+    <div className={styles.container}>
+      <p>Unfortenatly, you are not permitted to access the site. If you feel you should be able to, please contact us at <a href='mailto:support@topcoder.com'>support@topcoder.com</a>.</p>
+    </div>
+  </ContentLayout>

src-ts/lib/restricted-page/index.ts

@@ -0,0 +1 @@
+export { RestrictedPage } from './RestrictedPage'

src-ts/lib/route-provider/platform-route.model.ts

@@ -7,6 +7,7 @@ export interface PlatformRoute {
     element: JSX.Element
     hidden?: boolean
     memberOnly?: boolean
+    rolesRequired?: Array<string>
     route: string
     title?: string
 }

src-ts/lib/route-provider/require-auth-provider/require-auth.provider.tsx

@@ -1,22 +1,37 @@
 import { useContext } from 'react'
 
 import { profileContext, ProfileContextData } from '../../profile-provider'
+import { RestrictedPage } from '../../restricted-page'
 
 interface RequireAuthProviderProps {
     children: JSX.Element
-    loginUrl: string
+    loginUrl: string,
+    rolesRequired?: Array<string>,
 }
 
 function RequireAuthProvider(props: RequireAuthProviderProps): JSX.Element {
 
     const profileContextData: ProfileContextData = useContext(profileContext)
     const { profile, initialized }: ProfileContextData = profileContextData
 
-    // if we have a profile or we're not initialized yet, just return the children
-    if (!initialized || !!profile) {
+    // if we're not initialized yet, just return the children
+    if (!initialized) {
         return props.children
     }
 
+    // if we have a profile and `rolesRequired` is configured for the route
+    // check the user's roles, allow access or show restricted page
+    if (!!profile) {
+        if (props.rolesRequired) {
+            if (!profile.roles) { return RestrictedPage }
+            const intersection: Array<string> = profile.roles?.filter(r => props.rolesRequired?.includes(r))
+            if (intersection.length !== props.rolesRequired.length) { return RestrictedPage }
+            return props.children
+        } else {
+            return props.children
+        }
+    }
+
     // redirect to the login page
     window.location.href = props.loginUrl
     return <></>

src-ts/lib/route-provider/route.provider.tsx

@@ -124,7 +124,7 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
         const routeElement: JSX.Element = !route.authRequired
             ? route.element
             : (
-                <RequireAuthProvider loginUrl={authUrlLogin()}>
+                <RequireAuthProvider loginUrl={authUrlLogin()} rolesRequired={route.rolesRequired}>
                     {route.element}
                 </RequireAuthProvider>
             )

src-ts/tools/gamification-admin/GamificationAdmin.tsx

@@ -8,6 +8,7 @@ import {
 
 export const toolTitle: string = 'Gamification Admin'
 export const baseUrl: string = '/gamification-admin'
+export const rolesRequired: Array<string> = ['Gamification Admin']
 
 const GamificationAdmin: FC<{}> = () => {