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

Add a mockup for the main view

Browse source
This commit is contained in:
Rodolphe Bréard 2023-07-30 11:53:27 +02:00
parent fcdddaf358
commit 82b496916e
3 changed files with 90 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
index.html
View file

@ -1,13 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="favicon.ico"> <link rel="icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sub-Address KEy</title> <title>Sub-Address KEy</title>
</head> </head>
<body> <body>
<div id="app"></div> <section class="section">
<script type="module" src="src/main.js"></script> <div class="container">
</body> <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>
</body>
</html> </html>

2
src/App.vue
View file

@ -1,5 +1,7 @@
<script setup> <script setup>
import MainView from "./views/MainView.vue";
</script> </script>
<template> <template>
<MainView />
</template> </template>

71
src/views/MainView.vue Normal file
View file

@ -0,0 +1,71 @@
<script setup>
import {ref, computed} from "vue";
const accounts = [
{
id: 'bbca792e-0cf4-414f-8d6e-eea3df8e20b3',
localPart: 'a',
separator: '+',
domain: 'example.org',
key: [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: [215, 91, 232, 137, 231, 202, 228, 248, 2, 95, 145, 117, 77, 55, 46, 161],
},
];
const selectedAccountId = ref("6ff7bae6-6c6c-43d7-a75c-859e6ecbdbd8");
const subAddrName = ref("");
const generatedAddr = computed(() => {
if (selectedAccountId.value && subAddrName.value) {
const account = accounts.find((e) => e.id == selectedAccountId.value);
if (account) {
const code = 'todo';
return `${account.localPart}${account.separator}${subAddrName.value}${account.separator}${code}@${account.domain}`;
}
}
return "";
});
const copyAddr = () => {
navigator.clipboard.writeText(generatedAddr.value);
};
</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>
</div>
</div>
<p class="control">
<a class="button is-danger">Delete</a>
</p>
<p class="control">
<a class="button is-primary">New</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>
<label class="label" for="generated-addr">Address</label>
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" type="text" id="generated-addr" v-model="generatedAddr" disabled>
</div>
<p class="control">
<a class="button is-primary" @click="copyAddr">Copy</a>
</p>
</div>
</template>