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/pages/auth/CreateProfile.tsx

@@ -1,9 +1,12 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
+import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
+import { yupResolver } from '@hookform/resolvers/yup';
 import { useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
+import * as Yup from 'yup';
 
 import { SubTitle } from '@/auth/components/ui/SubTitle';
 import { Title } from '@/auth/components/ui/Title';
@@ -12,9 +15,9 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
-import { NameFields } from '@/settings/profile/components/NameFields';
 import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
 import { MainButton } from '@/ui/components/buttons/MainButton';
+import { TextInput } from '@/ui/components/inputs/TextInput';
 import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
 import { GET_CURRENT_USER } from '@/users/queries';
 import { useUpdateUserMutation } from '~/generated/graphql';
@@ -36,6 +39,27 @@ const StyledButtonContainer = styled.div`
   width: 200px;
 `;
 
+const StyledComboInputContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  > * + * {
+    margin-left: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+const StyledErrorContainer = styled.div`
+  color: ${({ theme }) => theme.color.red};
+`;
+
+const validationSchema = Yup.object()
+  .shape({
+    firstName: Yup.string().required('First name can not be empty'),
+    lastName: Yup.string().required('Last name can not be empty'),
+  })
+  .required();
+
+type Form = Yup.InferType<typeof validationSchema>;
+
 export function CreateProfile() {
   const navigate = useNavigate();
   const onboardingStatus = useOnboardingStatus();
@@ -44,50 +68,69 @@ export function CreateProfile() {
 
   const [updateUser] = useUpdateUserMutation();
 
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
+  // Form
+  const {
+    control,
+    handleSubmit,
+    formState: { isValid, isSubmitting },
+    setError,
+    getValues,
+  } = useForm<Form>({
+    mode: 'onChange',
+    defaultValues: {
+      firstName: currentUser?.firstName ?? '',
+      lastName: currentUser?.lastName ?? '',
+    },
+    resolver: yupResolver(validationSchema),
+  });
 
-  const handleCreate = useCallback(async () => {
-    try {
-      if (!currentUser?.id) {
-        throw new Error('User is not logged in');
-      }
+  const onSubmit: SubmitHandler<Form> = useCallback(
+    async (data) => {
+      try {
+        if (!currentUser?.id) {
+          throw new Error('User is not logged in');
+        }
+        if (!data.firstName || !data.lastName) {
+          throw new Error('First name or last name is missing');
+        }
 
-      const { data, errors } = await updateUser({
-        variables: {
-          where: {
-            id: currentUser?.id,
-          },
-          data: {
-            firstName: {
-              set: firstName,
+        const result = await updateUser({
+          variables: {
+            where: {
+              id: currentUser?.id,
             },
-            lastName: {
-              set: lastName,
+            data: {
+              firstName: {
+                set: data.firstName,
+              },
+              lastName: {
+                set: data.lastName,
+              },
             },
           },
-        },
-        refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
-        awaitRefetchQueries: true,
-      });
+          refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
+          awaitRefetchQueries: true,
+        });
 
-      if (errors || !data?.updateUser) {
-        throw errors;
+        if (result.errors || !result.data?.updateUser) {
+          throw result.errors;
+        }
+
+        navigate('/');
+      } catch (error: any) {
+        setError('root', { message: error?.message });
       }
-
-      navigate('/');
-    } catch (error) {
-      console.error(error);
-    }
-  }, [currentUser?.id, firstName, lastName, navigate, updateUser]);
+    },
+    [currentUser?.id, navigate, setError, updateUser],
+  );
 
   useScopedHotkeys(
     Key.Enter,
     () => {
-      handleCreate();
+      onSubmit(getValues());
     },
     InternalHotkeysScope.CreateProfile,
-    [handleCreate],
+    [onSubmit],
   );
 
   useEffect(() => {
@@ -110,21 +153,63 @@ export function CreateProfile() {
             title="Name"
             description="Your name as it will be displayed on the app"
           />
-          <NameFields
-            autoSave={false}
-            onFirstNameUpdate={setFirstName}
-            onLastNameUpdate={setLastName}
-          />
+          {/* TODO: When react-hook-form is added to edit page we should create a dedicated component with context */}
+          <StyledComboInputContainer>
+            <Controller
+              name="firstName"
+              control={control}
+              render={({
+                field: { onChange, onBlur, value },
+                fieldState: { error },
+              }) => (
+                <TextInput
+                  label="First Name"
+                  value={value}
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  placeholder="Tim"
+                  error={error?.message}
+                  fullWidth
+                />
+              )}
+            />
+            <Controller
+              name="lastName"
+              control={control}
+              render={({
+                field: { onChange, onBlur, value },
+                fieldState: { error },
+              }) => (
+                <TextInput
+                  label="Last Name"
+                  value={value}
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  placeholder="Cook"
+                  error={error?.message}
+                  fullWidth
+                />
+              )}
+            />
+          </StyledComboInputContainer>
         </StyledSectionContainer>
       </StyledContentContainer>
       <StyledButtonContainer>
         <MainButton
           title="Continue"
-          onClick={handleCreate}
-          disabled={!firstName || !lastName}
+          onClick={handleSubmit(onSubmit)}
+          disabled={!isValid || isSubmitting}
           fullWidth
         />
       </StyledButtonContainer>
+      {/* Will be replaced by error snack bar */}
+      <Controller
+        name="firstName"
+        control={control}
+        render={({ formState: { errors } }) => (
+          <StyledErrorContainer>{errors?.root?.message}</StyledErrorContainer>
+        )}
+      />
     </>
   );
 }