diff --git a/front/package.json b/front/package.json index 3785cda93..1f71eff08 100644 --- a/front/package.json +++ b/front/package.json @@ -133,6 +133,9 @@ }, "nyc": { "lines": 65, - "statements": 65 + "statements": 65, + "exclude": [ + "src/generated/**/*" + ] } } diff --git a/front/src/modules/auth/components/RequireAuth.tsx b/front/src/modules/auth/components/RequireAuth.tsx index edd4ba91b..997c965ca 100644 --- a/front/src/modules/auth/components/RequireAuth.tsx +++ b/front/src/modules/auth/components/RequireAuth.tsx @@ -1,8 +1,32 @@ import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; +import { keyframes } from '@emotion/react'; +import styled from '@emotion/styled'; import { hasAccessToken } from '../services/AuthService'; +const EmptyContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +`; + +const fadeIn = keyframes` + from { + opacity: 0; + } + to { + opacity: 1; + } +`; + +const FadeInStyle = styled.div` + opacity: 0; + animation: ${fadeIn} 1s forwards; +`; + export function RequireAuth({ children, }: { @@ -16,5 +40,13 @@ export function RequireAuth({ } }, [navigate]); + if (!hasAccessToken()) + return ( + + + Please hold on a moment, we're directing you to our login page... + + + ); return children; } diff --git a/front/src/modules/ui/layout/AppLayout.tsx b/front/src/modules/ui/layout/AppLayout.tsx index 5f86aa008..27ac62ce9 100644 --- a/front/src/modules/ui/layout/AppLayout.tsx +++ b/front/src/modules/ui/layout/AppLayout.tsx @@ -29,11 +29,18 @@ type OwnProps = { }; export function AppLayout({ children, user }: OwnProps) { + const userIsAuthenticated = !!user; return ( - - {children} + {userIsAuthenticated ? ( + <> + + {children} + + ) : ( + children + )} );