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

@ -54,3 +54,14 @@ html.dark article table tbody tr:nth-child(2n+1) td {
html.dark article table tbody tr:last-child td { html.dark article table tbody tr:last-child td {
border-bottom: var(--half-space) solid var(--twilight); 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); padding: var(--double-space) var(--outer-space);
} }
article>div.content-view { article div.content-view {
background: var(--dust); background: var(--dust);
padding: var(--double-space); padding: var(--double-space);
margin-bottom: var(--space); margin-bottom: var(--space);
@ -320,6 +320,10 @@ button:disabled {
cursor: default; cursor: default;
} }
button.secondary {
background: var(--twilight);
}
article table { article table {
width: 100%; width: 100%;
border-spacing: 0; border-spacing: 0;
@ -387,7 +391,7 @@ input[type="email"] {
padding: 8px; padding: 8px;
background: var(--light-dust); background: var(--light-dust);
width: 100%; width: 100%;
color : var(--dark); color: var(--dark);
} }
form fieldset { form fieldset {
@ -400,6 +404,28 @@ form div.buttonHolder button {
display: inline-block; 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 { #login {
height: 100%; height: 100%;
display: flex; display: flex;

View file

@ -16,7 +16,7 @@
{% csrf_token %} {% csrf_token %}
<fieldset class="blockLabels"> <fieldset class="blockLabels">
<div class="buttonHolder"> <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" 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_send">Re-send Verification</button>
<button class="small" type="submit" name="action_remove">Remove</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." %} {% 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> </p>
{% endif %} {% endif %}
<!-- </div>
<hr /> <div id="email-add-overlay">
<div class="content-view">
<h3>{% trans "Add E-mail" %}</h3> <h3>{% trans "Add E-mail" %}</h3>
<div class="panel-body"> <div class="panel-body">
<form method="post" action="{% url 'account_email' %}" <form method="post" action="{% url 'account_email' %}"
class="add_email"> class="add_email">
{% csrf_token %} {% csrf_token %}
{{ form.as_p }} {{ form.as_p }}
<button name="action_add" class="btn btn-success" type="submit"> <button name="action_add" style="float:right" type="submit">
{% trans "Add E-mail" %} {% trans "Add E-mail" %}
</button> </button>
<button id="overlay-close-button" class="secondary">Cancel</button>
</form> </form>
</div> </div>
--> </div>
</div> </div>
<script type="text/javascript"> <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'); let radio_actions = document.getElementsByName('email');
if (radio_actions.length) { if (radio_actions.length) {
for (radio of radio_actions) { for (radio of radio_actions) {