feat: onboarding & profile edition (#507)

* feat: wip onboarding

* fix: generate graphql front

* wip: onboarding

* feat: login/register and edit profile

* fix: unused import

* fix: test

* Use DEBUG_MODE instead of STAGE and mute typescript depth exceed errors

* Fix seeds

* Fix onboarding when coming from google

* Fix

* Fix lint

* Fix ci

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/auth/components/RequireOnboarded.tsx

@@ -0,0 +1,83 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
+
+import { useOnboardingStatus } from '../hooks/useOnboardingStatus';
+import { OnboardingStatus } from '../utils/getOnboardingStatus';
+
+const EmptyContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+`;
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const FadeInStyle = styled.div`
+  animation: ${fadeIn} 1s forwards;
+  opacity: 0;
+`;
+
+export function RequireOnboarded({
+  children,
+}: {
+  children: JSX.Element;
+}): JSX.Element {
+  const navigate = useNavigate();
+
+  const [, setCaptureHotkeyTypeInFocus] = useRecoilState(
+    captureHotkeyTypeInFocusState,
+  );
+  const onboardingStatus = useOnboardingStatus();
+
+  useEffect(() => {
+    if (onboardingStatus === OnboardingStatus.OngoingUserCreation) {
+      navigate('/auth');
+    } else if (onboardingStatus === OnboardingStatus.OngoingWorkspaceCreation) {
+      navigate('/auth/create/workspace');
+    } else if (onboardingStatus === OnboardingStatus.OngoingProfileCreation) {
+      navigate('/auth/create/profile');
+    }
+  }, [onboardingStatus, navigate]);
+
+  useEffect(() => {
+    if (onboardingStatus === OnboardingStatus.Completed) {
+      setCaptureHotkeyTypeInFocus(false);
+    }
+  }, [setCaptureHotkeyTypeInFocus, onboardingStatus]);
+
+  if (onboardingStatus !== OnboardingStatus.Completed) {
+    return (
+      <EmptyContainer>
+        <FadeInStyle>
+          {onboardingStatus === OnboardingStatus.OngoingUserCreation && (
+            <div>
+              Please hold on a moment, we're directing you to our login page...
+            </div>
+          )}
+          {onboardingStatus !== OnboardingStatus.OngoingUserCreation && (
+            <div>
+              Please hold on a moment, we're directing you to our onboarding
+              flow...
+            </div>
+          )}
+        </FadeInStyle>
+      </EmptyContainer>
+    );
+  }
+
+  return children;
+}