Factorize add recipient
This commit is contained in:
traxys
parent
b8d417da9b
commit
0bba360281
1 changed files with 70 additions and 95 deletions
|
|
@ -39,6 +39,59 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endmacro delete_modal %}
|
{% endmacro delete_modal %}
|
||||||
|
{% macro add_modal(modal_id, add_button, add_text, action, payload, button_classes, input_name, prefill=false) %}
|
||||||
|
<button type="button"
|
||||||
|
class="btn btn-primary {{ button_classes }}"
|
||||||
|
data-bs-toggle="modal"
|
||||||
|
data-bs-target="#{{ modal_id }}">{{ add_button }}</button>
|
||||||
|
<div class="modal fade"
|
||||||
|
tabindex="-1"
|
||||||
|
id="{{ modal_id }}"
|
||||||
|
aria-labelledby="{{ modal_id }}Label">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h1 class="modal-title fs-5" id="{{ modal_id }}Label">{{ add_text }}</h1>
|
||||||
|
<button type="button"
|
||||||
|
class="btn-close"
|
||||||
|
data-bs-dismiss="modal"
|
||||||
|
aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form action="{{ action }}" method="post" id="{{ modal_id }}Form">
|
||||||
|
{% set payload_len = payload | length %}
|
||||||
|
{% for idx in range(end=payload_len / 2) %}
|
||||||
|
<input type="hidden"
|
||||||
|
name="{{ payload | nth(n=idx*2) }}"
|
||||||
|
value="{{ payload | nth(n=idx*2 + 1) }}" />
|
||||||
|
{% endfor %}
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<input type="email"
|
||||||
|
class="form-control"
|
||||||
|
id="{{ modal_id }}Input"
|
||||||
|
{% if prefill %} placeholder="mail@{{ mail_domain }}" {% else %} placeholder="mail@example.com" {% endif %}
|
||||||
|
name="{{ input_name }}"
|
||||||
|
{% if prefill %}value="@{{ mail_domain }}"{% endif %}>
|
||||||
|
<label for="{{ modal_id }}Input">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="{{ modal_id }}Form">Add</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
const {{ modal_id }}Modal = document.getElementById('{{ modal_id }}');
|
||||||
|
const {{ modal_id }}Input = document.getElementById('{{ modal_id }}Input');
|
||||||
|
|
||||||
|
{{ modal_id }}Modal.addEventListener('shown.bs.modal', () => {
|
||||||
|
{{ modal_id }}Input.focus()
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endmacro add_modal %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="title is-1">Mail management</h1>
|
<h1 class="title is-1">Mail management</h1>
|
||||||
|
|
@ -56,43 +109,15 @@
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
<button type="button"
|
{{ self::add_modal(modal_id="addMail",
|
||||||
class="btn btn-primary mt-2"
|
add_button="Add new mail",
|
||||||
data-bs-toggle="modal"
|
button_classes="mt-2",
|
||||||
data-bs-target="#mailAdd">Add new mail</button>
|
add_text="Add new mail",
|
||||||
<div class="modal fade"
|
action="/mail/add",
|
||||||
tabindex="-1"
|
input_name="mail",
|
||||||
id="mailAdd"
|
payload=[],
|
||||||
aria-labelledby="mailAddLabel">
|
prefill=true)
|
||||||
<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>
|
<h2 class="title is-2 mt-2">Aliases</h2>
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
{% for alias in aliases %}
|
{% for alias in aliases %}
|
||||||
|
|
@ -109,66 +134,16 @@
|
||||||
{% set alias_idx = loop.index %}
|
{% set alias_idx = loop.index %}
|
||||||
{% for recpt in alias.recipients %}<li class="list-group-item">{{ recpt }}</li>{% endfor %}
|
{% for recpt in alias.recipients %}<li class="list-group-item">{{ recpt }}</li>{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
<button type="button"
|
{{ self::add_modal(modal_id="addRecipient",
|
||||||
class="btn btn-primary mt-1 w-25"
|
add_button="Add Recipient",
|
||||||
data-bs-toggle="modal"
|
button_classes="mt-2 w-25",
|
||||||
data-bs-target="#aliasRecptAdd{{ loop.index }}">Add Recipient</button>
|
add_text="Add a new recipient",
|
||||||
<div class="modal fade"
|
action="/alias/recipient/add",
|
||||||
tabindex="-1"
|
input_name="recipient",
|
||||||
id="aliasRecptAdd{{ loop.index }}"
|
payload=["alias", alias.mail])
|
||||||
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 }}">
|
|
||||||
<input type="hidden" name="alias" value="{{ alias.mail }}" />
|
|
||||||
<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">
|
|
||||||
<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>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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 %}
|
{% endblock content %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue