Display aliases

This commit is contained in:
traxys 2023-08-29 21:29:48 +02:00
parent 5cd7f26717
commit 1785d25bc6
4 changed files with 138 additions and 3 deletions

View file

@ -81,13 +81,104 @@
</div>
</div>
</div>
<h2 class="title is-2 mt-2">Aliases</h2>
<ul class="list-group">
{% for alias in aliases %}
<li class="list-group-item d-flex flex-column">
<div class="d-flex justify-content-between align-items-center">
{{ alias.mail }}
<button type="button"
class="btn btn-danger"
data-bs-toggle="modal"
data-bs-target="#aliasDelete{{ loop.index }}">Delete</button>
<div class="modal fade"
tabindex="-1"
id="aliasDelete{{ loop.index }}"
aria-labelledby="aliasDeleteLabel{{ loop.index }}">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="aliasDeleteLabel{{ loop.index }}">Delete alias '{{ alias.mail }}'</h1>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-footer">
<form action="/alias/delete" method="post">
<input type="hidden" name="mail" value="{{ alias.mail }}" />
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger">Delete</button>
</form>
</div>
</div>
</div>
</div>
</div>
<ul class="list-group mt-1">
{% set alias_idx = loop.index %}
{% for recpt in alias.recipients %}<li class="list-group-item">{{ recpt }}</li>{% endfor %}
</ul>
<button type="button"
class="btn btn-primary mt-1 w-25"
data-bs-toggle="modal"
data-bs-target="#aliasRecptAdd{{ loop.index }}">Add Recipient</button>
<div class="modal fade"
tabindex="-1"
id="aliasRecptAdd{{ loop.index }}"
aria-labelledby="aliasRecptAddLabel{{ loop.index }}">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="aliasRecptAddLabel{{ loop.index }}">Add new recipient</h1>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="/alias/recipient/add"
method="post"
id="aliasRecptAddForm{{ loop.index }}">
<div class="form-floating mb-3">
<input type="email"
class="form-control"
id="floatingAddAliasRecpt{{ loop.index }}"
placeholder="mail@example.com"
name="recipient">
<label for="floatingAddAliasRecpt">Email address</label>
</div>
</form>
</div>
<div class="modal-footer">
<input type="hidden" name="alias" value="{{ alias.mail }}" />
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit"
class="btn btn-primary"
form="aliasRecptAddForm{{ loop.index }}">Add</button>
</div>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
<script>
const addModal = document.getElementById('mailAdd')
const addInput = document.getElementById('floatingAddMail')
const addModal = document.getElementById('mailAdd');
const addInput = document.getElementById('floatingAddMail');
addModal.addEventListener('shown.bs.modal', () => {
addInput.focus()
})
});
{% for idx in range(start = 1, end=aliases | length + 1) %}
const addRecptModal{{ idx }} = document.getElementById('aliasRecptAdd{{ idx }}');
const addRecptInput{{ idx }} = document.getElementById('floatingAddAliasRecpt{{ idx }}');
addRecptModal{{ idx }}.addEventListener('shown.bs.modal', () => {
addRecptInput{{ idx }}.focus()
});
{% endfor %}
</script>
{% endblock content %}