Use accounts from the storage

src/router/index.js

@@ -1,13 +1,26 @@
 import {createRouter, createMemoryHistory} from 'vue-router';
+import { useStorage } from '@vueuse/core'
 
 import MainView from '../views/MainView.vue';
 import AddAccountView from '../views/AddAccountView.vue';
 
+const accounts = useStorage('sake-accounts', []);
 const router = createRouter({
 	history: createMemoryHistory(),
 	routes: [
-		{path: '/', component: MainView},
+		{
-		{path: '/add-account', component: AddAccountView},
+			path: '/',
+			component: MainView,
+			beforeEnter: (to, from) => {
+				if (!accounts.value.length) {
+					return '/add-account';
+				}
+			}
+		},
+		{
+			path: '/add-account',
+			component: AddAccountView
+		},
 	]
 });
 

src/views/MainView.vue

@@ -1,33 +1,29 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { RouterLink } 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 accounts = [
+const accounts = useStorage('sake-accounts', []);
-	{
+const selectedAccountId = ref(accounts.value[0].id);
-		id: 'bbca792e-0cf4-414f-8d6e-eea3df8e20b3',
-		localPart: 'a',
-		separator: '+',
-		domain: 'example.org',
-		key: Uint8Array.from([215, 91, 232, 137, 231, 202, 228, 248, 2, 95, 145, 117, 77, 55, 46, 161]),
-	},
-	{
-		id: '6ff7bae6-6c6c-43d7-a75c-859e6ecbdbd8',
-		localPart: 'b',
-		separator: '+',
-		domain: 'example.org',
-		key: Uint8Array.from([215, 91, 232, 137, 231, 202, 228, 248, 2, 95, 145, 117, 77, 55, 46, 161]),
-	},
-];
-const selectedAccountId = ref(accounts[0].id);
 const subAddrName = ref('');
 
+const fromRawAccount = (raw_account) => {
+	return {
+		id: raw_account.id,
+		localPart: raw_account.localPart,
+		separator: raw_account.separator,
+		domain: raw_account.domain,
+		key: Uint8Array.from(raw_account.key),
+	};
+};
 const generatedAddr = computed(() => {
 	if (selectedAccountId.value && subAddrName.value) {
-		const account = accounts.find((e) => e.id == selectedAccountId.value);
+		const raw_account = accounts.value.find((e) => e.id == selectedAccountId.value);
-		if (account) {
+		if (raw_account) {
+			const account = fromRawAccount(raw_account);
 			var hasher = hmac.create(sha256, account.key);
 			hasher.update(account.localPart);
 			hasher.update(account.separator);