Skip to content

Commit f762f20

Browse files
abh1sarabh1sar
committed
Extra checks in UI for delete account
1 parent d053bb9 commit f762f20

3 files changed

Lines changed: 149 additions & 4 deletions

File tree

‎ui/public/locales/en.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -855,6 +855,7 @@
855855
"label.endipv6": "IPv6 end IP",
856856
"label.endpoint": "Endpoint",
857857
"label.endport": "End port",
858+
"label.enter.account.name": "Enter the account name",
858859
"label.enter.code": "Enter 2FA code to verify",
859860
"label.enter.static.pin": "Enter static PIN to verify",
860861
"label.enter.token": "Enter token",
@@ -2710,7 +2711,11 @@
27102711
"message.dedicating.host": "Dedicating host...",
27112712
"message.dedicating.pod": "Dedicating pod...",
27122713
"message.dedicating.zone": "Dedicating zone...",
2713-
"message.delete.account": "Please confirm that you want to delete this Account.",
2714+
"message.delete.account.confirm": "Please confirm that you want to delete this account by entering the name of the account below.",
2715+
"message.delete.account.failed": "Delete account failed",
2716+
"message.delete.account.processing": "Deleting account",
2717+
"message.delete.account.success": "Successfully deleted account",
2718+
"message.delete.account.warning": "Deleting this account will delete all of the instances, volumes and snapshots associated with the account.",
27142719
"message.delete.acl.processing": "Removing ACL rule...",
27152720
"message.delete.acl.rule": "Remove ACL rule",
27162721
"message.delete.acl.rule.failed": "Failed to remove ACL rule.",
@@ -2797,6 +2802,7 @@
27972802
"message.enabling.security.group.provider": "Enabling security group provider",
27982803
"message.enter.valid.nic.ip": "Please enter a valid IP address for NIC",
27992804
"message.error.access.key": "Please enter access key.",
2805+
"message.error.account.delete.name.mismatch": "Name entered doesn't match the account name.",
28002806
"message.error.add.guest.network": "Either IPv4 fields or IPv6 fields need to be filled when adding a guest Network.",
28012807
"message.error.add.interface.static.route": "Adding interface Static Route failed",
28022808
"message.error.add.logical.router": "Adding Logical Router failed",

‎ui/src/config/section/account.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -225,11 +225,10 @@ export default {
225225
message: 'message.delete.account',
226226
dataView: true,
227227
disabled: (record, store) => {
228-
return record.id !== 'undefined' && store.userInfo.accountid === record.id
228+
return (record.id !== 'undefined' && store.userInfo.accountid === record.id) || record.state !== 'disabled'
229229
},
230-
groupAction: true,
231230
popup: true,
232-
groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
231+
component: shallowRef(defineAsyncComponent(() => import('@/views/iam/DeleteAccount.vue')))
233232
}
234233
]
235234
}

‎ui/src/views/iam/DeleteAccount.vue‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
// Licensed to the Apache Software Foundation (ASF) under one
2+
// or more contributor license agreements. See the NOTICE file
3+
// distributed with this work for additional information
4+
// regarding copyright ownership. The ASF licenses this file
5+
// to you under the Apache License, Version 2.0 (the
6+
// "License"); you may not use this file except in compliance
7+
// with the License. You may obtain a copy of the License at
8+
//
9+
// http://www.apache.org/licenses/LICENSE-2.0
10+
//
11+
// Unless required by applicable law or agreed to in writing,
12+
// software distributed under the License is distributed on an
13+
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
// KIND, either express or implied. See the License for the
15+
// specific language governing permissions and limitations
16+
// under the License.
17+
18+
<template>
19+
<a-form
20+
class="form"
21+
:ref="formRef"
22+
:model="form"
23+
:rules="rules"
24+
layout="vertical"
25+
@finish="handleSubmit"
26+
v-ctrl-enter="handleSubmit"
27+
>
28+
<div style="margin-bottom: 10px">
29+
<a-alert type="warning">
30+
<template #message>
31+
<div v-html="$t('message.delete.account.warning')"></div>
32+
</template>
33+
</a-alert>
34+
</div>
35+
<div style="margin-bottom: 10px">
36+
<a-alert>
37+
<template #message>
38+
<div v-html="$t('message.delete.account.confirm')"></div>
39+
</template>
40+
</a-alert>
41+
</div>
42+
<a-form-item name="name" ref="name">
43+
<a-input
44+
v-model:value="form.name"
45+
:placeholder="$t('label.enter.account.name')"
46+
style="width: auto"/>
47+
</a-form-item>
48+
<p v-if="error" class="error">{{ error }}</p>
49+
<div :span="24" class="actions">
50+
<a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
51+
<a-button type="primary" ref="submit" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
52+
</div>
53+
</a-form>
54+
</template>
55+
56+
<script>
57+
import { ref, reactive } from 'vue'
58+
import { api } from '@/api'
59+
60+
export default {
61+
name: 'DeleteAccount',
62+
props: {
63+
resource: {
64+
type: Object,
65+
required: true
66+
}
67+
},
68+
data () {
69+
return {
70+
error: ''
71+
}
72+
},
73+
created () {
74+
this.initForm()
75+
},
76+
methods: {
77+
initForm () {
78+
this.formRef = ref()
79+
this.form = reactive({
80+
})
81+
this.rules = reactive({
82+
name: [{ required: true, message: this.$t('label.required') }]
83+
})
84+
},
85+
closeModal () {
86+
this.$emit('close-action')
87+
},
88+
handleSubmit (e) {
89+
e.preventDefault()
90+
this.formRef.value.validate().then(async () => {
91+
if (this.form.name !== this.resource.name) {
92+
this.error = `${this.$t('message.error.account.delete.name.mismatch')}`
93+
return
94+
}
95+
api('deleteAccount', {
96+
id: this.resource.id
97+
}).then(response => {
98+
this.$pollJob({
99+
jobId: response.deleteaccountresponse.jobid,
100+
title: this.$t('label.action.delete.account'),
101+
description: this.resource.id,
102+
successMessage: `${this.$t('message.delete.account.success')} - ${this.resource.name}`,
103+
errorMessage: `${this.$t('message.delete.account.failed')} - ${this.resource.name}`,
104+
loadingMessage: `${this.$t('message.delete.account.processing')} - ${this.resource.name}`,
105+
catchMessage: this.$t('error.fetching.async.job.result')
106+
})
107+
this.closeModal()
108+
}).catch(error => {
109+
this.$notifyError(error)
110+
})
111+
}).catch((error) => {
112+
this.formRef.value.scrollToField(error.errorFields[0].name)
113+
})
114+
}
115+
}
116+
}
117+
</script>
118+
119+
<style lang="scss" scoped>
120+
.form {
121+
width: 80vw;
122+
@media (min-width: 500px) {
123+
width: 400px;
124+
}
125+
}
126+
.actions {
127+
display: flex;
128+
justify-content: flex-end;
129+
margin-top: 20px;
130+
button {
131+
&:not(:last-child) {
132+
margin-right: 10px;
133+
}
134+
}
135+
}
136+
.error {
137+
color: red;
138+
margin-top: 10px;
139+
}
140+
</style>

0 commit comments

Comments
 (0)