rodolphe/sake-app
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity

Move the link to add a new account into a nav bar

Browse source
This commit is contained in:
Rodolphe Bréard 2023-08-01 21:00:40 +02:00
parent 2cc284429a
commit ecf3dd552e
7 changed files with 125 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

@ -7,14 +7,7 @@
<title>Sub-Address KEy</title> <title>Sub-Address KEy</title>
</head> </head>
<body> <body>
<section class="section"> <div id="app"></div>
<div class="container">
<div class="columns is-centered">
<div class="column is-three-fifths" id="app">
</div>
</div>
</div>
</section>
<script type="module" src="src/main.js"></script> <script type="module" src="src/main.js"></script>
</body> </body>
</html> </html>

3
src/assets/main.sass
View file

@ -19,6 +19,9 @@
@import "node_modules/bulma/sass/form/select" @import "node_modules/bulma/sass/form/select"
@import "node_modules/bulma/sass/form/tools" @import "node_modules/bulma/sass/form/tools"
// Navbar
@import "node_modules/bulma/sass/components/navbar"
// Columns // Columns
@import "node_modules/bulma/sass/grid/columns" @import "node_modules/bulma/sass/grid/columns"

11
src/components/LayoutComponent.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-three-fifths">
<slot></slot>
</div>
</div>
</div>
</section>
</template>

32
src/components/NavBarComponent.vue Normal file
View file

@ -0,0 +1,32 @@
<script setup>
import { ref } from 'vue';
import { RouterLink } from 'vue-router';
const menuActive = ref(false);
const toggleBurger = () => {
menuActive.value = !menuActive.value;
};
</script>
<template>
<div class="container">
<div class="columns is-centered">
<div class="column is-three-fifths">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a role="button" class="navbar-burger" :class="{ 'is-active': menuActive }" aria-label="menu" aria-expanded="false" @click="toggleBurger">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" :class="{ 'is-active': menuActive }">
<div class="navbar-end">
<RouterLink to="/add-account" class="navbar-item">New account</RouterLink>
</div>
</div>
</nav>
</div>
</div>
</div>
</template>

71
src/views/AddAccountView.vue
View file

@ -5,6 +5,7 @@ import { useStorage } from '@vueuse/core'
import { QrcodeStream } from 'vue-qrcode-reader' import { QrcodeStream } from 'vue-qrcode-reader'
import { sha256 } from '@noble/hashes/sha256'; import { sha256 } from '@noble/hashes/sha256';
import base32Encode from 'base32-encode'; import base32Encode from 'base32-encode';
import LayoutComponent from '../components/LayoutComponent.vue';
const accounts = useStorage('sake-accounts', []); const accounts = useStorage('sake-accounts', []);
const router = useRouter(); const router = useRouter();
@ -88,42 +89,44 @@ const resetErrorMessage = () => {
</script> </script>
<template> <template>
<h1 class="title is-1">Add a new account</h1> <LayoutComponent>
<div class="notification is-danger is-light" v-if="errorMessage"> <h1 class="title is-1">New account</h1>
<button class="delete" @click="resetErrorMessage"></button> <div class="notification is-danger is-light" v-if="errorMessage">
{{ errorMessage }} <button class="delete" @click="resetErrorMessage"></button>
</div> {{ errorMessage }}
<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> <div class="container" id="new-account-error-msg-container"></div>
<div class="field"> <div class="field">
<label class="label" for="new-addr-separator">Separator</label> <label class="label" for="new-addr-local-part">Local part</label>
<div class="control"> <div class="control">
<input class="input" type="text" id="new-addr-separator" v-model="separator"> <input class="input" type="text" id="new-addr-local-part" v-model="localPart">
</div>
</div> </div>
</div> <div class="field">
<div class="field"> <label class="label" for="new-addr-separator">Separator</label>
<label class="label" for="new-addr-domain">Domain name</label> <div class="control">
<div class="control"> <input class="input" type="text" id="new-addr-separator" v-model="separator">
<input class="input" type="text" id="new-addr-domain" placeholder="example.org" v-model="domainName"> </div>
</div> </div>
</div> <div class="field">
<label class="label" for="new-addr-key">Private key</label> <label class="label" for="new-addr-domain">Domain name</label>
<div class="field has-addons"> <div class="control">
<div class="control is-expanded"> <input class="input" type="text" id="new-addr-domain" placeholder="example.org" v-model="domainName">
<input class="input" type="text" id="new-addr-key" v-model="privateKey"> </div>
</div> </div>
<p class="control"> <label class="label" for="new-addr-key">Private key</label>
<a class="button is-primary" @click="showQrCodeScanner">Scan</a> <div class="field has-addons">
</p> <div class="control is-expanded">
</div> <input class="input" type="text" id="new-addr-key" v-model="privateKey">
<qrcode-stream v-if="scanQrCode" @detect="onQrCodeDetected"></qrcode-stream> </div>
<div class="buttons is-centered"> <p class="control">
<button class="button is-primary" :disabled="addDisabled" @click="addAccount">Add account</button> <a class="button is-primary" @click="showQrCodeScanner">Scan</a>
<button class="button is-light" v-if="!cancellDisabled" @click="toMainView">Cancel</button> </p>
</div> </div>
<qrcode-stream v-if="scanQrCode" @detect="onQrCodeDetected"></qrcode-stream>
<div class="buttons is-centered">
<button class="button is-primary" :disabled="addDisabled" @click="addAccount">Add account</button>
<button class="button is-light" v-if="!cancellDisabled" @click="toMainView">Cancel</button>
</div>
</LayoutComponent>
</template> </template>

19
src/views/DeleteAccountView.vue
View file

@ -1,6 +1,7 @@
<script setup> <script setup>
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { useStorage } from '@vueuse/core' import { useStorage } from '@vueuse/core'
import LayoutComponent from '../components/LayoutComponent.vue';
const accounts = useStorage('sake-accounts', []); const accounts = useStorage('sake-accounts', []);
const router = useRouter(); const router = useRouter();
@ -17,12 +18,14 @@ const toMainView = () => {
</script> </script>
<template> <template>
<h1 class="title is-1">Delete account</h1> <LayoutComponent>
<p>You are about to delete the following account:</p> <h1 class="title is-1">Delete account</h1>
<p class="has-text-weight-semibold is-size-5">{{ account.localPart }}@{{ account.domain }}</p> <p>You are about to delete the following account:</p>
<p>Are you sure?</p> <p class="has-text-weight-semibold is-size-5">{{ account.localPart }}@{{ account.domain }}</p>
<div class="buttons is-centered"> <p>Are you sure?</p>
<button class="button is-danger" @click="deleteAccount">Delete</button> <div class="buttons is-centered">
<button class="button is-light" @click="toMainView">Cancel</button> <button class="button is-danger" @click="deleteAccount">Delete</button>
</div> <button class="button is-light" @click="toMainView">Cancel</button>
</div>
</LayoutComponent>
</template> </template>

58
src/views/MainView.vue
View file

@ -5,6 +5,8 @@ import { useStorage } from '@vueuse/core'
import { hmac } from '@noble/hashes/hmac'; import { hmac } from '@noble/hashes/hmac';
import { sha256 } from '@noble/hashes/sha256'; import { sha256 } from '@noble/hashes/sha256';
import base32Encode from 'base32-encode'; import base32Encode from 'base32-encode';
import LayoutComponent from '../components/LayoutComponent.vue';
import NavBarComponent from '../components/NavBarComponent.vue';
const router = useRouter(); const router = useRouter();
const accounts = useStorage('sake-accounts', []); const accounts = useStorage('sake-accounts', []);
@ -52,36 +54,36 @@ const copyAddr = () => {
</script> </script>
<template> <template>
<h1 class="title is-1">New email address</h1> <NavBarComponent />
<label class="label" for="account-name">Account</label> <LayoutComponent>
<div class="field has-addons"> <h1 class="title is-1">New address</h1>
<div class="control is-expanded"> <label class="label" for="account-name">Account</label>
<div class="select is-fullwidth"> <div class="field has-addons">
<select id="account-name" v-model="selectedAccountId"> <div class="control is-expanded">
<option v-for="account in accounts" :key="account.id" :value="account.id">{{ account.localPart }}@{{ account.domain }}</option> <div class="select is-fullwidth">
</select> <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>
<div class="control">
<input class="input" type="text" id="sub-addr-name" placeholder="Text input" v-model="subAddrName">
</div> </div>
</div> </div>
<p class="control"> <div class="field">
<a class="button is-danger" @click="deleteAccount">Delete</a> <label class="label" for="generated-addr">Address</label>
</p> <div class="control">
<p class="control"> <input class="input" type="text" id="generated-addr" v-model="generatedAddr" disabled>
<RouterLink to="/add-account" class="button is-primary">New</RouterLink> </div>
</p>
</div>
<div class="field">
<label class="label" for="sub-addr-name">Name</label>
<div class="control">
<input class="input" type="text" id="sub-addr-name" placeholder="Text input" v-model="subAddrName">
</div> </div>
</div> <div class="buttons is-centered">
<div class="field"> <button class="button is-primary" @click="copyAddr">Copy</button>
<label class="label" for="generated-addr">Address</label>
<div class="control">
<input class="input" type="text" id="generated-addr" v-model="generatedAddr" disabled>
</div> </div>
</div> </LayoutComponent>
<div class="buttons is-centered">
<button class="button is-primary" @click="copyAddr">Copy</button>
</div>
</template> </template>