Add a mockup for the add account view
This commit is contained in:
parent
9734c64097
commit
b968a43391
5 changed files with 135 additions and 26 deletions
21
src/App.vue
21
src/App.vue
|
@ -1,25 +1,8 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import MainView from "./views/MainView.vue";
|
||||
|
||||
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]),
|
||||
},
|
||||
];
|
||||
import { RouterView } from 'vue-router';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainView :accounts="accounts" />
|
||||
<RouterView />
|
||||
</template>
|
||||
|
|
11
src/main.js
11
src/main.js
|
@ -1,6 +1,9 @@
|
|||
import './assets/main.sass'
|
||||
import './assets/main.sass';
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
|
||||
createApp(App).mount('#app')
|
||||
const app = createApp(App);
|
||||
app.use(router);
|
||||
app.mount('#app');
|
||||
|
|
14
src/router/index.js
Normal file
14
src/router/index.js
Normal file
|
@ -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;
|
93
src/views/AddAccountView.vue
Normal file
93
src/views/AddAccountView.vue
Normal file
|
@ -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>
|
|
@ -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">
|
||||
|
|
Loading…
Reference in a new issue