TT#134651 SIPAuth - As Subscriber/PBXAttendant, I want to change my SIP-Password, in order to authenticate my SIP-Device against NGCP

Change-Id: If7baabf08f806de65cb923ae1a7b617468394a4d

src/api/subscriber.js

@@ -539,6 +539,14 @@ export function changePassword (subscriber, newPassword) {
     })
 }
 
+export async function changeSIPPassword (subscriber, newPassword) {
+    return patchReplaceFull({
+        path: 'api/subscribers/' + subscriber,
+        fieldPath: 'password',
+        value: newPassword
+    })
+}
+
 export async function resetPassword (userName) {
     const payLoad = {
         domain: Vue.$config.baseHttpUrl.replace(/(^\w+:|^)\/\//, ''),

src/components/form/CscInputPassword.vue

@@ -37,6 +37,9 @@
                 dense
                 @click.stop="generatePassword"
             />
+            <slot
+                name="append"
+            />
         </template>
     </csc-input>
 </template>

src/components/pages/UserSettings/CscChangePasswordEmbeded.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="relative-position">
+        <q-slide-transition>
+            <div
+                v-if="!inputEnabled"
+            >
+                <q-btn
+                    icon="lock"
+                    flat
+                    color="primary"
+                    :label="btnLabel"
+                    @click="enableInput"
+                />
+            </div>
+        </q-slide-transition>
+        <q-slide-transition>
+            <div
+                v-if="inputEnabled"
+            >
+                <csc-input-password-retype
+                    v-model="passwordConfirmed"
+                    :password-label="passwordLabel"
+                    :password-confirm-label="passwordConfirmLabel"
+                    @validation-failed="isValid=false"
+                    @validation-succeeded="isValid=true"
+                />
+                <div
+                    class="row justify-start"
+                >
+                    <q-btn
+                        flat
+                        color="default"
+                        icon="clear"
+                        @click="cancel"
+                    >
+                        {{ $t('Cancel') }}
+                    </q-btn>
+                    <q-btn
+                        flat
+                        color="primary"
+                        icon="done"
+                        :disable="!isValid"
+                        @click="openConfirmDialog"
+                    >
+                        {{ $t('Save new password') }}
+                    </q-btn>
+                </div>
+            </div>
+        </q-slide-transition>
+        <q-inner-loading :showing="loading">
+            <q-spinner-dots
+                size="32px"
+                color="primary"
+            />
+        </q-inner-loading>
+    </div>
+</template>
+
+<script>
+
+import CscInputPasswordRetype from 'components/form/CscInputPasswordRetype'
+export default {
+    name: 'CscChangePasswordEmbedded',
+    components: { CscInputPasswordRetype },
+    props: {
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        btnLabel: {
+            type: String,
+            default () {
+                return this.$t('Change Password')
+            }
+        },
+        passwordLabel: {
+            type: String,
+            default () {
+                return this.$t('Password')
+            }
+        },
+        passwordConfirmLabel: {
+            type: String,
+            default () {
+                return this.$t('Password confirm')
+            }
+        },
+        saveConformationText: {
+            type: String,
+            default: ''
+        },
+        password: {
+            type: String,
+            default: ''
+        }
+    },
+    data () {
+        return {
+            inputEnabled: false,
+            passwordConfirmed: {
+                password: this.password,
+                passwordRetype: ''
+            },
+            isValid: false
+        }
+    },
+    methods: {
+        enableInput () {
+            this.inputEnabled = true
+            this.reset()
+        },
+        cancel () {
+            this.inputEnabled = false
+            this.reset()
+        },
+        reset () {
+            this.passwordConfirmed.password = this.password
+            this.passwordConfirmed.passwordRetype = ''
+        },
+        submit () {
+            this.$emit('change', this.passwordConfirmed.password)
+        },
+        openConfirmDialog () {
+            if (this.saveConformationText) {
+                this.$q.dialog({
+                    title: this.btnLabel,
+                    message: this.saveConformationText,
+                    color: 'primary',
+                    cancel: true,
+                    persistent: true
+                }).onOk(data => {
+                    this.submit()
+                })
+            } else {
+                this.submit()
+            }
+        }
+    }
+}
+</script>

src/i18n/en.json

@@ -75,6 +75,7 @@
     "Change Email": "Change Email",
     "Change PIN": "Change PIN",
     "Change Password": "Change Password",
+    "Change SIP Password": "Change SIP Password",
     "Change login password": "Change login password",
     "Change password": "Change password",
     "Changed PIN successfully.": "Changed PIN successfully.",
@@ -113,6 +114,7 @@
     "Customer Details": "Customer Details",
     "Daily": "Daily",
     "Dashboard": "Dashboard",
+    "Data is in the clipboard": "Data is in the clipboard",
     "Data loading error": "Data loading error",
     "Default": "Default",
     "Default sound": "Default sound",
@@ -237,6 +239,8 @@
     "Name in Fax Header for Sendfax": "Name in Fax Header for Sendfax",
     "Never": "Never",
     "New Messages": "New Messages",
+    "New SIP Password": "New SIP Password",
+    "New SIP Password confirm": "New SIP Password confirm",
     "New features": "New features",
     "New password": "New password",
     "New password retyped": "New password retyped",
@@ -282,6 +286,7 @@
     "Password": "Password",
     "Password Retype": "Password Retype",
     "Password changed successfully": "Password changed successfully",
+    "Password confirm": "Password confirm",
     "Password is not strong enough": "Password is not strong enough",
     "Passwords must be equal": "Passwords must be equal",
     "Phone model": "Phone model",
@@ -346,6 +351,7 @@
     "Russian": "Russian",
     "SIP Password": "SIP Password",
     "SIP Password confirm": "SIP Password confirm",
+    "SIP URI": "SIP URI",
     "Sa": "Sa",
     "Same time for selected days": "Same time for selected days",
     "Saturday": "Saturday",
@@ -413,6 +419,7 @@
     "Tuesday": "Tuesday",
     "Type": "Type",
     "Type something": "Type something",
+    "Unable to copy data to clipboard": "Unable to copy data to clipboard",
     "Unassign": "Unassign",
     "Unassigned": "Unassigned",
     "Unavailable Greeting": "Unavailable Greeting",
@@ -475,6 +482,7 @@
     "You can not join a conference, since the RTC:engine is not active. If you operate a C5 CE then first upgrade to a C5 PRO to be able to use the RTC:engine.": "You can not join a conference, since the RTC:engine is not active. If you operate a C5 CE then first upgrade to a C5 PRO to be able to use the RTC:engine.",
     "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 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",

src/pages/CscPageUserSettings.vue

@@ -7,11 +7,51 @@
             class="col col-xs-12 col-md-6"
         >
             <csc-change-password
+                class="q-mb-md"
                 :loading="isPasswordChanging"
                 :error="changePasswordError"
                 :subscriber="getSubscriber"
                 @change="changePassword"
             />
+            <csc-change-password-embedded
+                ref="changeSipPasswordSection"
+                class="q-mb-md"
+                :btn-label="$t('Change SIP Password')"
+                :password-label="$t('New SIP Password')"
+                :password-confirm-label="$t('New SIP Password confirm')"
+                :loading="processingChangeSIPPassword"
+                @change="requestSIPPasswordChange"
+            />
+            <q-input
+                :value="currentSIPURI"
+                :label="$t('SIP URI')"
+                readonly
+            >
+                <template v-slot:append>
+                    <q-btn
+                        icon="content_copy"
+                        color="primary"
+                        flat
+                        dense
+                        @click="copy2clipboard(currentSIPURI)"
+                    />
+                </template>
+            </q-input>
+            <csc-input-password
+                :value="currentSIPPassword"
+                :label="$t('SIP Password')"
+                readonly
+            >
+                <template v-slot:append>
+                    <q-btn
+                        icon="content_copy"
+                        color="primary"
+                        flat
+                        dense
+                        @click="copy2clipboard(currentSIPPassword)"
+                    />
+                </template>
+            </csc-input-password>
         </div>
     </csc-page>
 </template>
@@ -31,10 +71,16 @@ import {
 } 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'
 
 export default {
     name: 'CscPageUserSettings',
     components: {
+        CscInputPassword,
+        CscChangePasswordEmbedded,
         CscChangePassword,
         CscPage
     },
@@ -50,7 +96,17 @@ export default {
         ...mapGetters('user', [
             'getSubscriber',
             'isPasswordChanging'
-        ])
+        ]),
+        ...mapWaitingGetters({
+            processingChangeSIPPassword: 'processing-changeSIPPassword'
+        }),
+        currentSIPPassword () {
+            return this.getSubscriber?.password || ''
+        },
+        currentSIPURI () {
+            const subscriberData = this.getSubscriber
+            return subscriberData?.username + '@' + subscriberData?.domain
+        }
     },
     watch: {
         changePasswordState (state) {
@@ -64,7 +120,29 @@ export default {
     methods: {
         ...mapActions('user', [
             'changePassword'
-        ])
+        ]),
+        ...mapWaitingActions('user', {
+            changeSIPPassword: 'processing-changeSIPPassword'
+        }),
+        async requestSIPPasswordChange (newPassword) {
+            try {
+                await this.changeSIPPassword(newPassword)
+                showToast(this.$t('Your SIP password has been changed successfully'))
+                this.$refs.changeSipPasswordSection.cancel()
+            } catch (error) {
+                showGlobalError(error?.message)
+            }
+        },
+        copy2clipboard (copyData) {
+            copyToClipboard(copyData)
+                .then(() => {
+                    showToast(this.$t('Data is in the clipboard'))
+                })
+                .catch(() => {
+                    console.error(copyData)
+                    showGlobalError(this.$t('Unable to copy data to clipboard'))
+                })
+        }
     }
 }
 </script>

src/store/user.js

@@ -17,7 +17,8 @@ import {
     recoverPassword,
     getBrandingLogo,
     getSubscriberRegistrations,
-    getSubscriberProfile
+    getSubscriberProfile,
+    changeSIPPassword
 } from '../api/subscriber'
 import { deleteJwt, getJwt, getSubscriberId, setJwt, setSubscriberId } from 'src/auth'
 import QRCode from 'qrcode'
@@ -225,6 +226,9 @@ export default {
             state.userDataRequesting = false
             state.userDataError = null
         },
+        subscriberUpdateSucceeded (state, data) {
+            state.subscriber = data
+        },
         userDataFailed (state, error) {
             state.userDataError = error
             state.userDataSucceeded = false
@@ -357,6 +361,11 @@ export default {
                 context.commit('userPasswordFailed', err.message)
             })
         },
+        async changeSIPPassword (context, newPassword) {
+            const subscriberId = getSubscriberId()
+            const subscriberData = await changeSIPPassword(subscriberId, newPassword)
+            context.commit('subscriberUpdateSucceeded', subscriberData)
+        },
         async resetPassword ({ commit }, data) {
             commit('newPasswordRequesting', true)
             const response = await resetPassword(data)