Implement the add new account button
This commit is contained in:
Rodolphe Bréard
parent
fe48a8e07a
commit
d1732234aa
2 changed files with 131 additions and 21 deletions
102
pwa/app.js
102
pwa/app.js
|
|
@ -15,11 +15,15 @@ function base64_decode(str_b64) {
|
|||
}
|
||||
|
||||
class Account {
|
||||
constructor(local_part, separator, domain, key_b64) {
|
||||
constructor(local_part, separator, domain, key) {
|
||||
this.local_part = local_part;
|
||||
this.domain = domain;
|
||||
this.separator = separator;
|
||||
this.key = base64_decode(key_b64);
|
||||
if (Array.isArray(key)) {
|
||||
this.key = key;
|
||||
} else {
|
||||
this.key = base64_decode(key);
|
||||
}
|
||||
}
|
||||
|
||||
getName() {
|
||||
|
|
@ -37,22 +41,90 @@ class Account {
|
|||
const code = base32_nopad_encode(reduced_hash);
|
||||
return `${this.local_part}${this.separator}${sub_addr_name}${this.separator}${code}@${this.domain}`
|
||||
}
|
||||
|
||||
register() {
|
||||
localStorage.setItem(this.getName(), JSON.stringify(this));
|
||||
}
|
||||
}
|
||||
|
||||
['a', 'b'].forEach((e) => {
|
||||
const test_addr = new Account(e, '+', 'example.org', '11voiefK5PgCX5F1TTcuoQ==');
|
||||
console.log(test_addr);
|
||||
console.log('Account name: ' + test_addr.getName());
|
||||
console.log('Sub-addr: ' + test_addr.genSubAddr('test'));
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Functions to open and close a modal
|
||||
function openModal() {
|
||||
document.querySelector('#modal-add-account').classList.add('is-active');
|
||||
}
|
||||
|
||||
document.querySelector('#btn-generate').addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
console.log('TODO: address generation');
|
||||
['a', 'b'].forEach((e) => {
|
||||
const test_addr = new Account(e, '+', 'example.org', '11voiefK5PgCX5F1TTcuoQ==');
|
||||
console.log(test_addr);
|
||||
console.log('Sub-addr: ' + test_addr.genSubAddr('test'));
|
||||
function closeModal() {
|
||||
if (localStorage.length !== 0) {
|
||||
document.querySelector('#modal-add-account').classList.remove('is-active');
|
||||
syncAccountList();
|
||||
}
|
||||
}
|
||||
|
||||
// Function to synchronize the account list
|
||||
function syncAccountList() {
|
||||
var acc_list = document.querySelector('#account-name');
|
||||
while (acc_list.lastElementChild) {
|
||||
acc_list.removeChild(acc_list.lastElementChild);
|
||||
}
|
||||
for (var i = 0, len = localStorage.length; i < len; ++i) {
|
||||
const account_string = localStorage.getItem(localStorage.key(i));
|
||||
const account_raw = JSON.parse(account_string);
|
||||
const account = new Account(
|
||||
account_raw.local_part,
|
||||
account_raw.separator,
|
||||
account_raw.domain,
|
||||
account_raw.key,
|
||||
);
|
||||
const new_elem = new Option(account.getName(), account.getName());
|
||||
acc_list.appendChild(new_elem);
|
||||
}
|
||||
if (localStorage.length === 0) {
|
||||
openModal();
|
||||
}
|
||||
}
|
||||
syncAccountList();
|
||||
|
||||
// Add a click event on buttons to open a specific modal
|
||||
(document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
|
||||
$trigger.addEventListener('click', () => {
|
||||
openModal();
|
||||
});
|
||||
});
|
||||
|
||||
// Add a click event on various child elements to close the parent modal
|
||||
(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button-close') || []).forEach(($close) => {
|
||||
$close.addEventListener('click', () => {
|
||||
closeModal();
|
||||
});
|
||||
});
|
||||
|
||||
// Add a keyboard event to close all modals
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.code === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Add a click event on the new account button to register the new account
|
||||
document.querySelector('#btn-new-account').addEventListener('click', (event) => {
|
||||
console.log('Adding new account…');
|
||||
const new_account = new Account(
|
||||
document.querySelector('#new-addr-local-part').value,
|
||||
document.querySelector('#new-addr-separator').value,
|
||||
document.querySelector('#new-addr-domain').value,
|
||||
document.querySelector('#new-addr-key').value,
|
||||
);
|
||||
console.log(new_account);
|
||||
new_account.register();
|
||||
console.log(`Account ${new_account.getName()} added.`);
|
||||
closeModal();
|
||||
});
|
||||
|
||||
// Add a click event on the new address button to generate it
|
||||
document.querySelector('#btn-generate').addEventListener('click', (event) => {
|
||||
console.log('Generating a new address…');
|
||||
event.preventDefault();
|
||||
// TODO
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -17,19 +17,16 @@
|
|||
<div class="columns is-centered">
|
||||
<div class="column is-three-fifths">
|
||||
<h1 class="title is-1">New email address</h1>
|
||||
<form action="" method="get">
|
||||
<form action="" method="get" id="form-generate-addr">
|
||||
<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">
|
||||
<option>a@example.org</option>
|
||||
<option>b@example.com</option>
|
||||
</select>
|
||||
<select id="account-name"></select>
|
||||
</div>
|
||||
</div>
|
||||
<p class="control">
|
||||
<a class="button is-primary" id="btn-add-account">New</a>
|
||||
<a class="button is-primary js-modal-trigger" data-target="modal-add-account" id="btn-add-account">New</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
|
|
@ -52,5 +49,46 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="modal-add-account" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Add a new account</p>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<form action="" method="get" id="form-new-account">
|
||||
<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" minlength="1">
|
||||
</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" value="+" minlength="1" maxlength="1">
|
||||
</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" minlength="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="new-addr-key">Private key</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" id="new-addr-key" minlength="1">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<footer class="modal-card-foot buttons is-centered">
|
||||
<button class="button is-success" id="btn-new-account">Add</button>
|
||||
<button class="button button-close">Cancel</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue