mail-accounts/templates/home.html

{% extends "base.html" %}
{% block title %}
    Mail management
{% endblock title %}
{% block head %}
    {{ super() }}
{% endblock head %}
{% macro delete_modal(modal_id, confirm_text, action, payload) %}
    <button type="button"
            class="btn btn-danger"
            data-bs-toggle="modal"
            data-bs-target="#{{ modal_id }}">Delete</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">{{ confirm_text }}</h1>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-footer">
                    <form action="{{ action }}" method="post">
                        {% 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 %}
                        <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>
{% 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>
        {% 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 }}
                    {{ self::delete_modal(modal_id="mailDelete" ~ loop.index,
                                        confirm_text="Delete mail '" ~ mail.mail ~ "'",
                                        action="/mail/delete",
                                        payload=["mail", mail.mail]) 
                    }}
                </li>
            {% endfor %}
        </ul>
        {{ 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 %}
                <li class="list-group-item d-flex flex-column">
                    <div class="d-flex justify-content-between align-items-center">
                        {{ alias.mail }}
                        {{ self::delete_modal(modal_id="aliasDelete" ~ loop.index,
                                                confirm_text="Delete alias '" ~ alias.mail ~ "'",
                                                action="/alias/delete",
                                                payload=["mail", alias.mail]) 
                        }}
                    </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>
                    {{ 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>
{% endblock content %}