99 lines
2.4 KiB
Vue
99 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { useUserStore } from "@/stores/user";
|
|
import type { LoginMethod } from "@/types";
|
|
import * as log from "loglevel";
|
|
import { reactive } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
|
|
const route = useRoute();
|
|
|
|
defineProps<{
|
|
loginMethod: LoginMethod;
|
|
}>();
|
|
|
|
log.debug("LoginView.vue created");
|
|
log.debug(route.query);
|
|
|
|
const state = reactive({
|
|
username: "",
|
|
password: "",
|
|
});
|
|
|
|
const userStore = useUserStore();
|
|
</script>
|
|
|
|
<template>
|
|
<main class="bg-gray-200 lg:px-12 lg:py-12">
|
|
<div class="container-medium">
|
|
<h1 class="mb-8">Login</h1>
|
|
<h2>{{ $t("welcome") }}</h2>
|
|
|
|
<form
|
|
v-if="loginMethod === 'local'"
|
|
class="bg-white p-4 lg:p-8"
|
|
@submit.prevent="
|
|
userStore.handleLogin(
|
|
state.username,
|
|
state.password,
|
|
route.query.next as string
|
|
)
|
|
"
|
|
>
|
|
<div class="mb-4">
|
|
<label class="mb-1 block" for="email">{{ $t("Benutzername") }}</label>
|
|
<input
|
|
id="username"
|
|
v-model="state.username"
|
|
type="text"
|
|
name="username"
|
|
autocomplete="username"
|
|
class="mt-1 block w-96 max-w-full border px-3 py-2"
|
|
/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="mb-1 block" for="password">{{ $t("Passwort") }}</label>
|
|
<input
|
|
id="password"
|
|
v-model="state.password"
|
|
type="password"
|
|
name="password"
|
|
autocomplete="current-password"
|
|
class="mt-1 block w-96 max-w-full border px-3 py-2"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<input
|
|
data-cy="login-button"
|
|
type="submit"
|
|
value="Login"
|
|
class="btn-primary"
|
|
/>
|
|
</div>
|
|
</form>
|
|
|
|
<div v-if="loginMethod === 'sso'" class="bg-white p-4 lg:p-8">
|
|
<p>
|
|
{{
|
|
$t(
|
|
"Klicke auf den Button, um dich über SSO anzumelden oder zu registrieren."
|
|
)
|
|
}}
|
|
</p>
|
|
<p class="btn-primary mt-8">
|
|
<a :href="`/sso/login/?lang=${userStore.language}`">
|
|
{{ $t("SSO Login/Registration") }}
|
|
</a>
|
|
</p>
|
|
<p class="mt-8">
|
|
<a href="/login-local">
|
|
{{ $t("Demo Login") }}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped></style>
|