From d23e02adca8e0c6c65ac7e518e3d7aaa32d1e7fa Mon Sep 17 00:00:00 2001
From: bosiraphael <71827178+bosiraphael@users.noreply.github.com>
Date: Thu, 25 Apr 2024 15:32:55 +0200
Subject: [PATCH] 4001 add validation for blocklist (#5172)

Closes #4001
---
 .../SettingsAccountsEmailsBlocklistInput.tsx  | 94 +++++++++++++------
 .../ui/input/button/components/Button.tsx     |  2 +-
 .../workspace-pre-query-hook.config.ts        |  4 +
 .../workspace-pre-query-hook.module.ts        |  7 +-
 .../workspace-query-runner.service.ts         |  8 ++
 .../src/engine/utils/is-domain.ts             |  5 +
 .../blocklist-create-many.pre-query.hook.ts   | 46 +++++++++
 .../connected-account-query-hook.module.ts    | 14 +++
 8 files changed, 148 insertions(+), 32 deletions(-)
 create mode 100644 packages/twenty-server/src/engine/utils/is-domain.ts
 create mode 100644 packages/twenty-server/src/modules/connected-account/query-hooks/blocklist/blocklist-create-many.pre-query.hook.ts
 create mode 100644 packages/twenty-server/src/modules/connected-account/query-hooks/connected-account-query-hook.module.ts

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistInput.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistInput.tsx
index 76b9f2204..87160ac12 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistInput.tsx
+++ b/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>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
index fcd909785..6fa8c4565 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
+++ b/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<
diff --git a/packages/twenty-server/src/engine/api/graphql/workspace-query-runner/workspace-pre-query-hook/workspace-pre-query-hook.config.ts b/packages/twenty-server/src/engine/api/graphql/workspace-query-runner/workspace-pre-query-hook/workspace-pre-query-hook.config.ts
index 72361faed..377e5b1c5 100644
--- a/packages/twenty-server/src/engine/api/graphql/workspace-query-runner/workspace-pre-query-hook/workspace-pre-query-hook.config.ts
+++ b/packages/twenty-server/src/engine/api/graphql/workspace-query-runner/workspace-pre-query-hook/workspace-pre-query-hook.config.ts
@@ -3,6 +3,7 @@ import { MessageFindOnePreQueryHook } from 'src/modules/messaging/query-hooks/me
 import { WorkspaceQueryHook } from 'src/engine/api/graphql/workspace-query-runner/workspace-pre-query-hook/types/workspace-query-hook.type';
 import { CalendarEventFindManyPreQueryHook } from 'src/modules/calendar/query-hooks/calendar-event/calendar-event-find-many.pre-query.hook';
 import { CalendarEventFindOnePreQueryHook } from 'src/modules/calendar/query-hooks/calendar-event/calendar-event-find-one.pre-query-hook';
+import { BlocklistCreateManyPreQueryHook } from 'src/modules/connected-account/query-hooks/blocklist/blocklist-create-many.pre-query.hook';
 
 // TODO: move to a decorator
 export const workspacePreQueryHooks: WorkspaceQueryHook = {
@@ -14,4 +15,7 @@ export const workspacePreQueryHooks: WorkspaceQueryHook = {
     findOne: [CalendarEventFindOnePreQueryHook.name],
     findMany: [CalendarEventFindManyPreQueryHook.name],
   },
+  blocklist: {
+    createMany: [BlocklistCreateManyPreQueryHook.name],
+  },
 };
diff --git a/packages/twenty-server/src/engine/api/graphql/workspace-query-runner/workspace-pre-query-hook/workspace-pre-query-hook.module.ts b/packages/twenty-server/src/engine/api/graphql/workspace-query-runner/workspace-pre-query-hook/workspace-pre-query-hook.module.ts
index 90f841b62..fa718b6fe 100644
--- a/packages/twenty-server/src/engine/api/graphql/workspace-query-runner/workspace-pre-query-hook/workspace-pre-query-hook.module.ts
+++ b/packages/twenty-server/src/engine/api/graphql/workspace-query-runner/workspace-pre-query-hook/workspace-pre-query-hook.module.ts
@@ -3,9 +3,14 @@ import { Module } from '@nestjs/common';
 import { MessagingQueryHookModule } from 'src/modules/messaging/query-hooks/messaging-query-hook.module';
 import { WorkspacePreQueryHookService } from 'src/engine/api/graphql/workspace-query-runner/workspace-pre-query-hook/workspace-pre-query-hook.service';
 import { CalendarQueryHookModule } from 'src/modules/calendar/query-hooks/calendar-query-hook.module';
+import { ConnectedAccountQueryHookModule } from 'src/modules/connected-account/query-hooks/connected-account-query-hook.module';
 
 @Module({
-  imports: [MessagingQueryHookModule, CalendarQueryHookModule],
+  imports: [
+    MessagingQueryHookModule,
+    CalendarQueryHookModule,
+    ConnectedAccountQueryHookModule,
+  ],
   providers: [WorkspacePreQueryHookService],
   exports: [WorkspacePreQueryHookService],
 })
diff --git a/packages/twenty-server/src/engine/api/graphql/workspace-query-runner/workspace-query-runner.service.ts b/packages/twenty-server/src/engine/api/graphql/workspace-query-runner/workspace-query-runner.service.ts
index 1592d1505..6f2675fb1 100644
--- a/packages/twenty-server/src/engine/api/graphql/workspace-query-runner/workspace-query-runner.service.ts
+++ b/packages/twenty-server/src/engine/api/graphql/workspace-query-runner/workspace-query-runner.service.ts
@@ -227,6 +227,14 @@ export class WorkspaceQueryRunnerService {
       options,
     );
 
+    await this.workspacePreQueryHookService.executePreHooks(
+      userId,
+      workspaceId,
+      objectMetadataItem.nameSingular,
+      'createMany',
+      args,
+    );
+
     const query = await this.workspaceQueryBuilderFactory.createMany(
       computedArgs,
       options,
diff --git a/packages/twenty-server/src/engine/utils/is-domain.ts b/packages/twenty-server/src/engine/utils/is-domain.ts
new file mode 100644
index 000000000..97cc52404
--- /dev/null
+++ b/packages/twenty-server/src/engine/utils/is-domain.ts
@@ -0,0 +1,5 @@
+export const isDomain = (url: string | undefined | null) =>
+  !!url &&
+  /^((?!-))(xn--)?[a-z0-9][a-z0-9-_]{0,61}[a-z0-9]{0,1}\.(xn--)?([a-z0-9-]{1,61}|[a-z0-9-]{1,30}\.[a-z]{2,})$/.test(
+    url,
+  );
diff --git a/packages/twenty-server/src/modules/connected-account/query-hooks/blocklist/blocklist-create-many.pre-query.hook.ts b/packages/twenty-server/src/modules/connected-account/query-hooks/blocklist/blocklist-create-many.pre-query.hook.ts
new file mode 100644
index 000000000..ef5654bc8
--- /dev/null
+++ b/packages/twenty-server/src/modules/connected-account/query-hooks/blocklist/blocklist-create-many.pre-query.hook.ts
@@ -0,0 +1,46 @@
+import { Injectable } from '@nestjs/common';
+
+import z from 'zod';
+
+import { WorkspacePreQueryHook } from 'src/engine/api/graphql/workspace-query-runner/workspace-pre-query-hook/interfaces/workspace-pre-query-hook.interface';
+import { CreateManyResolverArgs } from 'src/engine/api/graphql/workspace-resolver-builder/interfaces/workspace-resolvers-builder.interface';
+
+import { isDomain } from 'src/engine/utils/is-domain';
+import { BlocklistObjectMetadata } from 'src/modules/connected-account/standard-objects/blocklist.object-metadata';
+
+@Injectable()
+export class BlocklistCreateManyPreQueryHook implements WorkspacePreQueryHook {
+  constructor() {}
+
+  async execute(
+    userId: string,
+    workspaceId: string,
+    payload: CreateManyResolverArgs<
+      Omit<BlocklistObjectMetadata, 'createdAt' | 'updatedAt'> & {
+        createdAt: string;
+        updatedAt: string;
+      }
+    >,
+  ): Promise<void> {
+    const emailOrDomainSchema = z
+      .string()
+      .trim()
+      .email('Invalid email or domain')
+      .or(
+        z
+          .string()
+          .refine(
+            (value) => value.startsWith('@') && isDomain(value.slice(1)),
+            'Invalid email or domain',
+          ),
+      );
+
+    for (const { handle } of payload.data) {
+      if (!handle) {
+        throw new Error('Handle is required');
+      }
+
+      emailOrDomainSchema.parse(handle);
+    }
+  }
+}
diff --git a/packages/twenty-server/src/modules/connected-account/query-hooks/connected-account-query-hook.module.ts b/packages/twenty-server/src/modules/connected-account/query-hooks/connected-account-query-hook.module.ts
new file mode 100644
index 000000000..3a841653b
--- /dev/null
+++ b/packages/twenty-server/src/modules/connected-account/query-hooks/connected-account-query-hook.module.ts
@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common';
+
+import { BlocklistCreateManyPreQueryHook } from 'src/modules/connected-account/query-hooks/blocklist/blocklist-create-many.pre-query.hook';
+
+@Module({
+  imports: [],
+  providers: [
+    {
+      provide: BlocklistCreateManyPreQueryHook.name,
+      useClass: BlocklistCreateManyPreQueryHook,
+    },
+  ],
+})
+export class ConnectedAccountQueryHookModule {}