From 21c2e30cfd6340363cd1cebf3773f0c55a0dfa26 Mon Sep 17 00:00:00 2001
From: Wei Zhou <weizhou@apache.org>
Date: Mon, 16 Oct 2023 09:57:20 +0200
Subject: [PATCH] VNF/UI: display the default passwords in notification area

---
 ui/public/locales/en.json                   |  3 ++
 ui/src/components/view/DetailsTab.vue       |  6 +--
 ui/src/views/compute/DeployVnfAppliance.vue | 52 ++++++++++++++-------
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index ec730e8bb549..5c55f8b94246 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -1450,6 +1450,7 @@
 "label.parentname": "Parent",
 "label.passive": "Passive",
 "label.password": "Password",
+"label.password.default": "Default Password",
 "label.password.reset.confirm": "Password has been reset to ",
 "label.passwordenabled": "Password enabled",
 "label.path": "Path",
@@ -3161,6 +3162,8 @@
 "message.vm.state.stopping": "VM is being stopped.",
 "message.vm.state.unknown": "VM state is unknown.",
 "message.vnf.appliance.networks": "Please select networks for the new VNF appliance.",
+"message.vnf.credentials.change": "Please change the password(s) of the VNF appliance immediately.",
+"message.vnf.credentials.default": "The default credentials(s) of the VNF appliance",
 "message.vnf.credentials.in.template.vnf.details": "Please find the default credentials for this VNF in the details of the VNF template.",
 "message.vnf.error.deviceid.should.be.continuous": "The deviceid of selected VNF nics should be continuous.",
 "message.vnf.error.network.is.already.used": "Network has been used by multiple nics of the new VNF appliance.",
diff --git a/ui/src/components/view/DetailsTab.vue b/ui/src/components/view/DetailsTab.vue
index 48b6800d3fde..a6f77eacdd03 100644
--- a/ui/src/components/view/DetailsTab.vue
+++ b/ui/src/components/view/DetailsTab.vue
@@ -191,19 +191,19 @@ export default {
           credentials.push(this.$t('label.username') + ' : ' + username)
         }
         if (password) {
-          credentials.push(this.$t('label.password') + ' : ' + password)
+          credentials.push(this.$t('label.password.default') + ' : ' + password)
         }
         if (webUsername) {
           credentials.push('Web ' + this.$t('label.username') + ' : ' + webUsername)
         }
         if (webPassword) {
-          credentials.push('Web ' + this.$t('label.password') + ' : ' + webPassword)
+          credentials.push('Web ' + this.$t('label.password.default') + ' : ' + webPassword)
         }
         if (sshUsername) {
           credentials.push('SSH ' + this.$t('label.username') + ' : ' + sshUsername)
         }
         if (sshPassword) {
-          credentials.push('SSH ' + this.$t('label.password') + ' : ' + sshPassword)
+          credentials.push('SSH ' + this.$t('label.password.default') + ' : ' + sshPassword)
         }
 
         const managementDeviceIds = []
diff --git a/ui/src/views/compute/DeployVnfAppliance.vue b/ui/src/views/compute/DeployVnfAppliance.vue
index 6b0e68402646..146934f90d41 100644
--- a/ui/src/views/compute/DeployVnfAppliance.vue
+++ b/ui/src/views/compute/DeployVnfAppliance.vue
@@ -853,8 +853,7 @@
 </template>
 
 <script>
-import { ref, reactive, toRaw, nextTick, h } from 'vue'
-import { Button } from 'ant-design-vue'
+import { ref, reactive, toRaw, nextTick } from 'vue'
 import { api } from '@/api'
 import _ from 'lodash'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
@@ -2236,9 +2235,8 @@ export default {
           createVnfAppData.bootintosetup = values.bootintosetup
         }
 
-        const title = this.$t('label.launch.vm')
+        const title = this.$t('label.launch.vnf.appliance')
         const description = values.name || ''
-        const password = this.$t('label.password')
 
         createVnfAppData = Object.fromEntries(
           Object.entries(createVnfAppData).filter(([key, value]) => value !== undefined))
@@ -2271,22 +2269,40 @@ export default {
               successMethod: result => {
                 const vm = result.jobresult.virtualmachine
                 const name = vm.displayname || vm.name || vm.id
+                const username = vm.vnfdetails?.username || null
+                const password = vm.vnfdetails?.password || null
+                const sshUsername = vm.vnfdetails?.ssh_user || null
+                const sshPassword = vm.vnfdetails?.ssh_password || null
+                const webUsername = vm.vnfdetails?.web_user || null
+                const webPassword = vm.vnfdetails?.web_password || null
+                const credentials = []
+                if (username) {
+                  credentials.push(this.$t('label.username') + ' : ' + username)
+                }
+                if (password) {
+                  credentials.push(this.$t('label.password.default') + ' : ' + password)
+                }
+                if (webUsername) {
+                  credentials.push('Web ' + this.$t('label.username') + ' : ' + webUsername)
+                }
+                if (webPassword) {
+                  credentials.push('Web ' + this.$t('label.password.default') + ' : ' + webPassword)
+                }
+                if (sshUsername) {
+                  credentials.push('SSH ' + this.$t('label.username') + ' : ' + sshUsername)
+                }
+                if (sshPassword) {
+                  credentials.push('SSH ' + this.$t('label.password.default') + ' : ' + sshPassword)
+                }
                 if (vm.password) {
-                  this.$notification.success({
-                    message: password + ` ${this.$t('label.for')} ` + name,
-                    description: vm.password,
-                    btn: () => h(
-                      Button,
-                      {
-                        type: 'primary',
-                        size: 'small',
-                        onClick: () => this.copyToClipboard(vm.password)
-                      },
-                      () => [this.$t('label.copy.password')]
-                    ),
-                    duration: 0
-                  })
+                  credentials.push('New password : ' + vm.password)
                 }
+                credentials.push(this.$t('message.vnf.credentials.change'))
+                this.$notification.success({
+                  message: `${this.$t('message.vnf.credentials.default')} ` + name,
+                  description: (<span v-html={credentials.join('<br>')}></span>),
+                  duration: 0
+                })
                 eventBus.emit('vm-refresh-data')
               },
               loadingMessage: `${title} ${this.$t('label.in.progress')}`,