103 lines
2.6 KiB
Vue
103 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { useUserStore } from "@/stores/user";
|
|
import * as log from "loglevel";
|
|
import { reactive } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
|
|
const route = useRoute();
|
|
|
|
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">{{ $t("login.welcomeUk") }}</h1>
|
|
<p class="mb-8">
|
|
{{ $t("login.welcomeText") }}
|
|
</p>
|
|
<p>
|
|
<a
|
|
class="link"
|
|
:href="`/static/media/uk/${$t('login.guidelineFile')}`"
|
|
target="_blank"
|
|
>
|
|
{{ $t("login.guidelineText") }}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<div class="container-medium">
|
|
<h1 class="mb-8">{{ $t("login.login") }}</h1>
|
|
|
|
<form
|
|
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>
|
|
<div class="container-medium">
|
|
<h2 class="mb-8">{{ $t("footer.contact") }}</h2>
|
|
<address class="not-italic">
|
|
<p class="non-italic">
|
|
{{ $t("uk.contact.title") }}
|
|
<br />
|
|
{{ $t("uk.contact.team") }}
|
|
<br />
|
|
{{ $t("uk.contact.address") }}
|
|
<br />
|
|
<a class="link" href="mailto:uek-support@vbv-afa.ch">
|
|
uek-support@vbv-afa.ch
|
|
</a>
|
|
</p>
|
|
</address>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped></style>
|