This is an automated email from the ASF dual-hosted git repository.
pearl11594 pushed a commit to branch 4.20
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/4.20 by this push:
new b92fd17ef15 UI: Add change host password (#10337)
b92fd17ef15 is described below
commit b92fd17ef15ed81e3ffdadce7c9469f6d99d9bd4
Author: Lucas Martins <[email protected]>
AuthorDate: Mon Mar 3 13:27:42 2025 -0300
UI: Add change host password (#10337)
* Add updateHostPassword API to UI
* remove unnecessary check
Co-authored-by: Bernardo De Marco Gonçalves <[email protected]>
---------
Co-authored-by: Lucas Martins <[email protected]>
Co-authored-by: Bernardo De Marco Gonçalves <[email protected]>
---
ui/public/locales/en.json | 1 +
ui/public/locales/pt_BR.json | 1 +
ui/src/config/section/infra/hosts.js | 8 ++
ui/src/views/infra/ChangeHostPassword.vue | 150 ++++++++++++++++++++++++++++++
4 files changed, 160 insertions(+)
diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 881a490f66b..dfdac5963bd 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -3482,6 +3482,7 @@
"message.success.change.bgp.peers": "Successfully changed BGP peers",
"message.success.change.offering": "Successfully changed offering",
"message.success.change.password": "Successfully changed password for User",
+"message.success.change.host.password": "Successfully changed password for
host \"{name}\"",
"message.success.clear.webhook.deliveries": "Successfully cleared webhook
deliveries",
"message.success.change.scope": "Successfully changed scope for storage pool",
"message.success.config.backup.schedule": "Successfully configured Instance
backup schedule",
diff --git a/ui/public/locales/pt_BR.json b/ui/public/locales/pt_BR.json
index 2ce1e5ad980..65c657f69d8 100644
--- a/ui/public/locales/pt_BR.json
+++ b/ui/public/locales/pt_BR.json
@@ -2388,6 +2388,7 @@
"message.success.change.affinity.group": "Grupos de afinidade alterados com
sucesso",
"message.success.change.offering": "Oferta alterada com sucesso",
"message.success.change.password": "Senha alterada com sucesso",
+"message.success.change.host.password": "Senha do host \"{name}\" foi alterada
com sucesso",
"message.success.config.backup.schedule": "Agendamento de backup de VM
configurado com sucesso",
"message.success.config.sticky.policy": "Sticky policy configurada com
sucesso",
"message.success.copy.clipboard": "Copiado com sucesso para a \u00e1rea de
transfer\u00eancia",
diff --git a/ui/src/config/section/infra/hosts.js
b/ui/src/config/section/infra/hosts.js
index f1d0da42991..2373aff93f4 100644
--- a/ui/src/config/section/infra/hosts.js
+++ b/ui/src/config/section/infra/hosts.js
@@ -77,6 +77,14 @@ export default {
popup: true,
component: shallowRef(defineAsyncComponent(() =>
import('@/views/infra/HostUpdate')))
},
+ {
+ api: 'updateHostPassword',
+ icon: 'key-outlined',
+ label: 'label.action.change.password',
+ dataView: true,
+ popup: true,
+ component: shallowRef(defineAsyncComponent(() =>
import('@/views/infra/ChangeHostPassword.vue')))
+ },
{
api: 'provisionCertificate',
icon: 'safety-certificate-outlined',
diff --git a/ui/src/views/infra/ChangeHostPassword.vue
b/ui/src/views/infra/ChangeHostPassword.vue
new file mode 100644
index 00000000000..d67b8413d8d
--- /dev/null
+++ b/ui/src/views/infra/ChangeHostPassword.vue
@@ -0,0 +1,150 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements. See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership. The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+ <div class="form-layout" v-ctrl-enter="handleSubmit">
+ <a-spin :spinning="loading">
+ <a-form
+ :ref="formRef"
+ :model="form"
+ :rules="rules"
+ layout="vertical"
+ @finish="handleSubmit">
+ <a-form-item name="username" ref="username">
+ <template #label>
+ <tooltip-label :title="$t('label.username')"
:tooltip="apiParams.username.description"/>
+ </template>
+ <a-input
+ v-model:value="form.username"
+ :placeholder="$t('label.username')"/>
+ </a-form-item>
+ <a-form-item name="password" ref="password">
+ <template #label>
+ <tooltip-label :title="$t('label.new.password')"
:tooltip="apiParams.password.description"/>
+ </template>
+ <a-input-password
+ v-model:value="form.password"
+ :placeholder="$t('label.new.password')"/>
+ </a-form-item>
+ <a-form-item name="confirmpassword" ref="confirmpassword">
+ <template #label>
+ <tooltip-label :title="$t('label.confirmpassword')"
:tooltip="apiParams.password.description"/>
+ </template>
+ <a-input-password
+ v-model:value="form.confirmpassword"
+ :placeholder="$t('label.confirmpassword.description')"/>
+ </a-form-item>
+
+ <div :span="24" class="action-button">
+ <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+ <a-button :loading="loading" ref="submit" type="primary"
@click="handleSubmit">{{ $t('label.ok') }}</a-button>
+ </div>
+ </a-form>
+ </a-spin>
+ </div>
+</template>
+
+<script>
+import { ref, reactive, toRaw } from 'vue'
+import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
+
+export default {
+ name: 'ChangeHostPassword',
+ components: {
+ TooltipLabel
+ },
+ props: {
+ resource: {
+ type: Object,
+ required: true
+ }
+ },
+ data () {
+ return {
+ loading: false
+ }
+ },
+ beforeCreate () {
+ this.apiParams = this.$getApiParams('updateHostPassword')
+ },
+ created () {
+ this.initForm()
+ },
+ methods: {
+ initForm () {
+ this.formRef = ref()
+ this.form = reactive({})
+ this.rules = reactive({
+ username: [{ required: true, message:
this.$t('message.error.host.username') }],
+ password: [{ required: true, message:
this.$t('message.error.new.password') }],
+ confirmpassword: [
+ { required: true, message: this.$t('message.error.confirm.password')
},
+ { validator: this.validateTwoPassword }
+ ]
+ })
+ },
+ async validateTwoPassword (rule, value) {
+ const messageConfirm = this.$t('message.validate.equalto')
+ const passwordVal = this.form.password
+ if (passwordVal !== value) {
+ return Promise.reject(messageConfirm)
+ }
+ },
+ handleSubmit (e) {
+ e.preventDefault()
+ if (this.loading) return
+ this.formRef.value.validate().then(() => {
+ const values = toRaw(this.form)
+ this.loading = true
+ const params = {
+ username: values.username,
+ hostId: this.resource.id,
+ password: values.password
+ }
+ api('updateHostPassword', {}, 'POST', params).then(json => {
+ this.$notification.success({
+ message: this.$t('label.action.change.password'),
+ description: `${this.$t('message.success.change.host.password', {
name: this.resource.name })}`
+ })
+ this.$emit('refresh-data')
+ this.closeAction()
+ }).catch(error => {
+ this.$notifyError(error)
+ }).finally(() => {
+ this.loading = false
+ })
+ }).catch(error => {
+ this.formRef.value.scrollToField(error.errorFields[0].name)
+ })
+ },
+ closeAction () {
+ this.$emit('close-action')
+ }
+ }
+}
+</script>
+
+<style scoped lang="less">
+.form-layout {
+ width: 80vw;
+
+ @media (min-width: 600px) {
+ width: 450px;
+ }
+}
+</style>
