page registro

src/views/LoginView.vue

@@ -4,10 +4,10 @@
     class="min-h-screen flex items-center justify-center w-full dark:bg-gray-950"
   >
     <div
-      class="bg-white dark:bg-gray-900 shadow-md rounded-lg px-8 py-6 max-w-md"
+      class="bg-white dark:bg-gray-900 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-200">
-        Bienvenido!
+        Logueate!
       </h1>
       <form action="#">
         <div class="mb-4">
@@ -48,10 +48,10 @@
         </div>
         <div class="flex items-center justify-between mb-4">
           <div class="flex items-center"></div>
-          <a
-            href="#"
+          <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</a
+            >Crear cuenta</router-link
           >
         </div>
         <button
@@ -64,24 +64,23 @@
       </form>
     </div>
   </div>
-<!-- Modal de recuperar contraseña -->
-<fwb-modal v-if="visibleModalPassword" @close="closeModal">
+  <!-- Modal de recuperar contraseña -->
+  <fwb-modal v-if="visibleModalPassword" @close="closeModal">
     <template #header>
-      <div class="flex items-center text-lg">
-        Recuperar contraseña
-      </div>
+      <div class="flex items-center text-lg">Recuperar contraseña</div>
     </template>
     <template #body>
       <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
-          />
+        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
+      />
       <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-        Si el email existe en nuestra base de datos se le mandará un correo con un enlace donde podrá cambiar la contraseña.
+        Si el email existe en nuestra base de datos se le mandará un correo con
+        un enlace donde podrá cambiar la contraseña.
       </p>
     </template>
     <template #footer>
@@ -95,7 +94,6 @@
       </div>
     </template>
   </fwb-modal>
-
 </template>
 
 <script setup>
@@ -103,8 +101,7 @@ import { useUserStore } from "@/stores/user";
 import { onMounted, ref } from "vue";
 import PocketBase from "pocketbase";
 import router from "@/router";
-import { FwbButton, FwbModal } from 'flowbite-vue'
-
+import { FwbButton, FwbModal } from "flowbite-vue";
 
 // access the `store` variable anywhere in the component ✨
 const storeUser = useUserStore();
@@ -113,7 +110,6 @@ let pb = null;
 let email = ref("p40store@gmail.com");
 let password = ref("p40store");
 const visibleModalPassword = ref(false);
-const alertaCorreoEnviado = ref(false);
 
 onMounted(() => {
   pb = new PocketBase("http://127.0.0.1:8090");
@@ -139,20 +135,20 @@ const login = async () => {
 /**
  * Muestra el modal de recuperaci n de contrase a
  */
- const closeModal = () => {
-  visibleModalPassword.value = false
-}
-const showModal = () =>{
-  email=ref("")
-  visibleModalPassword.value = true
-}
+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()
+      closeModal();
       alert("Correo enviado");
     })
     .catch(function () {
@@ -160,3 +156,8 @@ const requestPasswordReset = async () => {
     });
 };
 </script>
+<style>
+.ancho {
+  width: 30%;
+}
+</style>