Rework signIn dialog

frontend/src/views/SignIn.vue

@@ -1,9 +1,9 @@
 <template>
-  <v-container class="fill-height" id="signInListen">
+  <v-container class="fill-height" @keyup.enter="handleEnter">
     <v-row align="center" justify="center">
       <v-col cols="12">
         <v-card elevation="0">
-          <v-window v-model="step">
+          <v-window v-model="visiblePane">
             <v-window-item :value="1">
               <v-row>
                 <v-col cols="12" md="8" class="main">
@@ -12,7 +12,7 @@
                     <v-form>
                       <v-text-field
                         label="Username"
-                        v-model="username"
+                        v-model="signInData.username"
                         name="Username"
                         prepend-icon="mdi-account"
                         type="text"
@@ -21,17 +21,17 @@
                       <v-text-field
                         id="password"
                         label="Password"
-                        v-model="password"
+                        v-model="signInData.password"
                         name="Password"
                         prepend-icon="mdi-key"
                         type="password"
                         color="primary"
                       />
                     </v-form>
-                    <p id="missing"></p>
+                    <p>{{errorMessage}}</p>
                   </v-card-text>
                   <div class="text-center mt-3">
-                    <v-btn rounded color="logowhite" outlined dark v-on:click="signin()">Sign In</v-btn>
+                    <v-btn rounded color="logowhite" outlined dark @click="signin">Sign In</v-btn>
                   </div>
                 </v-col>
                 <v-col cols="12" md="4" class="main">
@@ -42,9 +42,8 @@
                         <img src="../assets/logo_gt.svg" alt="John"/>
                       </v-avatar>
                     </div>
-
                     <div class="text-center mt-10">
-                      <v-btn class="primary--text" rounded outlined dark @click="step++">Create Account</v-btn>
+                      <v-btn class="primary--text" rounded outlined dark @click="switchPane(2)">Create Account</v-btn>
                     </div>
                   </v-card-text>
                 </v-col>
@@ -62,7 +61,7 @@
                     </v-avatar>
                   </div>
                   <div class="text-center mt-3">
-                    <v-btn class="primary--text" rounded outlined dark @click="step--">Sign In</v-btn>
+                    <v-btn class="primary--text" rounded outlined dark @click="switchPane(1)">Sign In</v-btn>
                   </div>
                 </v-col>
                 <v-col cols="12" md="8" class="main">
@@ -72,7 +71,7 @@
                       <v-text-field
                         label="Firstname"
                         name="FirstnameR"
-                        v-model="firstname"
+                        v-model="signUpData.firstname"
                         prepend-icon="mdi-account-box"
                         type="text"
                         color="primary "
@@ -80,7 +79,7 @@
                       <v-text-field
                         label="Lastname"
                         name="LastnameR"
-                        v-model="lastname"
+                        v-model="signUpData.lastname"
                         prepend-icon="mdi-account-box"
                         type="text"
                         color="primary"
@@ -88,7 +87,7 @@
                       <v-text-field
                         label="Username"
                         name="UsernameR"
-                        v-model="usernameR"
+                        v-model="signUpData.username"
                         prepend-icon="mdi-account"
                         type="text"
                         color="primary"
@@ -96,16 +95,16 @@
                       <v-text-field
                         label="Password"
                         name="PasswordR"
-                        v-model="passwordR"
+                        v-model="signUpData.password"
                         prepend-icon="mdi-key"
                         type="password"
                         color="primary"
                       />
                     </v-form>
-                    <p id="missingR"></p>
+                    <p>{{errorMessage}}</p>
                   </v-card-text>
                   <div class="text-center mt-n5">
-                    <v-btn color="logowhite" rounded outlined v-on:click="signup()">Sign Up</v-btn>
+                    <v-btn color="logowhite" rounded outlined @click="signup">Sign Up</v-btn>
                   </div>
                 </v-col>
               </v-row>
@@ -119,58 +118,45 @@
 
 <script>
   export default {
-    data: () => ({
-      step: 1,
-      username: "",
-      password: "",
-      firstname: "",
-      lastname: "",
-      usernameR: "",
-      passwordR: ""
-    }),
     props: {
       source: String
     },
+    data() {
+      return {
+        errorMessage: "",
+        visiblePane: 1,
+        signInData: {username: "", password: ""},
+        signUpData: {firstname: "", lastname: "", username: "", password: ""}
+      }
+    },
     methods: {
       signin() {
-        if (this.username != "" && this.password != "") {
+        if (Object.values(this.signInData).every(item => item)) {
-          document.getElementById("missing").innerHTML = "";
+          this.errorMessage = ""
-          const loginData = {
+          this.$emit("signIn", this.signInData)
-            username: this.username,
-            password: this.password
-          }
-          this.$emit('signIn', loginData);
         } else {
-          document.getElementById("missing").innerHTML = "Please fill out all fields";
+          this.errorMessage = "Please fill out all fields"
         }
       },
       signup() {
-        if (this.usernameR != "" && this.passwordR != "") {
+        if (Object.values(this.signUpData).every(item => item)) {
-          document.getElementById("missingR").innerHTML = "";
+          this.errorMessage = ""
-          const signupData = {
+          this.$emit("signUp", this.signUpData)
-            firstname: this.firstname,
-            lastname: this.lastname,
-            username: this.usernameR,
-            password: this.passwordR
-          }
-          this.$emit('signUp', signupData);
         } else {
-          document.getElementById("missingR").innerHTML = "Please fill out all fields";
+          this.errorMessage = "Please fill out all fields"
+        }
+      },
+      switchPane(num) {
+        this.errorMessage = ""
+        this.visiblePane = num
+      },
+      handleEnter() {
+        if (this.visiblePane === 1) {
+          this.signin()
+        } else {
+          this.signup()
         }
       }
-    },
-    mounted() {
-      var listen = document.getElementById('signInListen');
-      listen.addEventListener('keyup', (e) => {
-        if (e.keyCode === 13) {
-          e.preventDefault();
-          if (this.step == 1) {
-            this.signin();
-          } else {
-            this.signup();
-          }
-        }
-      });
     }
   };
 </script>