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/UploadImage/index.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import Camera from 'carbon-icons-svelte/lib/Camera.svelte';
-  import { Loading } from 'carbon-components-svelte';
   import { t } from '$lib/utils/functions/translations';
+  import { Loading } from 'carbon-components-svelte';
+  import Camera from 'carbon-icons-svelte/lib/Camera.svelte';
+  import { createEventDispatcher } from 'svelte';
 
   export let avatar: string | undefined;
   export let src: string | undefined;
@@ -14,6 +15,7 @@
   export let isUploading = false;
 
   let fileinput: HTMLInputElement;
+  const dispatch = createEventDispatcher();
 
   const onFileSelected = (e: Event<HTMLInputElement>) => {
     const image = e.target.files[0];
@@ -28,6 +30,7 @@
     reader.readAsDataURL(image);
     reader.onload = (e) => {
       avatar = image;
+      dispatch('change');
       // @ts-ignore
       src = e.target?.result || undefined;
       errorMessage = null; // Clear error message on successful load
@@ -35,18 +38,18 @@
   };
 </script>
 
-<section class="width-fit p-3 flex {flexDirection} items-center justify-between gap-5">
+<section class="width-fit flex p-3 {flexDirection} items-center justify-between gap-5">
   <div
     class="avatar-container {widthHeight ||
-      'setwidthheight'} pointer border-2 border-gray-200 dark:border-neutral-600 relative {shape}"
+      'setwidthheight'} pointer relative border-2 border-gray-200 dark:border-neutral-600 {shape}"
   >
     {#if src}
-      <img class="w-full h-full {shape}" {src} alt="Avatar" />
+      <img class="h-full w-full {shape}" {src} alt="Avatar" />
     {:else if avatar}
-      <img class="w-full h-full {shape}" src={avatar} alt="Avatar" />
+      <img class="h-full w-full {shape}" src={avatar} alt="Avatar" />
     {:else}
       <img
-        class="w-full h-full {shape}"
+        class="h-full w-full {shape}"
         src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-alt-512.png"
         alt=""
       />
@@ -57,7 +60,7 @@
     <button
       class="width-fit text-primary-700 flex flex-col items-center text-sm {isDisabled ||
       isUploading
-        ? 'opacity-50 cursor-not-allowed'
+        ? 'cursor-not-allowed opacity-50'
         : 'cursor-pointer'}"
       on:click={() => {
         if (!isDisabled || isUploading) {
@@ -73,7 +76,7 @@
       {/if}
       <span class="ml-2">{$t('settings.profile.profile_picture.upload_image')}</span>
     </button>
-    <p class="text-xs text-center text-gray-500">
+    <p class="text-center text-xs text-gray-500">
       {$t('settings.profile.profile_picture.file_size')}
       {maxFileSizeInMb}MB<br />
       {$t('settings.profile.profile_picture.accepted')}: jpeg, jpg, png, webp