stash

frontend/src/views/Settings.vue

@@ -3,6 +3,10 @@
         <main class="content">
             <div class="container-fluid p-0">
                 <h1 class="h3 mb-3">Settings</h1>
+                <div v-if="deleteError" class="alert alert-danger">{{ deleteError }}</div>
+                <div v-if="deleteSuccess" class="alert alert-success">
+                    Your account has been permanently deleted. Signing you out...
+                </div>
                 <div class="row">
                     <div class="col-md-3 col-xl-2">
                         <div class="card">
@@ -56,6 +60,12 @@ import {mapActions, mapGetters, mapMutations} from "vuex";
 export default {
     name: 'Settings',
     components: {BaseLayout},
+    data() {
+        return {
+            deleteError: null,
+            deleteSuccess: false
+        }
+    },
     computed: {
         ...mapGetters(['signAuth'])
     },
@@ -63,6 +73,7 @@ export default {
         ...mapActions(['getHomeServers']),
         ...mapMutations(['logout']),
         async deleteAccount() {
+            this.deleteError = null;
             if (!confirm('Are you sure you want to permanently delete your account? ' +
                 'All your data will be deleted and you will not be able to log back in. This cannot be undone.')) {
                 return;
@@ -72,14 +83,16 @@ export default {
                 const response = await servers.delete(this.signAuth, '/api/v1/account/');
                 if (!response || !response.ok) {
                     const errorBody = response ? await response.json().catch(() => ({})) : {};
-                    alert('Account deletion failed: ' + (errorBody.detail || response?.statusText || 'unknown error'));
+                    this.deleteError = 'Account deletion failed: ' + (errorBody.detail || response?.statusText || 'unknown error');
                     return;
                 }
-                alert('Your account has been permanently deleted.');
-                this.logout();
+                this.deleteSuccess = true;
+                // logout() redirects to /login right away - give the user a moment to read the
+                // confirmation above before that navigation happens.
+                setTimeout(() => this.logout(), 2000);
             } catch (error) {
                 console.error('Account deletion failed', error);
-                alert('Account deletion failed: ' + error);
+                this.deleteError = 'Account deletion failed: ' + error;
             }
         },
     }