page registro

src/router/index.js

@@ -10,7 +10,11 @@ const router = createRouter({
       name: 'Login',
       component: () => import('../views/LoginView.vue')
     },
-    
+    {
+      path: '/registro',
+      name: 'Registro',
+      component: () => import('../views/RegistroView.vue')
+    },
     {
       path: '/listas',
       name: 'listas',

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>

src/views/RegistroView.vue

@@ -0,0 +1,101 @@
+<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-gray-950"
+  >
+    <div
+      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">
+        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-300 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
+          />
+        </div>
+        <div class="mb-4">
+          <label
+            for="password"
+            class="block text-sm font-medium text-gray-700 dark:text-gray-300 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-300 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
+          />
+          
+        </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
+          >
+        </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"
+        >
+          Registrar
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useUserStore } from "@/stores/user";
+import { onMounted, ref } from "vue";
+import PocketBase from "pocketbase";
+import router from "@/router";
+
+// access the `store` variable anywhere in the component ✨
+const storeUser = useUserStore();
+
+let pb = null;
+let email = ref("");
+let password = ref("");
+let passwordRepeat = ref("");
+
+onMounted(() => {
+  pb = new PocketBase("http://127.0.0.1:8090");
+});
+
+
+</script>
+<style>
+.ancho {
+  width: 30%;
+}
+</style>