Change-Id: I5de916e170301d47ad9be12f46893a00015abd66changes/56/41256/2
Carlo Venusino
5 years ago
parent
3c147c1cae
commit
06624d58b6
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<csc-dialog
|
||||
:value="value"
|
||||
:loading="loading"
|
||||
title-icon="vpn_key"
|
||||
title="Change password"
|
||||
ref="dialog"
|
||||
@input="$emit('input')"
|
||||
class="csc-pbx-password-dialog"
|
||||
>
|
||||
<div
|
||||
slot="content"
|
||||
>
|
||||
<csc-change-password-form
|
||||
ref="changePasswordForm"
|
||||
:loading="loading"
|
||||
@validation-succeeded="validationSucceeded"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
slot="actions"
|
||||
>
|
||||
<q-btn
|
||||
icon="check"
|
||||
unelevated
|
||||
color="primary"
|
||||
:disable="loading"
|
||||
:loading="loading"
|
||||
@click="$refs.changePasswordForm.submit()"
|
||||
>
|
||||
{{ $t('buttons.save') }}
|
||||
</q-btn>
|
||||
</div>
|
||||
</csc-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
QBtn
|
||||
} from 'quasar-framework'
|
||||
import CscChangePasswordForm from './form/CscChangePasswordForm'
|
||||
import CscDialog from './CscDialog'
|
||||
export default {
|
||||
name: 'csc-change-password-dialog',
|
||||
components: {
|
||||
CscDialog,
|
||||
CscChangePasswordForm,
|
||||
QBtn
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validationSucceeded (payload) {
|
||||
this.$emit('change-password', payload)
|
||||
},
|
||||
open(){
|
||||
this.$refs.dialog.open();
|
||||
this.$refs.changePasswordForm.resetForm();
|
||||
},
|
||||
close(){
|
||||
this.$refs.dialog.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
.csc-pbx-password-dialog
|
||||
.csc-dialog-actions,
|
||||
.csc-dialog-content
|
||||
padding 15px
|
||||
.q-input
|
||||
width 100%
|
||||
min-width 270px
|
||||
.q-if:before,
|
||||
.q-icon
|
||||
color white
|
||||
.Password__strength-meter:after,
|
||||
.Password__strength-meter:before
|
||||
border-color #3b3440
|
||||
.Password
|
||||
width 100%
|
||||
margin 20px 0px 30px
|
||||
</style>
|
||||
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div
|
||||
class="csc-form"
|
||||
>
|
||||
<q-field
|
||||
:error-label="errorMessagePass"
|
||||
>
|
||||
<q-input
|
||||
dark
|
||||
ref="passwordInput"
|
||||
v-model.trim="password"
|
||||
clearable
|
||||
:before="[{
|
||||
icon: 'lock'
|
||||
}]"
|
||||
:float-label="$t('pbxConfig.typePassword')"
|
||||
type="password"
|
||||
:disable="loading"
|
||||
:error="$v.password.$error"
|
||||
@blur="$v.password.$touch()"
|
||||
>
|
||||
<div
|
||||
slot="prepend"
|
||||
>
|
||||
<q-icon
|
||||
name="lock"
|
||||
/>
|
||||
</div>
|
||||
</q-input>
|
||||
</q-field>
|
||||
|
||||
<password-strength-meter
|
||||
v-model="passwordScored"
|
||||
class="q-psm"
|
||||
:strength-meter-only="true"
|
||||
@score="strengthMeterScoreUpdate"
|
||||
/>
|
||||
|
||||
<q-field
|
||||
:error-label="errorMessagePassRetype"
|
||||
>
|
||||
<q-input
|
||||
ref="passwordRetypeInput"
|
||||
v-model.trim="passwordRetype"
|
||||
clearable
|
||||
icon="lock"
|
||||
dark
|
||||
:before="[{
|
||||
icon: 'lock'
|
||||
}]"
|
||||
:float-label="$t('pbxConfig.retypePassword')"
|
||||
type="password"
|
||||
:disable="loading"
|
||||
:error="$v.passwordRetype.$error"
|
||||
@blur="$v.passwordRetype.$touch();onRetypeBlur()"
|
||||
|
||||
>
|
||||
<div slot="prepend">
|
||||
<q-icon name="lock" />
|
||||
</div>
|
||||
</q-input>
|
||||
</q-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PasswordStrengthMeter from 'vue-password-strength-meter'
|
||||
import {
|
||||
required
|
||||
} from 'vuelidate/lib/validators'
|
||||
import {
|
||||
QItem,
|
||||
QList,
|
||||
QInput,
|
||||
QField
|
||||
} from 'quasar-framework'
|
||||
export default {
|
||||
name: 'csc-change-password-form',
|
||||
components: {
|
||||
QItem,
|
||||
QList,
|
||||
QInput,
|
||||
QField,
|
||||
PasswordStrengthMeter
|
||||
},
|
||||
props: {
|
||||
noSubmit: false,
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
password: '',
|
||||
passwordRetype: '',
|
||||
passwordScored: '',
|
||||
passwordStrengthScore: null
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
password: {
|
||||
required,
|
||||
passwordStrength () {
|
||||
return this.passwordStrengthScore >= 2
|
||||
}
|
||||
},
|
||||
passwordRetype: {
|
||||
required,
|
||||
sameAsPassword (val) {
|
||||
return val == this.password
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
password (value) {
|
||||
if (value === null || value === undefined) {
|
||||
this.passwordScored = ''
|
||||
}
|
||||
else {
|
||||
this.passwordScored = value
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
errorMessagePass() {
|
||||
if (!this.$v.password.passwordStrength) {
|
||||
return this.$t('pbxConfig.errorPasswordStrength')
|
||||
}
|
||||
},
|
||||
errorMessagePassRetype() {
|
||||
if (!this.$v.passwordRetype.sameAsPassword) {
|
||||
return this.$t('pbxConfig.errorPasswordNotEqual')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
strengthMeterScoreUpdate (score) {
|
||||
this.passwordStrengthScore = score
|
||||
},
|
||||
resetForm(){
|
||||
this.password = this.passwordRetype = this.passwordScored = "";
|
||||
this.passwordStrengthScore = null;
|
||||
this.$v.$reset();
|
||||
},
|
||||
submit () {
|
||||
this.$v.$touch()
|
||||
if (this.$v.$invalid) {
|
||||
this.$emit('validation-failed')
|
||||
}
|
||||
else {
|
||||
this.$emit('validation-succeeded', {
|
||||
password: this.password,
|
||||
strengthScore: this.passwordStrengthScore
|
||||
})
|
||||
}
|
||||
},
|
||||
onRetypeBlur(){
|
||||
if(this.noSubmit && !this.$v.$invalid){
|
||||
this.$emit('validation-succeeded', {
|
||||
password: this.password,
|
||||
strengthScore: this.passwordStrengthScore
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in new issue