From 56dd28dd76f0826b306a914c6dc0d842203a4f87 Mon Sep 17 00:00:00 2001
From: Zai Shi <zaishi00@outlook.com>
Date: Wed, 18 Dec 2024 17:15:43 -0800
Subject: [PATCH] added test for email server edit

---
 apps/backend/src/lib/emails.tsx               |  4 +--
 .../[projectId]/emails/page-client.tsx        | 34 +++++++++++++++----
 apps/dashboard/src/components/form-dialog.tsx | 15 ++++----
 3 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/apps/backend/src/lib/emails.tsx b/apps/backend/src/lib/emails.tsx
index a3b7b380a..89390e477 100644
--- a/apps/backend/src/lib/emails.tsx
+++ b/apps/backend/src/lib/emails.tsx
@@ -111,7 +111,7 @@ export async function sendEmailWithKnownErrorTypes(options: SendEmailOptions): P
           rawError: error,
           errorType: 'HOST_NOT_FOUND',
           retryable: false,
-          message: 'The email host is not found. Please make sure the email host configuration is correct.'
+          message: 'Failed to connect to the email host. Please make sure the email host configuration is correct.'
         });
       }
 
@@ -120,7 +120,7 @@ export async function sendEmailWithKnownErrorTypes(options: SendEmailOptions): P
           rawError: error,
           errorType: 'AUTH_FAILED',
           retryable: false,
-          message: 'The email server authentication failed. Please check your email credentials configuration.',
+          message: 'Failed to authenticate with the email server. Please check your email credentials configuration.',
         });
       }
 
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/emails/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/emails/page-client.tsx
index 70b640d35..b4bc5c630 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/emails/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/emails/page-client.tsx
@@ -170,6 +170,7 @@ function EditEmailServerDialog(props: {
 }) {
   const stackAdminApp = useAdminApp();
   const project = stackAdminApp.useProject();
+  const [error, setError] = useState<string | null>(null);
 
   return <FormDialog
     trigger={props.trigger}
@@ -185,16 +186,36 @@ function EditEmailServerDialog(props: {
           }
         });
       } else {
+        if (!values.host || !values.port || !values.username || !values.password || !values.senderEmail || !values.senderName) {
+          throwErr("Email server fields are not filled for custom SMTP server");
+        }
+
+        const emailConfig = {
+          host: values.host,
+          port: values.port,
+          username: values.username,
+          password: values.password,
+          senderEmail: values.senderEmail,
+          senderName: values.senderName,
+        };
+
+        const testResult = await stackAdminApp.sendTestEmail({
+          recipientEmail: values.senderEmail,
+          emailConfig: emailConfig,
+        });
+
+        if (testResult.status === 'error') {
+          setError(testResult.error.errorMessage);
+          return 'prevent-close-and-prevent-reset';
+        } else {
+          setError(null);
+        }
+
         await project.update({
           config: {
             emailConfig: {
               type: 'standard',
-              senderName: values.senderName!,
-              host: values.host!,
-              port: values.port!,
-              username: values.username!,
-              password: values.password!,
-              senderEmail: values.senderEmail!,
+              ...emailConfig,
             }
           }
         });
@@ -231,6 +252,7 @@ function EditEmailServerDialog(props: {
             />
           ))}
         </>}
+        {error && <Alert variant="destructive">{error}</Alert>}
       </>
     )}
   />;
diff --git a/apps/dashboard/src/components/form-dialog.tsx b/apps/dashboard/src/components/form-dialog.tsx
index 37d7178d5..db61339b9 100644
--- a/apps/dashboard/src/components/form-dialog.tsx
+++ b/apps/dashboard/src/components/form-dialog.tsx
@@ -53,7 +53,7 @@ export function SmartFormDialog<S extends yup.ObjectSchema<any, any, any, any>>(
 export function FormDialog<F extends FieldValues>(
   props: Omit<ActionDialogProps, 'children'> & {
     defaultValues?: Partial<F>,
-    onSubmit: (values: F) => Promise<void | 'prevent-close'> | void | 'prevent-close',
+    onSubmit: (values: F) => Promise<void | 'prevent-close' | 'prevent-close-and-prevent-reset'> | void | 'prevent-close' | 'prevent-close-and-prevent-reset',
     render: (form: ReturnType<typeof useForm<F>>) => React.ReactNode,
     formSchema: yup.ObjectSchema<F>,
     onFormChange?: (form: ReturnType<typeof useForm<F>>) => void,
@@ -73,11 +73,14 @@ export function FormDialog<F extends FieldValues>(
     setSubmitting(true);
     try {
       const result = await props.onSubmit(values);
-      form.reset();
-      if (result !== 'prevent-close') {
-        setOpenState(false);
-        props.onClose?.();
-        props.onOpenChange?.(false);
+      if (result !== 'prevent-close-and-prevent-reset') {
+        form.reset();
+
+        if (result !== 'prevent-close') {
+          setOpenState(false);
+          props.onClose?.();
+          props.onOpenChange?.(false);
+        }
       }
     } finally {
       setSubmitting(false);