From 150ee5308798bad3384b4b565c8fbc77b5cd3973 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Wed, 28 Jul 2021 17:30:22 +0200
Subject: Use modals for Login and Register.

Also added confirm password on Register form.
---
 client/src/views/Login.vue    | 24 ++++++++++++++++++++--
 client/src/views/Register.vue | 47 +++++++++++++++++++++++++++++++++----------
 2 files changed, 58 insertions(+), 13 deletions(-)

(limited to 'client/src')

diff --git a/client/src/views/Login.vue b/client/src/views/Login.vue
index 8789a5e..53badcb 100644
--- a/client/src/views/Login.vue
+++ b/client/src/views/Login.vue
@@ -32,20 +32,30 @@
       </div>
     </div>
   </div>
+  <Modal :title="modalTitle" v-if="showModal" @close="showModal = false">
+    <p v-text="modalText"></p>
+  </Modal>
 </template>
 
 <script>
 import validator from 'validator';
+import Modal from '@/components/Modal.vue';
 
 export default {
   name: 'Login',
+  components: {
+    Modal
+  },
   data() {
     return {
       valid: false,
       email: "",
       emailBlured : false,
       password: "",
-      passwordBlured:false
+      passwordBlured:false,
+      showModal: false,
+      modalTitle: '',
+      modalText: ''
     }
   },
   methods: {
@@ -58,12 +68,22 @@ export default {
       if (this.validEmail(this.email) && this.validPassword(this.password)) {
         this.valid = true;
       }
+      else {
+        this.valid = false;
+      }
     },
 
     login() {
       this.validate();
       if (this.valid) {
-        alert('Successfully logged in!');
+        this.modalTitle = 'Success!';
+        this.modalText = 'You successfully logged in!';
+        this.showModal = true;
+      }
+      else {
+        this.modalTitle = 'Failure!';
+        this.modalText = 'You failed to login.';
+        this.showModal = true;
       }
     }
   }
diff --git a/client/src/views/Register.vue b/client/src/views/Register.vue
index e1679de..e26c751 100644
--- a/client/src/views/Register.vue
+++ b/client/src/views/Register.vue
@@ -3,7 +3,7 @@
     <div class="row d-flex justify-content-center">
       <div class="col-md-7">
         <div class="card px-5 py-4">
-          <div class="form-data" v-if="!submitted">
+          <div class="form-data">
 
             <div class="text-center mb-4">
               <h4>Register</h4>
@@ -41,15 +41,16 @@
               <div class="invalid-feedback">Password must be 8 character!</div>
             </div>
 
-            <div class="mb-3">
-              <button @click.stop.prevent="submit" class="btn btn-dark w-100">Register</button>
+            <div class="forms-inputs mb-4">
+              <span>Confirm Password</span>
+              <input type="password" v-model="passwordConfirm"
+                :class="{'form-control':true, 'is-invalid' : (password !== passwordConfirm) && passwordConfirmBlured}"
+                @blur="passwordConfirmBlured = true">
+              <div class="invalid-feedback">Passwords must match!</div>
             </div>
 
-          </div>
-          <div class="success-data" v-else>
-
-            <div class="text-center d-flex flex-column">
-              <span class="text-center">You have been successfully registered!</span>
+            <div class="mb-3">
+              <button @click.stop.prevent="submit" class="btn btn-dark w-100">Register</button>
             </div>
 
           </div>
@@ -57,17 +58,23 @@
       </div>
     </div>
   </div>
+  <Modal :title="modalTitle" v-if="showModal" @close="showModal = false">
+    <p v-text="modalText"></p>
+  </Modal>
 </template>
 
 <script>
 import validator from 'validator';
+import Modal from '@/components/Modal.vue';
 
 export default {
   name: 'Register',
+  components: {
+    Modal
+  },
   data() {
     return {
       valid : false,
-      submitted : false,
       firstname: "",
       firstnameBlured: false,
       lastname: "",
@@ -76,6 +83,11 @@ export default {
       emailBlured : false,
       password:"",
       passwordBlured:false,
+      passwordConfirm:"",
+      passwordConfirmBlured:false,
+      showModal: false,
+      modalTitle: '',
+      modalText: ''
     }
   },
   methods: {
@@ -84,9 +96,15 @@ export default {
       this.lastnameBlured = true;
       this.emailBlured = true;
       this.passwordBlured = true;
-      if (this.validName(this.firstname) && this.validName(this.lastname) && this.validEmail(this.email) && this.validPassword(this.password)) {
+      this.passwordConfirmBlured = true;
+      if (this.validName(this.firstname) && this.validName(this.lastname)
+          && this.validEmail(this.email) && this.validPassword(this.password)
+          && this.password === this.passwordConfirm) {
         this.valid = true;
       }
+      else {
+        this.valid = false;
+      }
     },
 
     validEmail: (email) => validator.isEmail(email),
@@ -97,7 +115,14 @@ export default {
     submit() {
       this.validate();
       if (this.valid) {
-        this.submitted = true;
+        this.modalTitle = 'Success!';
+        this.modalText = 'You successfully registered!';
+        this.showModal = true;
+      }
+      else {
+        this.modalTitle = 'Failure!';
+        this.modalText = 'You failed to register.';
+        this.showModal = true;
       }
     }
   }
-- 
cgit v1.2.3