Merge pull request #248 from Tauffer-Consulting/chore/login-screen

Chore/login-screen
Tauffer-Consulting · Mar 5, 2024 · 8e3a0b3 · 8e3a0b3
2 parents 8ea5f44 + bd17009
commit 8e3a0b3
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 28 deletions.
diff --git a/frontend/src/components/PrivateLayout/header/header.tsx b/frontend/src/components/PrivateLayout/header/header.tsx
@@ -1,15 +1,14 @@
 import { Box } from "@mui/material";
-import { type FC, useRef, useState } from "react";
+import { type FC, useState } from "react";
 
 import { DrawerMenu } from "./drawerMenu";
 
 export const Header: FC = () => {
   const [menuOpen, setMenuOpen] = useState(false);
-  const barHeight = useRef<HTMLDivElement>(null);
 
   return (
     <>
-      <Box sx={{ height: barHeight.current?.clientHeight ?? 64 }}>
+      <Box sx={{ height: 64 }}>
         <DrawerMenu
           isOpen={menuOpen}
           handleClose={() => {

diff --git a/frontend/src/components/PrivateLayout/index.tsx b/frontend/src/components/PrivateLayout/index.tsx
@@ -10,7 +10,7 @@ interface IPrivateLayoutProps {
 
 export const PrivateLayout: FC<IPrivateLayoutProps> = ({ children }) => {
   return (
-    <Box sx={{ display: "flex", width: "100%", marginTop: "3rem" }}>
+    <Box sx={{ display: "flex", width: "100%", marginTop: "64px" }}>
       <Header />
 
       <Container component="main" maxWidth={false} sx={{ padding: 3 }}>

diff --git a/frontend/src/components/PublicLayout/index.tsx b/frontend/src/components/PublicLayout/index.tsx
@@ -6,10 +6,11 @@ export const PublicLayout: FC<{ children: ReactNode }> = ({ children }) => {
     <Container component="main" maxWidth="sm">
       <Box
         sx={{
-          marginTop: 8,
+          height: "100vh",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
+          justifyContent: "center",
         }}
       >
         <Card variant="outlined" sx={{ padding: 2 }}>

diff --git a/frontend/src/context/authentication/authentication.context.tsx b/frontend/src/context/authentication/authentication.context.tsx
@@ -1,4 +1,3 @@
-import Loading from "components/Loading";
 import React, {
   type ReactNode,
   useCallback,
@@ -13,7 +12,6 @@ import { createCustomContext } from "utils";
 
 import { postAuthLogin, postAuthRegister } from "./api";
 import {
-  authStatus,
   type IAuthenticationContext,
   type IAuthenticationStore,
 } from "./authentication.interface";
@@ -30,7 +28,6 @@ export const AuthenticationProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
   const navigate = useNavigate();
-  const [status, setStatus] = useState(authStatus.Loading);
   const [authLoading, setAuthLoading] = useState(false);
   const [store, setStore] = useState<IAuthenticationStore>({
     token: localStorage.getItem("auth_token"),
@@ -58,7 +55,6 @@ export const AuthenticationProvider: React.FC<{ children: ReactNode }> = ({
         "tokenExpiresAtTimestamp",
         tokenExpirationDate.getTime().toString(),
       );
-      setStatus(authStatus.SignedIn);
       navigate(redirect);
     },
     [navigate],
@@ -71,7 +67,6 @@ export const AuthenticationProvider: React.FC<{ children: ReactNode }> = ({
       ...store,
       token: null,
     }));
-    setStatus(authStatus.SignedOut);
     navigate("/sign-in");
   }, [navigate]);
 
@@ -123,9 +118,9 @@ export const AuthenticationProvider: React.FC<{ children: ReactNode }> = ({
   const tokenExpired = useCallback(() => {
     const tokenTimestamp = localStorage.getItem("tokenExpiresAtTimestamp");
     if (tokenTimestamp) {
-      const date1 = Number(tokenTimestamp);
-      const date2 = new Date().getTime();
-      return date1 <= date2;
+      const expireDate = Number(tokenTimestamp);
+      const currentDate = new Date().getTime();
+      return expireDate <= currentDate;
     }
     return true;
   }, []);
@@ -146,13 +141,10 @@ export const AuthenticationProvider: React.FC<{ children: ReactNode }> = ({
 
   useEffect(() => {
     const expired = tokenExpired();
-
-    if (expired) {
+    if (expired && isLogged.current) {
       logout();
-    } else {
-      setStatus(authStatus.SignedIn);
     }
-  }, [tokenExpired]);
+  }, [tokenExpired, isLogged]);
 
   const value = useMemo((): IAuthenticationContext => {
     return {
@@ -165,10 +157,6 @@ export const AuthenticationProvider: React.FC<{ children: ReactNode }> = ({
     };
   }, [store, logout, authenticate, register, authLoading]);
 
-  if (status === authStatus.Loading) {
-    return <Loading />;
-  }
-
   return (
     <AuthenticationContext.Provider value={value}>
       {children}

diff --git a/frontend/src/context/authentication/authentication.interface.ts b/frontend/src/context/authentication/authentication.interface.ts
@@ -3,12 +3,6 @@ export interface IAuthenticationStore {
   userId: string | null;
 }
 
-export enum authStatus {
-  Loading,
-  SignedIn,
-  SignedOut,
-}
-
 export interface IAuthenticationContext {
   store: IAuthenticationStore;
   isLogged: boolean;