Add a mockup for the add account view

src/App.vue

@@ -1,25 +1,8 @@
 <script setup>
 import { ref } from 'vue';
-import MainView from "./views/MainView.vue";
+import { RouterView } from 'vue-router';
-
-const accounts = [
-	{
-		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]),
-	},
-];
 </script>
 
 <template>
-	<MainView :accounts="accounts" />
+	<RouterView />
 </template>

src/main.js

@@ -1,6 +1,9 @@
-import './assets/main.sass'
+import './assets/main.sass';
 
-import { createApp } from 'vue'
+import { createApp } from 'vue';
-import App from './App.vue'
+import App from './App.vue';
+import router from './router';
 
-createApp(App).mount('#app')
+const app = createApp(App);
+app.use(router);
+app.mount('#app');

src/router/index.js

@@ -0,0 +1,14 @@
+import {createRouter, createMemoryHistory} from 'vue-router';
+
+import MainView from '../views/MainView.vue';
+import AddAccountView from '../views/AddAccountView.vue';
+
+const router = createRouter({
+	history: createMemoryHistory(),
+	routes: [
+		{path: '/', component: MainView},
+		{path: '/add-account', component: AddAccountView},
+	]
+});
+
+export default router;

src/views/AddAccountView.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { sha256 } from '@noble/hashes/sha256';
+import base32Encode from 'base32-encode';
+
+const router = useRouter();
+const localPart = ref('');
+const separator = ref('+');
+const domainName = ref('');
+const privateKey = ref('');
+
+const base64Decode = (str_b64) => {
+	const raw_str = atob(str_b64);
+	const length = raw_str.length;
+	var b = [];
+	for (var i = 0; i < length; i++) {
+		b.push(raw_str.charCodeAt(i));
+	}
+	return Uint8Array.from(b);
+};
+
+// Add account button
+const addDisabled = computed(() => {
+	const params = [
+		localPart.value,
+		separator.value.length == 1,
+		domainName.value,
+		privateKey.value
+	];
+	return !params.every((e) => e);
+});
+const addAccount = () => {
+	if (!addDisabled.value) {
+		try {
+			const key = base64Decode(privateKey.value);
+			const hash = sha256(`${localPart.value}@${domainName.value}`);
+			const newAccount = {
+				id: base32Encode(hash, 'RFC4648', { padding: false }).toLowerCase(),
+				localPart: localPart.value,
+				separator: separator.value,
+				domain: domainName.value,
+				key: key,
+			};
+			console.log(newAccount);
+		} catch (e) {
+			console.log(e);
+		}
+	}
+};
+
+// Cancel button
+const cancellDisabled = computed(() => {
+	// TODO: return true if there is no account in the local storage
+	return false;
+});
+const toMainView = () => {
+	return router.push('/');
+};
+</script>
+
+<template>
+	<h1 class="title is-1">Add a new account</h1>
+	<div class="container" id="new-account-error-msg-container"></div>
+	<div class="field">
+		<label class="label" for="new-addr-local-part">Local part</label>
+		<div class="control">
+			<input class="input" type="text" id="new-addr-local-part" v-model="localPart">
+		</div>
+	</div>
+	<div class="field">
+		<label class="label" for="new-addr-separator">Separator</label>
+		<div class="control">
+			<input class="input" type="text" id="new-addr-separator" v-model="separator">
+		</div>
+	</div>
+	<div class="field">
+		<label class="label" for="new-addr-domain">Domain name</label>
+		<div class="control">
+			<input class="input" type="text" id="new-addr-domain" placeholder="example.org" v-model="domainName">
+		</div>
+	</div>
+	<div class="field">
+		<label class="label" for="new-addr-key">Private key</label>
+		<div class="control">
+			<input class="input" type="text" id="new-addr-key" v-model="privateKey">
+		</div>
+	</div>
+	<div class="buttons is-centered">
+		<button class="button is-success" :disabled="addDisabled" @click="addAccount">Add account</button>
+		<button class="button is-light" v-if="!cancellDisabled" @click="toMainView">Cancel</button>
+	</div>
+</template>

src/views/MainView.vue

@@ -1,10 +1,26 @@
 <script setup>
 import { ref, computed } from 'vue';
+import { RouterLink } from 'vue-router';
 import { hmac } from '@noble/hashes/hmac';
 import { sha256 } from '@noble/hashes/sha256';
-import base32Encode from 'base32-encode'
+import base32Encode from 'base32-encode';
 
-const { accounts } = defineProps(['accounts']);
+const accounts = [
+	{
+		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('');
 
@@ -46,7 +62,7 @@ const copyAddr = () => {
 			<a class="button is-danger">Delete</a>
 		</p>
 		<p class="control">
-			<a class="button is-primary">New</a>
+			<RouterLink to="/add-account" class="button is-primary">New</RouterLink>
 		</p>
 	</div>
 	<div class="field">