From e813b5abced49c6a11e77e59a970dfbad505d30e Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Sat, 28 Sep 2024 10:33:29 +0200
Subject: [PATCH] Change editor and format with prettier

---
 src/views/ListasView.vue   | 300 ++++++++++++++++++++++---------------
 src/views/LoginView.vue    | 272 ++++++++++++++++++++++++---------
 src/views/RegistroView.vue | 185 +++++++++++++++++------
 3 files changed, 516 insertions(+), 241 deletions(-)

diff --git a/src/views/ListasView.vue b/src/views/ListasView.vue
index b295f5a..69e080c 100644
--- a/src/views/ListasView.vue
+++ b/src/views/ListasView.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="bg-emerald-700 flex flex-col gap-4 h-screen items-center justify-center">
+  <div
+    class="bg-emerald-700 flex flex-col gap-4 h-screen items-center justify-center"
+  >
     <div id="fijo" class="absolute top-0 my-6 flex flex-col gap-4">
       <h1 class="text-2xl font-bold mb-2 text-gray-900 mx-10">
         Las listas de {{ storeUser.user.name }}
@@ -8,147 +10,205 @@
       <div class="relative mx-auto">
         <label for="newListaName" class="sr-only"> Nueva lista </label>
 
-        <input type="text" id="newListaName" placeholder="Nueva Lista"
-          class="w-full rounded-md border-gray-200 py-2.5 pe-10 shadow-sm sm:text-sm" v-model="newListaName" />
+        <input
+          type="text"
+          id="newListaName"
+          placeholder="Nueva Lista"
+          class="w-full rounded-md border-gray-200 py-2.5 pe-10 shadow-sm sm:text-sm"
+          v-model="newListaName"
+        />
 
         <span class="absolute inset-y-0 end-0 grid w-10 place-content-center">
-          <button type="button" class="text-gray-600 hover:text-gray-700" @click="createList">
+          <button
+            type="button"
+            class="text-gray-600 hover:text-gray-700"
+            @click="createList"
+          >
             <span class="sr-only">Search</span>
 
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-              stroke="currentColor" class="size-6">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="size-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 4.5v15m7.5-7.5h-15"
+              />
             </svg>
           </button>
         </span>
       </div>
     </div>
     <!-- Card 1 -->
-    <div class="bg-emerald-700 overflow-auto w-full absolute my-6 flex flex-col top-40">
+    <div
+      class="bg-emerald-700 overflow-auto w-full absolute my-6 flex flex-col top-40"
+    >
       <template v-for="lista in listas">
-        <router-link :to="`/lista/${lista.id}`"
-          class="my-2 mx-auto rounded-md w-3/4 max-w-lg grid grid-cols-12 bg-emerald-100 shadow p-3 items-center hover:shadow-lg transition delay-150 duration-300 ease-in-out hover:scale-105 transform">
+        <router-link
+          :to="`/lista/${lista.id}`"
+          class="my-2 mx-auto rounded-md w-3/4 max-w-lg grid grid-cols-12 bg-emerald-100 shadow p-3 items-center hover:shadow-lg transition delay-150 duration-300 ease-in-out hover:scale-105 transform"
+        >
           <!-- Title -->
           <div class="col-span-11 xl:-ml-1">
             <p class="text-indigo-500 hover:text-indigo-700 font-semibold">
-              {{ lista.nombre }}
+              { { lista.nombre } }
             </p>
           </div>
 
           <!-- Description -->
-          <div class="md:col-start-1 col-span-11 xl:-ml-0">
-            <p class="text-sm text-gray-800 font-light">
+          <div class="md:col-start-1 col-span-5 xl:-ml-0">
+            <div class="text-sm text-gray-800 font-light">
               {{ lista.descripcion }}
-            </p>
-          </div>
-          <div class="grid grid-rows-3 grid-flow-col gap-4">
-            <div class="row-span-3 ...">01</div>
-            <div class="col-span-2 ...">02</div>
-            <div class="row-span-2 col-span-2 ...">03</div>
-          </div>
-          <div class="row">
-            <p class="text-sm text-gray-800 font-light">
-              <!-- edit -->
-            <div class="col">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                stroke="currentColor" class="size-6">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                  d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
-              </svg>
             </div>
-            <!-- delete -->
             <div class="col">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                stroke="currentColor" class="size-6">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                  d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
-              </svg>
+              <div class="grid grid-cols-12 gap-10">
+                <div>Editar</div>
+                <div>Eliminar</div>
+              </div>
             </div>
-            </p>
           </div>
+
+          <div class="text-sm text-gray-800 font-light"></div>
         </router-link>
       </template>
     </div>
+    <!-- Modal de nueva lista no puede estar vacía -->
+    <TransitionRoot appear :show="isOpenModalEmptyList" as="template">
+      <Dialog
+        as="div"
+        @close="isOpenModalEmptyList = 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">
+                    No puede estar el nombre de la lista vacía
+                  </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="isOpenModalEmptyList = false"
+                  >
+                    Aceptar
+                  </button>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+    <!-- Modal de pedir descripción -->
+    <TransitionRoot appear :show="isOpenModalDescription" as="template">
+      <Dialog as="div" @close="cancelarLista" 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"
+                >
+                  Descripción de la lista
+                </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 mb-2"
+                    id="descripción"
+                    type="text"
+                    placeholder="Breve descripción"
+                    v-model="descripcion"
+                  />
+                </div>
+
+                <div class="mt-4 justify-between flex">
+                  <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="cancelarLista"
+                  >
+                    Cancelar
+                  </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="guardarLista"
+                  >
+                    Aceptar
+                  </button>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
   </div>
-  <!-- Modal de nueva lista no puede estar vacía -->
-  <TransitionRoot appear :show="isOpenModalEmptyList" as="template">
-    <Dialog as="div" @close="isOpenModalEmptyList = 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">
-                  No puede estar el nombre de la lista vacía
-                </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="isOpenModalEmptyList = false">
-                  Aceptar
-                </button>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-  <!-- Modal de pedir descripción -->
-  <TransitionRoot appear :show="isOpenModalDescription" as="template">
-    <Dialog as="div" @close="cancelarLista" 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">
-                Descripción de la lista
-              </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 mb-2"
-                  id="descripción" type="text" placeholder="Breve descripción" v-model="descripcion" />
-              </div>
-
-              <div class="mt-4 justify-between flex">
-                <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="cancelarLista">
-                  Cancelar
-                </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="guardarLista">
-                  Aceptar
-                </button>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </div>
-    </Dialog>
-  </TransitionRoot>
 </template>
 
 <script setup>
@@ -211,9 +271,9 @@ const guardarLista = async () => {
     });
 };
 
-const cancelarLista = (() => {
-  isOpenModalDescription.value = false
-  descripcion.value = ""
-  newListaName.value = ""
-})
+const cancelarLista = () => {
+  isOpenModalDescription.value = false;
+  descripcion.value = "";
+  newListaName.value = "";
+};
 </script>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index e2e74c1..afc94b4 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,36 +1,64 @@
 <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>
@@ -39,31 +67,50 @@
   <!-- Modal de correo electrónico enviado -->
   <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">
+      <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-green-600">
+              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>
+                <p class="text-gray-500 text-md">Correo electrónico enviado</p>
               </div>
 
               <div class="mt-4">
-                <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="isOpenModalSend = false">
+                  @click="isOpenModalSend = false"
+                >
                   Aceptar
                 </button>
               </div>
@@ -75,20 +122,43 @@
   </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">
+    <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">
+        <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">
+              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">
@@ -98,9 +168,11 @@
               </div>
 
               <div class="mt-4">
-                <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="isOpenModalWrongPass = false">
+                  @click="isOpenModalWrongPass = false"
+                >
                   Aceptar
                 </button>
               </div>
@@ -112,26 +184,53 @@
   </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">
+    <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">
+        <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-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 mb-2"
-                  id="username" type="text" placeholder="email@example.com" v-model="email" />
+                  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.
@@ -139,14 +238,18 @@
               </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>
@@ -158,32 +261,55 @@
   </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">
+    <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">
+        <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">
+              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>
+                <p class="text-gray-500 text-md">Parámetros Incorrectos</p>
               </div>
 
               <div class="mt-4">
-                <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="isOpenModalWrongLogin = false">
+                  @click="isOpenModalWrongLogin = false"
+                >
                   Aceptar
                 </button>
               </div>
@@ -215,9 +341,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)
+let isOpenModalWrongPass = ref(false);
+let isOpenModalSend = ref(false);
+let isOpenModalWrongLogin = ref(false);
 onMounted(() => {
   pb = new PocketBase(storeUser.urlPocketbase);
 });
@@ -253,7 +379,7 @@ const requestPasswordReset = async () => {
     });
   isOpenModalRecuPContras.value = false;
   email.value = "";
-  password.value = ""
+  password.value = "";
 };
 
 const cerrar = () => {
diff --git a/src/views/RegistroView.vue b/src/views/RegistroView.vue
index 8c50ccc..567c2ef 100644
--- a/src/views/RegistroView.vue
+++ b/src/views/RegistroView.vue
@@ -1,43 +1,86 @@
 <template>
   <!--  https://www.creative-tim.com/twcomponents/component/simple-login-form-3 -->
-  <div class="min-h-screen flex items-center justify-center w-full dark:bg-emerald-700">
-    <div class="bg-white dark: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 dark:bg-emerald-700"
+  >
+    <div
+      class="bg-white dark: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">
         Crea una cuenta!
       </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="email" class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2">Nombre</label>
-          <input type="text" id="nombre" v-model="nombre"
+          <label
+            for="email"
+            class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2"
+            >Nombre</label
+          >
+          <input
+            type="text"
+            id="nombre"
+            v-model="nombre"
             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="Nombre completo" required />
+            placeholder="Nombre completo"
+            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 mb-4"
-            placeholder="Enter your password" required />
-          <label for="passwordRepeat" class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2">Repita su
-            contraseña</label>
-          <input type="password" id="passwordRepeat" v-model="passwordRepeat"
+            placeholder="Enter your password"
+            required
+          />
+          <label
+            for="passwordRepeat"
+            class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2"
+            >Repita su contraseña</label
+          >
+          <input
+            type="password"
+            id="passwordRepeat"
+            v-model="passwordRepeat"
             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 again" required />
+            placeholder="Enter your password again"
+            required
+          />
         </div>
         <div class="flex items-center justify-between mb-4">
           <div class="flex items-center"></div>
-          <router-link to="/"
-            class="text-xs text-indigo-500 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Logueate</router-link>
+          <router-link
+            to="/"
+            class="text-xs text-indigo-500 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            >Logueate</router-link
+          >
         </div>
-        <button @click="registro" 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="registro"
+          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"
+        >
           Registrar
         </button>
       </form>
@@ -45,20 +88,43 @@
   </div>
   <!-- modal no se ha podido registrar -->
   <TransitionRoot appear :show="isOpenModalWrongRegister" as="template">
-    <Dialog as="div" @close="isOpenModalWrongRegister = 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">
+    <Dialog
+      as="div"
+      @close="isOpenModalWrongRegister = 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-red-600">
+              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">
@@ -72,9 +138,11 @@
               </div>
 
               <div class="mt-4">
-                <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="isOpenModalWrongRegister = false">
+                  @click="isOpenModalWrongRegister = false"
+                >
                   Aceptar
                 </button>
               </div>
@@ -87,19 +155,38 @@
   <!-- Modal de registro correcto -->
   <TransitionRoot appear :show="isOpenModalOkRegister" as="template">
     <Dialog as="div" @close="cerrarModalOkRegister" 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">
+      <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-green-600">
+              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"
+              >
                 Aviso
               </DialogTitle>
               <div class="mt-2">
@@ -109,9 +196,11 @@
               </div>
 
               <div class="mt-4">
-                <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="cerrarModalOkRegister">
+                  @click="cerrarModalOkRegister"
+                >
                   Aceptar
                 </button>
               </div>
@@ -145,7 +234,7 @@ let password = ref("");
 let passwordRepeat = ref("");
 let nombre = ref("");
 let isOpenModalWrongRegister = ref(false);
-let isOpenModalOkRegister = ref(false)
+let isOpenModalOkRegister = ref(false);
 
 onMounted(() => {
   pb = new PocketBase(storeUser.urlPocketbase);
@@ -165,7 +254,7 @@ const registro = async () => {
     .create(newUser)
     .then(function (record) {
       console.log("New user created with ID: ", record.id);
-      isOpenModalOkRegister.value = true
+      isOpenModalOkRegister.value = true;
     })
     .catch(function (error) {
       isOpenModalWrongRegister.value = true;
@@ -175,10 +264,10 @@ const registro = async () => {
       nombre = ref("");
     });
 };
-const cerrarModalOkRegister = (() => {
-  console.log('cerrado modal')
-  router.push('/')
-})
+const cerrarModalOkRegister = () => {
+  console.log("cerrado modal");
+  router.push("/");
+};
 </script>
 <style>
 .ancho {