Add validation on onboarding flow inputs (#556)

* feat: wip react-hook-form

* feat: use react-hook-form for password login

* feat: clean regex

* feat: add react-hook-form on create workspace

* feat: add react-hook-form on create profile page

* fix: clean rebased code

* fix: rebase issue

* fix: add new stories to go over 65%

---------

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

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

@@ -1,31 +0,0 @@
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  title: string;
-  description?: string;
-};
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const StyledTitle = styled.span`
-  color: ${({ theme }) => theme.font.color.primary};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-`;
-
-const StyledDescription = styled.span`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  font-weight: ${({ theme }) => theme.font.weight.regular};
-  margin-top: ${({ theme }) => theme.spacing(1)};
-`;
-
-export function Section({ title, description }: OwnProps): JSX.Element {
-  return (
-    <StyledContainer>
-      <StyledTitle>{title}</StyledTitle>
-      {description && <StyledDescription>{description}</StyledDescription>}
-    </StyledContainer>
-  );
-}

front/src/modules/auth/hooks/useAuth.ts

@@ -4,7 +4,6 @@ import { useRecoilState } from 'recoil';
 import {
   useChallengeMutation,
   useSignUpMutation,
-  useSignUpToWorkspaceMutation,
   useVerifyMutation,
 } from '~/generated/graphql';
 
@@ -19,7 +18,6 @@ export function useAuth() {
 
   const [challenge] = useChallengeMutation();
   const [signUp] = useSignUpMutation();
-  const [SignUpToWorkspace] = useSignUpToWorkspaceMutation();
   const [verify] = useVerifyMutation();
 
   const handleChallenge = useCallback(
@@ -82,30 +80,8 @@ export function useAuth() {
   }, [setTokenPair]);
 
   const handleSignUp = useCallback(
-    async (email: string, password: string) => {
+    async (email: string, password: string, workspaceInviteHash?: string) => {
       const signUpResult = await signUp({
-        variables: {
-          email,
-          password,
-        },
-      });
-
-      if (signUpResult.errors) {
-        throw signUpResult.errors;
-      }
-
-      if (!signUpResult.data?.signUp) {
-        throw new Error('No login token');
-      }
-
-      await handleVerify(signUpResult.data?.signUp.loginToken.token);
-    },
-    [signUp, handleVerify],
-  );
-
-  const handleSignUpToWorkspace = useCallback(
-    async (email: string, password: string, workspaceInviteHash: string) => {
-      const signUpResult = await SignUpToWorkspace({
         variables: {
           email,
           password,
@@ -123,7 +99,7 @@ export function useAuth() {
 
       await handleVerify(signUpResult.data?.signUp.loginToken.token);
     },
-    [SignUpToWorkspace, handleVerify],
+    [signUp, handleVerify],
   );
 
   return {
@@ -131,7 +107,6 @@ export function useAuth() {
     verify: handleVerify,
     login: handleLogin,
     signUp: handleSignUp,
-    signUpToWorkspace: handleSignUpToWorkspace,
     logout: handleLogout,
   };
 }

front/src/modules/auth/services/update.ts

@@ -12,21 +12,10 @@ export const CHALLENGE = gql`
 `;
 
 export const SIGN_UP = gql`
-  mutation SignUp($email: String!, $password: String!) {
-    signUp(email: $email, password: $password) {
-      loginToken {
-        expiresAt
-        token
-      }
-    }
-  }
-`;
-
-export const SIGN_UP_TO_WORKSPACE = gql`
-  mutation SignUpToWorkspace(
+  mutation SignUp(
     $email: String!
     $password: String!
-    $workspaceInviteHash: String!
+    $workspaceInviteHash: String
   ) {
     signUp(
       email: $email

front/src/modules/auth/utils/passwordRegex.ts

@@ -0,0 +1 @@
+export const PASSWORD_REGEX = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;