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> <template>
<v-row v-if="dialog" justify="center"> <v-row justify="center">
<v-dialog <v-dialog
v-model="dialog" v-model="dialog"
width="450px" width="450px"
> @click:outside="closeDialog"
<!-- <template #activator="{ on, attrs }"> >
<!-- <template #activator="{ on, attrs }">
<v-btn <v-btn
color="primary" color="primary"
dark dark
...@@ -14,115 +15,119 @@ ...@@ -14,115 +15,119 @@
Open Dialog Open Dialog
</v-btn> </v-btn>
</template> --> </template> -->
<v-card-title class="justify-center"> <v-card-title class="justify-center">
<p class="font-weight-black" style="font-size: 35px"> <p class="font-weight-black" style="font-size: 35px">
LOGIN LOGIN
</p> </p>
</v-card-title> </v-card-title>
<v-form ref="form" justify="center" class="formlogin"> <v-form ref="form" justify="center" class="formlogin">
<v-col cols="12" sm="6" md="12"> <v-col cols="12" sm="6" md="12">
<v-text-field <v-text-field
v-model="email" v-model="email"
variant="underlined" variant="underlined"
label="Email" label="Email"
required required
/> />
</v-col> </v-col>
<v-col cols="12" sm="6" md="12"> <v-col cols="12" sm="6" md="12">
<v-text-field <v-text-field
v-model="password" v-model="password"
variant="underlined" variant="underlined"
label="Password" label="Password"
required 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.$props.status
} }
}, },
methods: { methods: {
closeDialog () {
this.$props.status = false
console.log(this.$props.status)
},
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>
...@@ -131,4 +136,3 @@ methods: { ...@@ -131,4 +136,3 @@ methods: {
padding: 30px; padding: 30px;
} }
</style> </style>
\ No newline at end of file
components/user/Header.vue
View file @ c7caf890
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
plain plain
v-bind="attrs" v-bind="attrs"
v-on="on" v-on="on"
@click="activeLogin=true" @click="closeDialog"
> >
<v-icon>mdi-account-outline</v-icon> <v-icon>mdi-account-outline</v-icon>
<span>login</span> <span>login</span>
...@@ -177,6 +177,7 @@ ...@@ -177,6 +177,7 @@
plain plain
v-bind="attrs" v-bind="attrs"
v-on="on" v-on="on"
@click.stop="drawer = !drawer"
> >
<v-icon large> <v-icon large>
mdi-heart-outline mdi-heart-outline
...@@ -244,8 +245,55 @@ ...@@ -244,8 +245,55 @@
<!-- end header bottom --> <!-- end header bottom -->
<!-- show modal --> <!-- show modal -->
<LoginModal v-click-outside="() => activeLogin = false" :status="activeLogin" @close="activeLogin=false" /> <LoginModal :status="activeLogin" @click:outside="closeDialog" @close="activeLogin=false" />
<SignupModal v-click-outside="() => activeRegister = false" :status="activeRegister" @close="activeRegister=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> </div>
</template> </template>
...@@ -262,7 +310,41 @@ export default { ...@@ -262,7 +310,41 @@ export default {
data: () => { data: () => {
return { return {
activeLogin: false, 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 { ...@@ -289,4 +371,20 @@ export default {
.navbar span:hover { .navbar span:hover {
color: #26c; 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> </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