Merge pull request #154 from learnhouse/feat/role-indicator-menu

Header Role Indicator + Disable content creation wording if user isn't connected

apps/web/app/orgs/[orgslug]/(withmenu)/collections/page.tsx

@@ -10,6 +10,7 @@ import Link from 'next/link'
 import { getAccessTokenFromRefreshTokenCookie } from '@services/auth/auth'
 import CollectionThumbnail from '@components/Objects/Thumbnails/CollectionThumbnail'
 import NewCollectionButton from '@components/StyledElements/Buttons/NewCollectionButton'
+import ContentPlaceHolderIfUserIsNotAdmin from '@components/ContentPlaceHolder'
 
 type MetadataProps = {
   params: { orgslug: string; courseid: string }
@@ -127,7 +128,9 @@ const CollectionsPage = async (params: any) => {
                   No collections yet
                 </h1>
                 <p className="text-lg text-gray-400">
-                  Create a collection to group courses together
+                  <ContentPlaceHolderIfUserIsNotAdmin
+                    text="Create a collection to add content"
+                  />
                 </p>
               </div>
               <AuthenticatedClientElement

apps/web/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx

@@ -8,6 +8,7 @@ import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentT
 import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
 import CourseThumbnail from '@components/Objects/Thumbnails/CourseThumbnail'
 import NewCourseButton from '@components/StyledElements/Buttons/NewCourseButton'
+import useAdminStatus from '@components/Hooks/useAdminStatus'
 
 interface CourseProps {
   orgslug: string
@@ -21,6 +22,7 @@ function Courses(props: CourseProps) {
   const searchParams = useSearchParams()
   const isCreatingCourse = searchParams.get('new') ? true : false
   const [newCourseModal, setNewCourseModal] = React.useState(isCreatingCourse)
+  const isUserAdmin = useAdminStatus() as any
 
   async function closeNewCourseModal() {
     setNewCourseModal(false)
@@ -97,9 +99,11 @@ function Courses(props: CourseProps) {
                   <h1 className="text-3xl font-bold text-gray-600">
                     No courses yet
                   </h1>
-                  <p className="text-lg text-gray-400">
+                  {isUserAdmin ? (<p className="text-lg text-gray-400">
                     Create a course to add content
-                  </p>
+                  </p>) : (<p className="text-lg text-gray-400">
+                    No courses available yet
+                    </p>)}
                 </div>
                 <AuthenticatedClientElement
                   action="create"

apps/web/app/orgs/[orgslug]/(withmenu)/page.tsx

@@ -14,6 +14,7 @@ import CollectionThumbnail from '@components/Objects/Thumbnails/CollectionThumbn
 import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
 import NewCourseButton from '@components/StyledElements/Buttons/NewCourseButton'
 import NewCollectionButton from '@components/StyledElements/Buttons/NewCollectionButton'
+import ContentPlaceHolderIfUserIsNotAdmin from '@components/ContentPlaceHolder'
 
 type MetadataProps = {
   params: { orgslug: string }
@@ -139,7 +140,9 @@ const OrgHomePage = async (params: any) => {
                       No collections yet
                     </h1>
                     <p className="text-md text-gray-400">
-                      Create a collection to group courses together
+                      <ContentPlaceHolderIfUserIsNotAdmin
+                        text="Create collections to group courses together"
+                      />
                     </p>
                   </div>
                 </div>
@@ -206,7 +209,7 @@ const OrgHomePage = async (params: any) => {
                       No courses yet
                     </h1>
                     <p className="text-md text-gray-400">
-                      Create a course to add content
+                      <ContentPlaceHolderIfUserIsNotAdmin text='Create courses to add content' />
                     </p>
                   </div>
                 </div>

apps/web/app/orgs/[orgslug]/dash/page.tsx

@@ -76,7 +76,7 @@ function DashboardHome() {
 
         <Link
           href={'/dash/user-account/settings/general'}
-          className="flex bg-white shadow-lg p-[15px] items-center rounded-lg  items-center mx-auto hover:scale-105 transition-all ease-linear cursor-pointer"
+          className="flex bg-white shadow-lg p-[15px] items-center rounded-lg  mx-auto hover:scale-105 transition-all ease-linear cursor-pointer"
         >
           <div className="flex flex-row mx-auto space-x-3 items-center">
             <Settings className=" text-gray-500" size={20}></Settings>

apps/web/components/ContentPlaceHolder.tsx

@@ -0,0 +1,14 @@
+'use client';
+import React from 'react'
+import useAdminStatus from './Hooks/useAdminStatus'
+
+
+// Terrible name and terible implementation, need to be refactored asap 
+function ContentPlaceHolderIfUserIsNotAdmin({ text }: { text: string }) {
+    const isUserAdmin = useAdminStatus() as any
+    return (
+        <div>{isUserAdmin ? text : 'No content yet'}</div>
+    )
+}
+
+export default ContentPlaceHolderIfUserIsNotAdmin

apps/web/components/Hooks/useAdminStatus.tsx

@@ -0,0 +1,40 @@
+import { useOrg } from '@components/Contexts/OrgContext'
+import { useSession } from '@components/Contexts/SessionContext'
+import { useEffect } from 'react'
+
+function useAdminStatus() {
+    const session = useSession() as any
+    const org = useOrg() as any
+
+    // If session is not loaded, redirect to login
+ 
+    useEffect(() => {
+        if (session.isLoading) {
+            return
+        }
+        
+    }
+    , [session])
+
+    const isUserAdmin = () => {
+        if (session.isAuthenticated) {
+            const isAdmin = session.roles.some((role: any) => {
+                return (
+                    role.org.id === org.id &&
+                    (role.role.id === 1 ||
+                        role.role.id === 2 ||
+                        role.role.role_uuid === 'role_global_admin' ||
+                        role.role.role_uuid === 'role_global_maintainer')
+                )
+            })
+            return isAdmin
+        }
+        return false
+    }
+  
+    // Return the user admin status
+    return isUserAdmin()
+
+}
+
+export default useAdminStatus

apps/web/components/Objects/Menu/ProfileArea.tsx

@@ -1,147 +0,0 @@
-'use client'
-import React from 'react'
-import styled from 'styled-components'
-import Link from 'next/link'
-import {
-  getNewAccessTokenUsingRefreshToken,
-  getUserInfo,
-} from '@services/auth/auth'
-import { usePathname } from 'next/navigation'
-import { useRouter } from 'next/router'
-import { Settings } from 'lucide-react'
-import UserAvatar from '@components/Objects/UserAvatar'
-
-export interface Auth {
-  access_token: string
-  isAuthenticated: boolean
-  userInfo: any
-  isLoading: boolean
-}
-
-function ProfileArea() {
-  const PRIVATE_ROUTES = ['/course/*/edit', '/settings*', '/trail']
-  const NON_AUTHENTICATED_ROUTES = ['/login', '/register']
-
-  const router = useRouter()
-  const pathname = usePathname()
-  const [auth, setAuth] = React.useState<Auth>({
-    access_token: '',
-    isAuthenticated: false,
-    userInfo: {},
-    isLoading: true,
-  })
-
-  async function checkRefreshToken() {
-    let data = await getNewAccessTokenUsingRefreshToken()
-    if (data) {
-      return data.access_token
-    }
-  }
-
-  React.useEffect(() => {
-    checkAuth()
-  }, [pathname])
-
-  async function checkAuth() {
-    try {
-      let access_token = await checkRefreshToken()
-      let userInfo = {}
-      let isLoading = false
-
-      if (access_token) {
-        userInfo = await getUserInfo(access_token)
-        setAuth({ access_token, isAuthenticated: true, userInfo, isLoading })
-
-        // Redirect to home if user is trying to access a NON_AUTHENTICATED_ROUTES route
-
-        if (
-          NON_AUTHENTICATED_ROUTES.some((route) =>
-            new RegExp(`^${route.replace('*', '.*')}$`).test(pathname)
-          )
-        ) {
-          router.push('/')
-        }
-      } else {
-        setAuth({ access_token, isAuthenticated: false, userInfo, isLoading })
-
-        // Redirect to login if user is trying to access a private route
-        if (
-          PRIVATE_ROUTES.some((route) =>
-            new RegExp(`^${route.replace('*', '.*')}$`).test(pathname)
-          )
-        ) {
-          router.push('/login')
-        }
-      }
-    } catch (error) {}
-  }
-  return (
-    <ProfileAreaStyled>
-      {!auth.isAuthenticated && (
-        <UnidentifiedArea>
-          <ul>
-            <li>
-              <Link href="/login">Login</Link>
-            </li>
-            <li>
-              <Link href="/signup">Sign up</Link>
-            </li>
-          </ul>
-        </UnidentifiedArea>
-      )}
-      {auth.isAuthenticated && (
-        <AccountArea>
-          <div>{auth.userInfo.user_object.username}</div>
-          <div>
-            <UserAvatar width={40} />
-          </div>
-          <Link href={'/dash'}>
-            <Settings />
-          </Link>
-        </AccountArea>
-      )}
-    </ProfileAreaStyled>
-  )
-}
-
-const AccountArea = styled.div`
-  padding-right: 20px;
-  display: flex;
-  place-items: center;
-
-  div {
-    margin-right: 10px;
-  }
-  img {
-    width: 29px;
-    border-radius: 19px;
-  }
-`
-
-const ProfileAreaStyled = styled.div`
-  display: flex;
-  place-items: stretch;
-  place-items: center;
-`
-
-const UnidentifiedArea = styled.div`
-  display: flex;
-  place-items: stretch;
-  flex-grow: 1;
-
-  ul {
-    display: flex;
-    place-items: center;
-    list-style: none;
-    padding-left: 20px;
-
-    li {
-      padding-right: 20px;
-      font-size: 16px;
-      font-weight: 500;
-      color: #171717;
-    }
-  }
-`
-
-export default ProfileArea

apps/web/components/Security/AdminAuthorization.tsx

@@ -1,6 +1,7 @@
 'use client'
 import { useOrg } from '@components/Contexts/OrgContext'
 import { useSession } from '@components/Contexts/SessionContext'
+import useAdminStatus from '@components/Hooks/useAdminStatus'
 import { usePathname, useRouter } from 'next/navigation'
 import React from 'react'
 
@@ -40,18 +41,7 @@ function AdminAuthorization(props: AuthorizationProps) {
   }
 
   // Verify if the user is an Admin (1), Maintainer (2) or Member (3) of the organization
-  const isUserAdmin = () => {
-    const isAdmin = session.roles.some((role: any) => {
-      return (
-        role.org.id === org.id &&
-        (role.role.id === 1 ||
-          role.role.id === 2 ||
-          role.role.role_uuid === 'role_global_admin' ||
-          role.role.role_uuid === 'role_global_maintainer')
-      )
-    })
-    return isAdmin
-  }
+  const isUserAdmin = useAdminStatus()
 
   function checkPathname(pattern: string, pathname: string) {
     // Escape special characters in the pattern and replace '*' with a regex pattern
@@ -72,7 +62,7 @@ function AdminAuthorization(props: AuthorizationProps) {
         console.log('Admin path')
         if (isUserAuthenticated()) {
           // Check if the user is an Admin
-          if (isUserAdmin()) {
+          if (isUserAdmin) {
             setIsAuthorized(true)
           } else {
             setIsAuthorized(false)
@@ -93,7 +83,7 @@ function AdminAuthorization(props: AuthorizationProps) {
 
     if (props.authorizationMode === 'component') {
       // Component mode
-      if (isUserAuthenticated() && isUserAdmin()) {
+      if (isUserAuthenticated() && isUserAdmin) {
         setIsAuthorized(true)
       } else {
         setIsAuthorized(false)

apps/web/components/Security/HeaderProfileBox.tsx

@@ -1,13 +1,19 @@
 'use client'
-import React from 'react'
+import React, { useEffect } from 'react'
 import styled from 'styled-components'
 import Link from 'next/link'
 import { Settings } from 'lucide-react'
 import { useSession } from '@components/Contexts/SessionContext'
 import UserAvatar from '@components/Objects/UserAvatar'
+import useAdminStatus from '@components/Hooks/useAdminStatus'
 
 export const HeaderProfileBox = () => {
   const session = useSession() as any
+  const isUserAdmin = useAdminStatus() as any
+
+  useEffect(() => {
+  }
+  , [session])
 
   return (
     <ProfileArea>
@@ -26,7 +32,10 @@ export const HeaderProfileBox = () => {
       {session.isAuthenticated && (
         <AccountArea className="space-x-0">
           <div className="flex items-center space-x-2">
-            <div className="text-xs">{session.user.username} </div>
+            <div className='flex items-center space-x-2' >
+              <p className='text-sm'>{session.user.username}</p>
+              {isUserAdmin && <div className="text-[10px] bg-rose-300 px-2 font-bold rounded-md shadow-inner py-1">ADMIN</div>}
+            </div>
             <div className="py-4">
               <UserAvatar border="border-4" rounded="rounded-lg" width={30} />
             </div>