Extra checks in UI when deleting accounts (#10760)

Co-authored-by: Bernardo De Marco Gonçalves <bernardomg2004@gmail.com>

ui/public/locales/en.json

@@ -1,4 +1,5 @@
 {
+"message.delete.account.not.disabled": "Please disable the account before attempting to delete it.",
 "alert.service.domainrouter": "Domain router",
 "error.dedicate.cluster.failed": "Failed to dedicate cluster.",
 "error.dedicate.host.failed": "Failed to dedicate host.",
@@ -855,6 +856,7 @@
 "label.endipv6": "IPv6 end IP",
 "label.endpoint": "Endpoint",
 "label.endport": "End port",
+"label.enter.account.name": "Enter the account name",
 "label.enter.code": "Enter 2FA code to verify",
 "label.enter.static.pin": "Enter static PIN to verify",
 "label.enter.token": "Enter token",
@@ -2720,7 +2722,11 @@
 "message.dedicating.host": "Dedicating host...",
 "message.dedicating.pod": "Dedicating pod...",
 "message.dedicating.zone": "Dedicating zone...",
-"message.delete.account": "Please confirm that you want to delete this Account.",
+"message.delete.account.confirm": "Please confirm that you want to delete this account by entering the name of the account below.",
+"message.delete.account.failed": "Delete account failed",
+"message.delete.account.processing": "Deleting account",
+"message.delete.account.success": "Successfully deleted account",
+"message.delete.account.warning": "Deleting this account will delete all of the instances, volumes and snapshots associated with the account.",
 "message.delete.acl.processing": "Removing ACL rule...",
 "message.delete.acl.rule": "Remove ACL rule",
 "message.delete.acl.rule.failed": "Failed to remove ACL rule.",
@@ -2807,6 +2813,7 @@
 "message.enabling.security.group.provider": "Enabling security group provider",
 "message.enter.valid.nic.ip": "Please enter a valid IP address for NIC",
 "message.error.access.key": "Please enter access key.",
+"message.error.account.delete.name.mismatch": "Name entered doesn't match the account name.",
 "message.error.add.guest.network": "Either IPv4 fields or IPv6 fields need to be filled when adding a guest Network.",
 "message.error.add.interface.static.route": "Adding interface Static Route failed",
 "message.error.add.logical.router": "Adding Logical Router failed",

ui/src/config/section/account.js

@@ -225,11 +225,10 @@ export default {
       message: 'message.delete.account',
       dataView: true,
       disabled: (record, store) => {
-        return record.id !== 'undefined' && store.userInfo.accountid === record.id
+        return store.userInfo.accountid === record?.id
       },
-      groupAction: true,
       popup: true,
-      groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
+      component: shallowRef(defineAsyncComponent(() => import('@/views/iam/DeleteAccountWrapper.vue')))
     }
   ]
 }

ui/src/views/iam/DeleteAccount.vue

@@ -0,0 +1,176 @@
+// 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>
+  <a-form
+    class="form"
+    :ref="formRef"
+    :model="form"
+    :rules="rules"
+    layout="vertical"
+    @finish="handleSubmit"
+    v-ctrl-enter="handleSubmit"
+   >
+    <div style="margin-bottom: 10px">
+      <a-alert type="warning">
+        <template #message>
+          <div v-html="$t('message.delete.account.warning')"></div>
+        </template>
+    </a-alert>
+    </div>
+    <div style="margin-bottom: 10px">
+      <a-alert>
+        <template #message>
+          <div v-html="$t('message.delete.account.confirm')"></div>
+        </template>
+      </a-alert>
+    </div>
+    <a-form-item name="name" ref="name">
+      <a-input
+        v-model:value="form.name"
+        :placeholder="$t('label.enter.account.name')"
+        style="width: 100%"/>
+    </a-form-item>
+    <p v-if="error" class="error">{{ error }}</p>
+    <div :span="24" class="actions">
+      <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
+      <a-button type="primary" ref="submit" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+    </div>
+  </a-form>
+</template>
+
+<script>
+import { ref, reactive } from 'vue'
+import { api } from '@/api'
+
+export default {
+  name: 'DeleteAccount',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      error: '',
+      isDeleting: false
+    }
+  },
+  created () {
+    this.initForm()
+  },
+  methods: {
+    initForm () {
+      this.formRef = ref()
+      this.form = reactive({})
+      this.rules = reactive({
+        name: [{ required: true, message: this.$t('label.required') }]
+      })
+    },
+    closeModal () {
+      this.$emit('close-action')
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      if (this.isDeleting) return // Prevent double submission
+      this.formRef.value.validate().then(async () => {
+        if (this.form.name !== this.resource.name) {
+          this.error = `${this.$t('message.error.account.delete.name.mismatch')}`
+          return
+        }
+        if (this.hasActiveResources) {
+          return
+        }
+        this.isDeleting = true
+        // Store the account ID and name before we close the modal
+        const accountId = this.resource.id
+        const accountName = this.resource.name
+        // Close the modal first
+        this.closeModal()
+        // Immediately navigate to the accounts page to avoid "unable to find account" errors
+        this.$router.push({ path: '/account' })
+          .then(() => {
+            // After successful navigation, start the deletion job
+            api('deleteAccount', {
+              id: accountId
+            }).then(response => {
+              this.$pollJob({
+                jobId: response.deleteaccountresponse.jobid,
+                title: this.$t('label.action.delete.account'),
+                description: accountId,
+                successMessage: `${this.$t('message.delete.account.success')} - ${accountName}`,
+                errorMessage: `${this.$t('message.delete.account.failed')} - ${accountName}`,
+                loadingMessage: `${this.$t('message.delete.account.processing')} - ${accountName}`,
+                catchMessage: this.$t('error.fetching.async.job.result')
+              })
+            }).catch(error => {
+              this.$notifyError(error)
+              this.isDeleting = false
+            })
+          })
+          .catch(err => {
+            console.error('Navigation failed:', err)
+            this.isDeleting = false
+            // If navigation fails, still try to delete the account
+            // but don't navigate afterwards
+            api('deleteAccount', {
+              id: accountId
+            }).then(response => {
+              this.$pollJob({
+                jobId: response.deleteaccountresponse.jobid,
+                title: this.$t('label.action.delete.account'),
+                description: accountId,
+                successMessage: `${this.$t('message.delete.account.success')} - ${accountName}`,
+                errorMessage: `${this.$t('message.delete.account.failed')} - ${accountName}`,
+                loadingMessage: `${this.$t('message.delete.account.processing')} - ${accountName}`,
+                catchMessage: this.$t('error.fetching.async.job.result')
+              })
+            }).catch(error => {
+              this.$notifyError(error)
+            })
+          })
+      }).catch((error) => {
+        this.formRef.value.scrollToField(error.errorFields[0].name)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.form {
+  width: 80vw;
+  @media (min-width: 500px) {
+    width: 400px;
+  }
+}
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  button {
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}
+.error {
+  color: red;
+  margin-top: 10px;
+}
+</style>

ui/src/views/iam/DeleteAccountWrapper.vue

@@ -0,0 +1,74 @@
+// 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>
+    <!-- Show error message if account is not disabled -->
+    <template v-if="resource.state !== 'disabled'">
+      <div style="margin-bottom: 10px">
+        <a-alert type="error">
+          <template #message>
+            <div>{{ $t('message.delete.account.not.disabled') }}</div>
+          </template>
+        </a-alert>
+      </div>
+      <div :span="24" class="actions">
+        <a-button type="primary" @click="closeModal">{{ $t('label.ok') }}</a-button>
+      </div>
+    </template>
+    <!-- Show delete form if account is disabled -->
+    <delete-account
+      v-else
+      :resource="resource"
+      @close-action="closeModal" />
+  </div>
+</template>
+
+<script>
+import DeleteAccount from './DeleteAccount.vue'
+
+export default {
+  name: 'DeleteAccountWrapper',
+  components: {
+    DeleteAccount
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    closeModal () {
+      this.$emit('close-action')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  button {
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}
+</style>