login terminado

src/pages/LoginPage.vue

@@ -5,7 +5,6 @@
     <div class="column">
       <div class="row">
         <h5 class="text-h5 text-white q-my-md">Mis listas</h5>
-        <h5>{{ usuarios }}</h5>
       </div>
       <div class="row">
         <q-card square bordered class="q-pa-lg shadow-1">
@@ -18,8 +17,11 @@
                 v-model="email"
                 type="email"
                 label="email"
-                error-message="No coinciden"
-                :error="comprobarEmailVerified"
+                :rules="[
+                  (val) =>
+                    (val != null && val.length >= 7) || 'Mínimo 7 caracteres',
+                  () => comprobarEmailVerified || msgError,
+                ]"
               />
               <q-input
                 square
@@ -28,6 +30,11 @@
                 v-model="password"
                 type="password"
                 label="password"
+                :rules="[
+                  (val) =>
+                    (val != null && val.trim().length >= 8) ||
+                    'Mínimo 8 caracteres',
+                ]"
               />
             </q-form>
           </q-card-section>
@@ -39,6 +46,7 @@
               class="full-width"
               label="Login"
               @click="login()"
+              :disable="btnLoginDisable()"
             />
           </q-card-actions>
           <q-card-section class="text-center q-pa-none">
@@ -58,6 +66,9 @@
 import { ref, computed } from "vue";
 import { useListaStore } from "../stores/lista.js";
 import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
 
 const listaStore = useListaStore();
 const $router = useRouter();
@@ -65,9 +76,21 @@ const $router = useRouter();
 const email = ref("");
 const password = ref("");
 const usuarios = ref([]);
+const msgError = ref("");
 
 const comprobarEmailVerified = computed(() => {
-  //Aquí se comprueba si el usuario existe en la BD, y si está verificado
+  const existe = usuarios.value?.filter((item) => item.email == email.value);
+  const verificado = existe.filter((item) => item.verified == true);
+  if (existe.length == 1 && verificado.length == 0) {
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    msgError.value = "Falta verificar el correo";
+    return false;
+  }
+  if (existe.length == 0) {
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    msgError.value = "El email no existe";
+    return false;
+  }
   return true;
 });
 const recibeDatos = () => {
@@ -75,7 +98,6 @@ const recibeDatos = () => {
     usuarios.value = item;
   });
 };
-//Falta que no pueda loguearse si no está verificado
 const login = () => {
   listaStore
     .login(email.value, password.value)
@@ -83,9 +105,23 @@ const login = () => {
       $router.push("/");
     })
     .catch((e) => {
-      console.log("Fallo de autenticación");
+      $q.dialog({
+        title: "Aviso",
+        message: "El correo o la contraseña son erroneos",
+      });
     });
 };
+
+const btnLoginDisable = () => {
+  if (
+    !comprobarEmailVerified.value ||
+    password.value == null ||
+    password.value.trim().length < 8
+  ) {
+    return true;
+  }
+  return false;
+};
 </script>
 
 <style>