Nn in 2fa styling

client/src/components/ProtectedRoute.tsx

@@ -22,15 +22,7 @@ export const ProtectedRoute = ({
 
   const roles = Array.isArray(allowedRoles) ? allowedRoles : [allowedRoles];
   const isValidRole = getIsValidRole(roles, role);
-
-  if (currentUser && isValidRole) {
-    console.log(role)
-    console.log('validated to ' + element)
-  } else {
-    console.log(role)
-    console.log(currentUser)
-    console.log('blocked to ' + element)
-  }
+
   if (!initialized && (loading || role === undefined)) { 
     return <Spinner/>;
   }

client/src/components/authentification/authentification.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { IoMdLock, IoMdClose } from "react-icons/io";
 import {
   Button,
   Center,
@@ -16,9 +17,16 @@ import {
   Text,
   HStack,
   Image,
-  IconButton,
   PinInput,
-  PinInputField
+  PinInputField,
+  useDisclosure,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalBody,
+  IconButton
 } from "@chakra-ui/react";
 import { MdOutlineArrowBackIos } from "react-icons/md";
 import { Link, useNavigate, useParams } from "react-router-dom";
@@ -39,6 +47,7 @@ export const Authentification = () => {
   const navigate = useNavigate();
   const toast = useToast();
   const { userType } = useParams<{ userType: string }>();
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const userAbbreviation = userType === "Case Manager" ? "CM" : "AD";
 
   const { handleRedirectResult, createCode, authenticate } = useAuthContext();
@@ -61,14 +70,14 @@ export const Authentification = () => {
         navigate("/admin-client-list");
       }
     } catch (error) {
-      toast({
-        title: "Authentication Failed",
-        description: "The entered PIN is incorrect. Please try again.",
-        status: "error",
-        duration: 5000,
-        isClosable: true,
-      });
-
+      // toast({
+      //   title: "Authentication Failed",
+      //   description: "The entered PIN is incorrect. Please try again.",
+      //   status: "error",
+      //   duration: 5000,
+      //   isClosable: true,
+      // });
+      onOpen();
       setPin("");
     }
   };
@@ -161,6 +170,50 @@ export const Authentification = () => {
               </Button>
             </Stack>
           </form>
+          <Modal isOpen={isOpen} onClose={onClose} isCentered>
+            <ModalOverlay />
+            <ModalContent
+              borderRadius={'6px'}
+              boxShadow={'0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05)'}
+              minWidth={'450px'}
+              minHeight={'200px'}
+            >
+              <ModalHeader display={'flex'} justifyContent={'space-between'}>
+                <Box display={'flex'} alignItems={'center'} gap="10px">
+                  <IoMdLock size={'27px'} style={{ marginBottom: "5px" }}/>
+                  <Text fontFamily={'Inter'} fontSize={'18px'} fontWeight={'700'}>Authorization Failed</Text>
+                </Box>
+                <IconButton 
+                  icon={<IoMdClose />} 
+                  aria-label="Close" 
+                  fontSize={'20px'} 
+                  variant={'ghost'}  
+                  height='auto' 
+                  minW='auto' 
+                  style={{ marginBottom: '12px' }}
+                  _hover={{ backgroundColor: "transparent" }}
+                  onClick={onClose}
+                />
+              </ModalHeader>
+              <ModalBody>
+                <Text
+                  fontFamily={'Inter'}
+                  fontSize={'16px'}
+                  fontStyle={'normal'}
+                  fontWeight={'400'}
+                  lineHeight={'24px'}
+                  color={'var(--gray-700, #2D3748)'}
+                >
+                  Authorization failed due to incorrect code or timeout error.
+                </Text>
+              </ModalBody>
+              <ModalFooter
+                display={'flex'}
+              >
+                <Button width={'100%'} backgroundColor={'#3182CE'} color={'white'} onClick={() => navigate(`/login/${userType}`)}>Return to login</Button>
+              </ModalFooter>
+            </ModalContent>
+          </Modal>
         </VStack>
       </Center>
     </Grid>

client/src/components/login/Login.tsx

@@ -74,10 +74,10 @@ export const Login = () => {
         email: data.email,
         password: data.password,
       });
-      if (userType === "Case Manager") navigate("/clientlist");
+      if (userType === "Case Manager") navigate("/authentification/Case Manager");
       else if (userType === "Admin") {
 
-        navigate("/admin-client-list");
+        navigate("/authentification/Admin");
       }
       else if (userType === "Client") navigate("/client-landing-page");
     } catch (err) {

client/src/contexts/AuthContext.tsx

@@ -1,7 +1,7 @@
 import { createContext, ReactNode, useEffect, useState } from "react";
 
 import { CreateToastFnReturn, Spinner } from "@chakra-ui/react";
-import { Navigate } from "react-router-dom";
+
 import { AxiosInstance } from "axios";
 import {
   createUserWithEmailAndPassword,
@@ -15,7 +15,7 @@ import {
   User,
   UserCredential,
 } from "firebase/auth";
-import { NavigateFunction } from "react-router-dom";
+import { Navigate, NavigateFunction } from "react-router-dom";
 
 import { auth } from "../utils/auth/firebase";
 import { useBackendContext } from "./hooks/useBackendContext";
@@ -130,6 +130,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     const authCredential = EmailAuthProvider.credential(email, password);
     setAuthCredential(authCredential);
     setEmail(email);
+
     return authCredential;
   };
 
@@ -176,22 +177,28 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
 
   const authenticate = async ({ code }: Authenticate) => {
     if (authCredential && email) {
-      const response = await backend.post(`/authentification/verify?email=${email}&code=${code}`);
+      const response = await backend.post(
+        `/authentification/verify?email=${email}&code=${code}`
+      );
       if (response.data.length == 0) {
         throw new Error("Invalid code. Try again.");
       }
 
       const userCredential = await signInWithCredential(auth, authCredential);
+
+      // we have to update the currnet user role BEFORE we sign in or else the app won't know what role we are currently
+      const userData = await backend.get(`/users/${userCredential.user.uid}`);
+      setCurrentUserRole(userData.data[0]?.role);
+
       setAuthCredential(null);
       setEmail(null);
       return userCredential;
-    }
+    } 
   };
 
   const logout = () => {
-    <Navigate to={"/landing-page"} />
+    <Navigate to={"/landing-page"} />;
     return signOut(auth);
-
   };
 
   const resetPassword = ({ email }: Pick<EmailPassword, "email">) => {

client/src/contexts/RoleContext.tsx

@@ -21,6 +21,7 @@ export const RoleProvider = ({ children }: { children: ReactNode }) => {
   const [role, setRole] = useState<DbUserRole | undefined>();
   const [loading, setLoading] = useState(true);
 
+  // Listen to auth state changes
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged(async (user) => {
       try {