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

front/src/pages/auth/Login.tsx

@@ -1,17 +0,0 @@
-import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { hasAccessToken } from '@/auth/services/AuthService';
-
-export function Login() {
-  const navigate = useNavigate();
-  useEffect(() => {
-    if (!hasAccessToken()) {
-      window.location.href = process.env.REACT_APP_AUTH_URL + '/google' || '';
-    } else {
-      navigate('/');
-    }
-  }, [navigate]);
-
-  return <></>;
-}

front/src/pages/auth/PasswordLogin.tsx

@@ -0,0 +1,114 @@
+import { useCallback, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { InputLabel } from '@/auth/components/ui/InputLabel';
+import { Logo } from '@/auth/components/ui/Logo';
+import { Modal } from '@/auth/components/ui/Modal';
+import { SubTitle } from '@/auth/components/ui/SubTitle';
+import { Title } from '@/auth/components/ui/Title';
+import { getTokensFromLoginToken } from '@/auth/services/AuthService';
+import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
+import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
+import { TextInput } from '@/ui/components/inputs/TextInput';
+import { Companies } from '~/pages/companies/Companies';
+
+const StyledContentContainer = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(4)};
+  padding-top: ${({ theme }) => theme.spacing(6)};
+  width: 320px;
+`;
+
+const StyledInputContainer = styled.div`
+  margin-top: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledButtonContainer = styled.div`
+  margin-top: ${({ theme }) => theme.spacing(7)};
+`;
+
+export function PasswordLogin() {
+  const navigate = useNavigate();
+  const [authFlowUserEmail, setAuthFlowUserEmail] = useRecoilState(
+    authFlowUserEmailState,
+  );
+
+  const [internalPassword, setInternalPassword] = useState('');
+
+  const userLogin = useCallback(async () => {
+    const response = await fetch(
+      process.env.REACT_APP_AUTH_URL + '/password' || '',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email: authFlowUserEmail,
+          password: internalPassword,
+        }),
+      },
+    );
+
+    if (response.ok) {
+      const { loginToken } = await response.json();
+      if (!loginToken) {
+        // TODO Display error message
+        return;
+      }
+      await getTokensFromLoginToken(loginToken.token);
+      navigate('/');
+    }
+  }, [authFlowUserEmail, internalPassword, navigate]);
+
+  useHotkeys(
+    'enter',
+    () => {
+      userLogin();
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [userLogin],
+  );
+
+  return (
+    <>
+      <Companies />
+      <Modal>
+        <Logo />
+        <Title>Welcome to Twenty</Title>
+        <SubTitle>Enter your credentials to sign in</SubTitle>
+        <StyledContentContainer>
+          <StyledInputContainer>
+            <InputLabel label="Email" />
+            <TextInput
+              value={authFlowUserEmail}
+              placeholder="Email"
+              onChange={(value) => setAuthFlowUserEmail(value)}
+              fullWidth
+            />
+          </StyledInputContainer>
+          <StyledInputContainer>
+            <InputLabel label="Password" />
+            <TextInput
+              value={internalPassword}
+              placeholder="Password"
+              onChange={(value) => setInternalPassword(value)}
+              fullWidth
+              type="password"
+            />
+            <StyledButtonContainer>
+              <PrimaryButton fullWidth onClick={userLogin}>
+                Continue
+              </PrimaryButton>
+            </StyledButtonContainer>
+          </StyledInputContainer>
+        </StyledContentContainer>
+      </Modal>
+    </>
+  );
+}

front/src/pages/auth/Verify.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { getTokensFromLoginToken } from '@/auth/services/AuthService';
 
-export function Callback() {
+export function Verify() {
   const [searchParams] = useSearchParams();
   const [isLoading, setIsLoading] = useState(false);
 

front/src/pages/auth/__stories__/PasswordLogin.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
+
+import { PasswordLogin } from '../PasswordLogin';
+
+const meta: Meta<typeof PasswordLogin> = {
+  title: 'Pages/Auth/PasswordLogin',
+  component: PasswordLogin,
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof PasswordLogin>;
+
+export const Default: Story = {
+  render: getRenderWrapperForPage(<PasswordLogin />, '/auth/password-login'),
+  parameters: {
+    msw: graphqlMocks,
+  },
+};