From 8555da891350ffebe9c977079cc6b75a2bc66792 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodolphe=20Br=C3=A9ard?= <rodolphe@what.tf>
Date: Sun, 30 Jul 2023 18:37:59 +0200
Subject: [PATCH] Add a confirmation prompt before deleting an account

---
 src/assets/main.sass            |  3 +++
 src/router/index.js             |  5 +++++
 src/views/DeleteAccountView.vue | 29 +++++++++++++++++++++++++++++
 src/views/MainView.vue          |  6 +++---
 4 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 src/views/DeleteAccountView.vue

diff --git a/src/assets/main.sass b/src/assets/main.sass
index 907ebeb..6278c17 100644
--- a/src/assets/main.sass
+++ b/src/assets/main.sass
@@ -19,3 +19,6 @@
 
 // Columns
 @import "node_modules/bulma/sass/grid/columns"
+
+// Helpers
+@import "node_modules/bulma/sass/helpers/_all"
diff --git a/src/router/index.js b/src/router/index.js
index 76c9bb7..d527bbf 100644
--- a/src/router/index.js
+++ b/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,
+		},
 	]
 });
 
diff --git a/src/views/DeleteAccountView.vue b/src/views/DeleteAccountView.vue
new file mode 100644
index 0000000..bbc8fcf
--- /dev/null
+++ b/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>
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index a0414ff..9b6f484 100644
--- a/src/views/MainView.vue
+++ b/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);