Move account deletion into a dedicated view

src/accounts.js

@@ -0,0 +1,8 @@
+export function sortAccounts(accounts) {
+	accounts.value.sort((a, b) => {
+		const va = `${a.localPart}@${a.domain}`;
+		const vb = `${b.localPart}@${b.domain}`;
+		return va.localeCompare(vb);
+	});
+	return accounts;
+}

src/components/NavBarComponent.vue

@@ -23,6 +23,7 @@ const toggleBurger = () => {
 					<div class="navbar-menu" :class="{ 'is-active': menuActive }">
 						<div class="navbar-end">
 							<RouterLink to="/add-account" class="navbar-item">New account</RouterLink>
+							<RouterLink to="/manage-accounts" class="navbar-item">Accounts</RouterLink>
 							<RouterLink to="/about" class="navbar-item">About</RouterLink>
 						</div>
 					</div>

src/router/index.js

@@ -5,8 +5,14 @@ import MainView from '../views/MainView.vue';
 import AboutView from '../views/AboutView.vue';
 import AddAccountView from '../views/AddAccountView.vue';
 import DeleteAccountView from '../views/DeleteAccountView.vue';
+import ManageAccountsView from '../views/ManageAccountsView.vue';
 
 const accounts = useStorage('sake-accounts', []);
+const requireAccounts = () => {
+	if (!accounts.value.length) {
+		return '/add-account';
+	}
+};
 const router = createRouter({
 	history: createMemoryHistory(),
 	routes: [
@@ -14,11 +20,7 @@ const router = createRouter({
 			path: '/',
 			name: 'main',
 			component: MainView,
-			beforeEnter: (to, from) => {
-				if (!accounts.value.length) {
-					return '/add-account';
-				}
-			}
+			beforeEnter: requireAccounts
 		},
 		{
 			path: '/about',
@@ -35,6 +37,12 @@ const router = createRouter({
 			name: 'delete-account',
 			component: DeleteAccountView,
 		},
+		{
+			path: '/manage-accounts',
+			name: 'manage-accounts',
+			component: ManageAccountsView,
+			beforeEnter: requireAccounts
+		},
 	]
 });
 

src/views/MainView.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { sortAccounts } from '../accounts';
 import { ref, computed } from 'vue';
 import { RouterLink, useRouter } from 'vue-router';
 import { useStorage } from '@vueuse/core'
@@ -9,12 +10,7 @@ import LayoutComponent from '../components/LayoutComponent.vue';
 import NavBarComponent from '../components/NavBarComponent.vue';
 
 const router = useRouter();
-const accounts = useStorage('sake-accounts', []);
-accounts.value.sort((a, b) => {
-	const va = `${a.localPart}@${a.domain}`;
-	const vb = `${b.localPart}@${b.domain}`;
-	return va.localeCompare(vb);
-});
+const accounts = sortAccounts(useStorage('sake-accounts', []));
 const selectedAccountId = ref(accounts.value[0].id);
 const subAddrName = ref('');
 
@@ -45,9 +41,6 @@ const generatedAddr = computed(() => {
 	}
 	return '';
 });
-const deleteAccount = () => {
-	return router.push(`/delete-account/${selectedAccountId.value}`);
-};
 const copyAddr = () => {
 	navigator.clipboard.writeText(generatedAddr.value);
 };
@@ -57,18 +50,15 @@ const copyAddr = () => {
 	<NavBarComponent />
 	<LayoutComponent>
 		<h1 class="title is-1">New address</h1>
-		<label class="label" for="account-name">Account</label>
-		<div class="field has-addons">
-			<div class="control is-expanded">
+		<div class="field">
+			<label class="label" for="account-name">Account</label>
+			<div class="control">
 				<div class="select is-fullwidth">
 					<select id="account-name" v-model="selectedAccountId">
 						<option v-for="account in accounts" :key="account.id" :value="account.id">{{ account.localPart }}@{{ account.domain }}</option>
 					</select>
 				</div>
 			</div>
-			<p class="control">
-				<a class="button is-danger" @click="deleteAccount">Delete</a>
-			</p>
 		</div>
 		<div class="field">
 			<label class="label" for="sub-addr-name">Name</label>

src/views/ManageAccountsView.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { sortAccounts } from '../accounts';
+import { RouterLink, useRouter } from 'vue-router';
+import { useStorage } from '@vueuse/core'
+import LayoutComponent from '../components/LayoutComponent.vue';
+
+const router = useRouter();
+const accounts = sortAccounts(useStorage('sake-accounts', []));
+
+const deleteAccount = (accountId) => {
+	return router.push(`/delete-account/${accountId}`);
+};
+const toMainView = () => {
+	return router.push('/');
+};
+</script>
+
+<template>
+	<LayoutComponent>
+		<h1 class="title is-1">Accounts</h1>
+		<div class="block">
+			<table class="table is-fullwidth">
+				<tbody>
+					<tr v-for="account in accounts">
+						<th class="has-text-right is-vcentered">
+							{{ account.localPart }}@{{ account.domain }}
+						</th>
+						<th>
+							<button class="button is-danger" @click="deleteAccount(account.id)">Delete</button>
+						</th>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+		<div class="block">
+			<div class="buttons is-centered">
+				<button class="button is-light" @click="toMainView">Close</button>
+			</div>
+		</div>
+	</LayoutComponent>
+</template>