Select Git revision
Login.vue 2.47 KiB
<template>
<div class="login-container">
<div v-if="registrationSuccess" class="alert alert-success">
Regisztráció sikeres! Most már bejelentkezhetsz.
</div>
<div v-if="error" class="alert alert-error">
{{ error }}
</div>
<form @submit.prevent="login">
<div class="input-group">
<label for="username">Felhasználónév</label>
<input id="username" v-model="username" type="text" required autocomplete="username">
</div>
<div class="input-group">
<label for="password">Jelszó</label>
<input id="password" v-model="password" type="password" required autocomplete="current-password">
</div>
<button type="submit">Bejelentkezés</button>
</form>
<p>Még nem vagy regisztrálva?</p>
<router-link to="/register" tag="button" class="register-button">Regisztrálás</router-link>
</div>
</template>
<script>
import axios from '@/axiosConfig.js';
import {mapState} from "vuex";
export default {
name: 'Login',
computed: {
...mapState(['registrationSuccess']),
},
methods: {
async login() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
});
if (response.status === 200) {
this.$store.commit('setToken', response.data.token);
this.$router.push('/');
}
} catch (error) {
this.error = 'Helytelen felhasználónév vagy jelszó';
this.$store.commit('setRegistrationSuccess', false);
}
},
},
data() {
return {
username: '',
password: '',
error: '',
};
},
};
</script>
<style lang="postcss">
.login-container {
@apply flex flex-col items-center justify-center min-h-screen bg-blue-200;
}
.input-group {
@apply mb-4;
}
label {
@apply block mb-2 text-sm font-bold text-gray-700;
}
input {
@apply w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none;
}
button {
@apply px-4 py-2 mt-4 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none;
}
p {
@apply mt-10;
}
.register-button {
@apply px-4 py-2 mt-4 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none;
}
.alert-success {
@apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4;
}
.alert-error {
@apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4;
}
</style>