92 lines
2.5 KiB
Vue
92 lines
2.5 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { FloatingLabelInput, FormLayout, PasswordInput } from '@/components'
|
|
import { store } from '@/store.js';
|
|
import router from '@/router.js';
|
|
|
|
const username = ref("");
|
|
const password = ref("");
|
|
const stayLoggedIn = ref(false);
|
|
|
|
async function login(e) {
|
|
const success = await store.login({
|
|
username: username.value,
|
|
password: password.value
|
|
}, stayLoggedIn.value);
|
|
|
|
if (success) {
|
|
router.push("/subscriptions");
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<template>
|
|
<FormLayout>
|
|
<!-- Text über Texteingabe -->
|
|
<h1 class="h3 mb-3 fw-normal">
|
|
{{ $t("message.loginRequest") }}
|
|
</h1>
|
|
|
|
<form @submit.prevent="login">
|
|
<!-- Eingabefeld für Nutzername -->
|
|
<FloatingLabelInput
|
|
v-model="username"
|
|
:label="$t('form.username')"
|
|
/>
|
|
|
|
<!-- Eingabefeld für Passwort -->
|
|
<PasswordInput
|
|
v-model="password"
|
|
:label="$t('form.password')"
|
|
/>
|
|
|
|
<div class="row">
|
|
<!-- Angemeldet bleiben Checkbox -->
|
|
<div class="col-6">
|
|
<div class="checkbox mb-3">
|
|
<label>
|
|
<input
|
|
v-model="stayLoggedIn"
|
|
type="checkbox"
|
|
value="remember-me"
|
|
>
|
|
{{ $t("message.rememberMe") }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Passwort vergessen Link -->
|
|
<div class="col-6">
|
|
<router-link to="/forgotPassword">
|
|
{{ $t("message.forgotPassword") }}?
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Knopf um sich anzumelden -->
|
|
<button
|
|
type="submit"
|
|
class="w-100 btn btn-lg btn-primary"
|
|
>
|
|
{{ $t("message.login") }}
|
|
</button>
|
|
|
|
<!-- Registrieren Link -->
|
|
<p class="mt-1">
|
|
{{ $t("message.noAccountYet") }}?
|
|
<router-link to="/registration">
|
|
{{ $t("message.signUp") }}
|
|
</router-link>
|
|
</p>
|
|
</form>
|
|
|
|
<!-- Footer -->
|
|
<p class="mt-5 mb-3 text-muted">
|
|
© 2023
|
|
</p>
|
|
</FormLayout>
|
|
</template>
|
|
<style scoped>
|
|
</style>
|
|
|