feat: added localization to modal-create-user

This commit is contained in:
NGPixel 2017-05-30 21:23:38 -04:00
parent 8239adfe7b
commit 2e3504f32b
3 changed files with 37 additions and 16 deletions

View File

@ -7,14 +7,14 @@
transition(name='modal-content') transition(name='modal-content')
.modal-content(v-show='isShown') .modal-content(v-show='isShown')
header.is-blue header.is-blue
span Create / Authorize User span {{ $t('modal.createusertitle') }}
p.modal-notify(v-bind:class='{ "is-active": loading }'): i p.modal-notify(v-bind:class='{ "is-active": isLoading }'): i
section section
label.label Email address: label.label {{ $t('modal.createuseremail') }}
p.control.is-fullwidth p.control.is-fullwidth
input.input(type='text', placeholder='e.g. john.doe@company.com', v-model='email', autofocus) input.input(type='text', v-bind:placeholder='$t("modal.createuseremailplaceholder")', v-model='email', ref='createUserEmailInput')
section section
label.label Provider: label.label {{ $t('modal.createuserprovider') }}
p.control.is-fullwidth p.control.is-fullwidth
select(v-model='provider') select(v-model='provider')
option(value='local') Local Database option(value='local') Local Database
@ -24,17 +24,17 @@
option(value='github') GitHub option(value='github') GitHub
option(value='slack') Slack option(value='slack') Slack
section(v-if='provider=="local"') section(v-if='provider=="local"')
label.label Password: label.label {{ $t('modal.createuserpassword') }}
p.control.is-fullwidth p.control.is-fullwidth
input.input(type='password', placeholder='', v-model='password') input.input(type='password', placeholder='', v-model='password')
section(v-if='provider=="local"') section(v-if='provider=="local"')
label.label Full Name: label.label {{ $t('modal.createuserfullname') }}
p.control.is-fullwidth p.control.is-fullwidth
input.input(type='text', placeholder='e.g. John Doe', v-model='name') input.input(type='text', v-bind:placeholder='$t("modal.createusernameplaceholder")', v-model='name')
footer footer
a.button.is-grey.is-outlined(v-on:click='cancel') Discard a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
a.button(v-on:click='create', v-if='provider=="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Create User a.button(v-on:click='create', v-if='provider=="local"', v-bind:disabled='isLoading', v-bind:class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuser') }}
a.button(v-on:click='create', v-if='provider!="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Authorize User a.button(v-on:click='create', v-if='provider!="local"', v-bind:disabled='isLoading', v-bind:class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuserauthorize') }}
</template> </template>
<script> <script>
@ -46,7 +46,7 @@
provider: 'local', provider: 'local',
password: '', password: '',
name: '', name: '',
loading: false isLoading: false
} }
}, },
computed: { computed: {
@ -55,6 +55,12 @@
} }
}, },
methods: { methods: {
init () {
let self = this
self._.delay(() => {
self.$refs.createUserEmailInput.focus()
}, 100)
},
cancel () { cancel () {
this.$store.dispatch('modalCreateUser/close') this.$store.dispatch('modalCreateUser/close')
this.email = '' this.email = ''
@ -62,7 +68,7 @@
}, },
create () { create () {
let self = this let self = this
this.loading = true this.isLoading = true
this.$http.post('/admin/users/create', { this.$http.post('/admin/users/create', {
email: this.email, email: this.email,
provider: this.provider, provider: this.provider,
@ -71,7 +77,7 @@
}).then(resp => { }).then(resp => {
return resp.json() return resp.json()
}).then(resp => { }).then(resp => {
this.loading = false this.isLoading = false
if (resp.ok) { if (resp.ok) {
this.cancel() this.cancel()
window.location.reload(true) window.location.reload(true)
@ -83,13 +89,16 @@
}) })
} }
}).catch(err => { }).catch(err => {
this.loading = false this.isLoading = false
self.$store.dispatch('alert', { self.$store.dispatch('alert', {
style: 'red', style: 'red',
icon: 'square-cross', icon: 'square-cross',
msg: 'Error: ' + err.body.msg msg: 'Error: ' + err.body.msg
}) })
}) })
},
mounted () {
this.$root.$on('modalCreateUser/init', this.init)
} }
} }
} }

View File

@ -10,7 +10,10 @@ export default {
shownChange: (state, shownState) => { state.shown = shownState } shownChange: (state, shownState) => { state.shown = shownState }
}, },
actions: { actions: {
open({ commit }) { commit('shownChange', true) }, open({ commit }) {
commit('shownChange', true)
wikijs.$emit('modalCreateUser/init')
},
close({ commit }) { commit('shownChange', false) } close({ commit }) { commit('shownChange', false) }
} }
} }

View File

@ -25,6 +25,15 @@
"createpagetitle": "Create New Page", "createpagetitle": "Create New Page",
"createpagepath": "Enter the new page path:", "createpagepath": "Enter the new page path:",
"createpageinvalid": "This page path is invalid!", "createpageinvalid": "This page path is invalid!",
"createusertitle": "Create / Authorize User",
"createuseremail": "Email address:",
"createuseremailplaceholder": "e.g. john.doe@company.com",
"createuserprovider": "Provider:",
"createuserpassword": "Password:",
"createusername": "Full Name:",
"createusernameplaceholder": "e.g. John Doe",
"createuser": "Create User",
"createuserauthorize": "Authorize User",
"discard": "Discard", "discard": "Discard",
"discardpagestay": "Stay on page", "discardpagestay": "Stay on page",
"discardpagetitle": "Discard?", "discardpagetitle": "Discard?",