wikijs-fork/client/components/admin/admin-users-create.vue

257 lines
6.7 KiB
Vue
Raw Normal View History

<template lang="pug">
2019-04-29 00:25:19 +00:00
v-dialog(v-model='isShown', max-width='650', persistent)
v-card
.dialog-header.is-short
2019-07-29 04:50:03 +00:00
v-icon.mr-3(color='white') mdi-plus
span New User
2019-07-29 04:50:03 +00:00
v-spacer
v-btn.mx-0(color='white', outlined, disabled, dark)
v-icon(left) mdi-database-import
span Bulk Import
v-card-text.pt-5
2019-04-29 00:25:19 +00:00
v-select(
:items='providers'
item-text='displayName'
item-value='key'
2019-07-29 04:50:03 +00:00
outlined
prepend-icon='mdi-domain'
v-model='provider'
label='Provider'
)
2019-04-29 00:25:19 +00:00
v-text-field(
2019-07-29 04:50:03 +00:00
outlined
prepend-icon='mdi-at'
v-model='email'
label='Email Address'
2019-07-29 04:50:03 +00:00
key='newUserEmail'
persistent-hint
ref='emailInput'
)
2019-04-29 00:25:19 +00:00
v-text-field(
v-if='provider === `local`'
2019-07-29 04:50:03 +00:00
outlined
prepend-icon='mdi-lock-outline'
append-icon='mdi-dice-5'
v-model='password'
2019-04-29 00:25:19 +00:00
:label='mustChangePwd ? `Temporary Password` : `Password`'
counter='255'
@click:append='generatePwd'
2019-07-29 04:50:03 +00:00
key='newUserPassword'
persistent-hint
)
2019-04-29 00:25:19 +00:00
v-text-field(
2019-07-29 04:50:03 +00:00
outlined
prepend-icon='mdi-account-outline'
v-model='name'
label='Name'
:hint='provider === `local` ? `Can be changed by the user.` : `May be overwritten by the provider during login.`'
2019-07-29 04:50:03 +00:00
key='newUserName'
persistent-hint
)
v-select.mt-2(
2019-04-29 00:25:19 +00:00
:items='groups'
item-text='name'
item-value='id'
2019-08-17 22:29:58 +00:00
item-disabled='isSystem'
2019-07-29 04:50:03 +00:00
outlined
prepend-icon='mdi-account-group'
2019-04-29 00:25:19 +00:00
v-model='group'
label='Assign to Group(s)...'
2019-12-22 21:08:18 +00:00
hint='Note that you cannot assign users to the Administrators or Guests groups from this dialog.'
persistent-hint
2019-04-29 00:25:19 +00:00
clearable
multiple
)
v-divider
v-checkbox(
color='primary'
label='Require password change on first login'
v-if='provider === `local`'
v-model='mustChangePwd'
hide-details
)
v-checkbox(
color='primary'
label='Send a welcome email'
hide-details
v-model='sendWelcomeEmail'
disabled
2019-04-29 00:25:19 +00:00
)
v-card-chin
v-spacer
2019-07-29 04:50:03 +00:00
v-btn(text, @click='isShown = false') Cancel
v-btn.px-3(depressed, color='primary', @click='newUser(false)')
v-icon(left) mdi-chevron-right
span Create
v-btn.px-3(depressed, color='primary', @click='newUser(true)')
v-icon(left) mdi-chevron-double-right
span Create and Close
</template>
<script>
2019-07-29 04:50:03 +00:00
import _ from 'lodash'
import validate from 'validate.js'
import gql from 'graphql-tag'
2019-07-29 04:50:03 +00:00
import createUserMutation from 'gql/admin/users/users-mutation-create.gql'
2019-08-17 22:29:58 +00:00
import groupsQuery from 'gql/admin/users/users-query-groups.gql'
export default {
props: {
value: {
type: Boolean,
default: false
}
},
data() {
return {
providers: [],
provider: 'local',
email: '',
password: '',
2019-04-29 00:25:19 +00:00
name: '',
groups: [],
group: [],
2019-04-29 00:25:19 +00:00
mustChangePwd: false,
sendWelcomeEmail: false
}
},
computed: {
isShown: {
get() { return this.value },
set(val) { this.$emit('input', val) }
}
},
watch: {
value(newValue, oldValue) {
if (newValue) {
this.$nextTick(() => {
this.$refs.emailInput.focus()
})
}
}
},
methods: {
2019-07-29 04:50:03 +00:00
async newUser(close = false) {
let rules = {
email: {
presence: {
allowEmpty: false
},
email: true
},
name: {
presence: {
allowEmpty: false
},
length: {
minimum: 2,
maximum: 255
}
}
}
if (this.provider === `local`) {
rules.password = {
presence: {
allowEmpty: false
},
length: {
minimum: 6,
maximum: 255
}
}
}
const validationResults = validate({
email: this.email,
password: this.password,
name: this.name
}, rules, { format: 'flat' })
if (validationResults) {
this.$store.commit('showNotification', {
style: 'red',
message: validationResults[0],
icon: 'alert'
})
2019-07-29 04:50:03 +00:00
return
}
try {
const resp = await this.$apollo.mutate({
mutation: createUserMutation,
variables: {
providerKey: this.provider,
email: this.email,
passwordRaw: this.password,
name: this.name,
groups: this.group,
2019-07-29 04:50:03 +00:00
mustChangePassword: this.mustChangePwd,
sendWelcomeEmail: this.sendWelcomeEmail
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-users-create')
}
})
if (_.get(resp, 'data.users.create.responseResult.succeeded', false)) {
this.$store.commit('showNotification', {
style: 'success',
message: 'New user created successfully.',
icon: 'check'
})
this.email = ''
this.password = ''
this.name = ''
if (close) {
this.isShown = false
this.$emit('refresh')
2019-07-29 04:50:03 +00:00
} else {
this.$refs.emailInput.focus()
}
} else {
this.$store.commit('showNotification', {
style: 'red',
message: _.get(resp, 'data.users.create.responseResult.message', 'An unexpected error occurred.'),
icon: 'alert'
2019-07-29 04:50:03 +00:00
})
}
} catch (err) {
this.$store.commit('pushGraphError', err)
}
},
generatePwd() {
2019-07-29 04:50:03 +00:00
const pwdChars = 'abcdefghkmnpqrstuvwxyzABCDEFHJKLMNPQRSTUVWXYZ23456789_*=?#!()+'
this.password = _.sampleSize(pwdChars, 12).join('')
}
},
apollo: {
providers: {
query: gql`
query {
authentication {
activeStrategies {
key
displayName
}
}
}
`,
fetchPolicy: 'network-only',
update: (data) => data.authentication.activeStrategies,
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-users-strategies-refresh')
}
2019-04-29 00:25:19 +00:00
},
groups: {
query: groupsQuery,
fetchPolicy: 'network-only',
update: (data) => data.groups.list,
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-auth-groups-refresh')
}
}
}
}
</script>