From bebf53e5eb26699c715ed23de4fbfbd014d6295b Mon Sep 17 00:00:00 2001
From: janis <jahu04@outlook.com>
Date: Mon, 4 Sep 2023 16:00:54 +0200
Subject: [PATCH] mobile optimize user signup

---
 src/server/backend/db/data/db.json            |   2 +-
 src/webapp/main/src/views/user/SignupView.vue | 117 +++++++++++-------
 2 files changed, 70 insertions(+), 49 deletions(-)

diff --git a/src/server/backend/db/data/db.json b/src/server/backend/db/data/db.json
index a35a694..0b568e1 100644
--- a/src/server/backend/db/data/db.json
+++ b/src/server/backend/db/data/db.json
@@ -1 +1 @@
-{"db":{"libreevent_temp":{},"libreevent_admin":{"2":{"role":"eventManager","username":"janis","email":"info@janishutz.com","pass":"$2b$10$yjTZTt0k1bvmz.WOm.81l.vFnd6vXLVhFvNQ2b/6EvRa07ktG2Fo6","two_fa":"enhanced"}},"libreevent_orders":{},"libreevent_users":{}},"index":{"libreevent_temp":0,"libreevent_admin":2,"libreevent_orders":0,"libreevent_users":0}}
\ No newline at end of file
+{"db":{"libreevent_temp":{},"libreevent_admin":{},"libreevent_orders":{},"libreevent_users":{}},"index":{"libreevent_temp":0,"libreevent_admin":0,"libreevent_orders":0,"libreevent_users":0}}
\ No newline at end of file
diff --git a/src/webapp/main/src/views/user/SignupView.vue b/src/webapp/main/src/views/user/SignupView.vue
index f6de975..e522137 100644
--- a/src/webapp/main/src/views/user/SignupView.vue
+++ b/src/webapp/main/src/views/user/SignupView.vue
@@ -11,49 +11,40 @@
     <div class="login">
         <div class="login-app">
             <h1>Sign up</h1>
-            <form>
-                <table>
-                    <tr>
-                        <td>
-                            <label for="mail">Email</label><br>
-                            <input type="email" v-model="formData[ 'mail' ]" name="mail" id="mail" required @keyup="emailLiveChecker()"><br><br>
-                        </td>
-                        <td>
-                            <label for="country">Country</label><br>
-                            <input type="text" v-model="formData[ 'country' ]" name="country" id="country" required><br><br>
-                        </td>
-                    </tr>
+            <div class="parent">
+                <div class="field">
+                    <label for="mail">Email</label><br>
+                    <input type="email" v-model="formData[ 'mail' ]" name="mail" id="mail" required @keyup="emailLiveChecker()" class="input"><br><br>
                     <p v-if="emailStatus" class="email-status">{{ emailStatus }}</p>
-                    <tr>
-                        <td>
-                            <label for="firstName">First name</label><br>
-                            <input type="text" v-model="formData[ 'firstName' ]" name="firstName" id="firstName" required><br><br>
-                        </td>
-                        <td>
-                            <label for="name">Last name</label><br>
-                            <input type="text" v-model="formData[ 'name' ]" name="name" id="name" required><br><br>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <label for="password">Password</label><br>
-                            <input type="password" v-model="formData[ 'password' ]" name="password" id="password" required><br><br>
-                        </td>
-                        <td>
-                            <label for="password2">Confirm password</label><br>
-                            <input type="password" v-model="formData[ 'password2' ]" name="password2" id="password2" required><br><br>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <label for="news">Do you want to potentially get newsletter?</label><br>
-                        </td>
-                        <td>
-                            <input type="checkbox" v-model="formData[ 'newsletter' ]" name="news" id="news"><br><br>
-                        </td>
-                    </tr>
-                </table>
-            </form>
+                </div>
+                <div class="field">
+                    <label for="country">Country</label><br>
+                    <input type="text" v-model="formData[ 'country' ]" name="country" id="country" required class="input"><br><br>
+                </div>
+                <div class="field">
+                    <label for="firstName">First name</label><br>
+                    <input type="text" v-model="formData[ 'firstName' ]" name="firstName" id="firstName" required class="input"><br><br>
+                </div>
+                <div class="field">
+                    <label for="name">Last name</label><br>
+                    <input type="text" v-model="formData[ 'name' ]" name="name" id="name" required class="input"><br><br>
+                </div>
+                <div class="field">
+                    <label for="password">Password</label><br>
+                    <input type="password" v-model="formData[ 'password' ]" name="password" id="password" required class="input"><br><br>
+                </div>
+                <div class="field">
+                    <label for="password2">Confirm password</label><br>
+                    <input type="password" v-model="formData[ 'password2' ]" name="password2" id="password2" required class="input"><br><br>
+                </div>
+                <div class="field">
+                    <label for="news">Do you want to potentially get newsletter?</label><br>
+                </div>
+                <div class="field">
+                    <input type="checkbox" v-model="formData[ 'newsletter' ]" name="news" id="news"><br><br>
+                </div>
+            </div>
+
             <notifications ref="notification" location="topright" size="bigger"></notifications>
             <button @click="signup();" class="button">Sign up</button>
             <router-link to="/login" class="button">Log in instead</router-link>
@@ -196,6 +187,18 @@
 </script>
 
 <style scoped>
+    .parent {
+        display: flex;
+        justify-content: center;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+    
+    .field {
+        width: 90%;
+        margin-bottom: 2%;
+    }
+
     .email-status {
         margin-top: -10px;
         color: red;
@@ -207,19 +210,17 @@
         background-color: green;
         width: 100%;
         height: 100%;
-        flex-grow: 1;
         display: flex;
-        flex-direction: column;
         justify-content: center;
         align-items: center;
-        flex: 0 1 auto;
+        flex-direction: column;
     }
 
     .login-app {
         background-color: var( --background-color );
-        min-height: fit-content;
-        min-height: fit-content;
-        padding: 5% 20%;
+        width: 90%;
+        height: 90%;
+        padding: 10% 5%;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -231,4 +232,24 @@
         padding: 5px 10px;
         margin-top: 2%;
     }
+
+    .input {
+        width: 80%;
+        padding: 10px;
+        border-radius: 500px;
+        border: solid 1px black;
+        margin-top: 1%;
+    }
+
+    @media only screen and (min-width: 999px) {
+        .login-app {
+            width: 50vw;
+            height: min-content;
+            padding: 5% 5%;
+        }
+
+        .field {
+            width: 40%;
+        }
+    }
 </style>
\ No newline at end of file