app-MAIL-temp/app/dashboard/templates/dashboard/custom_domain.html

{% extends 'default.html' %}
{% set active_page = "custom_domain" %}

{% block title %}
  Custom Domains
{% endblock %}

{% block head %}
{% endblock %}

{% block default_content %}
  <div class="row">
    <div class="col">
      <h1 class="h3"> Custom Domains
        <a class="ml-3 text-info" style="font-size: 12px" data-toggle="collapse" href="#howtouse" role="button"
           aria-expanded="false" aria-controls="collapseExample">
          How to use <i class="fe fe-chevrons-down"></i>
        </a>
      </h1>

      {% if not current_user.is_premium() %}
        <div class="alert alert-danger" role="alert">
          This feature is only available on Premium plan.
          <a href="{{URL}}/dashboard/pricing" target="_blank" rel="noopener">
            Upgrade<i class="fe fe-external-link"></i>
          </a>
        </div>
      {% endif %}

      <div class="alert alert-primary collapse {% if not custom_domains %} show {% endif %}" id="howtouse" role="alert">
        By adding your domain, you can create aliases like <b>hi@my-domain.com</b> <br>

        You can also enable <b>catch-all</b> to create aliases on-the-fly:
        simply use <b>anything@my-domain.com</b> and it'll be created when
        it receives an email.
      </div>

      <div class="row">
        {% for custom_domain in custom_domains %}
          <div class="col-12 col-lg-6">
            <div class="card" style="">
              <div class="card-body">
                <h5 class="card-title">
                  <a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">{{ custom_domain.domain }}</a>
                  {% if custom_domain.verified %}
                    <span class="cursor" data-toggle="tooltip" data-original-title="Domain Verified">✅</span>
                  {% else %}
                    <span class="cursor" data-toggle="tooltip" data-original-title="DNS Setup Needed">
                      <a href="{{ url_for('dashboard.domain_detail_dns', custom_domain_id=custom_domain.id) }}"
                         class="text-decoration-none">🚫
                      </a>
                    </span>
                  {% endif %}
                </h5>

                <h6 class="card-subtitle mb-4 text-muted">
                  Created {{ custom_domain.created_at | dt }} <br>
                  <span class="font-weight-bold">{{ custom_domain.nb_alias() }}</span> aliases.
                  <br><br>

                  <b>Mailboxes:</b>
                  <i class="fe fe-info" data-toggle="tooltip"
                     title="Aliases created with this domain are automatically owned by these mailboxes">
                  </i>
                  <br>

                  {% set domain_mailboxes=custom_domain.mailboxes %}
                  <form method="post" class="mt-2">
                    <input type="hidden" name="form-name" value="update">
                    <input type="hidden" name="domain-id" value="{{ custom_domain.id }}">

                    <div class="d-flex">
                      <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 in domain_mailboxes %}
                                    selected {% endif %}>
                              {{ mailbox.email }}
                            </option>
                          {% endfor %}
                        </select>
                      </div>
                      <div>
                        <button class="btn btn-outline-primary btn-sm">Update</button>
                      </div>
                    </div>
                  </form>

                </h6>

                <a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}" class="mt-3">
                  Details ➡
                </a>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>

      <div class="row">
        <div class="col">
          <div class="card">
            <div class="card-body">

              <form method="post" class="mt-2">
                {{ new_custom_domain_form.csrf_token }}
                <input type="hidden" name="form-name" value="create">

                <h2 class="h4">New Domain</h2>

                {{ new_custom_domain_form.domain(class="form-control", placeholder="my-domain.com", maxlength=128) }}
                {{ render_field_errors(new_custom_domain_form.domain) }}
                <div class="small-text">
                  Please use full path domain, for ex <em>my-subdomain.my-domain.com</em>
                </div>

                <div class="mt-3 small-text alert alert-info">
                  By default, aliases created with your domain are "owned" by your default
                  mailbox <b>{{ current_user.default_mailbox.email }}</b>. <br>
                  This below option allow you to choose the mailbox(es) that a new alias automatically belongs to.
                </div>

                <select data-width="100%"
                        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>

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

    </div>

  </div>
{% endblock %}

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