traxys/mail-accounts
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Factorize add recipient

Browse source
This commit is contained in:
traxys 2023-08-29 23:14:35 +02:00
parent b8d417da9b
commit 0bba360281
1 changed files with 70 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

165
templates/home.html
View file

@ -39,6 +39,59 @@
</div>
</div>
{% 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 %}
<div class="container">
<h1 class="title is-1">Mail management</h1>
@ -56,43 +109,15 @@
</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>
{{ self::add_modal(modal_id="addMail",
add_button="Add new mail",
button_classes="mt-2",
add_text="Add new mail",
action="/mail/add",
input_name="mail",
payload=[],
prefill=true)
}}
<h2 class="title is-2 mt-2">Aliases</h2>
<ul class="list-group">
{% for alias in aliases %}
@ -109,66 +134,16 @@
{% 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 }}">
<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>
{{ self::add_modal(modal_id="addRecipient",
add_button="Add Recipient",
button_classes="mt-2 w-25",
add_text="Add a new recipient",
action="/alias/recipient/add",
input_name="recipient",
payload=["alias", alias.mail])
}}
</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 %}