fix(admin-ui): prevent admin login failure when admin roles are removed (#2689)

Author: faisalsiddique4400

admin-ui/app/locales/en/translation.json

@@ -1010,7 +1010,8 @@
     "auth_error_token_fetch": "Token or user info fetch failed",
     "auth_error_no_code": "Unable to get authorization code",
     "mau_loading": "Loading statistics...",
-    "vs_previous_period": "vs previous period"
+    "vs_previous_period": "vs previous period",
+    "no_valid_role_logout": "The logged-in user does not have a valid role. You will be logged out in {{seconds}} seconds."
   },
   "errors": {
     "attribute_create_failed": "Error creating attribute",

admin-ui/app/locales/es/translation.json

@@ -1004,7 +1004,8 @@
     "auth_error_token_fetch": "Error al obtener el token o la información del usuario",
     "auth_error_no_code": "No se pudo obtener el código de autorización",
     "mau_loading": "Cargando estadísticas...",
-    "vs_previous_period": "vs período anterior"
+    "vs_previous_period": "vs período anterior",
+    "no_valid_role_logout": "El usuario no tiene un rol válido. Se cerrará la sesión en {{seconds}} segundos."
   },
   "errors": {
     "attribute_create_failed": "Error al crear el atributo",

admin-ui/app/locales/fr/translation.json

@@ -950,7 +950,8 @@
     "audit_description": "Afficher et rechercher les journaux d'audit du système dans une plage de dates",
     "showing_entries": "Affichage de {{start}} à {{end}} sur {{total}} entrées",
     "start_date_after_end": "La date de début ne peut pas être postérieure à la date de fin",
-    "both_dates_required": "Les dates de début et de fin sont requises pour le filtrage par plage de dates"
+    "both_dates_required": "Les dates de début et de fin sont requises pour le filtrage par plage de dates",
+    "no_valid_role_logout": "L'utilisateur n'a pas de rôle valide. Déconnexion dans {{seconds}} secondes."
   },
   "errors": {
     "attribute_create_failed": "Erreur lors de la création de l'attribut",

admin-ui/app/locales/pt/translation.json

@@ -945,7 +945,8 @@
     "audit_description": "Visualizar e pesquisar registros de auditoria do sistema dentro de um intervalo de datas",
     "showing_entries": "Mostrando {{start}} a {{end}} de {{total}} entradas",
     "start_date_after_end": "A data de início não pode ser posterior à data de fim",
-    "both_dates_required": "As datas de início e fim são obrigatórias para filtragem por intervalo de datas"
+    "both_dates_required": "As datas de início e fim são obrigatórias para filtragem por intervalo de datas",
+    "no_valid_role_logout": "O utilizador não possui um papel válido. Sessão será encerrada em {{seconds}} segundos."
   },
   "errors": {
     "attribute_create_failed": "Erro ao criar atributo",

admin-ui/app/utils/AppAuthProvider.tsx

@@ -10,6 +10,8 @@ import { checkLicenseConfigValid, getUserInfoResponse } from '../redux/actions'
 import { getAPIAccessToken, checkLicensePresent } from 'Redux/actions'
 import GluuTimeoutModal from 'Routes/Apps/Gluu/GluuTimeoutModal'
 import GluuErrorModal from 'Routes/Apps/Gluu/GluuErrorModal'
+import GluuToast from 'Routes/Apps/Gluu/GluuToast'
+import { toast } from 'react-toastify'
 import { updateToast } from 'Redux/features/toastSlice'
 import {
   FetchRequestor,
@@ -30,6 +32,7 @@ import {
   fetchUserInformation,
   type FetchUserInfoResult,
 } from 'Redux/api/backend-api'
+import { useTranslation } from 'react-i18next'
 import { jwtDecode } from 'jwt-decode'
 import type { UserInfo } from '@/redux/features/types/authTypes'
 
@@ -50,9 +53,12 @@ interface AppAuthProviderProps {
   children: ReactNode
 }
 
+const LOGOUT_DELAY_SECONDS = 10
+
 export default function AppAuthProvider({ children }: Readonly<AppAuthProviderProps>) {
   const dispatch = useAppDispatch()
   const location = useLocation()
+  const { t } = useTranslation()
   const [roleNotFound, setRoleNotFound] = useState(false)
   const [showAdminUI, setShowAdminUI] = useState(false)
   const {
@@ -236,11 +242,16 @@ export default function AppAuthProvider({ children }: Readonly<AppAuthProviderPr
 
               if (!hasValidRole) {
                 setShowAdminUI(false)
-                alert('The logged-in user do not have valid role. Logging out of Admin UI')
                 setRoleNotFound(true)
                 const state = uuidv4()
                 const sessionEndpoint = `${authConfigs?.endSessionEndpoint ?? ''}?state=${state}&post_logout_redirect_uri=${localStorage.getItem('postLogoutRedirectUri') ?? ''}`
-                window.location.href = sessionEndpoint
+                const redirect = () => {
+                  window.location.href = sessionEndpoint
+                }
+                toast.error(t('messages.no_valid_role_logout', { seconds: LOGOUT_DELAY_SECONDS }), {
+                  autoClose: LOGOUT_DELAY_SECONDS * 1000,
+                  onClose: redirect,
+                })
                 return
               }
 
@@ -274,6 +285,7 @@ export default function AppAuthProvider({ children }: Readonly<AppAuthProviderPr
 
   return (
     <React.Fragment>
+      <GluuToast />
       <SessionTimeout isAuthenticated={showAdminUI} />
       <GluuTimeoutModal
         description={