From 573341acf0974bfd0f9976fecea29480c472e3c4 Mon Sep 17 00:00:00 2001
From: Alessio Comi <alessio.comi@he-arc.ch>
Date: Sun, 14 Apr 2024 12:34:31 +0200
Subject: [PATCH 1/3] updating style from add question too look more like
 mockup

---
 frontend/src/components/CustomInput.vue |  6 +-
 frontend/src/views/AddQuestionView.vue  | 78 ++++++++++++++++++++-----
 2 files changed, 67 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/CustomInput.vue b/frontend/src/components/CustomInput.vue
index d90f179..f622288 100644
--- a/frontend/src/components/CustomInput.vue
+++ b/frontend/src/components/CustomInput.vue
@@ -45,14 +45,14 @@ const onChange = (event) => {
 <template>
     <div class="input-container">
         <label v-if="hasLabel" :for="name">{{ label }}<span v-if="props.required">*</span></label>
-        <input :type="type" :id="name" :name="name" :value="modelValue" @input="onInput" @change="onChange" maxlength="25" :required="required"/>
+        <input :type="type" :id="name" :name="name" :value="modelValue" @input="onInput" @change="onChange" maxlength="250" :required="required"/>
     </div>
 </template>
 
 <style scoped>
-input 
+input
 {
-    display: block; 
+    display: block;
     width: 100%;
     padding: 0.5rem 1rem;
     border-radius: 2rem;
diff --git a/frontend/src/views/AddQuestionView.vue b/frontend/src/views/AddQuestionView.vue
index 1df8b24..22e74b2 100644
--- a/frontend/src/views/AddQuestionView.vue
+++ b/frontend/src/views/AddQuestionView.vue
@@ -50,26 +50,76 @@ const submitForm = () => {
 };
 </script>
 
-
 <template>
-    <section class="add-question container">
-        <h1>Add your question on this page</h1>
-        <!--For mid eval only-->
+    <section class="add-question container form-wrapper">
+        <div>
+            <h1 class="title">Add your question</h1>
+            <p class="info">Help us become the best quiz game ever by adding your amazing new question!</p>
+        </div>
         <p :class="{ 'success-message': validationMessage === 'Question saved successfully.' }">{{ validationMessage }}</p>
-        <form @submit.prevent="submitForm">
-            <CustomInput label="Question" v-model="question" required />
-            <CustomInput label="Correct Answer" v-model="correctAnswer" required />
-            <CustomInput label="Wrong Answer 1" v-model="wrongAnswer1" required />
-            <CustomInput label="Wrong Answer 2" v-model="wrongAnswer2" required/>
-            <CustomInput label="Wrong Answer 3" v-model="wrongAnswer3" required/>
-            <button type="submit" class="btn">Submit</button>
+        <form @submit.prevent="submitForm" class="form-wrapper">
+            <div class="box">
+                <CustomInput label="Question" v-model="question" required />
+            </div>
+            <div class="box">
+                <CustomInput label="Correct Answer" v-model="correctAnswer" required />
+                <CustomInput label="Wrong Answer 1" v-model="wrongAnswer1" required />
+                <CustomInput label="Wrong Answer 2" v-model="wrongAnswer2" required />
+                <CustomInput label="Wrong Answer 3" v-model="wrongAnswer3" required />
+            </div>
+            <div class="button-wrapper">
+                <button type="submit" class="btn">Submit</button>
+            </div>
         </form>
     </section>
 </template>
 
-// For mid eval only
-<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;
 }
-</style>
\ No newline at end of file
+
+@media (min-width: 576px) {
+    .form-wrapper {
+        max-width: 90%;
+    }
+}
+
+
+@media (min-width: 1024px) {
+    .form-wrapper {
+        max-width: 70%;
+    }
+}
+
+</style>
+

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 2/3] 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>

From 48b21a4256044850baf69138e878cbcae03f9e64 Mon Sep 17 00:00:00 2001
From: Alessio Comi <alessio.comi@he-arc.ch>
Date: Sun, 14 Apr 2024 14:28:31 +0200
Subject: [PATCH 3/3] grouping style into main.css and doing signup

---
 frontend/src/assets/main.css                  | 14 +++++-
 frontend/src/views/AddQuestionView.vue        | 21 +--------
 .../src/views/Authentication/LoginView.vue    | 23 +---------
 .../src/views/Authentication/SignUpView.vue   | 43 +++++++++++++++----
 4 files changed, 50 insertions(+), 51 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 4dadf12..d0e340a 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -41,7 +41,6 @@ h4
   text-decoration: none;
 }
 
-
 .info {
   margin: 1.5rem 0 1rem 0;
 }
@@ -70,6 +69,19 @@ h4
   padding: 0 1rem;
 }
 
+.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;
+}
+
 @media (hover: hover) {
   a:hover {
     text-decoration: underline;
diff --git a/frontend/src/views/AddQuestionView.vue b/frontend/src/views/AddQuestionView.vue
index 22e74b2..d57f5a6 100644
--- a/frontend/src/views/AddQuestionView.vue
+++ b/frontend/src/views/AddQuestionView.vue
@@ -81,27 +81,8 @@ const submitForm = () => {
     align-items: center;
 }
 
-.title {
+.title, .info {
     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 {
diff --git a/frontend/src/views/Authentication/LoginView.vue b/frontend/src/views/Authentication/LoginView.vue
index bec2235..4768daa 100644
--- a/frontend/src/views/Authentication/LoginView.vue
+++ b/frontend/src/views/Authentication/LoginView.vue
@@ -64,27 +64,8 @@ const login = async () => {
     align-items: center;
 }
 
-.title {
+.title, .info {
     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 {
@@ -97,11 +78,9 @@ const login = async () => {
     }
 }
 
-
 @media (min-width: 1024px) {
     .form-wrapper {
         max-width: 70%;
     }
 }
-
 </style>
diff --git a/frontend/src/views/Authentication/SignUpView.vue b/frontend/src/views/Authentication/SignUpView.vue
index 786fad0..9f65ef3 100644
--- a/frontend/src/views/Authentication/SignUpView.vue
+++ b/frontend/src/views/Authentication/SignUpView.vue
@@ -12,6 +12,7 @@ const clearForm = () => {
     username.value = '';
     password.value = '';
     confirmPassword.value = '';
+    validationMessage.value = '';
 };
 
 const register = async () => {
@@ -39,14 +40,19 @@ const register = async () => {
 
 <template>
     <div>
-        <section class="register-form container">
-            <h1>Register</h1>
+        <section class="signUp-form container">
+            <div>
+                <h1 class="title">Register</h1>
+                <p class="info">Create a new account</p>
+            </div>
             <p :class="{ 'success-message': validationMessage === 'Registration successful.' }">{{ validationMessage }}</p>
-            <form @submit.prevent="signUp" @keyup.enter="signUp" style="text-align: center;">
-                <CustomInput label="Username" v-model="username" required />
-                <CustomInput label="Password" v-model="password" type="password" required />
-                <CustomInput label="Confirm Password" v-model="confirmPassword" type="password" required />
-                <div style="margin-top: 20px;">
+            <form @submit.prevent="register" @keyup.enter="register" class="form-wrapper">
+                <div class="box">
+                    <CustomInput label="Username" v-model="username" required />
+                    <CustomInput label="Password" v-model="password" type="password" required />
+                    <CustomInput label="Confirm Password" v-model="confirmPassword" type="password" required />
+                </div>
+                <div class="button-wrapper">
                     <button type="submit" class="btn">Register</button>
                 </div>
             </form>
@@ -54,9 +60,30 @@ const register = async () => {
     </div>
 </template>
 
+<style scoped>
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.title, .info {
+    text-align: center;
+}
 
-<style>
 .success-message {
     color: green;
 }
+
+@media (min-width: 576px) {
+    .form-wrapper {
+        max-width: 90%;
+    }
+}
+
+@media (min-width: 1024px) {
+    .form-wrapper {
+        max-width: 70%;
+    }
+}
 </style>