fix: improve send test email UX

backend/src/email/email.service.ts

@@ -59,11 +59,16 @@ export class EmailService {
   }
 
   async sendTestMail(recipientEmail: string) {
-    await this.getTransporter().sendMail({
-      from: `"Pingvin Share" <${this.config.get("SMTP_EMAIL")}>`,
-      to: recipientEmail,
-      subject: "Test email",
-      text: "This is a test email",
-    });
+    try {
+      await this.getTransporter().sendMail({
+        from: `"Pingvin Share" <${this.config.get("SMTP_EMAIL")}>`,
+        to: recipientEmail,
+        subject: "Test email",
+        text: "This is a test email",
+      });
+    } catch (e) {
+      console.error(e);
+      throw new InternalServerErrorException(e.message);
+    }
   }
 }

frontend/src/components/admin/configuration/AdminConfigTable.tsx

@@ -29,7 +29,9 @@ const AdminConfigTable = () => {
   const config = useConfig();
   const isMobile = useMediaQuery("(max-width: 560px)");
 
-  let updatedConfigVariables: UpdateConfig[] = [];
+  const [updatedConfigVariables, setUpdatedConfigVariables] = useState<
+    UpdateConfig[]
+  >([]);
 
   const updateConfigVariable = (configVariable: UpdateConfig) => {
     const index = updatedConfigVariables.findIndex(
@@ -38,7 +40,7 @@ const AdminConfigTable = () => {
     if (index > -1) {
       updatedConfigVariables[index] = configVariable;
     } else {
-      updatedConfigVariables.push(configVariable);
+      setUpdatedConfigVariables([...updatedConfigVariables, configVariable]);
     }
   };
 
@@ -60,6 +62,26 @@ const AdminConfigTable = () => {
     });
   };
 
+  const saveConfigVariables = async () => {
+    if (config.get("SETUP_STATUS") == "REGISTERED") {
+      await configService
+        .updateMany(updatedConfigVariables)
+        .then(async () => {
+          await configService.finishSetup();
+          window.location.reload();
+        })
+        .catch(toast.axiosError);
+    } else {
+      await configService
+        .updateMany(updatedConfigVariables)
+        .then(() => {
+          setUpdatedConfigVariables([]);
+          toast.success("Configurations updated successfully");
+        })
+        .catch(toast.axiosError);
+    }
+  };
+
   useEffect(() => {
     getConfigVariables();
   }, []);
@@ -102,7 +124,10 @@ const AdminConfigTable = () => {
               ))}
               {category == "smtp" && (
                 <Group position="right">
-                  <TestEmailButton />
+                  <TestEmailButton
+                    configVariablesChanged={updatedConfigVariables.length != 0}
+                    saveConfigVariables={saveConfigVariables}
+                  />
                 </Group>
               )}
             </Paper>
@@ -110,29 +135,7 @@ const AdminConfigTable = () => {
         }
       )}
       <Group position="right">
-        <Button
-          onClick={() => {
-            if (config.get("SETUP_STATUS") == "REGISTERED") {
-              configService
-                .updateMany(updatedConfigVariables)
-                .then(async () => {
-                  await configService.finishSetup();
-                  window.location.reload();
-                })
-                .catch(toast.axiosError);
-            } else {
-              configService
-                .updateMany(updatedConfigVariables)
-                .then(() => {
-                  updatedConfigVariables = [];
-                  toast.success("Configurations updated successfully");
-                })
-                .catch(toast.axiosError);
-            }
-          }}
-        >
-          Save
-        </Button>
+        <Button onClick={saveConfigVariables}>Save</Button>
       </Group>
     </Box>
   );

frontend/src/components/admin/configuration/TestEmailButton.tsx

@@ -1,24 +1,69 @@
-import { Button } from "@mantine/core";
+import { Button, Stack, Text, Textarea } from "@mantine/core";
+import { useModals } from "@mantine/modals";
+import { useState } from "react";
 import useUser from "../../../hooks/user.hook";
 import configService from "../../../services/config.service";
 import toast from "../../../utils/toast.util";
 
-const TestEmailButton = () => {
+const TestEmailButton = ({
+  configVariablesChanged,
+  saveConfigVariables,
+}: {
+  configVariablesChanged: boolean;
+  saveConfigVariables: () => Promise<void>;
+}) => {
   const { user } = useUser();
+  const modals = useModals();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const sendTestEmail = async () => {
+    await configService
+      .sendTestEmail(user!.email)
+      .then(() => toast.success("Email sent successfully"))
+      .catch((e) =>
+        modals.openModal({
+          title: "Failed to send email",
+          children: (
+            <Stack spacing="xs">
+              <Text size="sm">
+                While sending the test email, the following error occurred:
+              </Text>
+              <Textarea minRows={4} readOnly value={e.response.data.message} />
+            </Stack>
+          ),
+        })
+      );
+  };
 
   return (
     <Button
+      loading={isLoading}
       variant="light"
-      onClick={() =>
-        configService
-          .sendTestEmail(user!.email)
-          .then(() => toast.success("Email sent successfully"))
-          .catch(() =>
-            toast.error(
-              "Failed to send the email. Please check the backend logs for more information."
-            )
-          )
-      }
+      onClick={async () => {
+        if (!configVariablesChanged) {
+          setIsLoading(true);
+          await sendTestEmail();
+          setIsLoading(false);
+        } else {
+          modals.openConfirmModal({
+            title: "Save configuration",
+            children: (
+              <Text size="sm">
+                To continue you need to save the configuration first. Do you
+                want to save the configuration and send the test email?
+              </Text>
+            ),
+            labels: { confirm: "Save and send", cancel: "Cancel" },
+            onConfirm: async () => {
+              setIsLoading(true);
+              await saveConfigVariables();
+              await sendTestEmail();
+              setIsLoading(false);
+            },
+          });
+        }
+      }}
     >
       Send test email
     </Button>