From 060bb8385eaccea65764a4a9d7df291510386492 Mon Sep 17 00:00:00 2001
From: Clonbg <clonbg@gmail.com>
Date: Mon, 9 Sep 2024 15:56:38 +0200
Subject: [PATCH] all dialogs

---
 src/views/LoginView.vue | 255 ++++++++++++++++++++++++----------------
 1 file changed, 154 insertions(+), 101 deletions(-)

diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 1356c14..ef4c4ed 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,140 +1,189 @@
 <template>
   <!--  https://www.creative-tim.com/twcomponents/component/simple-login-form-3 -->
-  <div
-    class="min-h-screen flex items-center justify-center w-full bg-emerald-700"
-  >
-    <div
-      class="bg-emerald-200 shadow-md rounded-lg px-8 py-6 ancho min-w-[300px]"
-    >
+  <div class="min-h-screen flex items-center justify-center w-full bg-emerald-700">
+    <div class="bg-emerald-200 shadow-md rounded-lg px-8 py-6 ancho min-w-[300px]">
       <h1 class="text-2xl font-bold text-center mb-4 dark:text-gray">
         Logueate!
       </h1>
       <form action="#">
         <div class="mb-4">
-          <label
-            for="email"
-            class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2"
-            >Correo electrónico</label
-          >
-          <input
-            type="email"
-            id="email"
-            v-model="email"
+          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2">Correo
+            electrónico</label>
+          <input type="email" id="email" v-model="email"
             class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
-            placeholder="your@email.com"
-            required
-          />
+            placeholder="your@email.com" required />
         </div>
         <div class="mb-4">
-          <label
-            for="password"
-            class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2"
-            >Contraseña</label
-          >
-          <input
-            type="password"
-            id="password"
-            v-model="password"
+          <label for="password"
+            class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2">Contraseña</label>
+          <input type="password" id="password" v-model="password"
             class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
-            placeholder="Enter your password"
-            required
-          />
-          <a
-            href="#"
+            placeholder="Enter your password" required />
+          <a href="#"
             class="text-xs text-blue-400 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-            @click="isOpenModalRecuPContras = true"
-            >Olvidó la contraseña?</a
-          >
+            @click="isOpenModalRecuPContras = true">Olvidó la contraseña?</a>
         </div>
         <div class="flex items-center justify-between mb-4">
           <div class="flex items-center"></div>
-          <router-link
-            to="/registro"
-            class="text-xs text-indigo-500 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-            >Crear cuenta</router-link
-          >
+          <router-link to="/registro"
+            class="text-xs text-indigo-500 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Crear
+            cuenta</router-link>
         </div>
-        <button
-          @click="login"
-          type="button"
-          class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-        >
+        <button @click="login" type="button"
+          class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
           Login
         </button>
       </form>
     </div>
   </div>
   <!-- Modal de parametros incorrectos -->
-
-  <!-- Modal de correo invalido -->
-
-  <!-- Modal de recuperar contraseña -->
-  <TransitionRoot appear :show="isOpenModalRecuPContras" as="template">
-    <Dialog
-      as="div"
-      @close="isOpenModalRecuPContras = false"
-      class="relative z-10"
-    >
-      <TransitionChild
-        as="template"
-        enter="duration-300 ease-out"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="duration-200 ease-in"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
-      >
+  <TransitionRoot appear :show="isOpenModalSend" as="template">
+    <Dialog as="div" @close="isOpenModalSend = false" class="relative z-10">
+      <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100"
+        leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
         <div class="fixed inset-0 bg-black/25" />
       </TransitionChild>
 
       <div class="fixed inset-0 overflow-y-auto">
-        <div
-          class="flex min-h-full items-center justify-center p-4 text-center"
-        >
-          <TransitionChild
-            as="template"
-            enter="duration-300 ease-out"
-            enter-from="opacity-0 scale-95"
-            enter-to="opacity-100 scale-100"
-            leave="duration-200 ease-in"
-            leave-from="opacity-100 scale-100"
-            leave-to="opacity-0 scale-95"
-          >
+        <div class="flex min-h-full items-center justify-center p-4 text-center">
+          <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95">
             <DialogPanel
-              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all"
-            >
-              <DialogTitle
-                as="h3"
-                class="text-lg font-medium leading-6 text-gray-900"
-              >
+              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all">
+              <DialogTitle as="h3" class="text-lg font-medium leading-6 text-green-600">
+                Enviado
+              </DialogTitle>
+              <div class="mt-2">
+                <p class="text-gray-500 text-md">
+                  Correo electrónico enviado
+                </p>
+              </div>
+
+              <div class="mt-4">
+                <button type="button"
+                  class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                  @click="isOpenModalSend = false">
+                  Aceptar
+                </button>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+  <!-- Modal de correo invalido -->
+  <TransitionRoot appear :show="isOpenModalWrongPass" as="template">
+    <Dialog as="div" @close="isOpenModalWrongPass = false" class="relative z-10">
+      <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100"
+        leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
+        <div class="fixed inset-0 bg-black/25" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-y-auto">
+        <div class="flex min-h-full items-center justify-center p-4 text-center">
+          <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95">
+            <DialogPanel
+              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all">
+              <DialogTitle as="h3" class="text-lg font-medium leading-6 text-red-600">
+                Error
+              </DialogTitle>
+              <div class="mt-2">
+                <p class="text-gray-500 text-md">
+                  Error en el correo electrónico
+                </p>
+              </div>
+
+              <div class="mt-4">
+                <button type="button"
+                  class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                  @click="isOpenModalWrongPass = false">
+                  Aceptar
+                </button>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+  <!-- Modal de recuperar contraseña -->
+  <TransitionRoot appear :show="isOpenModalRecuPContras" as="template">
+    <Dialog as="div" @close="isOpenModalRecuPContras = false" class="relative z-10">
+      <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100"
+        leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
+        <div class="fixed inset-0 bg-black/25" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-y-auto">
+        <div class="flex min-h-full items-center justify-center p-4 text-center">
+          <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95">
+            <DialogPanel
+              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all">
+              <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900">
                 Recuperar contraseña
               </DialogTitle>
               <div class="mt-2">
                 <input
-                  class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                  id="username"
-                  type="text"
-                  placeholder="email@example.com"
-                />
-                <p class="text-gray-500 text-xs">
+                  class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
+                  id="username" type="text" placeholder="email@example.com" v-model="email" />
+                <p class="text-gray-500 text-sm">
                   Si el email existe en nuestra base de datos, le enviaremos un
                   correo electrónico de recuperación.
                 </p>
               </div>
 
               <div class="mt-4 justify-between flex">
-                <button
-                  type="button"
+                <button type="button"
                   class="inline-flex justify-center rounded-md border border-transparent bg-red-100 px-4 py-2 text-sm font-medium text-red-900 hover:bg-red-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
-                  @click="isOpenModalRecuPContras = false"
-                >
+                  @click="isOpenModalRecuPContras = false">
                   Cancelar
                 </button>
-                <button
-                  type="button"
+                <button type="button"
                   class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                  @click="requestPasswordReset"
-                >
+                  @click="requestPasswordReset">
+                  Aceptar
+                </button>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+  <!-- Modal de login incorrecto -->
+  <TransitionRoot appear :show="isOpenModalWrongLogin" as="template">
+    <Dialog as="div" @close="isOpenModalWrongLogin = false" class="relative z-10">
+      <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100"
+        leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
+        <div class="fixed inset-0 bg-black/25" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-y-auto">
+        <div class="flex min-h-full items-center justify-center p-4 text-center">
+          <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95">
+            <DialogPanel
+              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all">
+              <DialogTitle as="h3" class="text-lg font-medium leading-6 text-red-600">
+                Error
+              </DialogTitle>
+              <div class="mt-2">
+                <p class="text-gray-500 text-md">
+                  Parámetros Incorrectos
+                </p>
+              </div>
+
+              <div class="mt-4">
+                <button type="button"
+                  class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                  @click="isOpenModalWrongLogin = false">
                   Aceptar
                 </button>
               </div>
@@ -166,6 +215,9 @@ let pb = null;
 let email = ref("p40store@gmail.com");
 let password = ref("p40store");
 let isOpenModalRecuPContras = ref(false);
+let isOpenModalWrongPass = ref(false)
+let isOpenModalSend = ref(false)
+let isOpenModalWrongLogin = ref(false)
 onMounted(() => {
   pb = new PocketBase(storeUser.urlPocketbase);
 });
@@ -184,23 +236,24 @@ const login = async () => {
       }
     })
     .catch(function () {
-      visibleModalIncorrect.value = true;
+      isOpenModalWrongLogin.value = true;
     });
 };
 
 const requestPasswordReset = async () => {
-  /* const authData = await pb
+  const authData = await pb
     .collection("users")
     .requestPasswordReset(email.value)
     .then(function (result) {
-      visibleModalSended.value = true;
+      isOpenModalSend.value = true;
     })
     .catch(function (error) {
       console.log(error);
-      visibleModalInvalid.value = true;
-    }); */
+      isOpenModalWrongPass.value = true;
+    });
   isOpenModalRecuPContras.value = false;
   email.value = "";
+  password.value = ""
 };
 
 const cerrar = () => {