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>
</head>
<body>
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-three-fifths" id="app">
</div>
</div>
</div>
</section>
<div id="app"></div>
<script type="module" src="src/main.js"></script>
</body>
</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/tools"
// Navbar
@import "node_modules/bulma/sass/components/navbar"
// 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 { sha256 } from '@noble/hashes/sha256';
import base32Encode from 'base32-encode';
import LayoutComponent from '../components/LayoutComponent.vue';
const accounts = useStorage('sake-accounts', []);
const router = useRouter();
@ -88,42 +89,44 @@ const resetErrorMessage = () => {
</script>
<template>
<h1 class="title is-1">Add a new account</h1>
<div class="notification is-danger is-light" v-if="errorMessage">
<button class="delete" @click="resetErrorMessage"></button>
{{ errorMessage }}
</div>
<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">
<LayoutComponent>
<h1 class="title is-1">New account</h1>
<div class="notification is-danger is-light" v-if="errorMessage">
<button class="delete" @click="resetErrorMessage"></button>
{{ errorMessage }}
</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 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="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 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>
<label class="label" for="new-addr-key">Private key</label>
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" type="text" id="new-addr-key" v-model="privateKey">
<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>
<p class="control">
<a class="button is-primary" @click="showQrCodeScanner">Scan</a>
</p>
</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>
<label class="label" for="new-addr-key">Private key</label>
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" type="text" id="new-addr-key" v-model="privateKey">
</div>
<p class="control">
<a class="button is-primary" @click="showQrCodeScanner">Scan</a>
</p>
</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>

19
src/views/DeleteAccountView.vue
View file

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

58
src/views/MainView.vue
View file

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