mail-accounts/templates/home.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 %}