registro completado

2024-09-09 19:01:33 +02:00
parent 060bb8385e
commit 13730eecbc
2 changed files with 156 additions and 44 deletions
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,62 +1,66 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import { useUserStore } from '@/stores/user'
-
+import { createRouter, createWebHistory } from "vue-router";
+import { useUserStore } from "@/stores/user";

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
-      path: '/',
-      name: 'Login',
-      component: () => import('../views/LoginView.vue')
+      path: "/",
+      name: "Login",
+      component: () => import("../views/LoginView.vue"),
    },
    {
-      path: '/registro',
-      name: 'Registro',
-      component: () => import('../views/RegistroView.vue')
+      path: "/registro",
+      name: "Registro",
+      component: () => import("../views/RegistroView.vue"),
    },
    {
-      path: '/listas',
-      name: 'listas',
+      path: "/listas",
+      name: "listas",
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/ListasView.vue'),
+      component: () => import("../views/ListasView.vue"),
      meta: { requiresAuth: true },
    },
    {
-      path: '/lista/:id',
-      name: 'lista',
-      component: () => import('../components/Lista.vue'),
-      meta: { requiresAuth: true }
+      path: "/lista/:id",
+      name: "lista",
+      component: () => import("../components/Lista.vue"),
+      meta: { requiresAuth: true },
    },
    {
-      path: '/:pathMatch(.*)*',
-      name: 'NotFound',
-      component: () => import('../components/404.vue')
+      path: "/:pathMatch(.*)*",
+      name: "NotFound",
+      component: () => import("../components/404.vue"),
    },
-  ]
-})
+  ],
+});

 router.beforeEach((to, from) => {
  // ✅ This will work because the router starts its navigation after
  // the router is installed and pinia will be installed too
-  const storeUser = useUserStore()
+  const storeUser = useUserStore();
  if (!from.meta.requiresAuth && to.meta.requiresAuth && !storeUser.isValid) {
-    //console.log('caso 1', from.name)
+    console.log("caso 1", from.name);
    if (from.name) {
-      //console.log('1a')
-      return false
+      console.log("1a");
+      return false;
    } else {
-      //console.log('1b')
-      return '/'
+      console.log("1b");
+      return "/";
    }
  }
-  if (to.fullPath == '/') {
-    //console.log('caso 2')
-    storeUser.user = ''
-    storeUser.isValid = false
-  }
-})
+  if (to.fullPath == "/") {
+    if (from.fullPath!="/registro") {
+      console.log("caso 2a");
+      storeUser.user = "";
+      storeUser.isValid = false;
+    } else {
+      console.log('caso 2b')
+    }

-export default router
+  }
+});
+
+export default router;
--- a/src/views/RegistroView.vue
+++ b/src/views/RegistroView.vue
@@ -1,19 +1,19 @@
 <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"
+    class="min-h-screen flex items-center justify-center w-full dark:bg-emerald-700"
  >
    <div
-      class="bg-white dark:bg-gray-900 shadow-md rounded-lg px-8 py-6 ancho min-w-[300px]"
+      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-200">
+      <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-300 mb-2"
+            class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2"
            >Correo electrónico</label
          >
          <input
@@ -25,10 +25,25 @@
            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"
+            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
+          />
+        </div>
        <div class="mb-4">
          <label
            for="password"
-            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+            class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2"
            >Contraseña</label
          >
          <input
@@ -41,7 +56,7 @@
          />
          <label
            for="passwordRepeat"
-            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+            class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2"
            >Repita su contraseña</label
          >
          <input
@@ -52,7 +67,6 @@
            placeholder="Enter your password again"
            required
          />
-          
        </div>
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center"></div>
@@ -63,7 +77,7 @@
          >
        </div>
        <button
-          @click="login"
+          @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"
        >
@@ -72,6 +86,72 @@
      </form>
    </div>
  </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"
+      >
+        <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">
+                  {{
+                    password === passwordRepeat
+                      ? "Ha sido imposible crear al nuevo usuario!!"
+                      : "Las contraseñas no coinciden"
+                  }}
+                </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="isOpenModalWrongRegister = false"
+                >
+                  Aceptar
+                </button>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
 </template>

 <script setup>
@@ -79,6 +159,13 @@ import { useUserStore } from "@/stores/user";
 import { onMounted, ref } from "vue";
 import PocketBase from "pocketbase";
 import router from "@/router";
+import {
+  TransitionRoot,
+  TransitionChild,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/vue";

 // access the `store` variable anywhere in the component ✨
 const storeUser = useUserStore();
@@ -87,15 +174,36 @@ let pb = null;
 let email = ref("");
 let password = ref("");
 let passwordRepeat = ref("");
+let nombre = ref("");
+let isOpenModalWrongRegister = ref(false);

 onMounted(() => {
  pb = new PocketBase(storeUser.urlPocketbase);
 });

-
+const registro = async () => {
+  const newUser = {
+    username: email.value.split("@")[0],
+    email: email.value,
+    emailVisibility: true,
+    password: password.value,
+    passwordConfirm: passwordRepeat.value,
+    name: nombre.value,
+  };
+  const record = await pb
+    .collection("users")
+    .create(newUser)
+    .then(function (record) {
+      console.log("New user created with ID: ", record.id);
+      router.push("/");
+    })
+    .catch(function (error) {
+      isOpenModalWrongRegister.value = true;
+    });
+};
 </script>
 <style>
 .ancho {
  width: 30%;
 }
-</style>
+</style>