app-MAIL-temp/app/dashboard/templates/dashboard/domain_detail/info.html

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

{% set domain_detail_page = "info" %}

{% block title %}
  {{ custom_domain.domain }} Info
{% endblock %}

{% block domain_detail_content %}
  <h1 class="h3"> {{ custom_domain.domain }}  </h1>

  <div class="small-text">Created {{ custom_domain.created_at | dt }}</div>

  {{ nb_alias }} aliases

  <hr>
  <div>Catch All</div>
  <div class="small-text">
    This feature allows you to create aliases <b>on the fly</b>.
    Simply use <em>anything@{{ custom_domain.domain }}</em>
    next time you need an email address. <br>
    The alias will be created the first time it receives an email
    and automatically belong to <b>{{ custom_domain.domain }}</b> mailboxes (
    {% for mailbox in custom_domain.mailboxes %}
      <b>{{ mailbox.email }}</b>
      {% if not loop.last %},{% endif %}
    {% endfor %})
  </div>

  <div>
    <form method="post">
      <input type="hidden" name="form-name" value="switch-catch-all">
      <label class="custom-switch cursor mt-2 pl-0"
             data-toggle="tooltip"
          {% if custom_domain.catch_all %}
             title="Disable catch-all"
          {% else %}
             title="Enable catch-all"
          {% endif %}
      >
        <input type="checkbox" class="custom-switch-input"
            {{ "checked" if custom_domain.catch_all else "" }}>

        <span class="custom-switch-indicator"></span>
      </label>
    </form>
  </div>

  <hr>
  <div>Default Alias Name</div>
  <div class="small-text">
    This name will be used as the default alias name when you send
    or reply from an alias, unless overwritten by the alias specific name.
  </div>

  <div>
    <form method="post">
      <input type="hidden" name="form-name" value="set-name">
      <div class="form-group">
        <input class="form-control"
               value="{{ custom_domain.name or "" }}"
               name="alias-name"
               placeholder="Alias name">
      </div>
      <button class="btn btn-primary" name="action" value="save">Save</button>
      {% if custom_domain.name %}
        <button class="btn btn-danger float-right" name="action" value="remove">Remove</button>
      {% endif %}
    </form>
  </div>

  <hr>
  <div>Random Prefix Generation</div>
  <div class="small-text">
    A random prefix can be generated for this domain for usage in the New Alias
    feature.
  </div>

  <div>
    <form method="post">
      <input type="hidden" name="form-name" value="switch-random-prefix-generation">
      <label class="custom-switch cursor mt-2 pl-0"
             data-toggle="tooltip"
          {% if custom_domain.random_prefix_generation %}
             title="Disable random prefix generation"
          {% else %}
             title="Enable random prefix generation"
          {% endif %}
      >
        <input type="checkbox" class="custom-switch-input"
            {{ "checked" if custom_domain.random_prefix_generation else "" }}>

        <span class="custom-switch-indicator"></span>
      </label>
    </form>
  </div>

  <hr>
  <h3 class="mb-0">Delete Domain</h3>
  <div class="small-text mb-3">Please note that this operation is irreversible.
    All aliases associated with this domain will be also deleted.
  </div>

  <form method="post">
    <input type="hidden" name="form-name" value="delete">
    <span class="delete-custom-domain btn btn-outline-danger">Delete domain</span>
  </form>

{% endblock %}

{% block script %}
  <script>
    $(".custom-switch-input").change(function (e) {
      $(this).closest("form").submit();
    });

    $(".delete-custom-domain").on("click", function (e) {
      let that = $(this);

      bootbox.confirm({
        message: "All aliases associated with <b>{{ custom_domain.domain }}</b> will be also deleted. <br>" +
          "This operation is not reversible, please confirm.",
        buttons: {
          confirm: {
            label: 'Yes, delete it',
            className: 'btn-danger'
          },
          cancel: {
            label: 'Cancel',
            className: 'btn-outline-primary'
          }
        },
        callback: function (result) {
          if (result) {
            that.closest("form").submit();
          }
        }
      })
    });
  </script>
{% endblock %}