add login, sign up 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-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: {
+    status: {
+    type: Boolean,
+    default: true
+    }
+},
+data: () => ({
+    email: '',
+    password: ''
+}),
+computed: {
+    dialog () {
+    return this.status
+    }
+},
+methods: {
+    async login () {
+    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', {
+            duration: 2000
+        })
+        this.$router.push('home')
+        }
+    } catch (e) {
+        this.$toast.error('Username or Password not valid', {
+        duration: 2000
+        })
+        this.$router.push('/login')
+    }
+    }
+}
+}
+</script>
+
+<style>
+.formlogin {
+    padding: 30px;
+}
+</style>
+  
\ No newline at end of file

components/RegisterModal.vue

+<template>
+  <v-row v-if="dialog" justify="center">
+    <v-dialog
+      v-model="dialog"
+      width="450px"
+    >
+      <v-card-title class="justify-center">
+        <p class="font-weight-black" style="font-size: 35px">
+          REGISTER
+        </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="name"
+            variant="underlined"
+            label="Name"
+            :rules="requiredRules"
+            required
+          />
+        </v-col>
+        <v-col cols="12" sm="6" md="12">
+          <v-text-field
+            v-model="email"
+            variant="underlined"
+            label="Email"
+            :rules="emailRules"
+            required
+          />
+        </v-col>
+        <v-col cols="12" sm="6" md="12">
+          <v-text-field
+            v-model="password"
+            variant="underlined"
+            label="Password"
+            type="password"
+            :rules="passwordRules"
+            required
+          />
+        </v-col>
+        <v-col cols="12" sm="6" md="12">
+          <v-text-field
+            v-model="password_confirmation"
+            variant="underlined"
+            label="Confirm your password"
+            type="password"
+            :rules="[passwordRules, passwordConfirmationRule]"
+            required
+          />
+        </v-col>
+        <v-col cols="12" sm="6" md="12" justify-content: space-between>
+          <v-checkbox
+            v-model="checkbox"
+            label="I agree to the privacy policy"
+          />
+        </v-col>
+
+        <div class="d-flex flex-column">
+          <v-btn
+            color="primary"
+            class="mt-4"
+            block
+            @click="signup"
+          >
+            Sign Up
+          </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: 'SignupModal',
+  props: {
+    status: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: () => ({
+    name: '',
+    email: '',
+    password: '',
+    password_confirmation: '',
+    checkbox: '',
+    requiredRules: [
+      v => !!v || 'This field is required'
+    ],
+    emailRules: [
+      v => !!v || 'E-mail is required',
+      v => /.+@.+\..+/.test(v) || 'E-mail must be valid'
+    ],
+    passwordRules: [
+      v => !!v || 'Password is required',
+      v => (v && v.length >= 6) || 'Password must be more than 6 characters',
+      v => (v && v.length <= 255) || 'Password must be less than 255 characters'
+    ]
+  }),
+  computed: {
+    dialog () {
+      return this.status
+    },
+    passwordConfirmationRule () {
+      return () => (this.password === this.password_confirmation) || 'Password must match'
+    }
+  },
+  methods: {
+    async signup () {
+      try {
+        await this.$axios.post('/register', {
+          name: this.name,
+          email: this.email,
+          password: this.password,
+          password_confirmation: this.password_confirmation
+        }
+        ).then((resp) => {
+          if (resp.data.status === 'success') {
+            this.$toast.success('Register successfully', {
+              duration: 2000
+            })
+            this.$router.push('login')
+          }
+        })
+      } catch (error) {
+        this.$toast.error(error.response.data.message, {
+          duration: 2000
+        })
+      }
+    }
+  }
+}
+</script>
+
+  <style>
+    .formlogin {
+      padding: 30px;
+    }
+  </style>

components/user/Header.vue

@@ -103,6 +103,7 @@
               plain
               v-bind="attrs"
               v-on="on"
+              @click="activeLogin=true"
             >
               <v-icon>mdi-account-outline</v-icon>
               <span>login</span>
@@ -112,6 +113,7 @@
               plain
               v-bind="attrs"
               v-on="on"
+              @click="activeRegister=true"
             >
               <span>Signup</span>
             </v-btn>
@@ -240,12 +242,29 @@
       </v-container>
     </div>
     <!-- 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" />
   </div>
 </template>
 
 <script>
+import LoginModal from '~/components/LoginModal.vue'
+import SignupModal from '~/components/RegisterModal.vue'
+
 export default {
-  name: 'UserHeader'
+  name: 'UserHeader',
+  components: {
+    LoginModal,
+    SignupModal
+  },
+  data: () => {
+    return {
+      activeLogin: false,
+      activeRegister: false
+    }
+  }
 }
 </script>