app-MAIL-temp/templates/dashboard/domain_detail/auto-create.html

{% extends 'dashboard/domain_detail/base.html' %}

{% set domain_detail_page = "auto_create" %}

{% block title %}
  {{ custom_domain.domain }} Auto Create Rules
{% endblock %}

{% block domain_detail_content %}
  <h1 class="h2 mb-1"> {{ custom_domain.domain }} auto create alias rules </h1>
  <div>
    <span class="badge badge-info">Advanced</span>
    <span class="badge badge-warning">Beta</span>
  </div>



  {% if custom_domain.catch_all %}
    <div class="alert alert-warning mt-3">
      Rules are ineffective when catch-all is enabled.
    </div>
  {% endif %}

  <div class="{% if custom_domain.catch_all %} disabled-content {% endif %}">
    <div class="mt-3 mb-2">
      For a greater control than a simple catch-all, you can define a set of <b>rules</b> to auto create aliases. <br>
      A rule is based on a regular expression (<b>regex</b>): if an alias <b>fully</b> matches the expression,
      it'll be automatically created.
    </div>

    <div class="alert alert-info">
      Only the <b>local</b> part of the alias (i.e. <b>@{{ custom_domain.domain }}</b> is ignored) during the
      regex test.
    </div>

    <div class="alert alert-info">
      When there are several rules, rules will be evaluated by their order.
    </div>

    {% if custom_domain.auto_create_rules | length > 0 %}
      <div class="mt-2" id="rule-list">
        {% for auto_create_rule in custom_domain.auto_create_rules %}
          <div class="card">
            <div class="card-body">
              Order: <b>{{ auto_create_rule.order }}</b> <br>
              <input readonly value="{{ auto_create_rule.regex }}" class="form-control">
              New alias will belong to
              {% for mailbox in auto_create_rule.mailboxes %}
                <b>{{ mailbox.email }}</b>
                {% if not loop.last %},{% endif %}
              {% endfor %}

              <form method="post" class="mt-2">
                <input type="hidden" name="form-name" value="delete-auto-create-rule">
                <input type="hidden" name="rule-id" value="{{ auto_create_rule.id }}">
                <button class="btn btn-outline-danger btn-sm float-right">Delete</button>
              </form>
            </div>
          </div>
        {% endfor %}
      </div>
    {% endif %}

    <div class="mt-2" id="new-rule">
      <hr>
      <h3>New rule </h3>

      <form method="post" action="#rule-list" data-parsley-validate>
        <input type="hidden" name="form-name" value="create-auto-create-rule">
        {{ new_auto_create_rule_form.csrf_token }}


        <div class="form-group">
          <label>Regex</label>

          {{ new_auto_create_rule_form.regex(class="form-control",
              placeholder="prefix.*"
              ) }}
          {{ render_field_errors(new_auto_create_rule_form.regex) }}

          <div class="small-text">
            For example, if you want aliases that starts with <b>prefix</b> to be automatically created, you can set
            the
            regex to <em data-toggle="tooltip"
                         title="Click to copy"
                         class="clipboard"
                         data-clipboard-text="prefix.*">prefix.*</em>
            <br>

            If you want aliases that ends with <b>suffix</b> to be automatically created, you can use the regex
            <em data-toggle="tooltip"
                title="Click to copy"
                class="clipboard"
                data-clipboard-text=".*suffix">.*suffix</em>
            <br>
            To test out regex, we recommend using regex tester tool like
            <a href="https://regex101.com" target="_blank">https://regex101.com↗</a>
          </div>
        </div>

        <div class="form-group">
          <label>Order</label>
          {{ new_auto_create_rule_form.order(class="form-control", placeholder="10", min=1, value=1, type="number") }}
          {{ render_field_errors(new_auto_create_rule_form.order) }}
        </div>

        <div class="form-group">
          <div class="flex-grow-1 mr-2">
            <select data-width="100%" required
                    class="mailbox-select" multiple name="mailbox_ids">
              {% for mailbox in mailboxes %}
                <option value="{{ mailbox.id }}" {% if mailbox.id == current_user.default_mailbox_id %}
                        selected {% endif %}>
                  {{ mailbox.email }}
                </option>
              {% endfor %}
            </select>
          </div>
        </div>

        <button class="btn btn-primary mt-2">Create</button>
      </form>

    </div>

    <div id="debug-zone">
      <hr>
      <h3>Debug Zone</h3>
      <p>You can test whether an alias will be automatically created given the rules above </p>
      <div class="alert alert-info">
        No worries, no alias will be created during the test :)
      </div>
      <form method="post" action="#debug-zone">
        <input type="hidden" name="form-name" value="test-auto-create-rule">
        {{ auto_create_test_form.csrf_token }}

        <div class="d-flex">
          <div class="form-group d-flex">
            {{ auto_create_test_form.local(class="form-control", type="text", placeholder="local", value=auto_create_test_local) }}
            {{ render_field_errors(auto_create_test_form.local) }}
            <b class="pt-2 ml-1">@{{ custom_domain.domain }}</b>
          </div>
          <div>

          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-outline-primary">Test</button>
        </div>
      </form>

      {% if auto_create_test_result %}
        <div class="alert {% if auto_create_test_passed %} alert-success {% else %} alert-warning {% endif %}">
          {{ auto_create_test_result }}
        </div>
      {% endif %}
    </div>

  </div>


{% endblock %}

{% block script %}
  <script>
    $('.mailbox-select').multipleSelect();


  </script>
{% endblock %}