Add a confirmation prompt before deleting an account

src/assets/main.sass

@@ -19,3 +19,6 @@
 
 // Columns
 @import "node_modules/bulma/sass/grid/columns"
+
+// Helpers
+@import "node_modules/bulma/sass/helpers/_all"

src/router/index.js

@@ -3,6 +3,7 @@ import { useStorage } from '@vueuse/core'
 
 import MainView from '../views/MainView.vue';
 import AddAccountView from '../views/AddAccountView.vue';
+import DeleteAccountView from '../views/DeleteAccountView.vue';
 
 const accounts = useStorage('sake-accounts', []);
 const router = createRouter({
@@ -21,6 +22,10 @@ const router = createRouter({
 			path: '/add-account',
 			component: AddAccountView
 		},
+		{
+			path: '/delete-account/:id',
+			component: DeleteAccountView,
+		},
 	]
 });
 

src/views/DeleteAccountView.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStorage } from '@vueuse/core'
+
+const accounts = useStorage('sake-accounts', []);
+const router = useRouter();
+const deleteId = useRoute().params.id;
+const account = accounts.value.find((e) => e.id == deleteId);
+
+const deleteAccount = () => {
+	accounts.value = accounts.value.filter((e) => e.id !== deleteId);
+	return toMainView();
+};
+const toMainView = () => {
+	return router.push('/');
+};
+</script>
+
+<template>
+	<h1 class="title is-1">Delete account</h1>
+	<p>You are about to delete the following account:</p>
+	<p class="has-text-weight-semibold is-size-5">{{ account.localPart }}@{{ account.domain }}</p>
+	<p>Are you sure?</p>
+	<div class="buttons is-centered">
+		<button class="button is-danger" @click="deleteAccount">Delete</button>
+		<button class="button is-light" @click="toMainView">Cancel</button>
+	</div>
+</template>

src/views/MainView.vue

@@ -1,11 +1,12 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { RouterLink } from 'vue-router';
+import { RouterLink, useRouter } from 'vue-router';
 import { useStorage } from '@vueuse/core'
 import { hmac } from '@noble/hashes/hmac';
 import { sha256 } from '@noble/hashes/sha256';
 import base32Encode from 'base32-encode';
 
+const router = useRouter();
 const accounts = useStorage('sake-accounts', []);
 const selectedAccountId = ref(accounts.value[0].id);
 const subAddrName = ref('');
@@ -38,8 +39,7 @@ const generatedAddr = computed(() => {
 	return '';
 });
 const deleteAccount = () => {
-	accounts.value = accounts.value.filter((e) => e.id !== selectedAccountId.value);
-	selectedAccountId.value = accounts.value[0].id;
+	return router.push(`/delete-account/${selectedAccountId.value}`);
 };
 const copyAddr = () => {
 	navigator.clipboard.writeText(generatedAddr.value);