184 lines
9.7 KiB
HTML
184 lines
9.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}
|
|
Mail management
|
|
{% endblock title %}
|
|
{% block head %}
|
|
{{ super() }}
|
|
{% endblock head %}
|
|
{% block content %}
|
|
<div class="container">
|
|
<h1 class="title is-1">Mail management</h1>
|
|
{% if user_error %}<div class="alert alert-danger">{{ user_error }}</div>{% endif %}
|
|
<h2 class="title is-2">Mails</h2>
|
|
<ul class="list-group">
|
|
{% for mail in mails %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
{{ mail.mail }}
|
|
<button type="button"
|
|
class="btn btn-danger"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#mailDelete{{ loop.index }}">Delete</button>
|
|
<div class="modal fade"
|
|
tabindex="-1"
|
|
id="mailDelete{{ loop.index }}"
|
|
aria-labelledby="mailDeleteLabel{{ loop.index }}">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="mailDeleteLabel{{ loop.index }}">Delete mail '{{ mail.mail }}'</h1>
|
|
<button type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<form action="/mail/delete" method="post">
|
|
<input type="hidden" name="mail" value="{{ mail.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>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<button type="button"
|
|
class="btn btn-primary mt-2"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#mailAdd">Add new mail</button>
|
|
<div class="modal fade"
|
|
tabindex="-1"
|
|
id="mailAdd"
|
|
aria-labelledby="mailAddLabel">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="mailAddLabel">Add new mail</h1>
|
|
<button type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form action="/mail/add" method="post" id="mailAddForm">
|
|
<div class="form-floating mb-3">
|
|
<input type="email"
|
|
class="form-control"
|
|
id="floatingAddMail"
|
|
placeholder="mail@{{ mail_domain }}"
|
|
name="mail"
|
|
value="@{{ mail_domain }}">
|
|
<label for="floatingAddMail">Email address</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" form="mailAddForm">Add</button>
|
|
</div>
|
|
</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');
|
|
|
|
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 %}
|