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

{% extends 'default.html' %}

{% set active_page = "dashboard" %}

{% block title %}
  Alias Contact Manager
{% endblock %}

{% block default_content %}
  <div class="row">
    <div class="col">
      <h1 class="h3"> {{ alias.email }}
        <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>

      <div class="alert alert-primary collapse" id="howtouse" role="alert">
        <p>
          To send an email from your alias to someone, says <b>friend@example.com</b>, you need to: <br>

          1. Create a special email address called <em>reverse-alias</em> for friend@example.com using the form below
          <br>
          2. Send the email to the reverse-alias <em>instead of</em> friend@example.com
          <br>
          3. SimpleLogin will send this email from the alias to friend@example.com for you
        </p>
        <p>
          This might sound complicated but trust us, only the first time is a bit awkward.
        </p>
        <p>
          {% if alias.mailbox_id %}

            {% if alias.mailboxes | length == 1 %}
              Make sure you send the email from the mailbox <b>{{ alias.mailbox.email }}</b>.
            {% else %}
              Make sure you send the email from one of the following mailboxes: <br>
              {% for mailbox in alias.mailboxes %}
                - <b>{{ mailbox.email }}</b> <br>
              {% endfor %}
            {% endif %}
            This is because only the mailbox that owns the alias can send emails from it.
          {% else %}
            Make sure you send the email from your personal email address ({{ current_user.email }}).
          {% endif %}
        </p>
      </div>
    </div>

  </div>

  <form method="post">
    <input type="hidden" name="form-name" value="create">
    {{ new_contact_form.csrf_token }}

    <label class="form-label">Where do you want to send the email?</label>

    {{ new_contact_form.email(class="form-control", placeholder="First Last <email@example.com>") }}
    {{ render_field_errors(new_contact_form.email) }}
    <button class="btn btn-primary mt-2">Create reverse-alias</button>
  </form>

  <div class="row">
    {% for contact in contacts %}
      <div class="col-md-6">
        <div class="my-2 p-2 card {% if contact.id == highlight_contact_id %} highlight-row {% endif %}">
          <div>
            <span>
              <a href="{{ 'mailto:' + contact.website_send_to() }}"
                 data-toggle="tooltip"
                 title="You can click on this to open your email client. Or use the copy button 👉"
                 class="font-weight-bold">*************************</a>

              <span class="clipboard btn btn-sm btn-success copy-btn" data-toggle="tooltip"
                    title="Copy to clipboard"
                    data-clipboard-text="{{ contact.website_send_to() }}">
                Copy reverse-alias
              </span>
            </span>
          </div>

          <div>
            <i class="fe fe-mail"></i> ➡ {{ contact.website_email }}
          </div>

          <div class="mb-2 text-muted small-text">
            Created {{ contact.created_at | dt }} <br>

            {% if contact.last_reply() %}
              {% set email_log = contact.last_reply() %}
              Last email sent {{ email_log.created_at | dt }}
            {% endif %}
          </div>

          <div>
            <form method="post">
              <input type="hidden" name="form-name" value="delete">
              <input type="hidden" name="contact-id" value="{{ contact.id }}">
              <span class="card-link btn btn-link float-right delete-forward-email text-danger">
                Delete
              </span>
            </form>
          </div>

        </div>
      </div>
    {% endfor %}
  </div>

  <div class="row mt-3">
    <div class="col">
      <nav aria-label="Contact navigation">
        <ul class="pagination">
          <li class="page-item">
            <a class="btn btn-outline-secondary {% if page == 0 %}disabled{% endif %}"
               href="{{ url_for('dashboard.alias_contact_manager', alias_id=alias.id, page=page-1) }}">
              Previous</a>
          </li>
          <li class="page-item">
            <a class="btn btn-outline-secondary {% if last_page %}disabled{% endif %}"
               href="{{ url_for('dashboard.alias_contact_manager', alias_id=alias.id, page=page+1) }}">
              Next</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

{% endblock %}


{% block script %}
  <script>
    $(".delete-forward-email").on("click", function (e) {
      let that = $(this);

      bootbox.confirm({
        message: "All activities associated with this reverse-alias will also be deleted, 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 %}