72 lines
1.5 KiB
Vue
72 lines
1.5 KiB
Vue
<template>
|
|
<h1>Login</h1>
|
|
|
|
<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>
|
|
import AuthService from '@/services/auth';
|
|
|
|
export default {
|
|
name: 'DonConfiao',
|
|
|
|
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>
|