#28 fix(login): handle bad credentials.

src/components/Login.vue

@@ -1,26 +1,71 @@
 <template>
   <h1>Login</h1>
-  <v-form @submit.prevent="login">
-    <v-text-field v-model="username" label="Usuario" required />
-    <v-text-field v-model="password" label="Contraseña" type="password" required />
-    <v-btn type="submit">Entrar</v-btn>
-    <v-alert v-if="error" type="error">{{ error }}</v-alert>
+
+  <v-form ref="loginForm" @submit.prevent="onSubmit">
+    <v-text-field
+      v-model="username"
+      label="Usuario"
+      :rules="[requiredRule]"
+      required
+    />
+    <v-text-field
+      v-model="password"
+      label="Contraseña"
+      type="password"
+      :rules="[requiredRule]"
+      required
+    />
+
+    <v-btn type="submit" color="primary">Entrar</v-btn>
+
+    <v-alert v-if="error" type="error" class="mt-2">{{ error }}</v-alert>
   </v-form>
 </template>
-<script setup>
-  import { ref } from 'vue';
+
+<script>
   import AuthService from '@/services/auth';
-  import { inject } from 'vue';
 
-  const username = ref('');
-  const password = ref('');
-  const error = ref('');
+  export default {
+    name: 'DonConfiao',
 
-  async function login() {
-    try {
-      await AuthService.login({ username: username.value, password: password.value });
-    } catch (e) {
-      error.value = e.message;
-    }
-  }
+    data() {
+      return {
+        username: '',
+        password: '',
+        error: '',
+      };
+    },
+
+    methods: {
+      requiredRule(value) {
+        return !!value || 'Este campo es obligatorio';
+      },
+
+      async onSubmit() {
+        this.error = '';
+
+        const form = this.$refs.loginForm;
+        const isValid = await form.validate();
+
+        if (!isValid) return;
+
+        if (!this.username || !this.password) {
+          this.error = 'Usuario y contraseña son obligatorios';
+          return;
+        }
+
+        try {
+          await AuthService.login({
+            username: this.username,
+            password: this.password,
+          });
+          this.$router.push({ path: '/' });
+        } catch (e) {
+          // Si el servicio devuelve un error (ej. 401) lo convertimos en excepción
+          const msg = e?.response?.data?.message ?? e.message;
+          this.error = msg ?? 'Error al iniciar sesión';
+        }
+      },
+    },
+  };
 </script>

src/services/auth.js

@@ -2,19 +2,34 @@ class AuthService {
   static TOKEN_KEY = 'access_token';
   static REFRESH_KEY = 'refresh_token';
 
-  static login(credentials) {
+  static async login(credentials) {
     const url = `${import.meta.env.VITE_DJANGO_BASE_URL}/api/token/`;
-    return fetch(url, {
+
+    const resp = await fetch(url, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(credentials),
-    })
-      .then(r => r.json())
-      .then(data => {
-        localStorage.setItem(this.TOKEN_KEY, data.access);
-        localStorage.setItem(this.REFRESH_KEY, data.refresh);
-        return data;
-      });
+    });
+
+    if (!resp.ok) {
+      let errMsg = resp.statusText;
+      try {
+        const errData = await resp.json();
+        errMsg = errData?.detail ?? errData?.message ?? errMsg;
+      } catch (_) {
+
+      }
+      throw new Error(errMsg);
+    }
+
+    const data = await resp.json();
+
+    if (data.access && data.refresh) {
+      localStorage.setItem(this.TOKEN_KEY, data.access);
+      localStorage.setItem(this.REFRESH_KEY, data.refresh);
+    }
+
+    return data;
   }
 
   static getAccessToken() {
@@ -35,6 +50,12 @@ class AuthService {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ refresh }),
     });
+
+    if (!resp.ok) {
+      const errData = await resp.json().catch(() => ({}));
+      throw new Error(errData?.detail ?? resp.statusText);
+    }
+
     const data = await resp.json();
     localStorage.setItem(this.TOKEN_KEY, data.access);
     return data.access;