diff options
| author | Orangerot <purple@orangerot.dev> | 2024-06-19 00:14:49 +0200 |
|---|---|---|
| committer | Orangerot <purple@orangerot.dev> | 2024-06-27 12:11:14 +0200 |
| commit | 5b8851b6c268d0e93c158908fbfae9f8473db5ff (patch) | |
| tree | 7010eb85d86fa2da06ea4ffbcdb01a685d502ae8 /pse-dashboard/src/views/LoginView.vue | |
Diffstat (limited to 'pse-dashboard/src/views/LoginView.vue')
| -rw-r--r-- | pse-dashboard/src/views/LoginView.vue | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/pse-dashboard/src/views/LoginView.vue b/pse-dashboard/src/views/LoginView.vue new file mode 100644 index 0000000..303db3a --- /dev/null +++ b/pse-dashboard/src/views/LoginView.vue @@ -0,0 +1,91 @@ +<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> + |