4001 add validation for blocklist (#5172)

Closes #4001

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistInput.tsx

@@ -1,9 +1,13 @@
-import { useState } from 'react';
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
 import styled from '@emotion/styled';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { Key } from 'ts-key-enum';
+import { z } from 'zod';
 
 import { Button } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
+import { isDomain } from '~/utils/is-domain';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -19,45 +23,75 @@ type SettingsAccountsEmailsBlocklistInputProps = {
   updateBlockedEmailList: (email: string) => void;
 };
 
+const validationSchema = z
+  .object({
+    emailOrDomain: z
+      .string()
+      .trim()
+      .email('Invalid email or domain')
+      .or(
+        z
+          .string()
+          .refine(
+            (value) => value.startsWith('@') && isDomain(value.slice(1)),
+            'Invalid email or domain',
+          ),
+      ),
+  })
+  .required();
+
+type FormInput = z.infer<typeof validationSchema>;
+
 export const SettingsAccountsEmailsBlocklistInput = ({
   updateBlockedEmailList,
 }: SettingsAccountsEmailsBlocklistInputProps) => {
-  const [formValues, setFormValues] = useState<{
-    email: string;
-  }>({
-    email: '',
+  const { reset, handleSubmit, control, formState } = useForm<FormInput>({
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+    defaultValues: {
+      emailOrDomain: '',
+    },
+  });
+
+  const submit = handleSubmit((data) => {
+    updateBlockedEmailList(data.emailOrDomain);
   });
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === Key.Enter) {
-      updateBlockedEmailList(formValues.email);
-      setFormValues({ email: '' });
+      submit();
     }
   };
 
+  const { isSubmitSuccessful } = formState;
+
+  useEffect(() => {
+    if (isSubmitSuccessful) {
+      reset();
+    }
+  }, [isSubmitSuccessful, reset]);
+
   return (
-    <StyledContainer>
-      <StyledLinkContainer>
-        <TextInput
-          placeholder="eddy@gmail.com, @apple.com"
-          value={formValues.email}
-          onChange={(value) => {
-            setFormValues((prevState) => ({
-              ...prevState,
-              email: value,
-            }));
-          }}
-          fullWidth
-          onKeyDown={handleKeyDown}
-        />
-      </StyledLinkContainer>
-      <Button
-        title="Add to blocklist"
-        onClick={() => {
-          updateBlockedEmailList(formValues.email);
-          setFormValues({ email: '' });
-        }}
-      />
-    </StyledContainer>
+    <form onSubmit={submit}>
+      <StyledContainer>
+        <StyledLinkContainer>
+          <Controller
+            name="emailOrDomain"
+            control={control}
+            render={({ field: { value, onChange }, fieldState: { error } }) => (
+              <TextInput
+                placeholder="eddy@gmail.com, @apple.com"
+                value={value}
+                onChange={onChange}
+                error={error?.message}
+                onKeyDown={handleKeyDown}
+                fullWidth
+              />
+            )}
+          />
+        </StyledLinkContainer>
+        <Button title="Add to blocklist" type="submit" />
+      </StyledContainer>
+    </form>
   );
 };

packages/twenty-front/src/modules/ui/input/button/components/Button.tsx

@@ -22,7 +22,7 @@ export type ButtonProps = {
   disabled?: boolean;
   focus?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-};
+} & React.ComponentProps<'button'>;
 
 const StyledButton = styled.button<
   Pick<