Dev/v1.0 (#1)

Co-authored-by: ISMAIL MASSERAN <topaz@Mac.dlinkrouter.local>
Co-authored-by: ISMAIL MASSERAN <topaz@ISMAILs-Macbook.local>
Reviewed-on: #1

fe/web/admin-app/src/components/AuthGuard/AuthGuard.jsx

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { getUserData } from '../../utils/session.js';
 
 export default function AuthGuard({ children, roles }) {
     const navigate = useNavigate();
 
     useEffect(() => {
-        const storedUserData = localStorage.getItem('userData');
-        const user = storedUserData ? JSON.parse(storedUserData) : null;
+        const user = getUserData();
 
         if (!user) {
             navigate('/login');
@@ -23,7 +23,7 @@ export default function AuthGuard({ children, roles }) {
 
     return (
         <>
-            { children }
+            {children}
         </>
     );
 

fe/web/admin-app/src/components/Header/Header.jsx

@@ -2,20 +2,19 @@ import { useContext } from 'react';
 import { Button } from 'react-bootstrap';
 import { useNavigate } from 'react-router-dom';
 import { lastPathPart } from '../../utils/StringUtils.js';
-import profileImage from '../../../assets/profile-user.png'
 
 import './Header.css';
 import { UserContext } from '../../context/UserContext.jsx';
+import { clearSession } from '../../utils/session.js';
 
 export default function Header() {
     const navigate = useNavigate();
     const { user, setUser } = useContext(UserContext);
 
     function handleLogout() {
-        localStorage.removeItem('userData');
-        localStorage.removeItem('token');
+        clearSession();
         setUser(null);
-        navigate('/');
+        navigate('/login');
     }
 
     const path = window.location.pathname;
@@ -35,28 +34,31 @@ export default function Header() {
     return (
         <>
             <header className="main-header">
-                <h2 className="header-logo" onClick={ goHome }>BBQMS</h2>
+                <h2 className="header-logo" onClick={goHome}>
+                    MyKOPKB QMS-Admin
+                </h2>
 
                 <div className="header-logout">
-                    { !!user && (
-                        <button className="header-logout-btn" onClick={ handleLogout }>
+                    {!!user && (
+                        <button
+                            className="header-logout-btn"
+                            onClick={handleLogout}
+                        >
                             Logout
                         </button>
-                    ) }
-                </div>
-
-                <div className="header-profile" onClick={ () => navigate('/profile') }>
-                    <img src={ profileImage } className="header-profile-png" alt="Profile image" />
+                    )}
                 </div>
             </header>
-            { showBackButton && (
-                <Button variant="secondary"
-                        className="mt-2 px-4"
-                        onClick={ goHome }>
+
+            {showBackButton && (
+                <Button
+                    variant="secondary"
+                    className="mt-2 px-4"
+                    onClick={goHome}
+                >
                     Back
                 </Button>
-            ) }
+            )}
         </>
-
     );
-}
+}

fe/web/admin-app/src/components/LoginAuth/LoginAuth.jsx

@@ -4,6 +4,7 @@ import { SERVER_URL } from "../../constants.js";
 import { fetchData } from '../../fetching/Fetch.js';
 import { UserContext } from '../../context/UserContext.jsx';
 import { useNavigate } from "react-router-dom";
+import { getUserData, setSession } from '../../utils/session.js';
 
 function doSubmit(submittedValues) {
     console.log(`Submitted: ${submittedValues.join("")}`);
@@ -126,10 +127,9 @@ export default function LoginAuth() {
         dispatch({ type: "VERIFY" });
 
         try {
-            const storedUserData =  localStorage.getItem('userData');
-            const userData = storedUserData ? JSON.parse(storedUserData) : null;
+            const userData = getUserData();
             if (!userData) {
-                throw new Error("Email not found in localStorage");
+                throw new Error("Email not found in session");
             }
             
             const url = `${ SERVER_URL }/api/v1/auth/tfa`;
@@ -139,7 +139,11 @@ export default function LoginAuth() {
             });
             
             if (success) {
-                localStorage.setItem('token', data.token);
+                setSession({
+                    token: data.token,
+                    userData: data.userData,
+                    isTfa: true,
+                });
                 setUser(data.userData);
                 navigate(`/${ data.userData.tenantCode }/home`);
             } else {

fe/web/admin-app/src/components/LoginForm/LoginForm.jsx

@@ -5,6 +5,7 @@ import "./LoginForm.css";
 import LoginAuth from "../LoginAuth/LoginAuth";
 import { Route, Routes, useNavigate, Link } from "react-router-dom";
 import { SERVER_URL } from "../../constants.js";
+import { setSession } from "../../utils/session.js";
 
 const LoginForm = () => {
     const [username, setUsername] = useState("");
@@ -28,7 +29,11 @@ const LoginForm = () => {
             return;
         }
         const data = await response.json();
-        localStorage.setItem('userData', JSON.stringify(data));
+        setSession({
+            userData: data.userData ?? data,
+            token: data.token,
+            isTfa: !data.token,
+        });
         navigate('/');
     }
 
@@ -67,9 +72,12 @@ const LoginForm = () => {
 
             const data = await response.json();
 
-            localStorage.setItem('userData', JSON.stringify(data));
-
             if (response.ok) {
+                setSession({
+                    userData: data.userData ?? data,
+                    token: data.token,
+                    isTfa: !data.token,
+                });
                 setIsSubmitted(true);
                 navigate('/');
             } else if (response.status === 403) {