Skip to content

K
kiaisoft_tuananh_nuxt
Commit c7caf890 authored by Kemm23's avatar Kemm23
Browse files
Options

create wish list modal

parent 19c5ec2e
Hide whitespace changes
Inline Side-by-side
Showing with 196 additions and 94 deletions
components/LoginModal.vue
View file @ c7caf890
<template>
<v-row v-if="dialog" justify="center">
<v-dialog
v-model="dialog"
width="450px"
>
<!-- <template #activator="{ on, attrs }">
<v-row justify="center">
<v-dialog
v-model="dialog"
width="450px"
@click:outside="closeDialog"
>
<!-- <template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
......@@ -14,115 +15,119 @@
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-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.$props.status
}
},
methods: {
},
methods: {
closeDialog () {
this.$props.status = false
console.log(this.$props.status)
},
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>
......@@ -131,4 +136,3 @@ methods: {
padding: 30px;
}
</style>
\ No newline at end of file
components/user/Header.vue
View file @ c7caf890
......@@ -103,7 +103,7 @@
plain
v-bind="attrs"
v-on="on"
@click="activeLogin=true"
@click="closeDialog"
>
<v-icon>mdi-account-outline</v-icon>
<span>login</span>
......@@ -177,6 +177,7 @@
plain
v-bind="attrs"
v-on="on"
@click.stop="drawer = !drawer"
>
<v-icon large>
mdi-heart-outline
......@@ -244,8 +245,55 @@
<!-- 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" @click:outside="closeDialog" @close="activeLogin=false" />
<SignupModal :status="activeRegister" @close="activeRegister=false" />
<!-- show drawer -->
<v-navigation-drawer
v-model="drawer"
width="300px"
right
temporary
class="favorite-modal"
>
<div class="d-flex justify-space-between modal_header">
<b>WISHLIST</b>
<v-btn plain @click="drawer = false">
Close
<v-icon>mdi-arrow-right</v-icon>
</v-btn>
</div>
<v-divider />
<v-list
three-line
>
<v-list-item
v-for="folder in files"
:key="folder.title"
>
<v-list-item-avatar>
<v-img :src="folder.prependAvatar" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>
{{ folder.title }}
</v-list-item-title>
<v-list-item-subtitle>
{{ folder.subtitle }}
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon color="grey lighten-1">
mdi-close-circle-outline
</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</v-navigation-drawer>
</div>
</template>
......@@ -262,7 +310,41 @@ export default {
data: () => {
return {
activeLogin: false,
activeRegister: false
activeRegister: false,
drawer: false,
files: [
{
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
title: 'Brunch this weekend?',
subtitle: '<span class="text-primary">Ali Connors</span> &mdash; I\'ll be in your neighborhood doing errands this weekend. Do you want to hang out?'
},
{
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
title: 'Summer BBQ',
subtitle: '<span class="text-primary">to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I\'m out of town this weekend.'
},
{
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
title: 'Oui oui',
subtitle: '<span class="text-primary">Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?'
},
{
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
title: 'Birthday gift',
subtitle: '<span class="text-primary">Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?'
},
{
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
title: 'Recipe to try',
subtitle: '<span class="text-primary">Britta Holt</span> &mdash; We should eat this: Grate, Squash, Corn, and tomatillo Tacos.'
}
]
}
},
methods: {
closeDialog () {
this.activeLogin = false
this.activeLogin = true
}
}
}
......@@ -289,4 +371,20 @@ export default {
.navbar span:hover {
color: #26c;
}
.favorite-modal {
position: fixed;
}
.favorite-modal .modal_header {
padding: 20px 0px 20px 30px;
}
.modal_header > b {
font-weight: 700;
font-size: 16px;
}
.modal_header > button {
font-size: 12px;
}
.modal_header > i {
scale: 0.8;
}
</style>
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