tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
Archived
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

Merge pull request #106 from SELab-2/feat/login-pagina-mergen

Browse source 
frontend: functionaliteit van idp werkt in login
This commit is contained in:
Laure Jablonski 2025-03-12 19:02:35 +01:00 • committed by GitHub
commit 4054607c3d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 86 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

92
frontend/src/views/LoginPage.vue
View file

@ -1,4 +1,5 @@
<script setup lang="ts">
import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
import auth from "@/services/auth/auth-service.ts";
function loginAsStudent() {
@ -16,11 +17,53 @@
<template>
<main>
<!-- TODO Placeholder implementation to test the login - replace by a more beautiful page later -->
<div v-if="!auth.isLoggedIn.value">
<p>You are currently not logged in.</p>
<v-btn @click="loginAsStudent">Login as student</v-btn>
<v-btn @click="loginAsTeacher">Login as teacher</v-btn>
<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>
@ -31,4 +74,41 @@
</main>
</template>
<style scoped></style>
<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>