feat: Trigger confirm warning for unsaved changes (#547)

* added the triger warning for the settings page

* all done

* added translation to the window message

* window issue now fixed

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

@@ -3,6 +3,7 @@
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { snackbar } from '$lib/components/Snackbar/store';
+  import UnsavedChanges from '$lib/components/UnsavedChanges/index.svelte';
   import UploadImage from '$lib/components/UploadImage/index.svelte';
   import generateUUID from '$lib/utils/functions/generateUUID';
   import { supabase } from '$lib/utils/functions/supabase';
@@ -17,6 +18,7 @@
   let loading = false;
   let hasLangChanged = false;
   let locale = '';
+  let hasUnsavedChanges = false;
 
   let errors = {};
 
@@ -66,7 +68,7 @@
       if (hasLangChanged) {
         handleLocaleChange(locale);
       }
-
+      hasUnsavedChanges = false;
       if (error) throw error;
     } catch (error) {
       let message = error.message;
@@ -83,16 +85,22 @@
   $: locale = !locale ? $profile.locale : locale;
 </script>
 
-<Grid class="border-c rounded border-gray-200 dark:border-neutral-600 w-full mt-5">
-  <Row class="flex flex-col lg:flex-row items-center lg:items-start py-7 border-bottom-c ">
+<UnsavedChanges bind:hasUnsavedChanges />
+<Grid class="border-c mt-5 w-full rounded border-gray-200 dark:border-neutral-600">
+  <Row class="border-bottom-c flex flex-col items-center py-7 lg:flex-row lg:items-start ">
     <Column sm={4} md={8} lg={4} class="mt-2 md:mt-0">
       <SectionTitle>{$t('settings.profile.profile_picture.heading')}</SectionTitle>
     </Column>
     <Column sm={2} md={4} lg={8} class="mt-2 lg:mt-0">
-      <UploadImage bind:avatar src={$profile.avatar_url} widthHeight="w-16 h-16 lg:w-24 lg:h-24" />
+      <UploadImage
+        bind:avatar
+        src={$profile.avatar_url}
+        widthHeight="w-16 h-16 lg:w-24 lg:h-24"
+        on:change={() => (hasUnsavedChanges = true)}
+      />
     </Column>
   </Row>
-  <Row class="flex flex-col lg:flex-row py-7 border-bottom-c">
+  <Row class="border-bottom-c flex flex-col py-7 lg:flex-row">
     <Column sm={4} md={4} lg={4}>
       <SectionTitle>{$t('settings.profile.personal_information.heading')}</SectionTitle>
     </Column>
@@ -102,24 +110,32 @@
         bind:value={$profile.fullname}
         className="w-full lg:w-60 mb-4"
         errorMessage={$t(errors.fullname)}
+        onChange={() => (hasUnsavedChanges = true)}
       />
       <TextField
         label={$t('settings.profile.personal_information.username')}
         bind:value={$profile.username}
         className="w-full lg:w-60 mb-4"
         errorMessage={$t(errors.username)}
+        onChange={() => (hasUnsavedChanges = true)}
       />
       <TextField
         label={$t('settings.profile.personal_information.email')}
         bind:value={$profile.email}
         className="w-full lg:w-60 mb-4"
         errorMessage={$t(errors.email)}
+        onChange={() => (hasUnsavedChanges = true)}
+      />
+      <LanguagePicker
+        onChange={() => (hasUnsavedChanges = true)}
+        bind:hasLangChanged
+        bind:value={locale}
+        className="w-full lg:w-60 mb-4"
       />
-      <LanguagePicker bind:hasLangChanged bind:value={locale} className="w-full lg:w-60 mb-4" />
     </Column>
   </Row>
 
-  <Row class="m-5 w-full flex items-center gap-2 lg:justify-center">
+  <Row class="m-5 flex w-full items-center gap-2 lg:justify-center">
     <PrimaryButton
       label={$t('settings.profile.update_profile')}
       variant={VARIANTS.CONTAINED_DARK}