Refactor login (#748)

* wip refactor login

* wip refactor login

* Fix lint conflicts

* Complete Sign In only

* Feature complete

* Fix test

* Fix test

front/src/modules/ui/animation/components/AnimatedEaseIn.tsx

@@ -9,7 +9,7 @@ type Props = Omit<
 
 export function AnimatedEaseIn({
   children,
-  duration = 0.8,
+  duration = 0.3,
   ...restProps
 }: Props) {
   const initial = { opacity: 0 };

front/src/modules/ui/button/components/MainButton.tsx

@@ -55,9 +55,9 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
   gap: ${({ theme }) => theme.spacing(2)};
   justify-content: center;
+  outline: none;
   padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
   width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-
   ${({ theme, variant }) => {
     switch (variant) {
       case 'secondary':

front/src/modules/ui/input/components/TextInput.tsx

@@ -20,6 +20,7 @@ type OwnProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
   label?: string;
   onChange?: (text: string) => void;
   fullWidth?: boolean;
+  disableHotkeys?: boolean;
   error?: string;
 };
 
@@ -104,6 +105,7 @@ export function TextInput({
   error,
   required,
   type,
+  disableHotkeys = false,
   ...props
 }: OwnProps): JSX.Element {
   const theme = useTheme();
@@ -117,16 +119,20 @@ export function TextInput({
 
   const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
     onFocus?.(e);
-    setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput);
+    if (!disableHotkeys) {
+      setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput);
+    }
   };
 
   const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
     onBlur?.(e);
-    goBackToPreviousHotkeyScope();
+    if (!disableHotkeys) {
+      goBackToPreviousHotkeyScope();
+    }
   };
 
   useScopedHotkeys(
-    [Key.Enter, Key.Escape],
+    [Key.Escape, Key.Enter],
     () => {
       inputRef.current?.blur();
     },

front/src/modules/ui/layout/components/DefaultLayout.tsx

@@ -1,12 +1,20 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { AnimatePresence, LayoutGroup } from 'framer-motion';
+import { useRecoilValue } from 'recoil';
 
-import { currentUserState } from '@/auth/states/currentUserState';
+import { AuthModal } from '@/auth/components/Modal';
+import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
+import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
 import { NavbarAnimatedContainer } from '@/ui/navbar/components/NavbarAnimatedContainer';
 import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
 import { AppNavbar } from '~/AppNavbar';
+import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
+import { CompaniesMockMode } from '~/pages/companies/CompaniesMockMode';
 
+import { AppPath } from '../../../types/AppPath';
 import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
 
 const StyledLayout = styled.div`
@@ -38,22 +46,71 @@ type OwnProps = {
 };
 
 export function DefaultLayout({ children }: OwnProps) {
-  const currentUser = useRecoilState(currentUserState);
-  const userIsAuthenticated = !!currentUser;
+  const navigate = useNavigate();
+  const isMatchingLocation = useIsMatchingLocation();
+
+  const onboardingStatus = useOnboardingStatus();
+  useEffect(() => {
+    const isMachinOngoingUserCreationRoute =
+      isMatchingLocation(AppPath.SignUp) ||
+      isMatchingLocation(AppPath.SignIn) ||
+      isMatchingLocation(AppPath.Invite) ||
+      isMatchingLocation(AppPath.Verify);
+
+    const isMatchingOnboardingRoute =
+      isMatchingLocation(AppPath.SignUp) ||
+      isMatchingLocation(AppPath.SignIn) ||
+      isMatchingLocation(AppPath.Invite) ||
+      isMatchingLocation(AppPath.Verify) ||
+      isMatchingLocation(AppPath.CreateWorkspace) ||
+      isMatchingLocation(AppPath.CreateProfile);
+
+    if (
+      onboardingStatus === OnboardingStatus.OngoingUserCreation &&
+      !isMachinOngoingUserCreationRoute
+    ) {
+      navigate(AppPath.SignIn);
+    } else if (
+      onboardingStatus === OnboardingStatus.OngoingWorkspaceCreation &&
+      !isMatchingLocation(AppPath.CreateWorkspace)
+    ) {
+      navigate(AppPath.CreateWorkspace);
+    } else if (
+      onboardingStatus === OnboardingStatus.OngoingProfileCreation &&
+      !isMatchingLocation(AppPath.CreateProfile)
+    ) {
+      navigate(AppPath.CreateProfile);
+    } else if (
+      onboardingStatus === OnboardingStatus.Completed &&
+      isMatchingOnboardingRoute
+    ) {
+      navigate('/');
+    }
+  }, [onboardingStatus, navigate, isMatchingLocation]);
 
   return (
     <StyledLayout>
-      {userIsAuthenticated ? (
-        <>
-          <CommandMenu />
-          <NavbarAnimatedContainer>
-            <AppNavbar />
-          </NavbarAnimatedContainer>
-          <MainContainer>{children}</MainContainer>
-        </>
-      ) : (
-        children
-      )}
+      <>
+        <CommandMenu />
+        <NavbarAnimatedContainer>
+          <AppNavbar />
+        </NavbarAnimatedContainer>
+        <MainContainer>
+          {onboardingStatus &&
+          onboardingStatus !== OnboardingStatus.Completed ? (
+            <>
+              <CompaniesMockMode />
+              <AnimatePresence mode="wait">
+                <LayoutGroup>
+                  <AuthModal>{children}</AuthModal>
+                </LayoutGroup>
+              </AnimatePresence>
+            </>
+          ) : (
+            <>{children}</>
+          )}
+        </MainContainer>
+      </>
     </StyledLayout>
   );
 }

front/src/modules/ui/title/components/SubSectionTitle.tsx

@@ -8,6 +8,7 @@ type Props = {
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
 `;
 
 const StyledTitle = styled.h2`