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 ancho min-w-[300px]"
    >
      <h1 class="text-2xl font-bold text-center mb-4 dark:text-gray-200">
        Logueate!
      </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="
              visibleModalPassword = true;
              email = '';
            "
            >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
          >
        </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="visibleModalPassword = false">
    <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="visibleModalPassword = false" color="alternative">
          Decline
        </fwb-button>
        <fwb-button @click="requestPasswordReset" color="green">
          I accept
        </fwb-button>
      </div>
    </template>
  </fwb-modal>
  <!-- Modal de parametros incorrectos -->
  <fwb-modal
    v-if="visibleModalIncorrect"
    @close="visibleModalIncorrect = false"
  >
    <template #header>
      <div class="flex items-center text-lg text-red-700">Error</div>
    </template>
    <template #body> Parametros incorrectos </template>
  </fwb-modal>
  <!-- Modal de correo enviado -->
  <fwb-modal v-if="visibleModalSended" @close="visibleModalSended = false">
    <template #header>
      <div class="flex items-center text-lg text-green-700">Aviso</div>
    </template>
    <template #body> Correo enviado </template>
  </fwb-modal>
  <!-- Modal de correo invalido -->
  <fwb-modal v-if="visibleModalInvalid" @close="visibleModalInvalid = false">
    <template #header>
      <div class="flex items-center text-lg text-red-700">Aviso</div>
    </template>
    <template #body> No es un correo válido </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 visibleModalIncorrect = ref(false);
const visibleModalSended = ref(false);
const visibleModalInvalid = ref(false);

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

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 () {
      visibleModalIncorrect.value = true;
    });
};

const requestPasswordReset = async () => {
  const authData = await pb
    .collection("users")
    .requestPasswordReset(email.value)
    .then(function (result) {
      visibleModalSended.value = true;
    })
    .catch(function (error) {
      console.log(error);
      visibleModalInvalid.value = true;
    });
  visibleModalPassword.value = false;
  email.value = "";
};
</script>
<style>
.ancho {
  width: 30%;
}
</style>