msb-public
/
wiki
mirror of https://github.com/requarks/wiki
1
0
Code Issues Projects Releases Wiki Activity

feat(admin): migrate users to vue 3 composable

Browse Source
pull/5698/head
Nicolas Giard 2 years ago
parent 6e303ac648
commit 47ed7b371c
No known key found for this signature in database
GPG Key ID: 85061B8F9D55B7C8
10 changed files with 1008 additions and 856 deletions
Show Stats Download Patch File Download Diff File

18
server/graph/resolvers/user.js
Unescape View File

@ -89,7 +89,7 @@ module.exports = {
await WIKI.models.users.createNewUser({ ...args, passwordRaw: args.password, isVerified: true })
return {
status: graphHelper.generateSuccess('User created successfully')
operation: graphHelper.generateSuccess('User created successfully')
}
} catch (err) {
return graphHelper.generateError(err)
@ -106,7 +106,7 @@ module.exports = {
WIKI.events.outbound.emit('addAuthRevoke', { id: args.id, kind: 'u' })
return {
status: graphHelper.generateSuccess('User deleted successfully')
operation: graphHelper.generateSuccess('User deleted successfully')
}
} catch (err) {
if (err.message.indexOf('foreign') >= 0) {
@ -121,7 +121,7 @@ module.exports = {
await WIKI.models.users.updateUser(args.id, args.patch)
return {
status: graphHelper.generateSuccess('User updated successfully')
operation: graphHelper.generateSuccess('User updated successfully')
}
} catch (err) {
return graphHelper.generateError(err)
@ -132,7 +132,7 @@ module.exports = {
await WIKI.models.users.query().patch({ isVerified: true }).findById(args.id)
return {
status: graphHelper.generateSuccess('User verified successfully')
operation: graphHelper.generateSuccess('User verified successfully')
}
} catch (err) {
return graphHelper.generateError(err)
@ -143,7 +143,7 @@ module.exports = {
await WIKI.models.users.query().patch({ isActive: true }).findById(args.id)
return {
status: graphHelper.generateSuccess('User activated successfully')
operation: graphHelper.generateSuccess('User activated successfully')
}
} catch (err) {
return graphHelper.generateError(err)
@ -160,7 +160,7 @@ module.exports = {
WIKI.events.outbound.emit('addAuthRevoke', { id: args.id, kind: 'u' })
return {
status: graphHelper.generateSuccess('User deactivated successfully')
operation: graphHelper.generateSuccess('User deactivated successfully')
}
} catch (err) {
return graphHelper.generateError(err)
@ -171,7 +171,7 @@ module.exports = {
await WIKI.models.users.query().patch({ tfaIsActive: true, tfaSecret: null }).findById(args.id)
return {
status: graphHelper.generateSuccess('User 2FA enabled successfully')
operation: graphHelper.generateSuccess('User 2FA enabled successfully')
}
} catch (err) {
return graphHelper.generateError(err)
@ -182,7 +182,7 @@ module.exports = {
await WIKI.models.users.query().patch({ tfaIsActive: false, tfaSecret: null }).findById(args.id)
return {
status: graphHelper.generateSuccess('User 2FA disabled successfully')
operation: graphHelper.generateSuccess('User 2FA disabled successfully')
}
} catch (err) {
return graphHelper.generateError(err)
@ -225,7 +225,7 @@ module.exports = {
const newToken = await WIKI.models.users.refreshToken(usr.id)
return {
status: graphHelper.generateSuccess('User profile updated successfully'),
operation: graphHelper.generateSuccess('User profile updated successfully'),
jwt: newToken.token
}
} catch (err) {

1
ux/package.json
Unescape View File

@ -76,6 +76,7 @@
"uuid": "8.3.2",
"v-network-graph": "0.5.16",
"vue": "3.2.31",
"vue-codemirror": "5.0.1",
"vue-i18n": "9.1.10",
"vue-router": "4.0.15",
"vuedraggable": "4.1.0",

2
ux/src/components/GroupEditOverlay.vue
Unescape View File

@ -501,7 +501,7 @@ import { fileOpen } from 'browser-fs-access'
import { useI18n } from 'vue-i18n'
import { exportFile, useQuasar } from 'quasar'
import { computed, onBeforeUnmount, onMounted, reactive, watch } from 'vue'
import { computed, onMounted, reactive, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAdminStore } from 'src/stores/admin'

272
ux/src/components/UserChangePwdDialog.vue
Unescape View File

@ -1,24 +1,21 @@
<template lang="pug">
q-dialog(ref='dialog', @hide='onDialogHide')
q-dialog(ref='dialogRef', @hide='onDialogHide')
q-card(style='min-width: 650px;')
q-card-section.card-header
q-icon(name='img:/_assets/icons/fluent-password-reset.svg', left, size='sm')
span {{$t(`admin.users.changePassword`)}}
span {{t(`admin.users.changePassword`)}}
q-form.q-py-sm(ref='changeUserPwdForm', @submit='save')
q-item
blueprint-icon(icon='password')
q-item-section
q-input(
outlined
v-model='userPassword'
v-model='state.userPassword'
dense
:rules=`[
val => val.length > 0 || $t('admin.users.passwordMissing'),
val => val.length >= 8 || $t('admin.users.passwordTooShort')
]`
:rules='userPasswordValidation'
hide-bottom-space
:label='$t(`admin.users.password`)'
:aria-label='$t(`admin.users.password`)'
:label='t(`admin.users.password`)'
:aria-label='t(`admin.users.password`)'
lazy-rules='ondemand'
autofocus
)
@ -41,159 +38,182 @@ q-dialog(ref='dialog', @hide='onDialogHide')
q-item(tag='label', v-ripple)
blueprint-icon(icon='password-reset')
q-item-section
q-item-label {{$t(`admin.users.mustChangePwd`)}}
q-item-label(caption) {{$t(`admin.users.mustChangePwdHint`)}}
q-item-label {{t(`admin.users.mustChangePwd`)}}
q-item-label(caption) {{t(`admin.users.mustChangePwdHint`)}}
q-item-section(avatar)
q-toggle(
v-model='userMustChangePassword'
v-model='state.userMustChangePassword'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='$t(`admin.users.mustChangePwd`)'
:aria-label='t(`admin.users.mustChangePwd`)'
)
q-card-actions.card-actions
q-space
q-btn.acrylic-btn(
flat
:label='$t(`common.actions.cancel`)'
:label='t(`common.actions.cancel`)'
color='grey'
padding='xs md'
@click='hide'
@click='onDialogCancel'
)
q-btn(
unelevated
:label='$t(`common.actions.update`)'
:label='t(`common.actions.update`)'
color='primary'
padding='xs md'
@click='save'
:loading='isLoading'
:loading='state.isLoading'
)
</template>
<script>
<script setup>
import gql from 'graphql-tag'
import sampleSize from 'lodash/sampleSize'
import zxcvbn from 'zxcvbn'
export default {
props: {
userId: {
type: String,
required: true
}
},
emits: ['ok', 'hide'],
data () {
import { useI18n } from 'vue-i18n'
import { useDialogPluginComponent, useQuasar } from 'quasar'
import { computed, reactive, ref } from 'vue'
// PROPS
const props = defineProps({
userId: {
type: String,
required: true
}
})
// EMITS
defineEmits([
...useDialogPluginComponent.emits
])
// QUASAR
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
const $q = useQuasar()
// I18N
const { t } = useI18n()
// DATA
const state = reactive({
userPassword: '',
userMustChangePassword: false,
isLoading: false
})
// REFS
const changeUserPwdForm = ref(null)
// COMPUTED
const passwordStrength = computed(() => {
if (state.userPassword.length < 8) {
return {
userPassword: '',
userMustChangePassword: false,
isLoading: false
color: 'negative',
label: t('admin.users.pwdStrengthWeak')
}
},
computed: {
passwordStrength () {
if (this.userPassword.length < 8) {
} else {
switch (zxcvbn(state.userPassword).score) {
case 1:
return {
color: 'negative',
label: this.$t('admin.users.pwdStrengthWeak')
color: 'deep-orange-7',
label: t('admin.users.pwdStrengthPoor')
}
} else {
switch (zxcvbn(this.userPassword).score) {
case 1:
return {
color: 'deep-orange-7',
label: this.$t('admin.users.pwdStrengthPoor')
}
case 2:
return {
color: 'purple-7',
label: this.$t('admin.users.pwdStrengthMedium')
}
case 3:
return {
color: 'blue-7',
label: this.$t('admin.users.pwdStrengthGood')
}
case 4:
return {
color: 'green-7',
label: this.$t('admin.users.pwdStrengthStrong')
}
default:
return {
color: 'negative',
label: this.$t('admin.users.pwdStrengthWeak')
}
case 2:
return {
color: 'purple-7',
label: t('admin.users.pwdStrengthMedium')
}
}
}
},
methods: {
show () {
this.$refs.dialog.show()
},
hide () {
this.$refs.dialog.hide()
},
onDialogHide () {
this.$emit('hide')
},
randomizePassword () {
const pwdChars = 'abcdefghkmnpqrstuvwxyzABCDEFHJKLMNPQRSTUVWXYZ23456789_*=?#!()+'
this.userPassword = sampleSize(pwdChars, 16).join('')
},
async save () {
this.isLoading = true
try {
const isFormValid = await this.$refs.changeUserPwdForm.validate(true)
if (!isFormValid) {
throw new Error(this.$t('admin.users.createInvalidData'))
case 3:
return {
color: 'blue-7',
label: t('admin.users.pwdStrengthGood')
}
const resp = await this.$apollo.mutate({
mutation: gql`
mutation adminUpdateUserPwd (
$id: UUID!
$patch: UserUpdateInput!
) {
updateUser (
id: $id
patch: $patch
) {
status {
succeeded
message
}
}
}
`,
variables: {
id: this.userId,
patch: {
newPassword: this.userPassword,
mustChangePassword: this.userMustChangePassword
case 4:
return {
color: 'green-7',
label: t('admin.users.pwdStrengthStrong')
}
default:
return {
color: 'negative',
label: t('admin.users.pwdStrengthWeak')
}
}
}
})
// VALIDATION RULES
const userPasswordValidation = [
val => val.length > 0 || t('admin.users.passwordMissing'),
val => val.length >= 8 || t('admin.users.passwordTooShort')
]
// METHODS
function randomizePassword () {
const pwdChars = 'abcdefghkmnpqrstuvwxyzABCDEFHJKLMNPQRSTUVWXYZ23456789_*=?#!()+'
state.userPassword = sampleSize(pwdChars, 16).join('')
}
async function save () {
state.isLoading = true
try {
const isFormValid = await changeUserPwdForm.value.validate(true)
if (!isFormValid) {
throw new Error(t('admin.users.createInvalidData'))
}
const resp = await APOLLO_CLIENT.mutate({
mutation: gql`
mutation adminUpdateUserPwd (
$id: UUID!
$patch: UserUpdateInput!
) {
updateUser (
id: $id
patch: $patch
) {
operation {
succeeded
message
}
}
})
if (resp?.data?.updateUser?.status?.succeeded) {
this.$q.notify({
type: 'positive',
message: this.$t('admin.users.createSuccess')
})
this.$emit('ok', {
mustChangePassword: this.userMustChangePassword
})
this.hide()
} else {
throw new Error(resp?.data?.updateUser?.status?.message || 'An unexpected error occured.')
}
} catch (err) {
this.$q.notify({
type: 'negative',
message: err.message
})
`,
variables: {
id: props.userId,
patch: {
newPassword: state.userPassword,
mustChangePassword: state.userMustChangePassword
}
}
this.isLoading = false
})
if (resp?.data?.updateUser?.operation?.succeeded) {
$q.notify({
type: 'positive',
message: t('admin.users.createSuccess')
})
onDialogOK({
mustChangePassword: state.userMustChangePassword
})
} else {
throw new Error(resp?.data?.updateUser?.operation?.message || 'An unexpected error occured.')
}
} catch (err) {
$q.notify({
type: 'negative',
message: err.message
})
}
state.isLoading = false
}
</script>

412
ux/src/components/UserCreateDialog.vue
Unescape View File

@ -1,24 +1,21 @@
<template lang="pug">
q-dialog(ref='dialog', @hide='onDialogHide')
q-dialog(ref='dialogRef', @hide='onDialogHide')
q-card(style='min-width: 650px;')
q-card-section.card-header
q-icon(name='img:/_assets/icons/fluent-plus-plus.svg', left, size='sm')
span {{$t(`admin.users.create`)}}
span {{t(`admin.users.create`)}}
q-form.q-py-sm(ref='createUserForm', @submit='create')
q-item
blueprint-icon(icon='person')
q-item-section
q-input(
outlined
v-model='userName'
v-model='state.userName'
dense
:rules=`[
val => val.length > 0 || $t('admin.users.nameMissing'),
val => /^[^<>"]+$/.test(val) || $t('admin.users.nameInvalidChars')
]`
:rules='userNameValidation'
hide-bottom-space
:label='$t(`common.field.name`)'
:aria-label='$t(`common.field.name`)'
:label='t(`common.field.name`)'
:aria-label='t(`common.field.name`)'
lazy-rules='ondemand'
autofocus
ref='iptName'
@ -28,16 +25,13 @@ q-dialog(ref='dialog', @hide='onDialogHide')
q-item-section
q-input(
outlined
v-model='userEmail'
v-model='state.userEmail'
dense
type='email'
:rules=`[
val => val.length > 0 || $t('admin.users.emailMissing'),
val => /^.+\@.+\..+$/.test(val) || $t('admin.users.emailInvalid')
]`
:rules='userEmailValidation'
hide-bottom-space
:label='$t(`admin.users.email`)'
:aria-label='$t(`admin.users.email`)'
:label='t(`admin.users.email`)'
:aria-label='t(`admin.users.email`)'
lazy-rules='ondemand'
autofocus
)
@ -46,15 +40,12 @@ q-dialog(ref='dialog', @hide='onDialogHide')
q-item-section
q-input(
outlined
v-model='userPassword'
v-model='state.userPassword'
dense
:rules=`[
val => val.length > 0 || $t('admin.users.passwordMissing'),
val => val.length >= 8 || $t('admin.users.passwordTooShort')
]`
:rules='userPasswordValidation'
hide-bottom-space
:label='$t(`admin.users.password`)'
:aria-label='$t(`admin.users.password`)'
:label='t(`admin.users.password`)'
:aria-label='t(`admin.users.password`)'
lazy-rules='ondemand'
autofocus
)
@ -79,8 +70,8 @@ q-dialog(ref='dialog', @hide='onDialogHide')
q-item-section
q-select(
outlined
:options='groups'
v-model='userGroups'
:options='state.groups'
v-model='state.userGroups'
multiple
map-options
emit-value
@ -88,29 +79,26 @@ q-dialog(ref='dialog', @hide='onDialogHide')
option-label='name'
options-dense
dense
:rules=`[
val => val.length > 0 || $t('admin.users.groupsMissing')
]`
:rules='userGroupsValidation'
hide-bottom-space
:label='$t(`admin.users.groups`)'
:aria-label='$t(`admin.users.groups`)'
:label='t(`admin.users.groups`)'
:aria-label='t(`admin.users.groups`)'
lazy-rules='ondemand'
:loading='loadingGroups'
:loading='state.loadingGroups'
)
template(v-slot:selected)
.text-caption(v-if='userGroups.length > 1')
.text-caption(v-if='state.userGroups.length > 1')
i18n-t(keypath='admin.users.groupsSelected')
template(#count)
strong {{ userGroups.length }}
.text-caption(v-else-if='userGroups.length === 1')
strong {{ state.userGroups.length }}
.text-caption(v-else-if='state.userGroups.length === 1')
i18n-t(keypath='admin.users.groupSelected')
template(#group)
strong {{ selectedGroupName }}
span(v-else)
template(v-slot:option='{ itemProps, itemEvents, opt, selected, toggleOption }')
template(v-slot:option='{ itemProps, opt, selected, toggleOption }')
q-item(
v-bind='itemProps'
v-on='itemEvents'
)
q-item-section(side)
q-checkbox(
@ -123,214 +111,254 @@ q-dialog(ref='dialog', @hide='onDialogHide')
q-item(tag='label', v-ripple)
blueprint-icon(icon='password-reset')
q-item-section
q-item-label {{$t(`admin.users.mustChangePwd`)}}
q-item-label(caption) {{$t(`admin.users.mustChangePwdHint`)}}
q-item-label {{t(`admin.users.mustChangePwd`)}}
q-item-label(caption) {{t(`admin.users.mustChangePwdHint`)}}
q-item-section(avatar)
q-toggle(
v-model='userMustChangePassword'
v-model='state.userMustChangePassword'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='$t(`admin.users.mustChangePwd`)'
:aria-label='t(`admin.users.mustChangePwd`)'
)
q-item(tag='label', v-ripple)
blueprint-icon(icon='email-open')
q-item-section
q-item-label {{$t(`admin.users.sendWelcomeEmail`)}}
q-item-label(caption) {{$t(`admin.users.sendWelcomeEmailHint`)}}
q-item-label {{t(`admin.users.sendWelcomeEmail`)}}
q-item-label(caption) {{t(`admin.users.sendWelcomeEmailHint`)}}
q-item-section(avatar)
q-toggle(
v-model='userSendWelcomeEmail'
v-model='state.userSendWelcomeEmail'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='$t(`admin.users.sendWelcomeEmail`)'
:aria-label='t(`admin.users.sendWelcomeEmail`)'
)
q-card-actions.card-actions
q-checkbox(
v-model='keepOpened'
v-model='state.keepOpened'
color='primary'
:label='$t(`admin.users.createKeepOpened`)'
:label='t(`admin.users.createKeepOpened`)'
size='sm'
)
q-space
q-btn.acrylic-btn(
flat
:label='$t(`common.actions.cancel`)'
:label='t(`common.actions.cancel`)'
color='grey'
padding='xs md'
@click='hide'
@click='onDialogCancel'
)
q-btn(
unelevated
:label='$t(`common.actions.create`)'
:label='t(`common.actions.create`)'
color='primary'
padding='xs md'
@click='create'
:loading='loading > 0'
:loading='state.loading > 0'
)
</template>
<script>
<script setup>
import gql from 'graphql-tag'
import sampleSize from 'lodash/sampleSize'
import zxcvbn from 'zxcvbn'
import cloneDeep from 'lodash/cloneDeep'
import { useI18n } from 'vue-i18n'
import { useDialogPluginComponent, useQuasar } from 'quasar'
import { computed, onMounted, reactive, ref } from 'vue'
export default {
emits: ['ok', 'hide'],
data () {
// EMITS
defineEmits([
...useDialogPluginComponent.emits
])
// QUASAR
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
const $q = useQuasar()
// I18N
const { t } = useI18n()
// DATA
const state = reactive({
userName: '',
userEmail: '',
userPassword: '',
userGroups: [],
userMustChangePassword: false,
userSendWelcomeEmail: false,
keepOpened: false,
groups: [],
loadingGroups: false,
loading: false
})
// REFS
const createUserForm = ref(null)
const iptName = ref(null)
// COMPUTED
const passwordStrength = computed(() => {
if (state.userPassword.length < 8) {
return {
userName: '',
userEmail: '',
userPassword: '',
userGroups: [],
userMustChangePassword: false,
userSendWelcomeEmail: false,
keepOpened: false,
groups: [],
loadingGroups: false,
loading: false
color: 'negative',
label: t('admin.users.pwdStrengthWeak')
}
},
computed: {
passwordStrength () {
if (this.userPassword.length < 8) {
} else {
switch (zxcvbn(state.userPassword).score) {
case 1:
return {
color: 'negative',
label: this.$t('admin.users.pwdStrengthWeak')
color: 'deep-orange-7',
label: t('admin.users.pwdStrengthPoor')
}
} else {
switch (zxcvbn(this.userPassword).score) {
case 1:
return {
color: 'deep-orange-7',
label: this.$t('admin.users.pwdStrengthPoor')
}
case 2:
return {
color: 'purple-7',
label: this.$t('admin.users.pwdStrengthMedium')
}
case 3:
return {
color: 'blue-7',
label: this.$t('admin.users.pwdStrengthGood')
}
case 4:
return {
color: 'green-7',
label: this.$t('admin.users.pwdStrengthStrong')
}
default:
return {
color: 'negative',
label: this.$t('admin.users.pwdStrengthWeak')
}
case 2:
return {
color: 'purple-7',
label: t('admin.users.pwdStrengthMedium')
}
case 3:
return {
color: 'blue-7',
label: t('admin.users.pwdStrengthGood')
}
case 4:
return {
color: 'green-7',
label: t('admin.users.pwdStrengthStrong')
}
default:
return {
color: 'negative',
label: t('admin.users.pwdStrengthWeak')
}
}
},
selectedGroupName () {
return this.groups.filter(g => g.id === this.userGroups[0])[0]?.name
}
},
methods: {
async show () {
this.$refs.dialog.show()
}
})
const selectedGroupName = computed(() => {
return state.groups.filter(g => g.id === state.userGroups[0])[0]?.name
})
this.loading++
this.loadingGroups = true
const resp = await this.$apollo.query({
query: gql`
query getGroupsForCreateUser {
groups {
id
name
}
}
`,
fetchPolicy: 'network-only'
})
this.groups = cloneDeep(resp?.data?.groups?.filter(g => g.id !== '10000000-0000-4000-0000-000000000001') ?? [])
this.loadingGroups = false
this.loading--
},
hide () {
this.$refs.dialog.hide()
},
onDialogHide () {
this.$emit('hide')
},
randomizePassword () {
const pwdChars = 'abcdefghkmnpqrstuvwxyzABCDEFHJKLMNPQRSTUVWXYZ23456789_*=?#!()+'
this.userPassword = sampleSize(pwdChars, 16).join('')
},
async create () {
this.loading++
try {
const isFormValid = await this.$refs.createUserForm.validate(true)
if (!isFormValid) {
throw new Error(this.$t('admin.users.createInvalidData'))
// VALIDATION RULES
const userNameValidation = [
val => val.length > 0 || t('admin.users.nameMissing'),
val => /^[^<>"]+$/.test(val) || t('admin.users.nameInvalidChars')
]
const userEmailValidation = [
val => val.length > 0 || t('admin.users.emailMissing'),
val => /^.+@.+\..+$/.test(val) || t('admin.users.emailInvalid')
]
const userPasswordValidation = [
val => val.length > 0 || t('admin.users.passwordMissing'),
val => val.length >= 8 || t('admin.users.passwordTooShort')
]
const userGroupsValidation = [
val => val.length > 0 || t('admin.users.groupsMissing')
]
// METHODS
async function loadGroups () {
state.loading++
state.loadingGroups = true
const resp = await APOLLO_CLIENT.query({
query: gql`
query getGroupsForCreateUser {
groups {
id
name
}
const resp = await this.$apollo.mutate({
mutation: gql`
mutation createUser (
$name: String!
$email: String!
$password: String!
$groups: [UUID]!
$mustChangePassword: Boolean!
$sendWelcomeEmail: Boolean!
) {
createUser (
name: $name
email: $email
password: $password
groups: $groups
mustChangePassword: $mustChangePassword
sendWelcomeEmail: $sendWelcomeEmail
) {
status {
succeeded
message
}
}
}
`,
fetchPolicy: 'network-only'
})
state.groups = cloneDeep(resp?.data?.groups?.filter(g => g.id !== '10000000-0000-4000-8000-000000000001') ?? [])
state.loadingGroups = false
state.loading--
}
function randomizePassword () {
const pwdChars = 'abcdefghkmnpqrstuvwxyzABCDEFHJKLMNPQRSTUVWXYZ23456789_*=?#!()+'
state.userPassword = sampleSize(pwdChars, 16).join('')
}
async function create () {
state.loading++
try {
const isFormValid = await createUserForm.value.validate(true)
if (!isFormValid) {
throw new Error(t('admin.users.createInvalidData'))
}
const resp = await APOLLO_CLIENT.mutate({
mutation: gql`
mutation createUser (
$name: String!
$email: String!
$password: String!
$groups: [UUID]!
$mustChangePassword: Boolean!
$sendWelcomeEmail: Boolean!
) {
createUser (
name: $name
email: $email
password: $password
groups: $groups
mustChangePassword: $mustChangePassword
sendWelcomeEmail: $sendWelcomeEmail
) {
operation {
succeeded
message
}
`,
variables: {
name: this.userName,
email: this.userEmail,
password: this.userPassword,
groups: this.userGroups,
mustChangePassword: this.userMustChangePassword,
sendWelcomeEmail: this.userSendWelcomeEmail
}
})
if (resp?.data?.createUser?.status?.succeeded) {
this.$q.notify({
type: 'positive',
message: this.$t('admin.users.createSuccess')
})
if (this.keepOpened) {
this.userName = ''
this.userEmail = ''
this.userPassword = ''
this.$refs.iptName.focus()
} else {
this.$emit('ok')
this.hide()
}
} else {
throw new Error(resp?.data?.createUser?.status?.message || 'An unexpected error occured.')
}
} catch (err) {
this.$q.notify({
type: 'negative',
message: err.message
})
`,
variables: {
name: state.userName,
email: state.userEmail,
password: state.userPassword,
groups: state.userGroups,
mustChangePassword: state.userMustChangePassword,
sendWelcomeEmail: state.userSendWelcomeEmail
}
})
if (resp?.data?.createUser?.operation?.succeeded) {
$q.notify({
type: 'positive',
message: t('admin.users.createSuccess')
})
if (state.keepOpened) {
state.userName = ''
state.userEmail = ''
state.userPassword = ''
iptName.value.focus()
} else {
onDialogOK()
}
this.loading--
} else {
throw new Error(resp?.data?.createUser?.operation?.message || 'An unexpected error occured.')
}
} catch (err) {
$q.notify({
type: 'negative',
message: err.message
})
}
state.loading--
}
// MOUNTED
onMounted(loadGroups)
</script>

834
ux/src/components/UserEditOverlay.vue
View File

File diff suppressed because it is too large Load Diff

6
ux/src/pages/AdminGroups.vue
Unescape View File

@ -168,6 +168,8 @@ const headers = [
}
]
// WATCHERS
watch(() => adminStore.overlay, (newValue, oldValue) => {
if (newValue === '' && oldValue === 'GroupEditOverlay') {
router.push('/_admin/groups')
@ -175,9 +177,7 @@ watch(() => adminStore.overlay, (newValue, oldValue) => {
}
})
watch(() => route.params.id, () => {
checkOverlay()
})
watch(() => route.params.id, checkOverlay)
// METHODS

298
ux/src/pages/AdminUsers.vue
Unescape View File

@ -4,12 +4,12 @@ q-page.admin-groups
.col-auto
img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-account.svg')
.col.q-pl-md
.text-h5.text-primary.animated.fadeInLeft {{ $t('admin.users.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ $t('admin.users.subtitle') }}
.text-h5.text-primary.animated.fadeInLeft {{ t('admin.users.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.users.subtitle') }}
.col-auto.flex.items-center
q-input.denser.q-mr-sm(
outlined
v-model='search'
v-model='state.search'
dense
:class='$q.dark.isActive ? `bg-dark` : `bg-white`'
)
@ -28,29 +28,29 @@ q-page.admin-groups
flat
color='secondary'
@click='load'
:loading='loading > 0'
:loading='state.loading > 0'
)
q-btn(
unelevated
icon='las la-plus'
:label='$t(`admin.users.create`)'
:label='t(`admin.users.create`)'
color='primary'
@click='createUser'
:disabled='loading > 0'
:disabled='state.loading > 0'
)
q-separator(inset)
.row.q-pa-md.q-col-gutter-md
.col-12
q-card.shadow-1
q-table(
:rows='users'
:rows='state.users'
:columns='headers'
row-key='id'
flat
hide-header
hide-bottom
:rows-per-page-options='[0]'
:loading='loading > 0'
:loading='state.loading > 0'
)
template(v-slot:body-cell-id='props')
q-td(:props='props')
@ -92,7 +92,7 @@ q-page.admin-groups
:to='`/_admin/users/` + props.row.id'
icon='las la-pen'
color='indigo'
:label='$t(`common.actions.edit`)'
:label='t(`common.actions.edit`)'
no-caps
)
q-btn.acrylic-btn(
@ -100,146 +100,178 @@ q-page.admin-groups
flat
icon='las la-trash'
color='accent'
@click='deleteGroup(props.row)'
@click='deleteUser(props.row)'
)
</template>
<script>
<script setup>
import gql from 'graphql-tag'
import cloneDeep from 'lodash/cloneDeep'
import { DateTime } from 'luxon'
import { sync } from 'vuex-pathify'
import { createMetaMixin } from 'quasar'
import { useI18n } from 'vue-i18n'
import { useMeta, useQuasar } from 'quasar'
import { onBeforeUnmount, onMounted, reactive, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAdminStore } from 'src/stores/admin'
import UserCreateDialog from '../components/UserCreateDialog.vue'
export default {
mixins: [
createMetaMixin(function () {
return {
title: this.$t('admin.users.title')
}
})
],
data () {
return {
users: [],
loading: 0,
search: ''
}
},
computed: {
overlay: sync('admin/overlay', false),
headers () {
return [
{
align: 'center',
field: 'id',
name: 'id',
sortable: false,
style: 'width: 20px'
},
{
label: this.$t('common.field.name'),
align: 'left',
field: 'name',
name: 'name',
sortable: true
},
{
label: this.$t('admin.users.email'),
align: 'left',
field: 'email',
name: 'email',
sortable: false
},
{
align: 'left',
field: 'createdAt',
name: 'date',
sortable: false
},
{
label: '',
align: 'right',
field: 'edit',
name: 'edit',
sortable: false,
style: 'width: 250px'
}
]
}
// QUASAR
const $q = useQuasar()
// STORES
const adminStore = useAdminStore()
// ROUTER
const router = useRouter()
const route = useRoute()
// I18N
const { t } = useI18n()
// META
useMeta({
title: t('admin.users.title')
})
// DATA
const state = reactive({
users: [],
loading: 0,
search: ''
})
const headers = [
{
align: 'center',
field: 'id',
name: 'id',
sortable: false,
style: 'width: 20px'
},
watch: {
overlay (newValue, oldValue) {
if (newValue === '' && oldValue === 'UserEditOverlay') {
this.$router.push('/_admin/users')
this.load()
}
},
$route: 'checkOverlay'
{
label: t('common.field.name'),
align: 'left',
field: 'name',
name: 'name',
sortable: true
},
mounted () {
this.checkOverlay()
this.load()
{
label: t('admin.users.email'),
align: 'left',
field: 'email',
name: 'email',
sortable: false
},
beforeUnmount () {
this.overlay = ''
{
align: 'left',
field: 'createdAt',
name: 'date',
sortable: false
},
methods: {
async load () {
this.loading++
this.$q.loading.show()
const resp = await this.$apollo.query({
query: gql`
query getUsers {
users {
id
name
email
isSystem
isActive
createdAt
lastLoginAt
}
}
`,
fetchPolicy: 'network-only'
})
this.users = cloneDeep(resp?.data?.users)
this.$q.loading.hide()
this.loading--
},
humanizeDate (val) {
return DateTime.fromISO(val).toRelative()
},
checkOverlay () {
if (this.$route.params && this.$route.params.id) {
this.$store.set('admin/overlayOpts', { id: this.$route.params.id })
this.$store.set('admin/overlay', 'UserEditOverlay')
} else {
this.$store.set('admin/overlay', '')
}
},
createUser () {
this.$q.dialog({
component: UserCreateDialog
}).onOk(() => {
this.load()
})
},
deleteUser (gr) {
this.$q.dialog({
// component: UserDeleteDialog,
componentProps: {
group: gr
{
label: '',
align: 'right',
field: 'edit',
name: 'edit',
sortable: false,
style: 'width: 250px'
}
]
// WATCHERS
watch(() => adminStore.overlay, (newValue, oldValue) => {
if (newValue === '' && oldValue === 'UserEditOverlay') {
router.push('/_admin/users')
load()
}
})
watch(() => route.params.id, checkOverlay)
// METHODS
async function load () {
state.loading++
$q.loading.show()
const resp = await APOLLO_CLIENT.query({
query: gql`
query getUsers {
users {
id
name
email
isSystem
isActive
createdAt
lastLoginAt
}
}).onOk(() => {
this.load()
})
}
}
`,
fetchPolicy: 'network-only'
})
state.users = cloneDeep(resp?.data?.users)
$q.loading.hide()
state.loading--
}
function humanizeDate (val) {
return DateTime.fromISO(val).toRelative()
}
function checkOverlay () {
if (route.params?.id) {
adminStore.$patch({
overlayOpts: { id: route.params.id },
overlay: 'UserEditOverlay'
})
} else {
adminStore.$patch({
overlay: ''
})
}
}
function createUser () {
$q.dialog({
component: UserCreateDialog
}).onOk(() => {
this.load()
})
}
function deleteUser (usr) {
$q.dialog({
// component: UserDeleteDialog,
componentProps: {
user: usr
}
}).onOk(load)
}
// MOUNTED
onMounted(() => {
checkOverlay()
load()
})
// BEFORE UNMOUNT
onBeforeUnmount(() => {
adminStore.$patch({
overlay: ''
})
})
</script>
<style lang='scss'>

2
ux/src/router/routes.js
Unescape View File

@ -42,7 +42,7 @@ const routes = [
// -> Users
// { path: 'auth', component: () => import('../pages/AdminAuth.vue') },
{ path: 'groups/:id?/:section?', component: () => import('../pages/AdminGroups.vue') },
// { path: 'users/:id?/:section?', component: () => import('../pages/AdminUsers.vue') },
{ path: 'users/:id?/:section?', component: () => import('../pages/AdminUsers.vue') },
// -> System
// { path: 'api', component: () => import('../pages/AdminApi.vue') },
{ path: 'extensions', component: () => import('../pages/AdminExtensions.vue') },

19
ux/yarn.lock
Unescape View File

@ -97,7 +97,7 @@ __metadata:
languageName: node
linkType: hard
"@codemirror/basic-setup@npm:0.20.0":
"@codemirror/basic-setup@npm:0.20.0, @codemirror/basic-setup@npm:^0.20.0":
version: 0.20.0
resolution: "@codemirror/basic-setup@npm:0.20.0"
dependencies:
@ -6717,6 +6717,7 @@ __metadata:
uuid: 8.3.2
v-network-graph: 0.5.16
vue: 3.2.31
vue-codemirror: 5.0.1
vue-i18n: 9.1.10
vue-router: 4.0.15
vuedraggable: 4.1.0
@ -6816,6 +6817,22 @@ __metadata:
languageName: node
linkType: hard
"vue-codemirror@npm:5.0.1":
version: 5.0.1
resolution: "vue-codemirror@npm:5.0.1"
dependencies:
"@codemirror/basic-setup": ^0.20.0
"@codemirror/commands": ^0.20.0
"@codemirror/language": ^0.20.0
"@codemirror/state": ^0.20.0
"@codemirror/view": ^0.20.0
csstype: ^2.6.8
peerDependencies:
vue: 3.x
checksum: 5d96312123d109e619ecec56e8ddb1b2bdf294738a1ac796d6d35deefba9bfa25e1a311a29aa79315ba2ef48c0a6df33597a8e062f64b93166801dbed632f599
languageName: node
linkType: hard
"vue-demi@npm:*":
version: 0.12.5
resolution: "vue-demi@npm:0.12.5"

Write Preview
Loading…
Cancel
Save