Implement the add new account button

This commit is contained in:
Rodolphe Bréard 2023-07-25 21:46:03 +02:00
parent fe48a8e07a
commit d1732234aa
2 changed files with 131 additions and 21 deletions

View file

@ -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>