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

9
index.html
View file

@ -7,7 +7,14 @@
<title>Sub-Address KEy</title> <title>Sub-Address KEy</title>
</head> </head>
<body> <body>
<div id="app"></div> <section class="section">
<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>

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>