Merge pull request #25 from SELab-2/login_frontend

Login frontend
SELab-2 · Mar 2, 2024 · 5617f9f · 5617f9f
2 parents 648ef38 + 3975abd
commit 5617f9f
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 8 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Apollo</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,23 +1,20 @@
 <template>
     <header>
-        <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
         <div class="wrapper">
-            <HelloWorld msg="You did it!" />
-
+            <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
+            <HelloWorld msg="You dit it!" />
             <nav>
                 <RouterLink to="/">Home</RouterLink>
                 <RouterLink to="/about">About</RouterLink>
+                <RouterLink to="/login">Login</RouterLink>
             </nav>
         </div>
     </header>
-
     <RouterView />
 </template>
 
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router';
-import HelloWorld from './components/HelloWorld.vue';
 </script>
 
 <style scoped>

diff --git a/frontend/src/assets/logo_white_ transparant.png b/frontend/src/assets/logo_white_ transparant.png
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import HomeView from '../views/HomeView.vue';
+import HomeView from '@/views/HomeView.vue';
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -17,6 +17,11 @@ const router = createRouter({
             // which is lazy-loaded when the route is visited.
             component: () => import('../views/AboutView.vue'),
         },
+        {
+            path: '/login',
+            name: 'Login',
+            component: () => import('../views/LoginView.vue'),
+        },
     ],
 });
 

diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
@@ -0,0 +1,69 @@
+<template>
+    <div class="login">
+        <img
+            alt="white logo"
+            class="logo"
+            src="@/assets/logo_white_ transparant.png"
+            height="100"
+        />
+        <h3>De officiële indienapplicatie van de Universiteit Gent</h3>
+        <p>Aanmelden</p>
+        <a class="login-button"> Apollo login </a>
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.login {
+    --primary-bg-color: #1a5276;
+    --secondary-bg-color: #797d7f;
+    --tertiary-bg-color: #a6acaf;
+    position: fixed;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 75vh;
+    background-color: var(--primary-bg-color);
+    transform: translateY(-50%);
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+}
+
+.logo {
+    margin-top: 30px;
+}
+
+.login h1,
+.login h2,
+.login h3 {
+    color: white;
+    margin-bottom: 100px;
+}
+
+.login p {
+    color: white;
+    font-size: 20px;
+    margin-bottom: 20px;
+}
+
+.login-button {
+    background-color: var(--secondary-bg-color);
+    color: white;
+    border: 2px solid white;
+    padding: 10px 20px;
+    font-size: 16px;
+    border-radius: 50px;
+    cursor: pointer;
+    transition:
+        background-color 0.3s,
+        color 0.3s;
+}
+
+.login-button:hover {
+    background-color: var(--tertiary-bg-color);
+    color: white;
+}
+</style>