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">
+            &copy; 2023
+        </p>
+    </FormLayout>
+</template>
+<style scoped>
+</style>
+