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>
    </div>
    <script>
		const addModal = document.getElementById('mailAdd')
		const addInput = document.getElementById('floatingAddMail')

		addModal.addEventListener('shown.bs.modal', () => {
			addInput.focus()
		})
    </script>
{% endblock content %}