pocketbase-vue-listas-frontend/src/views/LoginView.vue

<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 max-w-md"
    >
      <h1 class="text-2xl font-bold text-center mb-4 dark:text-gray-200">
        Bienvenido!
      </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"
            placeholder="Enter your password"
            required
          />
          <a
            href="#"
            class="text-xs text-gray-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            @click="showModal"
            >Olvidó la contraseña?</a
          >
        </div>
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center"></div>
          <a
            href="#"
            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
          >
        </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"
        >
          Login
        </button>
      </form>
    </div>
  </div>
<!-- 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>
    </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
          />
      <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.
      </p>
    </template>
    <template #footer>
      <div class="flex justify-between">
        <fwb-button @click="closeModal" color="alternative">
          Decline
        </fwb-button>
        <fwb-button @click="requestPasswordReset" color="green">
          I accept
        </fwb-button>
      </div>
    </template>
  </fwb-modal>

</template>

<script setup>
import { useUserStore } from "@/stores/user";
import { onMounted, ref } from "vue";
import PocketBase from "pocketbase";
import router from "@/router";
import { FwbButton, FwbModal } from 'flowbite-vue'


// access the `store` variable anywhere in the component ✨
const storeUser = useUserStore();

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");
});

const login = async () => {
  const authData = await pb
    .collection("users")
    .authWithPassword(email.value, password.value)
    .then(function (result) {
      console.log(pb.authStore.isValid);
      storeUser.user = pb.authStore.model;
      storeUser.isValid = pb.authStore.isValid;
      console.log(storeUser.user);
      if (storeUser.isValid) {
        router.push("listas");
      }
    })
    .catch(function () {
      alert("Parámetros incorrectos");
    });
};
/**
 * Muestra el modal de recuperaci n de contrase a
 */
 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()
      alert("Correo enviado");
    })
    .catch(function () {
      alert("No existe el correo");
    });
};
</script>