Adding flow to add new emails to an account

This commit is contained in:
Halfdan Mouritzen 2024-03-02 17:43:16 +01:00
parent 89d7c9c9d5
commit fedfca25a5
3 changed files with 74 additions and 18 deletions

View file

@ -53,4 +53,15 @@ html.dark article table tbody tr:nth-child(2n+1) td {
html.dark article table tbody tr:last-child td {
border-bottom: var(--half-space) solid var(--twilight);
}
html.dark form>div>input[type="text"],
html.dark form>div>input[type="password"],
html.dark input[type="email"] {
border: 2px solid var(--twilight);
border-radius: 6px;
padding: 8px;
background: var(--dark-dark);
width: 100%;
color: var(--light-dust);
}

View file

@ -244,7 +244,7 @@ article {
padding: var(--double-space) var(--outer-space);
}
article>div.content-view {
article div.content-view {
background: var(--dust);
padding: var(--double-space);
margin-bottom: var(--space);
@ -320,6 +320,10 @@ button:disabled {
cursor: default;
}
button.secondary {
background: var(--twilight);
}
article table {
width: 100%;
border-spacing: 0;
@ -387,7 +391,7 @@ input[type="email"] {
padding: 8px;
background: var(--light-dust);
width: 100%;
color : var(--dark);
color: var(--dark);
}
form fieldset {
@ -400,6 +404,28 @@ form div.buttonHolder button {
display: inline-block;
}
#email-add-overlay {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
z-index: 1000;
}
#email-add-overlay .content-view {
width: 600px;
padding: var(--double-space);
}
#email-add-overlay .content-view p {
margin: var(--double-space) 0;
}
#login {
height: 100%;
display: flex;
@ -530,4 +556,4 @@ span.time_remaining {
.pagination .page-item.disabled .page-link {
cursor: default;
}
}

View file

@ -16,7 +16,7 @@
{% csrf_token %}
<fieldset class="blockLabels">
<div class="buttonHolder">
<button class="small" name="action_add" style="float:right">Add Email …</button>
<button class="small" name="action_add_open" style="float:right">Add Email …</button>
<button class="small" disabled type="submit" id="action_primary" name="action_primary">Make Primary</button>
<button class="small" type="submit" name="action_send">Re-send Verification</button>
<button class="small" type="submit" name="action_remove">Remove</button>
@ -76,21 +76,22 @@
{% trans "You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc." %}
</p>
{% endif %}
<!--
<hr />
<h3>{% trans "Add E-mail" %}</h3>
<div class="panel-body">
<form method="post" action="{% url 'account_email' %}"
class="add_email">
{% csrf_token %}
{{ form.as_p }}
<button name="action_add" class="btn btn-success" type="submit">
{% trans "Add E-mail" %}
</button>
</form>
</div>
<div id="email-add-overlay">
<div class="content-view">
<h3>{% trans "Add E-mail" %}</h3>
<div class="panel-body">
<form method="post" action="{% url 'account_email' %}"
class="add_email">
{% csrf_token %}
{{ form.as_p }}
<button name="action_add" style="float:right" type="submit">
{% trans "Add E-mail" %}
</button>
<button id="overlay-close-button" class="secondary">Cancel</button>
</form>
</div>
</div>
-->
</div>
<script type="text/javascript">
@ -105,6 +106,24 @@
});
}
let addEmail = document.getElementsByName('action_add_open')[0];
addEmail.addEventListener('click', function(e) {
e.preventDefault();
let overlay = document.getElementById('email-add-overlay')
overlay.style.display = 'flex'
window.addEventListener('keydown', function(e) {
if (e.key == 'Escape') {
overlay.style.display = 'none'
}
})
document.getElementById('overlay-close-button').addEventListener('click', function() {
overlay.style.display = 'none'
})
})
let radio_actions = document.getElementsByName('email');
if (radio_actions.length) {
for (radio of radio_actions) {