Ind.ie is now Small Technology Foundation.
Commit e1e50a58 authored by Aral Balkan's avatar Aral Balkan

Add registration loading and successful states to the view

parent b910ba53
......@@ -47,14 +47,14 @@
<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>
<vue-password v-model='password' classes='input' :disabled='isLoading'>
<template slot='password-toggle' slot-scope='props'>
<button
class='button VuePassword__Toggle'
type='button'
@click='props.toggle'
:disabled='isLoading'
>{{ props.type === 'password' ? 'Show' : 'Hide' }}</button>
</template>
</vue-password>
</no-ssr>
......@@ -62,7 +62,9 @@
</b-field>
</section>
<footer class="modal-card-foot">
<button class='button is-fullwidth is-primary'>Set password</button>
<button :class='setPasswordButtonClasses'>
<span v-if='registrationIsSuccessful' id='success-icon' class='icon is-medium'><i class='fa fa-check'></i></span>
{{ setPasswordButtonText }}</button>
</footer>
</div>
</b-modal>
......@@ -81,6 +83,21 @@
computed: {
modalIsActive () { return !this.configured },
setPasswordButtonText () {
return this.registrationIsSuccessful ? "Done" : "Set password"
},
setPasswordButtonClasses () {
let classes = {
'button': true,
'is-fullwidth': true,
}
classes['is-success'] = this.registrationIsSuccessful
classes['is-primary'] = !this.registrationIsSuccessful
classes['is-loading'] = this.isLoading
return classes
},
name: {
get () { return this.$store.state.name },
set (value) { this.$store.commit('name', value) }
......@@ -123,7 +140,9 @@
},
data () {
return {
password: ''
password: '',
isLoading: false,
registrationIsSuccessful: true
}
},
methods: {
......@@ -215,4 +234,9 @@
margin-right: .75em;
border: 1px solid #333;
}
#success-icon {
/* display: inline-block; */
margin-right: 0.25em;
}
</style>
......@@ -3,8 +3,8 @@
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)
......
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