Skip to content

K
kiaisoft_tuananh_nuxt
Commit fa869a70 authored by vietanh-0511's avatar vietanh-0511
Browse files
Options

fix bug login and register modal

parent 19c5ec2e
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 103 deletions
components/LoginModal.vue
View file @ fa869a70
<template> <template>
<v-row v-if="dialog" justify="center"> <v-row
<v-dialog v-if="dialog"
v-model="dialog" justify="center"
width="450px" >
> <v-dialog
<!-- <template #activator="{ on, attrs }"> v-model="dialog"
<v-btn persistent
color="primary" width="450px"
dark >
v-bind="attrs" <v-card-title class="justify-center">
v-on="on" <p class="font-weight-black" style="font-size: 35px">
> LOGIN
Open Dialog </p>
</v-btn> </v-card-title>
</template> --> <v-form ref="form" justify="center" class="formlogin">
<v-card-title class="justify-center"> <v-col cols="12" sm="6" md="12">
<p class="font-weight-black" style="font-size: 35px"> <v-text-field
LOGIN v-model="email"
</p> variant="underlined"
</v-card-title> label="Email"
<v-form ref="form" justify="center" class="formlogin"> required
<v-col cols="12" sm="6" md="12"> />
<v-text-field </v-col>
v-model="email" <v-col cols="12" sm="6" md="12">
variant="underlined" <v-text-field
label="Email" v-model="password"
required variant="underlined"
/> label="Password"
</v-col> required
<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>
<v-col cols="12" style="text-align: center;"> <v-col cols="12" sm="6" md="12" justify-content: space-between>
<v-icon> <v-checkbox
mdi-twitter label="Remember me"
</v-icon> />
<v-icon>
mdi-facebook
</v-icon>
<v-icon>
mdi-instagram
</v-icon>
</v-col> </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> </template>
<script> <script>
export default { export default {
name: 'LoginModal', name: 'LoginModal',
props: { props: {
status: { status: {
type: Boolean, type: Boolean,
default: true default: true
} }
}, },
data: () => ({ data: () => ({
email: '', email: '',
password: '' password: ''
}), }),
computed: { computed: {
dialog () { dialog () {
return this.status return this.status
} }
}, },
methods: { methods: {
async login () { async login () {
try { try {
const resp = await this.$axios.post('/login', const resp = await this.$axios.post('/login',
{ {
email: this.email, email: this.email,
password: this.password password: this.password
}) })
localStorage.setItem('token', resp.data.data.bearer_token) localStorage.setItem('token', resp.data.data.bearer_token)
this.$auth.$storage.setUniversal('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('userName', resp.data.data.name)
this.$auth.$storage.setUniversal('loggedIn', 'true') this.$auth.$storage.setUniversal('loggedIn', 'true')
if (resp.status === 200) { if (resp.status === 200) {
this.$toast.success('Successfully authenticated', { this.$toast.success('Successfully authenticated', {
duration: 2000 duration: 2000
}) })
this.$router.push('home') this.$router.push('home')
} }
} catch (e) { } catch (e) {
this.$toast.error('Username or Password not valid', { this.$toast.error('Username or Password not valid', {
duration: 2000 duration: 2000
}) })
this.$router.push('/login') this.$router.push('/login')
}
} }
} }
}
} }
</script> </script>
<style> <style scoped>
.formlogin { .formlogin {
padding: 30px; padding: 30px;
} }
::v-deep .v-dialog{
background-color: #5ae2dc;
}
</style> </style>
\ No newline at end of file
components/RegisterModal.vue
View file @ fa869a70
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<v-row v-if="dialog" justify="center"> <v-row v-if="dialog" justify="center">
<v-dialog <v-dialog
v-model="dialog" v-model="dialog"
persistent
width="450px" width="450px"
> >
<v-card-title class="justify-center"> <v-card-title class="justify-center">
...@@ -155,8 +156,11 @@ export default { ...@@ -155,8 +156,11 @@ export default {
} }
</script> </script>
<style> <style scoped>
.formlogin { .formlogin {
padding: 30px; padding: 30px;
} }
::v-deep .v-dialog{
background-color: #5ae2dc;
}
</style> </style>
components/user/Header.vue
View file @ fa869a70
...@@ -244,8 +244,8 @@ ...@@ -244,8 +244,8 @@
<!-- end header bottom --> <!-- end header bottom -->
<!-- show modal --> <!-- show modal -->
<LoginModal v-click-outside="() => activeLogin = false" :status="activeLogin" @close="activeLogin=false" /> <LoginModal :status="activeLogin" @close="activeLogin=false" />
<SignupModal v-click-outside="() => activeRegister = false" :status="activeRegister" @close="activeRegister=false" /> <SignupModal :status="activeRegister" @close="activeRegister=false" />
</div> </div>
</template> </template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment