mirror of https://github.com/requarks/wiki
NGPixel
1 year ago
parent
c5a441c946
commit
7f9c3511e8
|
After Width: | Height: | Size: 818 B |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,248 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
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`)}}
|
||||||
|
q-form.q-py-sm(ref='changeUserPwdForm', @submit='save')
|
||||||
|
q-item
|
||||||
|
blueprint-icon(icon='lock')
|
||||||
|
q-item-section
|
||||||
|
q-input(
|
||||||
|
outlined
|
||||||
|
v-model='state.currentPassword'
|
||||||
|
dense
|
||||||
|
:rules='currentPasswordValidation'
|
||||||
|
hide-bottom-space
|
||||||
|
:label='t(`auth.changePwd.currentPassword`)'
|
||||||
|
:aria-label='t(`auth.changePwd.currentPassword`)'
|
||||||
|
lazy-rules='ondemand'
|
||||||
|
autofocus
|
||||||
|
)
|
||||||
|
q-item
|
||||||
|
blueprint-icon(icon='password')
|
||||||
|
q-item-section
|
||||||
|
q-input(
|
||||||
|
outlined
|
||||||
|
v-model='state.newPassword'
|
||||||
|
dense
|
||||||
|
:rules='newPasswordValidation'
|
||||||
|
hide-bottom-space
|
||||||
|
:label='t(`auth.changePwd.newPassword`)'
|
||||||
|
:aria-label='t(`auth.changePwd.newPassword`)'
|
||||||
|
lazy-rules='ondemand'
|
||||||
|
autofocus
|
||||||
|
)
|
||||||
|
template(#append)
|
||||||
|
.flex.items-center
|
||||||
|
q-badge(
|
||||||
|
:color='passwordStrength.color'
|
||||||
|
:label='passwordStrength.label'
|
||||||
|
)
|
||||||
|
q-separator.q-mx-sm(vertical)
|
||||||
|
q-btn(
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
padding='none xs'
|
||||||
|
color='brown'
|
||||||
|
@click='randomizePassword'
|
||||||
|
)
|
||||||
|
q-icon(name='las la-dice-d6')
|
||||||
|
.q-pl-xs.text-caption: strong Generate
|
||||||
|
q-item
|
||||||
|
blueprint-icon(icon='good-pincode')
|
||||||
|
q-item-section
|
||||||
|
q-input(
|
||||||
|
outlined
|
||||||
|
v-model='state.verifyPassword'
|
||||||
|
dense
|
||||||
|
:rules='verifyPasswordValidation'
|
||||||
|
hide-bottom-space
|
||||||
|
:label='t(`auth.changePwd.newPasswordVerify`)'
|
||||||
|
:aria-label='t(`auth.changePwd.newPasswordVerify`)'
|
||||||
|
lazy-rules='ondemand'
|
||||||
|
autofocus
|
||||||
|
)
|
||||||
|
q-card-actions.card-actions
|
||||||
|
q-space
|
||||||
|
q-btn.acrylic-btn(
|
||||||
|
flat
|
||||||
|
:label='t(`common.actions.cancel`)'
|
||||||
|
color='grey'
|
||||||
|
padding='xs md'
|
||||||
|
@click='onDialogCancel'
|
||||||
|
)
|
||||||
|
q-btn(
|
||||||
|
unelevated
|
||||||
|
:label='t(`common.actions.update`)'
|
||||||
|
color='primary'
|
||||||
|
padding='xs md'
|
||||||
|
@click='save'
|
||||||
|
:loading='state.isLoading'
|
||||||
|
)
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import gql from 'graphql-tag'
|
||||||
|
import zxcvbn from 'zxcvbn'
|
||||||
|
import { sampleSize } from 'lodash-es'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { useDialogPluginComponent, useQuasar } from 'quasar'
|
||||||
|
import { computed, reactive, ref } from 'vue'
|
||||||
|
|
||||||
|
import { useSiteStore } from 'src/stores/site'
|
||||||
|
|
||||||
|
// PROPS
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
strategyId: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// EMITS
|
||||||
|
|
||||||
|
defineEmits([
|
||||||
|
...useDialogPluginComponent.emits
|
||||||
|
])
|
||||||
|
|
||||||
|
// QUASAR
|
||||||
|
|
||||||
|
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
|
||||||
|
const $q = useQuasar()
|
||||||
|
|
||||||
|
// STORES
|
||||||
|
|
||||||
|
const siteStore = useSiteStore()
|
||||||
|
|
||||||
|
// I18N
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// DATA
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
currentPassword: '',
|
||||||
|
newPassword: '',
|
||||||
|
verifyPassword: '',
|
||||||
|
isLoading: false
|
||||||
|
})
|
||||||
|
|
||||||
|
// REFS
|
||||||
|
|
||||||
|
const changeUserPwdForm = ref(null)
|
||||||
|
|
||||||
|
// COMPUTED
|
||||||
|
|
||||||
|
const passwordStrength = computed(() => {
|
||||||
|
if (state.newPassword.length < 8) {
|
||||||
|
return {
|
||||||
|
color: 'negative',
|
||||||
|
label: t('admin.users.pwdStrengthWeak')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
switch (zxcvbn(state.newPassword).score) {
|
||||||
|
case 1:
|
||||||
|
return {
|
||||||
|
color: 'deep-orange-7',
|
||||||
|
label: t('admin.users.pwdStrengthPoor')
|
||||||
|
}
|
||||||
|
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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// VALIDATION RULES
|
||||||
|
|
||||||
|
const currentPasswordValidation = [
|
||||||
|
val => val.length > 0 || t('auth.errors.missingPassword')
|
||||||
|
]
|
||||||
|
const newPasswordValidation = [
|
||||||
|
val => val.length > 0 || t('auth.errors.missingPassword'),
|
||||||
|
val => val.length >= 8 || t('auth.errors.passwordTooShort')
|
||||||
|
]
|
||||||
|
const verifyPasswordValidation = [
|
||||||
|
val => val.length > 0 || t('auth.errors.missingVerifyPassword'),
|
||||||
|
val => val === state.newPassword || t('auth.errors.passwordsNotMatch')
|
||||||
|
]
|
||||||
|
|
||||||
|
// METHODS
|
||||||
|
|
||||||
|
function randomizePassword () {
|
||||||
|
const pwdChars = 'abcdefghkmnpqrstuvwxyzABCDEFHJKLMNPQRSTUVWXYZ23456789_*=?#!()+'
|
||||||
|
state.newPassword = sampleSize(pwdChars, 16).join('')
|
||||||
|
}
|
||||||
|
|
||||||
|
async function save () {
|
||||||
|
state.isLoading = true
|
||||||
|
try {
|
||||||
|
const isFormValid = await changeUserPwdForm.value.validate(true)
|
||||||
|
if (!isFormValid) {
|
||||||
|
throw new Error(t('auth.errors.fields'))
|
||||||
|
}
|
||||||
|
const resp = await APOLLO_CLIENT.mutate({
|
||||||
|
mutation: gql`
|
||||||
|
mutation changePwd (
|
||||||
|
$currentPassword: String
|
||||||
|
$newPassword: String!
|
||||||
|
$strategyId: UUID!
|
||||||
|
$siteId: UUID!
|
||||||
|
) {
|
||||||
|
changePassword (
|
||||||
|
currentPassword: $currentPassword
|
||||||
|
newPassword: $newPassword
|
||||||
|
strategyId: $strategyId
|
||||||
|
siteId: $siteId
|
||||||
|
) {
|
||||||
|
operation {
|
||||||
|
succeeded
|
||||||
|
message
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
variables: {
|
||||||
|
currentPassword: state.currentPassword,
|
||||||
|
newPassword: state.newPassword,
|
||||||
|
strategyId: props.strategyId,
|
||||||
|
siteId: siteStore.id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (resp?.data?.changePassword?.operation?.succeeded) {
|
||||||
|
$q.notify({
|
||||||
|
type: 'positive',
|
||||||
|
message: t('auth.changePwd.success')
|
||||||
|
})
|
||||||
|
onDialogOK()
|
||||||
|
} else {
|
||||||
|
throw new Error(resp?.data?.changePassword?.operation?.message || 'An unexpected error occured.')
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
$q.notify({
|
||||||
|
type: 'negative',
|
||||||
|
message: err.message
|
||||||
|
})
|
||||||
|
}
|
||||||
|
state.isLoading = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue