Implement Authentication with email + password (#343)

* Implement Login screen ui and add RequireNotAuth guard

* Perform login through auth/password-login flow

front/src/pages/auth/Index.tsx

@@ -1,21 +1,23 @@
 import { useCallback, useEffect } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 
-import { FooterNote } from '@/auth/components/FooterNote';
-import { HorizontalSeparator } from '@/auth/components/HorizontalSeparator';
-import { Logo } from '@/auth/components/Logo';
-import { Modal } from '@/auth/components/Modal';
-import { Title } from '@/auth/components/Title';
+import { FooterNote } from '@/auth/components/ui/FooterNote';
+import { HorizontalSeparator } from '@/auth/components/ui/HorizontalSeparator';
+import { Logo } from '@/auth/components/ui/Logo';
+import { Modal } from '@/auth/components/ui/Modal';
+import { Title } from '@/auth/components/ui/Title';
 import { useMockData } from '@/auth/hooks/useMockData';
 import { hasAccessToken } from '@/auth/services/AuthService';
+import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
 import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
 import { SecondaryButton } from '@/ui/components/buttons/SecondaryButton';
 import { TextInput } from '@/ui/components/inputs/TextInput';
 import { IconBrandGoogle } from '@/ui/icons';
-
-import { Companies } from '../companies/Companies';
+import { Companies } from '~/pages/companies/Companies';
 
 const StyledContentContainer = styled.div`
   padding-bottom: ${({ theme }) => theme.spacing(8)};
@@ -28,6 +30,8 @@ export function Index() {
   const theme = useTheme();
   useMockData();
 
+  const [, setAuthFlowUserEmail] = useRecoilState(authFlowUserEmailState);
+
   useEffect(() => {
     if (hasAccessToken()) {
       navigate('/');
@@ -35,15 +39,31 @@ export function Index() {
   }, [navigate]);
 
   const onGoogleLoginClick = useCallback(() => {
-    navigate('/auth/login');
+    window.location.href = process.env.REACT_APP_AUTH_URL + '/google' || '';
+  }, []);
+
+  const onPasswordLoginClick = useCallback(() => {
+    navigate('/auth/password-login');
   }, [navigate]);
 
+  useHotkeys(
+    'enter',
+    () => {
+      onPasswordLoginClick();
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [onPasswordLoginClick],
+  );
+
   return (
     <>
       <Companies />
       <Modal>
         <Logo />
-        <Title title="Welcome to Twenty" />
+        <Title>Welcome to Twenty</Title>
         <StyledContentContainer>
           <PrimaryButton fullWidth={true} onClick={onGoogleLoginClick}>
             <IconBrandGoogle size={theme.iconSizeSmall} stroke={4} />
@@ -51,11 +71,14 @@ export function Index() {
           </PrimaryButton>
           <HorizontalSeparator />
           <TextInput
-            initialValue=""
-            onChange={(value) => console.log(value)}
+            value=""
+            placeholder="Email"
+            onChange={(value) => setAuthFlowUserEmail(value)}
             fullWidth={true}
           />
-          <SecondaryButton fullWidth={true}>Continue</SecondaryButton>
+          <SecondaryButton fullWidth={true} onClick={onPasswordLoginClick}>
+            Continue
+          </SecondaryButton>
         </StyledContentContainer>
         <FooterNote>
           By using Twenty, you agree to the Terms of Service and Data Processing