From 1f0e7c7563264fddc5e5b59caa6b26f42cc65c6b Mon Sep 17 00:00:00 2001
From: Iniubong Obonguko <iniubongobonguko2018@gmail.com>
Date: Tue, 16 Jul 2024 06:35:34 +0100
Subject: [PATCH] feat: add validation for updating email on use profile (#391)

---
 .../src/lib/components/Org/Settings/Profile.svelte  | 13 +++++++++++++
 apps/dashboard/src/lib/utils/functions/validator.js |  8 ++++++++
 apps/dashboard/src/lib/utils/translations/en.json   |  3 +++
 3 files changed, 24 insertions(+)

diff --git a/apps/dashboard/src/lib/components/Org/Settings/Profile.svelte b/apps/dashboard/src/lib/components/Org/Settings/Profile.svelte
index dca8e986..2d4e3af3 100644
--- a/apps/dashboard/src/lib/components/Org/Settings/Profile.svelte
+++ b/apps/dashboard/src/lib/components/Org/Settings/Profile.svelte
@@ -13,13 +13,25 @@
   import { t } from '$lib/utils/functions/translations';
   import LanguagePicker from './LanguagePicker.svelte';
   import { handleLocaleChange } from '$lib/utils/functions/translations';
+  import { updateProfileEmailValidation } from '$lib/utils/functions/validator';
 
   let avatar = '';
   let loading = false;
   let hasLangChanged = false;
   let locale = '';
 
+  let errors = {
+    email: ''
+  }
+
   async function handleUpdate() {
+    errors = updateProfileEmailValidation($profile.email)
+
+    if (Object.values(errors).length) {
+      loading = false;
+      return;
+    }
+
     try {
       console.log({ hasLangChanged });
       loading = true;
@@ -103,6 +115,7 @@
         label={$t('settings.profile.personal_information.email')}
         bind:value={$profile.email}
         className="w-full lg:w-60 mb-4"
+        errorMessage={errors.email}
       />
       <LanguagePicker bind:hasLangChanged bind:value={locale} className="w-full lg:w-60 mb-4" />
     </Column>
diff --git a/apps/dashboard/src/lib/utils/functions/validator.js b/apps/dashboard/src/lib/utils/functions/validator.js
index f395d0ea..ffca852c 100644
--- a/apps/dashboard/src/lib/utils/functions/validator.js
+++ b/apps/dashboard/src/lib/utils/functions/validator.js
@@ -271,6 +271,14 @@ export const updateOrgSiteNameValidation = (siteName) => {
 
   return processErrors(error);
 };
+export const updateProfileEmailValidation = (email) => {
+  const schema = z.object({
+    email: z.string().email({ message: `${t.get('validations.user_profile.email')}` })
+  });
+  const { error } = schema.safeParse({ email });
+
+  return processErrors(error);
+};
 
 export const createQuizValidation = (fields = {}) => {
   const { error } = createQuizValidationSchema.safeParse(fields);
diff --git a/apps/dashboard/src/lib/utils/translations/en.json b/apps/dashboard/src/lib/utils/translations/en.json
index 9eceb968..6fb4b06b 100644
--- a/apps/dashboard/src/lib/utils/translations/en.json
+++ b/apps/dashboard/src/lib/utils/translations/en.json
@@ -1328,6 +1328,9 @@
   },
 
   "validations": {
+    "user_profile": {
+      "email": "Invalid email address"
+    },
     "organization_name": {
       "min_char": "Organization must contain 5 or more characters",
       "hyphen_rule": "Organization name cannot start or end with a hyphen"