sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

TT#136203 UserSettings - Reuse same Vue.js component for both SIP/Web password change

Browse Source 
- Add props to CscInputPassword to make password generation more felxible

Change-Id: I7c16a2788a28e7d1d5257c72b71e5eeb940ece5b
mr10.0
Hans-Peter Herzog 4 years ago
parent e32dd9b56e
commit 1b912b7471
5 changed files with 103 additions and 65 deletions
Show Stats Download Patch File Download Diff File

71
src/components/form/CscInputPassword.vue
Unescape View File

@ -1,36 +1,38 @@
<template>
<csc-input
ref="input"
v-bind="$attrs"
:value="$attrs.value"
:type="inputType"
:value="value"
@input="$emit('input', $event)"
v-bind="$attrs"
v-on="$listeners"
>
<template
slot="prepend"
>
<slot
name="prepend"
/>
<q-icon
name="lock"
:name="$attrs.icon || 'lock'"
/>
</template>
<template
v-slot:append
>
<q-btn
v-if="value !== ''"
:icon="icon"
:disable="$attrs.disable"
v-if="$attrs.value !== ''"
:icon="visibilityIcon"
:disable="$attrs.disable || $attrs.loading"
tabindex="-1"
color="primary"
flat
dense
@click.stop="visible=!visible"
@click.stop="toggleVisibility"
/>
<q-btn
v-if="generate"
icon="casino"
:disable="$attrs.disable"
:disable="$attrs.disable || $attrs.loading"
tabindex="-1"
color="primary"
flat
@ -50,13 +52,41 @@ export default {
name: 'CscInputPassword',
components: { CscInput },
props: {
value: {
type: String,
default: undefined
},
generate: {
type: Boolean,
default: false
},
generateLength: {
type: Number,
default: 10
},
generateNumbers: {
type: Boolean,
default: true
},
generateLowercase: {
type: Boolean,
default: true
},
generateUppercase: {
type: Boolean,
default: true
},
generateSymbols: {
type: Boolean,
default: false
},
generateExcludeSimilarCharacters: {
type: Boolean,
default: false
},
generateExclude: {
type: String,
default: ''
},
generateStrict: {
type: Boolean,
default: true
}
},
data () {
@ -72,7 +102,7 @@ export default {
return 'password'
}
},
icon () {
visibilityIcon () {
if (!this.visible) {
return 'visibility_off'
} else {
@ -83,12 +113,21 @@ export default {
methods: {
generatePassword () {
const pass = PasswordGenerator.generate({
length: 10,
numbers: true
length: this.generateLength,
numbers: this.generateNumbers,
lowercase: this.generateLowercase,
uppercase: this.generateUppercase,
symbols: this.generateSymbols,
excludeSimilarCharacters: this.generateExcludeSimilarCharacters,
exclude: this.generateExclude,
strict: this.generateStrict
})
this.$emit('input', pass)
this.$emit('generated', pass)
},
toggleVisibility () {
this.visible = !this.visible
},
clear () {
this.$refs.input.clear()
}

22
src/components/pages/UserSettings/CscChangePasswordEmbeded.vue
Unescape View File

@ -42,16 +42,15 @@
:disable="!isValid"
@click="openConfirmDialog"
>
{{ $t('Save new password') }}
{{ saveButtonLabel }}
</q-btn>
</div>
</div>
</q-slide-transition>
<q-inner-loading :showing="loading">
<q-spinner-dots
size="32px"
color="primary"
/>
<q-inner-loading
:showing="loading"
>
<csc-spinner />
</q-inner-loading>
</div>
</template>
@ -59,18 +58,25 @@
<script>
import CscInputPasswordRetype from 'components/form/CscInputPasswordRetype'
import CscSpinner from 'components/CscSpinner'
export default {
name: 'CscChangePasswordEmbedded',
components: { CscInputPasswordRetype },
components: { CscSpinner, CscInputPasswordRetype },
props: {
loading: {
type: Boolean,
default: false
},
saveButtonLabel: {
type: String,
default () {
return this.$t('Save')
}
},
btnLabel: {
type: String,
default () {
return this.$t('Change Password')
return this.$t('Change password')
}
},
passwordLabel: {

5
src/i18n/en.json
Unescape View File

@ -76,6 +76,7 @@
"Change PIN": "Change PIN",
"Change Password": "Change Password",
"Change SIP Password": "Change SIP Password",
"Change Web Password": "Change Web Password",
"Change login password": "Change login password",
"Change password": "Change password",
"Changed PIN successfully.": "Changed PIN successfully.",
@ -241,6 +242,8 @@
"New Messages": "New Messages",
"New SIP Password": "New SIP Password",
"New SIP Password confirm": "New SIP Password confirm",
"New Web Password": "New Web Password",
"New Web Password confirm": "New Web Password confirm",
"New features": "New features",
"New password": "New password",
"New password retyped": "New password retyped",
@ -483,11 +486,13 @@
"You have blocked incoming call notifications.": "You have blocked incoming call notifications.",
"You have invalid form input. Please check and try again.": "You have invalid form input. Please check and try again.",
"Your SIP password has been changed successfully": "Your SIP password has been changed successfully",
"Your Web password has been changed successfully": "Your Web password has been changed successfully",
"Your number is hidden to the callee": "Your number is hidden to the callee",
"Your number is hidden to the callee within own PBX": "Your number is hidden to the callee within own PBX",
"Your number is visible to the callee": "Your number is visible to the callee",
"Your number is visible to the callee within own PBX": "Your number is visible to the callee within own PBX",
"Your password has been changed successfully": "Your password has been changed successfully",
"Your web password has been changed successfully": "Your web password has been changed successfully",
"ago": "ago",
"and": "and",
"and call from": "and call from",

59
src/pages/CscPageUserSettings.vue
Unescape View File

@ -6,12 +6,15 @@
<div
class="col col-xs-12 col-md-6"
>
<csc-change-password
<csc-change-password-embedded
ref="changeWebPasswordSection"
class="q-mb-md"
:loading="isPasswordChanging"
:error="changePasswordError"
:subscriber="getSubscriber"
@change="changePassword"
:btn-label="$t('Change Web Password')"
:password-label="$t('New Web Password')"
:password-confirm-label="$t('New Web Password confirm')"
:save-conformation-text="$t('You are about to change your login password. After the password was changed successfully, you get automatically logged out to authenticate with the new password. ')"
:loading="processingChangeWebPassword"
@change="requestWebPasswordChange"
/>
<csc-change-password-embedded
ref="changeSipPasswordSection"
@ -62,26 +65,22 @@ import {
showToast
} from 'src/helpers/ui'
import {
RequestState
} from 'src/store/common'
import {
mapState,
mapGetters,
mapActions
mapGetters
} from 'vuex'
import CscPage from 'components/CscPage'
import CscChangePassword from 'components/pages/UserSettings/CscChangePassword'
import CscChangePasswordEmbedded from 'components/pages/UserSettings/CscChangePasswordEmbeded'
import { mapWaitingActions, mapWaitingGetters } from 'vue-wait'
import { copyToClipboard } from 'quasar'
import CscInputPassword from 'components/form/CscInputPassword'
const WAIT_CHANGE_WEB_PASSWORD = 'processing-changeWebPassword'
const WAIT_CHANGE_SIP_PASSWORD = 'processing-changeSIPPassword'
export default {
name: 'CscPageUserSettings',
components: {
CscInputPassword,
CscChangePasswordEmbedded,
CscChangePassword,
CscPage
},
data () {
@ -89,16 +88,12 @@ export default {
}
},
computed: {
...mapState('user', [
'changePasswordState',
'changePasswordError'
]),
...mapGetters('user', [
'getSubscriber',
'isPasswordChanging'
'getSubscriber'
]),
...mapWaitingGetters({
processingChangeSIPPassword: 'processing-changeSIPPassword'
processingChangeSIPPassword: WAIT_CHANGE_SIP_PASSWORD,
processingChangeWebPassword: WAIT_CHANGE_WEB_PASSWORD
}),
currentSIPPassword () {
return this.getSubscriber?.password || ''
@ -108,22 +103,20 @@ export default {
return subscriberData?.username + '@' + subscriberData?.domain
}
},
watch: {
changePasswordState (state) {
if (state === RequestState.succeeded) {
showToast(this.$t('Your password has been changed successfully'))
} else if (state === RequestState.failed) {
showGlobalError(this.changePasswordError)
}
}
},
methods: {
...mapActions('user', [
'changePassword'
]),
...mapWaitingActions('user', {
changeSIPPassword: 'processing-changeSIPPassword'
changeSIPPassword: WAIT_CHANGE_SIP_PASSWORD,
changePassword: WAIT_CHANGE_WEB_PASSWORD
}),
async requestWebPasswordChange (newPassword) {
try {
await this.changePassword(newPassword)
showToast(this.$t('Your Web password has been changed successfully'))
this.$refs.changeWebPasswordSection.cancel()
} catch (error) {
showGlobalError(error?.message)
}
},
async requestSIPPasswordChange (newPassword) {
try {
await this.changeSIPPassword(newPassword)

11
src/store/user.js
Unescape View File

@ -351,15 +351,10 @@ export default {
await context.dispatch('forwardHome')
}
},
changePassword (context, newPassword) {
async changePassword (context, newPassword) {
const subscriberId = getSubscriberId()
context.commit('userPasswordRequesting')
changePassword(subscriberId, newPassword).then(() => {
context.commit('userPasswordSucceeded')
context.dispatch('logout')
}).catch((err) => {
context.commit('userPasswordFailed', err.message)
})
await changePassword(subscriberId, newPassword)
await context.dispatch('logout')
},
async changeSIPPassword (context, newPassword) {
const subscriberId = getSubscriberId()

Write Preview
Loading…
Cancel
Save