modals olvido contraseña

src/views/LoginView.vue

@@ -42,7 +42,10 @@
           <a
             href="#"
             class="text-xs text-gray-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-            @click="showModal"
+            @click="
+              visibleModalPassword = true;
+              email = '';
+            "
             >Olvidó la contraseña?</a
           >
         </div>
@@ -65,7 +68,7 @@
     </div>
   </div>
   <!-- Modal de recuperar contraseña -->
-  <fwb-modal v-if="visibleModalPassword" @close="closeModal">
+  <fwb-modal v-if="visibleModalPassword" @close="visibleModalPassword = false">
     <template #header>
       <div class="flex items-center text-lg">Recuperar contraseña</div>
     </template>
@@ -85,7 +88,7 @@
     </template>
     <template #footer>
       <div class="flex justify-between">
-        <fwb-button @click="closeModal" color="alternative">
+        <fwb-button @click="visibleModalPassword = false" color="alternative">
           Decline
         </fwb-button>
         <fwb-button @click="requestPasswordReset" color="green">
@@ -94,6 +97,30 @@
       </div>
     </template>
   </fwb-modal>
+  <!-- Modal de parametros incorrectos -->
+  <fwb-modal
+    v-if="visibleModalIncorrect"
+    @close="visibleModalIncorrect = false"
+  >
+    <template #header>
+      <div class="flex items-center text-lg text-red-700">Error</div>
+    </template>
+    <template #body> Parametros incorrectos </template>
+  </fwb-modal>
+  <!-- Modal de correo enviado -->
+  <fwb-modal v-if="visibleModalSended" @close="visibleModalSended = false">
+    <template #header>
+      <div class="flex items-center text-lg text-green-700">Aviso</div>
+    </template>
+    <template #body> Correo enviado </template>
+  </fwb-modal>
+  <!-- Modal de correo invalido -->
+  <fwb-modal v-if="visibleModalInvalid" @close="visibleModalInvalid = false">
+    <template #header>
+      <div class="flex items-center text-lg text-red-700">Aviso</div>
+    </template>
+    <template #body> No es un correo válido </template>
+  </fwb-modal>
 </template>
 
 <script setup>
@@ -110,8 +137,14 @@ let pb = null;
 let email = ref("p40store@gmail.com");
 let password = ref("p40store");
 const visibleModalPassword = ref(false);
+const visibleModalIncorrect = ref(false);
+const visibleModalSended = ref(false);
+const visibleModalInvalid = ref(false);
 
 onMounted(() => {
+  if (pb != null) {
+    pb.authStore.clear();
+  }
   pb = new PocketBase("http://127.0.0.1:8090");
 });
 
@@ -129,35 +162,27 @@ const login = async () => {
       }
     })
     .catch(function () {
-      alert("Parámetros incorrectos");
+      visibleModalIncorrect.value = true;
     });
 };
-/**
- * Muestra el modal de recuperaci n de contrase a
- */
-const closeModal = () => {
-  visibleModalPassword.value = false;
-};
-const showModal = () => {
-  email = ref("");
-  visibleModalPassword.value = true;
-};
 
 const requestPasswordReset = async () => {
   const authData = await pb
     .collection("users")
     .requestPasswordReset(email.value)
     .then(function (result) {
-      closeModal();
-      alert("Correo enviado");
+      visibleModalSended.value = true;
     })
-    .catch(function () {
-      alert("No existe el correo");
+    .catch(function (error) {
+      console.log(error);
+      visibleModalInvalid.value = true;
     });
+  visibleModalPassword.value = false;
+  email.value = "";
 };
 </script>
 <style>
 .ancho {
   width: 30%;
 }
-</style>
+</style>