Add a mockup for the main view
This commit is contained in:
parent
fcdddaf358
commit
82b496916e
3 changed files with 90 additions and 10 deletions
27
index.html
27
index.html
|
@ -1,13 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sub-Address KEy</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="src/main.js"></script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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>
|
||||
<script type="module" src="src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
<script setup>
|
||||
import MainView from "./views/MainView.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainView />
|
||||
</template>
|
||||
|
|
71
src/views/MainView.vue
Normal file
71
src/views/MainView.vue
Normal 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>
|
Loading…
Reference in a new issue