From c70bea9513f8d851c1ea54cc5ff89c862b9c7a95 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Mon, 5 Jun 2023 17:55:45 +0200
Subject: [PATCH] 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                            |  5 ++-
 .../modules/auth/components/RequireAuth.tsx   | 32 +++++++++++++++++++
 front/src/modules/ui/layout/AppLayout.tsx     | 11 +++++--
 3 files changed, 45 insertions(+), 3 deletions(-)

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