Display password modal on initial setup

parent 2a95dce6
......@@ -17,7 +17,6 @@ export default {
bio () { return this.$store.state.bio },
signedIn () { return this.$store.state.signedIn },
configured () { return this.$store.state.configured }
},
methods: {
followButtonPress () {
......
<template>
<form @submit.prevent='submit'>
<label for='password'>Password</label>
<div class='control'>
<no-ssr>
<vue-password v-model='password' classes='input'>
<template slot="password-toggle" slot-scope="props">
<button class="button VuePassword__Toggle"
type="button"
v-on:click = "props.toggle"
v-text="props.type === 'password' ? 'Show' : 'Hide'"
>
</button>
</template>
</vue-password>
</no-ssr>
</div>
</form>
<div>
<form @submit.prevent='submit'>
<b-field label='Name'>
<b-input v-model='name'></b-input>
</b-field>
<b-field label='Bio'>
<b-input v-model='bio'></b-input>
</b-field>
</form>
<b-modal :active.sync='modalIsActive' scroll='keep'>
<!-- <div class='modal-background'></div> -->
<div class='modal-card' style='width: auto'>
<header class='modal-card-head'>
<p class='modal-card-title'>Get started!</p>
</header>
<section class='modal-card-body'>
<b-field label='Password'>
<div id='password-field' class='control'>
<no-ssr>
<vue-password v-model='password' classes='input'>
<template slot="password-toggle" slot-scope="props">
<button class="button VuePassword__Toggle"
type="button"
v-on:click = "props.toggle"
v-text="props.type === 'password' ? 'Show' : 'Hide'"
>
</button>
</template>
</vue-password>
</no-ssr>
</div>
</b-field>
</section>
<footer class="modal-card-foot">
<button class='button is-fullwidth is-primary'>Set password</button>
</footer>
</div>
</b-modal>
</div>
</template>
<script>
export default {
computed: {
name: {
get () {
return this.$store.state.name
},
set (value) {
this.$store.commit('name', value)
}
},
bio: {
get () {
return this.$store.state.bio
},
set (value) {
this.$store.commit('bio', value)
}
},
configured: {
get () {
return this.$store.state.configured
},
set (value) {
this.$store.commit('configured', value)
}
}
},
data () {
return {
password: ''
password: '',
modalIsActive: !this.configured
}
},
methods: {
......@@ -41,4 +93,29 @@
button.button.VuePassword__Toggle {
min-width: 80px;
}
div.control {
/* margin-top: 1em; */
margin-bottom: 1em;
}
div.card-content {
padding-top: 1em;
}
div.VuePassword__Message {
min-height: 2rem;
}
.VuePassword__Meter {
margin-top: .5rem;
}
.VuePassword__Message {
padding-top: .5rem;
}
#password-field {
margin-bottom: 0;
}
</style>
......@@ -3,20 +3,22 @@
const siteConfiguration = require('../assets/data.json')
// Mock: sign-in state
siteConfiguration.signedIn = true
siteConfiguration.configured = true
siteConfiguration.signedIn = false
siteConfiguration.configured = false
export const state = () => (siteConfiguration)
// export const mutations = {
// name (state, text) {
// state.name = text
// },
// bio (state, text) {
// state.bio = text
// }
// }
export const mutations = {
name (state, text) {
state.name = text
},
bio (state, text) {
state.bio = text
},
configured (state, value) {
state.configured = value
}
}
// export const actions = {
// async nuxtServerInit ({ commit }, { app }) {
......
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