From 51fd49cf975623447587e96e0061e8b7481f7981 Mon Sep 17 00:00:00 2001
From: Alessio Comi <alessio.comi@he-arc.ch>
Date: Sun, 14 Apr 2024 13:19:22 +0200
Subject: [PATCH] update LoginView to look like mockup

---
 .../src/views/Authentication/LoginView.vue    | 60 +++++++++++++++++--
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/Authentication/LoginView.vue b/frontend/src/views/Authentication/LoginView.vue
index 52e8ff7..bec2235 100644
--- a/frontend/src/views/Authentication/LoginView.vue
+++ b/frontend/src/views/Authentication/LoginView.vue
@@ -39,12 +39,17 @@ const login = async () => {
 <template>
     <div>
         <section class="login-form container">
-            <h1>Login</h1>
+            <div>
+              <h1 class="title">Login</h1>
+              <p class="info">Log in here</p>
+            </div>
             <p :class="{ 'success-message': validationMessage === 'Login successful.' }">{{ validationMessage }}</p>
-            <form @submit.prevent="login" @keyup.enter="login" style="text-align: center;">
-                <CustomInput label="Username" v-model="username" required />
-                <CustomInput label="Password" v-model="password" type="password" required/>
-                <div style="margin-top: 20px;">
+            <form @submit.prevent="login" @keyup.enter="login" class="form-wrapper">
+                <div class="box">
+                  <CustomInput label="Username" v-model="username" required />
+                  <CustomInput label="Password" v-model="password" type="password" required/>
+                </div>
+                <div class="button-wrapper">
                     <button type="submit" class="btn">Login</button>
                 </div>
             </form>
@@ -52,8 +57,51 @@ const login = async () => {
     </div>
 </template>
 
-<style>
+<style scoped>
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.title {
+    text-align: center;
+    margin-bottom: 1.3rem;
+}
+
+.info {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.form-wrapper {
+    width: 100%;
+    max-width: 100%;
+    padding: 0 1rem;
+    box-sizing: border-box;
+}
+
+.button-wrapper {
+    margin-top: 1.5rem;
+    display: flex;
+    justify-content: center;
+}
+
 .success-message {
     color: green;
 }
+
+@media (min-width: 576px) {
+    .form-wrapper {
+        max-width: 90%;
+    }
+}
+
+
+@media (min-width: 1024px) {
+    .form-wrapper {
+        max-width: 70%;
+    }
+}
+
 </style>