app/templates/dashboard/custom_alias.html

{% extends "default.html" %}

{% set active_page = "dashboard" %}
{% block title %}Custom Alias{% endblock %}
{% block default_content %}

  <div class="card">
    <div class="card-body">
      <h1 class="h3">New Custom Alias</h1>
      {% if  user_custom_domains|length == 0 and not DISABLE_ALIAS_SUFFIX %}

        <div class="row">
          <div class="col p-1">
            <div class="alert alert-primary" role="alert">
              You might notice a random word after the dot(<em>.</em>) in the alias.
              This part is to avoid a person taking all the "nice" aliases like
              <b>hello@{{ FIRST_ALIAS_DOMAIN }}</b>,
              <b>me@{{ FIRST_ALIAS_DOMAIN }}</b>, etc.
              <br />
              If you add your own domain (or subdomain), this restriction is removed, and you can fully customize the alias.
              <br />
            </div>
          </div>
        </div>
      {% endif %}
      <form method="post" data-parsley-validate>
        <div class="row mb-2">
          <div class="col-sm-6 mb-1 p-1" style="min-width: 4em">
            <input name="prefix"
                   class="form-control"
                   id="prefix"
                   type="text"
                   data-parsley-pattern="[0-9a-z-_.]{1,}"
                   data-parsley-trigger="change"
                   data-parsley-error-message="Only lowercase letters, dots, numbers, dashes (-) and underscores (_) are currently supported."
                   maxlength="40"
                   placeholder="Alias prefix, for example newsletter.com-123_xyz"
                   autofocus
                   required>
          </div>
          <div class="col-sm-6 p-1">
            <select class="form-control" name="signed-alias-suffix">
              {% for alias_suffix in alias_suffixes %}

                <option value="{{ alias_suffix.signed_suffix }}" {% if alias_suffix.is_premium %}
                   title="Only available to Premium accounts" {% elif not alias_suffix.is_custom and at_least_a_premium_domain %} title="Available to all accounts" {% endif %}>
                  {% if alias_suffix.is_custom %}
                    {% if alias_suffix.mx_verified %}

                      {{ alias_suffix.suffix }} (your domain)
                    {% else %}
                      {{ alias_suffix.suffix }} (your domain, not MX verified yet)
                    {% endif %}
                  {% else %}
                    {% if alias_suffix.is_premium %}

                      {{ alias_suffix.suffix }} (Premium domain)
                    {% else %}
                      {{ alias_suffix.suffix }} (Public domain)
                    {% endif %}
                  {% endif %}
                </option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="row mb-2">
          <div class="col p-1">
            <select data-width="100%"
                    class="mailbox-select"
                    id="mailboxes"
                    multiple
                    name="mailboxes"
                    required>
              {% for mailbox in mailboxes %}

                <option value="{{ mailbox.id }}" {% if mailbox.id == current_user.default_mailbox_id %}selected{% endif %}>{{ mailbox.email }}</option>
              {% endfor %}
            </select>
            <div class="small-text">The mailbox(es) that owns this alias.</div>
          </div>
        </div>
        <div class="row mb-2">
          <div class="col p-1">
            <textarea name="note"
                      class="form-control"
                      rows="3"
                      placeholder="Note, can be anything to help you remember why you created this alias. This field is optional."></textarea>
          </div>
        </div>
        <div class="row">
          <div class="col p-1">
            {{ csrf_form.csrf_token }}
            <button type="submit" id="create" class="btn btn-primary mt-1">Create</button>
          </div>
        </div>
      </form>
    </div>
  </div>
{% endblock %}
{% block script %}
  <script>
    $('.mailbox-select').multipleSelect();

    // Ctrl-enter submit the form
    $('form').keydown(function (event) {
      if (event.ctrlKey && event.keyCode === 13) {
        $("#submit").click();
      }
    })

    $("#create").on("click", async function () {
      let that = $(this);
      let mailbox_ids = $(`#mailboxes`).val();
      let prefix = $('#prefix').val();

      if (mailbox_ids.length == 0) {
        toastr.error("You must select at least a mailbox", "Error");
        return;
      }

      if (!prefix) {
        toastr.error("Alias cannot be empty", "Error");
        return;
      }

      that.closest("form").submit();

    })
  </script>
{% endblock %}