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

{% extends 'default.html' %}

{% set active_page = "dashboard" %}

{% block title %}
  Custom Alias
{% endblock %}

{% block default_content %}

  <div class="bg-white p-6" style="max-width: 60em; margin: auto">
    <h1 class="h3 mb-5">New Email Alias</h1>

    {% if  user_custom_domains|length == 0 and not DISABLE_ALIAS_SUFFIX %}
      <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@{{ EMAIL_DOMAIN }}</b>,
        <b>me@{{ EMAIL_DOMAIN }}</b>, etc 😉. <br>
        If you add your own domain, this restriction is removed and you can fully customize the alias. <br>
      </div>
    {% endif %}

    <form method="post">
      <div class="row mb-2">
        <div class="col-sm-6 pr-1 mb-1" style="min-width: 5em">
          <input name="prefix" class="form-control"
                 type="text"
                 pattern="[0-9a-z-_]{1,}"
                 title="Only lowercase letter, number, dash (-), underscore (_) can be used in alias prefix."
                 placeholder="email alias"
                 autofocus required>
        </div>


        <div class="col-sm-6"
             style="padding-left: 5px">
          <select class="form-control" name="suffix">
            {% for suffix in suffixes %}
              <option value="{{ suffix[1] }}">
                {% if suffix[0] %}
                  {{ suffix[1] }} (your domain)
                {% else %}
                  {{ suffix[1] }}
                {% endif %}
              </option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="row col">
        <button class="btn btn-primary mt-1">Create</button>
      </div>
    </form>
  </div>

{% endblock %}