From 001bd11cca877a39615a9b42f6a1d02721ac19d4 Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Wed, 12 Mar 2025 08:55:19 +0100
Subject: [PATCH] frontend: functionaliteit van idp werkt in login

---
 frontend/src/views/LoginPage.vue | 92 +++++++++++++++++++++++++++++---
 1 file changed, 86 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/LoginPage.vue b/frontend/src/views/LoginPage.vue
index 1cee79fb..a538a80c 100644
--- a/frontend/src/views/LoginPage.vue
+++ b/frontend/src/views/LoginPage.vue
@@ -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>