fix: Header Role Indicator + Disable course creation wording if user isn't connected

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>