Merge pull request #121 from HE-Arc/96-finishing-page-add-question

96 finishing frontend page addquestion, login, logout
HE-Arc · Apr 14, 2024 · c77f03b · c77f03b
2 parents b8b5a1b + 48b21a4
commit c77f03b
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 32 deletions.
diff --git 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/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
@@ -50,26 +50,57 @@ 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, .info {
+    text-align: center;
+}
+
 .success-message {
     color: green;
 }
-</style>
+
+@media (min-width: 576px) {
+    .form-wrapper {
+        max-width: 90%;
+    }
+}
+
+
+@media (min-width: 1024px) {
+    .form-wrapper {
+        max-width: 70%;
+    }
+}
+
+</style>
+
diff --git a/frontend/src/views/Authentication/LoginView.vue b/frontend/src/views/Authentication/LoginView.vue
@@ -39,21 +39,48 @@ 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>
         </section>
     </div>
 </template>
 
-<style>
+<style scoped>
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.title, .info {
+    text-align: center;
+}
+
 .success-message {
     color: green;
 }
+
+@media (min-width: 576px) {
+    .form-wrapper {
+        max-width: 90%;
+    }
+}
+
+@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
@@ -12,6 +12,7 @@ const clearForm = () => {
     username.value = '';
     password.value = '';
     confirmPassword.value = '';
+    validationMessage.value = '';
 };
 
 const register = async () => {
@@ -39,24 +40,50 @@ 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>
         </section>
     </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>