fix: Minor fixes to make the messages visible to the user

src/components/FormLogin.vue

@@ -17,6 +17,7 @@ const userStore = useUserStore()
 const isEmailValid = computed(() => emailRegex.test(resetEmail.value))
 const isSendingEmail = ref(false);
 const successMessage = ref<string>('');
+const modalErrorMessage = ref<string>('');
 
 const submitForm = () => {
     userStore.login(username.value, password.value)
@@ -33,24 +34,31 @@ const openForgotPasswordModal = (event: MouseEvent) => {
 
 const submitReset = async () => {
     isSendingEmail.value = true;
+    modalErrorMessage.value = '';
+    successMessage.value = '';
     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 = '';
+        isSendingEmail.value = false;
+        setTimeout(() => {
+            isModalOpen.value = false;
+            successMessage.value = '';
+        }, 3000);
     } catch (error) {
         console.error(error);
-        errorMessage.value = 'Noe gikk galt. Vennligst prøv igjen.';
-    } finally {
-        isSendingEmail.value = false; 
-        isModalOpen.value = false;
+        modalErrorMessage.value = 'Noe gikk galt. Vennligst prøv igjen.';
+        isSendingEmail.value = false;
     }
 }
 
 const closeModal = () => {
-    resetEmail.value = ''
-    isModalOpen.value = false
+    isModalOpen.value = false;
+    isSendingEmail.value = false;
+    modalErrorMessage.value = '';
+    resetEmail.value = '';
+    successMessage.value = '';
 }
 
 watch(
@@ -117,9 +125,27 @@ watch(
         <template v-slot:input>
             <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 class="rounded-full h-full w-full bg-slate-100 background-blur-md"></div>
                 </div>
             </div>
+            <div v-else-if="successMessage">
+                <p class="text-green-500 text-center">{{ successMessage }}</p>
+                <button
+                    @click="closeModal"
+                    class="active-button font-bold py-2 px-4 w-1/2 mt-4 border-2 disabled:border-transparent"
+                >
+                    Lukk
+                </button>
+            </div>
+            <div v-else-if="modalErrorMessage">
+                <p class ="text-red-500 text-center">{{ modalErrorMessage }}</p>
+                <button
+                    @click="closeModal"
+                    class="active-button font-bold py-2 px-4 w-1/2 mt-4 border-2 disabled:border-transparent"
+                >
+                    Lukk
+                </button>
+            </div>
             <div v-else>
                 <input
                     type="email"