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>

5
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,7 +89,8 @@ const resetErrorMessage = () => {
</script> </script>
<template> <template>
<h1 class="title is-1">Add a new account</h1> <LayoutComponent>
<h1 class="title is-1">New account</h1>
<div class="notification is-danger is-light" v-if="errorMessage"> <div class="notification is-danger is-light" v-if="errorMessage">
<button class="delete" @click="resetErrorMessage"></button> <button class="delete" @click="resetErrorMessage"></button>
{{ errorMessage }} {{ errorMessage }}
@ -126,4 +128,5 @@ const resetErrorMessage = () => {
<button class="button is-primary" :disabled="addDisabled" @click="addAccount">Add account</button> <button class="button is-primary" :disabled="addDisabled" @click="addAccount">Add account</button>
<button class="button is-light" v-if="!cancellDisabled" @click="toMainView">Cancel</button> <button class="button is-light" v-if="!cancellDisabled" @click="toMainView">Cancel</button>
</div> </div>
</LayoutComponent>
</template> </template>

3
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,6 +18,7 @@ const toMainView = () => {
</script> </script>
<template> <template>
<LayoutComponent>
<h1 class="title is-1">Delete account</h1> <h1 class="title is-1">Delete account</h1>
<p>You are about to delete the following account:</p> <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 class="has-text-weight-semibold is-size-5">{{ account.localPart }}@{{ account.domain }}</p>
@ -25,4 +27,5 @@ const toMainView = () => {
<button class="button is-danger" @click="deleteAccount">Delete</button> <button class="button is-danger" @click="deleteAccount">Delete</button>
<button class="button is-light" @click="toMainView">Cancel</button> <button class="button is-light" @click="toMainView">Cancel</button>
</div> </div>
</LayoutComponent>
</template> </template>

10
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,7 +54,9 @@ const copyAddr = () => {
</script> </script>
<template> <template>
<h1 class="title is-1">New email address</h1> <NavBarComponent />
<LayoutComponent>
<h1 class="title is-1">New address</h1>
<label class="label" for="account-name">Account</label> <label class="label" for="account-name">Account</label>
<div class="field has-addons"> <div class="field has-addons">
<div class="control is-expanded"> <div class="control is-expanded">
@ -65,9 +69,6 @@ const copyAddr = () => {
<p class="control"> <p class="control">
<a class="button is-danger" @click="deleteAccount">Delete</a> <a class="button is-danger" @click="deleteAccount">Delete</a>
</p> </p>
<p class="control">
<RouterLink to="/add-account" class="button is-primary">New</RouterLink>
</p>
</div> </div>
<div class="field"> <div class="field">
<label class="label" for="sub-addr-name">Name</label> <label class="label" for="sub-addr-name">Name</label>
@ -84,4 +85,5 @@ const copyAddr = () => {
<div class="buttons is-centered"> <div class="buttons is-centered">
<button class="button is-primary" @click="copyAddr">Copy</button> <button class="button is-primary" @click="copyAddr">Copy</button>
</div> </div>
</LayoutComponent>
</template> </template>