fix bug login and register modal

components/LoginModal.vue

 <template>
-    <v-row v-if="dialog" justify="center">
-        <v-dialog
-        v-model="dialog"
-        width="450px"
-        >
-        <!-- <template #activator="{ on, attrs }">
-            <v-btn
-            color="primary"
-            dark
-            v-bind="attrs"
-            v-on="on"
-            >
-            Open Dialog
-            </v-btn>
-        </template> -->
-        <v-card-title class="justify-center">
-            <p class="font-weight-black" style="font-size: 35px">
-            LOGIN
-            </p>
-        </v-card-title>
-        <v-form ref="form" justify="center" class="formlogin">
-            <v-col cols="12" sm="6" md="12">
-            <v-text-field
-                v-model="email"
-                variant="underlined"
-                label="Email"
-                required
-            />
-            </v-col>
-            <v-col cols="12" sm="6" md="12">
-            <v-text-field
-                v-model="password"
-                variant="underlined"
-                label="Password"
-                required
-            />
-            </v-col>
-            <v-col cols="12" sm="6" md="12" justify-content: space-between>
-            <v-checkbox
-                label="Remember me"
-            />
-            </v-col>
-
-            <div class="d-flex flex-column">
-            <v-btn
-                color="primary"
-                class="mt-4"
-                block
-                @click="login"
-            >
-                Login
-            </v-btn>
-            <v-btn
-                color="primary"
-                class="mt-4"
-                block
-                @click="$emit('close')"
-            >
-                Close
-            </v-btn>
-            </div>
-        </v-form>
-        <v-col cols="12" style="display:flex">
-            <v-divider sm="6" /> login with <v-divider sm="6" />
+  <v-row
+    v-if="dialog"
+    justify="center"
+  >
+    <v-dialog
+      v-model="dialog"
+      persistent
+      width="450px"
+    >
+      <v-card-title class="justify-center">
+        <p class="font-weight-black" style="font-size: 35px">
+          LOGIN
+        </p>
+      </v-card-title>
+      <v-form ref="form" justify="center" class="formlogin">
+        <v-col cols="12" sm="6" md="12">
+          <v-text-field
+            v-model="email"
+            variant="underlined"
+            label="Email"
+            required
+          />
+        </v-col>
+        <v-col cols="12" sm="6" md="12">
+          <v-text-field
+            v-model="password"
+            variant="underlined"
+            label="Password"
+            required
+          />
         </v-col>
-        <v-col cols="12" style="text-align: center;">
-            <v-icon>
-            mdi-twitter
-            </v-icon>
-            <v-icon>
-            mdi-facebook
-            </v-icon>
-            <v-icon>
-            mdi-instagram
-            </v-icon>
+        <v-col cols="12" sm="6" md="12" justify-content: space-between>
+          <v-checkbox
+            label="Remember me"
+          />
         </v-col>
-        </v-dialog>
-    </v-row>
+
+        <div class="d-flex flex-column">
+          <v-btn
+            color="primary"
+            class="mt-4"
+            block
+            @click="login"
+          >
+            Login
+          </v-btn>
+          <v-btn
+            color="primary"
+            class="mt-4"
+            block
+            @click="$emit('close')"
+          >
+            Close
+          </v-btn>
+        </div>
+      </v-form>
+      <v-col cols="12" style="display:flex">
+        <v-divider sm="6" /> login with <v-divider sm="6" />
+      </v-col>
+      <v-col cols="12" style="text-align: center;">
+        <v-icon>
+          mdi-twitter
+        </v-icon>
+        <v-icon>
+          mdi-facebook
+        </v-icon>
+        <v-icon>
+          mdi-instagram
+        </v-icon>
+      </v-col>
+    </v-dialog>
+  </v-row>
 </template>
-  
+
 <script>
 export default {
-name: 'LoginModal',
-props: {
+  name: 'LoginModal',
+  props: {
     status: {
-    type: Boolean,
-    default: true
+      type: Boolean,
+      default: true
     }
-},
-data: () => ({
+  },
+  data: () => ({
     email: '',
     password: ''
-}),
-computed: {
+  }),
+  computed: {
     dialog () {
-    return this.status
+      return this.status
     }
-},
-methods: {
+  },
+  methods: {
     async login () {
-    try {
+      try {
         const resp = await this.$axios.post('/login',
-        {
+          {
             email: this.email,
             password: this.password
-        })
+          })
         localStorage.setItem('token', resp.data.data.bearer_token)
         this.$auth.$storage.setUniversal('token', resp.data.data.bearer_token)
         this.$auth.$storage.setUniversal('userName', resp.data.data.name)
         this.$auth.$storage.setUniversal('loggedIn', 'true')
         if (resp.status === 200) {
-        this.$toast.success('Successfully authenticated', {
+          this.$toast.success('Successfully authenticated', {
             duration: 2000
-        })
-        this.$router.push('home')
+          })
+          this.$router.push('home')
         }
-    } catch (e) {
+      } catch (e) {
         this.$toast.error('Username or Password not valid', {
-        duration: 2000
+          duration: 2000
         })
         this.$router.push('/login')
+      }
     }
-    }
-}
+  }
 }
 </script>
 
-<style>
+<style scoped>
 .formlogin {
     padding: 30px;
 }
+::v-deep .v-dialog{
+  background-color: #5ae2dc;
+}
 </style>
-  
\ No newline at end of file

components/RegisterModal.vue

@@ -2,6 +2,7 @@
   <v-row v-if="dialog" justify="center">
     <v-dialog
       v-model="dialog"
+      persistent
       width="450px"
     >
       <v-card-title class="justify-center">
@@ -155,8 +156,11 @@ export default {
 }
 </script>
 
-  <style>
+  <style scoped>
     .formlogin {
       padding: 30px;
     }
+    ::v-deep .v-dialog{
+      background-color: #5ae2dc;
+    }
   </style>

components/user/Header.vue

@@ -244,8 +244,8 @@
     <!-- end header bottom -->
 
     <!-- show modal -->
-    <LoginModal v-click-outside="() => activeLogin = false" :status="activeLogin" @close="activeLogin=false" />
-    <SignupModal v-click-outside="() => activeRegister = false" :status="activeRegister" @close="activeRegister=false" />
+    <LoginModal :status="activeLogin" @close="activeLogin=false" />
+    <SignupModal :status="activeRegister" @close="activeRegister=false" />
   </div>
 </template>