fix: Add confirmation when email is sent or fails to send

src/components/FormLogin.vue

@@ -15,6 +15,8 @@ const emailRegex = /^[a-zA-Z0-9_+&*-]+(?:\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\
 const userStore = useUserStore()
 
 const isEmailValid = computed(() => emailRegex.test(resetEmail.value))
+const isSendingEmail = ref(false);
+const successMessage = ref<string>('');
 
 const submitForm = () => {
     userStore.login(username.value, password.value)
@@ -30,12 +32,20 @@ const openForgotPasswordModal = (event: MouseEvent) => {
 }
 
 const submitReset = async () => {
-    await axios.post('http://localhost:8080/forgotPassword/changePasswordRequest', {
-        email: resetEmail.value
-    })
-
-    resetEmail.value = ''
-    isModalOpen.value = false
+    isSendingEmail.value = true;
+    try {
+        await axios.post('http://localhost:8080/forgotPassword/changePasswordRequest', {
+            email: resetEmail.value
+        });
+        successMessage.value = 'E-posten er sendt. Vennligst sjekk innboksen din for instrukser. OBS: E-posten kan havne i spam-mappen';
+        resetEmail.value = '';
+    } catch (error) {
+        console.error(error);
+        errorMessage.value = 'Noe gikk galt. Vennligst prøv igjen.';
+    } finally {
+        isSendingEmail.value = false; 
+        isModalOpen.value = false;
+    }
 }
 
 const closeModal = () => {
@@ -51,6 +61,7 @@ watch(
 )
 </script>
 
+
 <template>
     <div class="flex flex-col justify-center gap-5 w-full">
         <div class="flex flex-col">
@@ -101,30 +112,37 @@ watch(
         :title="'Glemt passord'"
         :message="'Vennligst skriv inn e-posten din for å endre passordet.'"
         :is-modal-open="isModalOpen"
-        @close="isModalOpen = false"
+        @close="closeModal"
     >
         <template v-slot:input>
-            <input
-                type="email"
-                v-model="resetEmail"
-                class="border border-gray-300 p-2 w-full mb-7"
-                placeholder="Skriv e-postadressen din her"
-            />
-        </template>
-        <template v-slot:buttons>
-            <button
-                :disabled="!isEmailValid"
-                @click="submitReset"
-                class="active-button font-bold py-2 px-4 w-1/2 border-2 disabled:border-transparent"
-            >
-                Send mail
-            </button>
-            <button
-                @click="closeModal"
-                class="active-button font-bold py-2 px-4 w-1/2 border-2 disabled:border-transparent"
-            >
-                Lukk
-            </button>
+            <div v-if="isSendingEmail" class="flex justify-center items-center">
+                <div class="p-3 animate-spin drop-shadow-2xl bg-gradient-to-r from-lime-500 from-30% to-green-600 to-90% md:w-18 md:h-20 h-20 w-20 aspect-square rounded-full">
+                    <div class="rounded-full h-full w-full bg-slate-100 dark:bg-zinc-900 background-blur-md"></div>
+                </div>
+            </div>
+            <div v-else>
+                <input
+                    type="email"
+                    v-model="resetEmail"
+                    class="border border-gray-300 p-2 w-full mb-7"
+                    placeholder="Skriv e-postadressen din her"
+                />
+                <div class="flex gap-5 mt-4">
+                    <button
+                        :disabled="!isEmailValid"
+                        @click="submitReset"
+                        class="active-button font-bold py-2 px-4 w-1/2 border-2 disabled:border-transparent"
+                    >
+                        Send mail
+                    </button>
+                    <button
+                        @click="closeModal"
+                        class="active-button font-bold py-2 px-4 w-1/2 border-2 disabled:border-transparent"
+                    >
+                        Lukk
+                    </button>
+                </div>
+            </div>
         </template>
     </modal-component>
 </template>