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,}$/;

front/src/modules/ui/components/accessories/__stories__/SoonPill.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { SoonPill } from '../SoonPill';
+
+const meta: Meta<typeof SoonPill> = {
+  title: 'UI/Accessories/SoonPill',
+  component: SoonPill,
+};
+
+export default meta;
+type Story = StoryObj<typeof SoonPill>;
+
+export const Default: Story = {
+  render: getRenderWrapperForComponent(<SoonPill />),
+};

front/src/modules/ui/components/action-bar/__stories__/ActionBar.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { ActionBar } from '../ActionBar';
+
+const meta: Meta<typeof ActionBar> = {
+  title: 'UI/ActionBar/ActionBar',
+  component: ActionBar,
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionBar>;
+
+export const Default: Story = {
+  render: getRenderWrapperForComponent(
+    <ActionBar children={<div />} selectedIds={[]} />,
+  ),
+};

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

@@ -1,6 +1,13 @@
-import { ChangeEvent, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  FocusEventHandler,
+  InputHTMLAttributes,
+  useRef,
+  useState,
+} from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconAlertCircle } from '@tabler/icons-react';
 import { Key } from 'ts-key-enum';
 
 import { usePreviousHotkeysScope } from '@/hotkeys/hooks/internal/usePreviousHotkeysScope';
@@ -8,18 +15,17 @@ import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { IconEye, IconEyeOff } from '@/ui/icons/index';
 
-type OwnProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  'onChange'
-> & {
+type OwnProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
   label?: string;
   onChange?: (text: string) => void;
   fullWidth?: boolean;
+  error?: string;
 };
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<Pick<OwnProps, 'fullWidth'>>`
   display: flex;
   flex-direction: column;
+  width: ${({ fullWidth, theme }) => (fullWidth ? `100%` : 'auto')};
 `;
 
 const StyledLabel = styled.span`
@@ -30,19 +36,28 @@ const StyledLabel = styled.span`
   text-transform: uppercase;
 `;
 
-const StyledInput = styled.input<{ fullWidth: boolean }>`
+const StyledInputContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  width: 100%;
+`;
+
+const StyledInput = styled.input<Pick<OwnProps, 'fullWidth'>>`
   background-color: ${({ theme }) => theme.background.tertiary};
   border: none;
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-
+  border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
+  border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  flex-grow: 1;
   font-family: ${({ theme }) => theme.font.family};
-  font-weight: ${({ theme }) => theme.font.weight.regular};
 
+  font-weight: ${({ theme }) => theme.font.weight.regular};
   outline: none;
   padding: ${({ theme }) => theme.spacing(2)};
-  width: ${({ fullWidth, theme }) =>
-    fullWidth ? `calc(100% - ${theme.spacing(4)})` : 'auto'};
+
+  width: 100%;
 
   &::placeholder,
   &::-webkit-input-placeholder {
@@ -52,28 +67,46 @@ const StyledInput = styled.input<{ fullWidth: boolean }>`
   }
 `;
 
-const StyledIconContainer = styled.div`
-  align-items: center;
-  display: flex;
-  position: relative;
+const StyledErrorHelper = styled.div`
+  color: ${({ theme }) => theme.color.red};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  padding: ${({ theme }) => theme.spacing(1)};
 `;
 
-const StyledIcon = styled.div`
+const StyledTrailingIconContainer = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.tertiary};
+  border-bottom-right-radius: ${({ theme }) => theme.border.radius.sm};
+  border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  justify-content: center;
+  padding-right: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledTrailingIcon = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.light};
   cursor: pointer;
-  position: absolute;
-  right: ${({ theme }) => theme.spacing(2)};
+  display: flex;
+  justify-content: center;
 `;
 
+const INPUT_TYPE_PASSWORD = 'password';
+
 export function TextInput({
   label,
   value,
   onChange,
+  onFocus,
+  onBlur,
   fullWidth,
+  error,
+  required,
   type,
   ...props
 }: OwnProps): JSX.Element {
+  const theme = useTheme();
+
   const inputRef = useRef<HTMLInputElement>(null);
 
   const {
@@ -81,13 +114,15 @@ export function TextInput({
     setHotkeysScopeAndMemorizePreviousScope,
   } = usePreviousHotkeysScope();
 
-  function handleFocus() {
+  const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
+    onFocus?.(e);
     setHotkeysScopeAndMemorizePreviousScope(InternalHotkeysScope.TextInput);
-  }
+  };
 
-  function handleBlur() {
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
+    onBlur?.(e);
     goBackToPreviousHotkeysScope();
-  }
+  };
 
   useScopedHotkeys(
     [Key.Enter, Key.Escape],
@@ -103,19 +138,17 @@ export function TextInput({
     setPasswordVisible(!passwordVisible);
   };
 
-  const theme = useTheme();
-
   return (
-    <StyledContainer>
-      {label && <StyledLabel>{label}</StyledLabel>}
-      <StyledIconContainer>
+    <StyledContainer fullWidth={fullWidth ?? false}>
+      {label && <StyledLabel>{label + (required ? '*' : '')}</StyledLabel>}
+      <StyledInputContainer>
         <StyledInput
           ref={inputRef}
           tabIndex={props.tabIndex ?? 0}
           onFocus={handleFocus}
           onBlur={handleBlur}
-          fullWidth={fullWidth ?? false}
           value={value}
+          required={required}
           type={passwordVisible ? 'text' : type}
           onChange={(event: ChangeEvent<HTMLInputElement>) => {
             if (onChange) {
@@ -124,19 +157,27 @@ export function TextInput({
           }}
           {...props}
         />
-        {type === 'password' && ( // only show the icon for password inputs
-          <StyledIcon
-            onClick={handleTogglePasswordVisibility}
-            data-testid="reveal-password-button"
-          >
-            {passwordVisible ? (
-              <IconEyeOff size={theme.icon.size.md} />
-            ) : (
-              <IconEye size={theme.icon.size.md} />
-            )}
-          </StyledIcon>
-        )}
-      </StyledIconContainer>
+        <StyledTrailingIconContainer>
+          {error && (
+            <StyledTrailingIcon>
+              <IconAlertCircle size={16} color={theme.color.red} />
+            </StyledTrailingIcon>
+          )}
+          {!error && type === INPUT_TYPE_PASSWORD && (
+            <StyledTrailingIcon
+              onClick={handleTogglePasswordVisibility}
+              data-testid="reveal-password-button"
+            >
+              {passwordVisible ? (
+                <IconEyeOff size={theme.icon.size.md} />
+              ) : (
+                <IconEye size={theme.icon.size.md} />
+              )}
+            </StyledTrailingIcon>
+          )}
+        </StyledTrailingIconContainer>
+      </StyledInputContainer>
+      {error && <StyledErrorHelper>{error}</StyledErrorHelper>}
     </StyledContainer>
   );
 }

front/src/modules/ui/icons/index.ts

@@ -35,5 +35,6 @@ export { IconNotes } from '@tabler/icons-react';
 export { IconCirclePlus } from '@tabler/icons-react';
 export { IconCheckbox } from '@tabler/icons-react';
 export { IconTimelineEvent } from '@tabler/icons-react';
+export { IconAlertCircle } from '@tabler/icons-react';
 export { IconEye } from '@tabler/icons-react';
 export { IconEyeOff } from '@tabler/icons-react';