115 lines
3.1 KiB
Vue
115 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
|
|
import auth from "@/services/auth/auth-service.ts";
|
|
|
|
async function loginAsStudent(): Promise<void> {
|
|
await auth.loginAs("student");
|
|
}
|
|
|
|
async function loginAsTeacher(): Promise<void> {
|
|
await auth.loginAs("teacher");
|
|
}
|
|
|
|
async function performLogout(): Promise<void> {
|
|
await auth.logout();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<div
|
|
class="login_background"
|
|
v-if="!auth.isLoggedIn.value"
|
|
>
|
|
<ul>
|
|
<img
|
|
class="dwengo_logo"
|
|
:src="dwengoLogo"
|
|
/>
|
|
<div class="container">
|
|
<ul>
|
|
<li class="title">login</li>
|
|
<li>
|
|
<v-btn
|
|
density="comfortable"
|
|
size="large"
|
|
class="button"
|
|
@click="loginAsTeacher"
|
|
>
|
|
teacher
|
|
<v-icon
|
|
end
|
|
size="x-large"
|
|
>
|
|
mdi-menu-right
|
|
</v-icon>
|
|
</v-btn>
|
|
</li>
|
|
<li>
|
|
<v-btn
|
|
density="comfortable"
|
|
size="large"
|
|
class="button"
|
|
@click="loginAsStudent"
|
|
>
|
|
student
|
|
<v-icon
|
|
end
|
|
size="x-large"
|
|
>
|
|
mdi-menu-right
|
|
</v-icon>
|
|
</v-btn>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
<div v-if="auth.isLoggedIn.value">
|
|
<p>
|
|
You are currently logged in as {{ auth.authState.user!.profile.name }} ({{ auth.authState.activeRole }})
|
|
</p>
|
|
<v-btn @click="performLogout">Logout</v-btn>
|
|
<v-btn to="/user">home</v-btn>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.login_background {
|
|
background-color: #f6faf2;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
img {
|
|
width: 200px;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
text-align: center;
|
|
}
|
|
|
|
li {
|
|
padding: 10px;
|
|
}
|
|
|
|
.button {
|
|
background-color: #f6faf2;
|
|
}
|
|
|
|
.container {
|
|
background-color: white;
|
|
width: 300px;
|
|
height: 400px;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: xx-large;
|
|
text-transform: uppercase;
|
|
}
|
|
</style>
|