fix: validation on profile page (#398)

* fix validation of username and fullname

* fix

* fix message

* Update validator.js

* Update Profile.svelte

* remove unused functions

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/lib/components/Org/Settings/Profile.svelte

@@ -13,21 +13,18 @@
   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';
+  import { updateProfileValidation } from '$lib/utils/functions/validator';
 
   let avatar = '';
   let loading = false;
   let hasLangChanged = false;
   let locale = '';
 
-  let errors = {
+  let errors = {};
-    email: ''
-  }
 
   async function handleUpdate() {
-    errors = updateProfileEmailValidation($profile.email)
+    errors = updateProfileValidation($profile);
-
+    if (Object.values(errors).some((error) => error)) {
-    if (Object.values(errors).length) {
       loading = false;
       return;
     }
@@ -105,17 +102,19 @@
         label={$t('settings.profile.personal_information.full_name')}
         bind:value={$profile.fullname}
         className="w-full lg:w-60 mb-4"
+        errorMessage={$t(errors.fullname)}
       />
       <TextField
         label={$t('settings.profile.personal_information.username')}
         bind:value={$profile.username}
         className="w-full lg:w-60 mb-4"
+        errorMessage={$t(errors.username)}
       />
       <TextField
         label={$t('settings.profile.personal_information.email')}
         bind:value={$profile.email}
         className="w-full lg:w-60 mb-4"
-        errorMessage={errors.email}
+        errorMessage={$t(errors.email)}
       />
       <LanguagePicker bind:hasLangChanged bind:value={locale} className="w-full lg:w-60 mb-4" />
     </Column>

apps/dashboard/src/lib/utils/functions/validator.js

@@ -125,6 +125,12 @@ const onboardingValidationSchema = {
   })
 };
 
+const updateProfileValidationSchema = z.object({
+  email: z.string().email({ message: 'validations.user_profile.email' }),
+  username: z.string().nonempty({ message: 'validations.user_profile.username' }),
+  fullname: z.string().min(5, { message: 'validations.user_profile.fullname' })
+});
+
 export const getConfirmPasswordError = ({ password, confirmPassword }) => {
   return password > 6 && confirmPassword > 6 && password !== confirmPassword
     ? `${t.get('validations.confirm_password.not_match')}`
@@ -213,6 +219,13 @@ export const onboardingValidation = (fields = {}, step) => {
   return processErrors(error);
 };
 
+export const updateProfileValidation = (fields = {}) => {
+  const schema = updateProfileValidationSchema;
+  const { error } = schema.safeParse(fields);
+
+  return processErrors(error);
+};
+
 // export const createTemplateExerciseValidation = (fields = {}) => {
 //   const schema = z.object({
 //     orgName: z.string().min(5, {

apps/dashboard/src/lib/utils/translations/en.json

@@ -1329,7 +1329,9 @@
 
   "validations": {
     "user_profile": {
-      "email": "Invalid email address"
+      "email": "Invalid email address",
+      "username":"Username cannot be empty",
+      "fullname":"Name should be minimum of 5 characters"
     },
     "organization_name": {
       "min_char": "Organization must contain 5 or more characters",