feature: display a message when user is not defined (#196)

* feature: display a message when user is not defined

* feature: display text in a fadein in case redirection is slow

front/package.json

@@ -133,6 +133,9 @@
   },
   "nyc": {
     "lines": 65,
-    "statements": 65
+    "statements": 65,
+    "exclude": [
+      "src/generated/**/*"
+    ]
   }
 }

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 (
+      <EmptyContainer>
+        <FadeInStyle>
+          Please hold on a moment, we're directing you to our login page...
+        </FadeInStyle>
+      </EmptyContainer>
+    );
   return children;
 }

front/src/modules/ui/layout/AppLayout.tsx

@@ -29,11 +29,18 @@ type OwnProps = {
 };
 
 export function AppLayout({ children, user }: OwnProps) {
+  const userIsAuthenticated = !!user;
   return (
     <ThemeProvider theme={lightTheme}>
       <StyledLayout>
-        <Navbar user={user} workspace={user?.workspaceMember?.workspace} />
-        <MainContainer>{children}</MainContainer>
+        {userIsAuthenticated ? (
+          <>
+            <Navbar user={user} workspace={user?.workspaceMember?.workspace} />
+            <MainContainer>{children}</MainContainer>
+          </>
+        ) : (
+          children
+        )}
       </StyledLayout>
     </ThemeProvider>
   );