Implement Authentication with email + password (#343)

* Implement Login screen ui and add RequireNotAuth guard

* Perform login through auth/password-login flow

front/src/App.tsx

@@ -1,15 +1,15 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 
+import { RequireAuth } from '@/auth/components/RequireAuth';
+import { RequireNotAuth } from '@/auth/components/RequireNotAuth';
 import { DefaultLayout } from '@/ui/layout/DefaultLayout';
-
+import { Index } from '~/pages/auth/Index';
-import { RequireAuth } from './modules/auth/components/RequireAuth';
+import { PasswordLogin } from '~/pages/auth/PasswordLogin';
-import { Callback } from './pages/auth/Callback';
+import { Verify } from '~/pages/auth/Verify';
-import { Index } from './pages/auth/Index';
+import { Companies } from '~/pages/companies/Companies';
-import { Login } from './pages/auth/Login';
+import { Opportunities } from '~/pages/opportunities/Opportunities';
-import { Companies } from './pages/companies/Companies';
+import { People } from '~/pages/people/People';
-import { Opportunities } from './pages/opportunities/Opportunities';
+import { SettingsProfile } from '~/pages/settings/SettingsProfile';
-import { People } from './pages/people/People';
-import { SettingsProfile } from './pages/settings/SettingsProfile';
 
 export function App() {
   return (
@@ -39,11 +39,13 @@ export function App() {
         <Route
           path="auth/*"
           element={
-            <Routes>
+            <RequireNotAuth>
-              <Route path="" element={<Index />} />
+              <Routes>
-              <Route path="callback" element={<Callback />} />
+                <Route path="" element={<Index />} />
-              <Route path="login" element={<Login />} />
+                <Route path="callback" element={<Verify />} />
-            </Routes>
+                <Route path="password-login" element={<PasswordLogin />} />
+              </Routes>
+            </RequireNotAuth>
           }
         />
       </Routes>

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

@@ -1,12 +0,0 @@
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  label: string;
-  subLabel?: string;
-};
-
-const StyledContainer = styled.div``;
-
-export function SubTitle({ label, subLabel }: OwnProps): JSX.Element {
-  return <StyledContainer>{label}</StyledContainer>;
-}

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

@@ -0,0 +1,52 @@
+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`
+  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 RequireNotAuth({
+  children,
+}: {
+  children: JSX.Element;
+}): JSX.Element {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (hasAccessToken()) {
+      navigate('/');
+    }
+  }, [navigate]);
+
+  if (hasAccessToken())
+    return (
+      <EmptyContainer>
+        <FadeInStyle>
+          Please hold on a moment, we're directing you to the app...
+        </FadeInStyle>
+      </EmptyContainer>
+    );
+  return children;
+}

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

@@ -1,11 +0,0 @@
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  subTitle: string;
-};
-
-const StyledSubTitle = styled.div``;
-
-export function SubTitle({ subTitle }: OwnProps): JSX.Element {
-  return <StyledSubTitle>{subTitle}</StyledSubTitle>;
-}

front/src/modules/auth/components/ui/InputLabel.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  label: string;
+  subLabel?: string;
+};
+
+const StyledContainer = styled.div`
+  font-weight: ${({ theme }) => theme.fontWeightMedium};
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+  margin-top: ${({ theme }) => theme.spacing(4)};
+`;
+
+export function InputLabel({ label, subLabel }: OwnProps): JSX.Element {
+  return <StyledContainer>{label}</StyledContainer>;
+}

front/src/modules/auth/components/ui/Logo.tsx

@@ -13,7 +13,7 @@ const StyledLogo = styled.div`
 export function Logo(): JSX.Element {
   return (
     <StyledLogo>
-      <img src="icons/android/android-launchericon-192-192.png" alt="logo" />
+      <img src="/icons/android/android-launchericon-192-192.png" alt="logo" />
     </StyledLogo>
   );
 }

front/src/modules/auth/components/ui/SubTitle.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  children: React.ReactNode;
+};
+
+const StyledSubTitle = styled.div`
+  color: ${({ theme }) => theme.text60};
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+
+export function SubTitle({ children }: OwnProps): JSX.Element {
+  return <StyledSubTitle>{children}</StyledSubTitle>;
+}

front/src/modules/auth/components/ui/Title.tsx

@@ -1,7 +1,8 @@
+import React from 'react';
 import styled from '@emotion/styled';
 
 type OwnProps = {
-  title: string;
+  children: React.ReactNode;
 };
 
 const StyledTitle = styled.div`
@@ -10,6 +11,6 @@ const StyledTitle = styled.div`
   margin-top: ${({ theme }) => theme.spacing(10)};
 `;
 
-export function Title({ title }: OwnProps): JSX.Element {
+export function Title({ children }: OwnProps): JSX.Element {
-  return <StyledTitle>{title}</StyledTitle>;
+  return <StyledTitle>{children}</StyledTitle>;
 }

front/src/modules/auth/states/authFlowUserEmailState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const authFlowUserEmailState = atom<string>({
+  key: 'authFlowUserEmailState',
+  default: '',
+});

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

@@ -1,10 +1,11 @@
 import { ChangeEvent, useState } from 'react';
 import styled from '@emotion/styled';
 
-type OwnProps = {
+type OwnProps = Omit<
-  value: string;
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'onChange'
+> & {
   onChange?: (text: string) => void;
-  placeholder?: string;
   fullWidth?: boolean;
 };
 
@@ -32,8 +33,8 @@ const StyledInput = styled.input<{ fullWidth: boolean }>`
 export function TextInput({
   value,
   onChange,
-  placeholder,
   fullWidth,
+  ...props
 }: OwnProps): JSX.Element {
   const [internalValue, setInternalValue] = useState(value);
 
@@ -41,13 +42,13 @@ export function TextInput({
     <StyledInput
       fullWidth={fullWidth ?? false}
       value={internalValue}
-      placeholder={placeholder}
       onChange={(event: ChangeEvent<HTMLInputElement>) => {
         setInternalValue(event.target.value);
         if (onChange) {
           onChange(event.target.value);
         }
       }}
+      {...props}
     />
   );
 }

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 { FooterNote } from '@/auth/components/ui/FooterNote';
-import { HorizontalSeparator } from '@/auth/components/HorizontalSeparator';
+import { HorizontalSeparator } from '@/auth/components/ui/HorizontalSeparator';
-import { Logo } from '@/auth/components/Logo';
+import { Logo } from '@/auth/components/ui/Logo';
-import { Modal } from '@/auth/components/Modal';
+import { Modal } from '@/auth/components/ui/Modal';
-import { Title } from '@/auth/components/Title';
+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 '~/pages/companies/Companies';
-import { Companies } from '../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=""
+            value=""
-            onChange={(value) => console.log(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,
+  },
+};