cloudron-box/src/views/emails.html

<!-- Test email -->
<div class="modal fade" id="testEmailModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Send test email for <b>{{ testEmail.domain.domain }}</b></h4>
      </div>
      <div class="modal-body">
        <form name="testEmailForm" role="form" novalidate ng-submit="testEmail.submit()" autocomplete="off">
          <fieldset>
            <p class="has-error text-center" ng-show="testEmail.error">{{ testEmail.error.generic }}</p>

            <p>This will send a test email from <b>no-reply@{{testEmail.domain.domain}}</b> to the address below.</p>
            <br/>
            <div class="form-group" ng-class="{ 'has-error': testEmail.error.key }">
              <label class="control-label" for="inputTestEmailKey">Email to</label>
              <input type="text" class="form-control" ng-model="testEmail.mailTo" id="inputTestMailTo" name="mailTo" ng-disabled="testEmail.busy" placeholder="Email address" autofocus>
            </div>

            <input class="ng-hide" type="submit" ng-disabled="testEmailForm.$invalid"/>
          </fieldset>
        </form>
      </div>
      <div class="modal-footer ">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-outline btn-success pull-right" ng-click="testEmail.submit()" ng-disabled="testEmail.$invalid || testEmail.busy">
          <i class="fa fa-circle-notch fa-spin" ng-show="testEmail.busy"></i><span>Send</span>
        </button>
      </div>
    </div>
  </div>
</div>

<div class="content">
  <div class="text-left">
    <h1>
      Mail Server
    </h1>
  </div>

  <div class="text-left">
    <h3>Domains</h3>
  </div>

  <div class="card" style="margin-bottom: 15px;">
    <div class="row ng-hide" ng-hide="ready">
      <div class="col-lg-12 text-center">
        <h2><i class="fa fa-circle-notch fa-spin"></i></h2>
      </div>
    </div>
    <div class="row animateMeOpacity ng-hide" ng-show="ready">
      <div class="col-xs-12">
        <table class="table table-hover" style="margin: 0;">
          <thead>
            <tr>
              <th style="width:  5%"></th>
              <th style="width: 85%">Domain</th>
              <th style="width: 10%">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="domain in domains">
              <td>
                <i class="fa fa-circle" ng-style="{ color: domain.statusOk ? '#27CE65' : '#d9534f' }" ng-show="domain.status"></i>
                <i class="fa fa-circle-notch fa-spin" ng-hide="domain.status"></i>
              </td>
              <td class="elide-table-cell no-padding">
                <a href="/#/email/{{ domain.domain }}" class="email-domain-list-item">{{ domain.domain }}</a>
              </td>
              <td class="text-right no-wrap">
                <button class="btn btn-xs btn-default" ng-click="testEmail.show(domain)" uib-tooltip="Send Test Email"><i class="fa fa-paper-plane"></i></button>
                <a href="/#/email/{{ domain.domain }}" class="btn btn-xs btn-default"><i class="fa fa-pencil-alt"></i></a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <br/>

  <div class="text-left">
    <h3>Event Log</h3>
  </div>

  <div class="card" style="margin-bottom: 15px;">
    <div class="row ng-hide" ng-hide="ready">
      <div class="col-lg-12 text-center">
        <h2><i class="fa fa-circle-notch fa-spin"></i></h2>
      </div>
    </div>
    <div class="row animateMeOpacity ng-hide" ng-show="ready">
      <div class="col-xs-12">
        <table class="table table-hover" style="margin: 0;">
          <thead>
            <tr>
              <th style="width:  5%"><!-- Direction --></th>
              <th style="width: 15%">Time</th>
              <th style="width: 30%">From</th>
              <th style="width: 30%">To</th>
              <th style="width:  5%"><!-- Type --></th>
            </tr>
          </thead>
          <tbody ng-show="activity.busy">
            <tr>
              <td colspan="5" class="text-center">
                <i class="fa fa-circle-notch fa-spin"></i>
              </td>
            </tr>
          </tbody>
          <tbody ng-repeat="eventlog in activity.eventLogs" ng-hide="activity.busy">
            <tr ng-click="activity.showEventLogDetails(eventlog)" class="hand">
              <td class="no-wrap">
                <i class="fas fa-upload" ng-show="eventlog.direction === 'outbound'" uib-tooltip="Outgoing"></i>
                <i class="fas fa-download" ng-show="eventlog.direction === 'inbound'" uib-tooltip="Incoming"></i>
              </td>
              <td class="no-wrap"><span uib-tooltip="{{ eventlog.ts | prettyLongDate }}" class="arrow">{{ eventlog.ts | prettyDate }}</span></td>
              <td class="elide-table-cell">{{ eventlog.mailFrom | prettyEmailAddresses }}</td>
              <td class="elide-table-cell">{{ eventlog.rcptTo | prettyEmailAddresses }}</td>
              <td class="no-wrap">
                <i class="fas fa-check" ng-show="eventlog.type === 'received'" uib-tooltip="Received"></i>
                <i class="fas fa-check" ng-show="eventlog.type === 'delivered'" uib-tooltip="Delivered"></i>
                <i class="fas fa-tasks" ng-show="eventlog.type === 'queued'" uib-tooltip="Queued"></i>
                <i class="fas fa-ban" ng-show="eventlog.type === 'denied'" uib-tooltip="Denied"></i>
                <!-- {{ eventlog.type }} -->
              </td>
            </tr>
            <tr ng-show="activity.activeEventLog === eventlog">
              <td colspan="5">
                <pre class="eventlog-details">{{ eventlog.details | json }}</pre>
              </td>
            </tr>
          </tbody>
        </table>

        <br/>

        <a class="btn btn-primary pull-right" href="/logs.html?id=mail" target="_blank">Show Raw Logs</a>
      </div>
    </div>
  </div>

</div>