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">
        <div class="m-2">
            <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 d-flex justify-content-between align-items-center">
                                    {{ recpt }}
                                    {{ self::delete_modal(modal_id="aliasRctDelete" ~ alias_idx ~ loop.index,
                                                                        confirm_text="Delete recipient '" ~ recpt ~ "' for '" ~ alias.mail ~ "'",
                                                                        action="/alias/recipient/delete",
                                                                        payload=["alias", alias.mail, "recipient", recpt]) 
                                    }}
                                </li>
                            {% endfor %}
                        </ul>
                        {{ self::add_modal(modal_id="addRecipient" ~ loop.index,
                                                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>
            {{ self::add_modal(modal_id="addAlias",
                        add_button="Add new alias",
                        button_classes="mt-2",
                        add_text="Add new alias",
                        action="/alias/add",
                        input_name="mail",
                        payload=[],
                        prefill=true) 
            }}
        </div>
    </div>
{% endblock content %}