cloudron-box/dashboard/src/views/email.html

<!-- Modal enable email -->
<div class="modal fade" id="enableEmailModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Cloudron Email Server</h4>
      </div>
      <div class="modal-body" ng-show="selectedDomain.provider === 'noop' || selectedDomain.provider === 'manual'">
        No DNS provider is setup. The DNS records listed below have to be setup manually.<br/>
      </div>
      <div class="modal-body" ng-hide="selectedDomain.provider === 'noop' || selectedDomain.provider === 'manual'">
        Cloudron will setup Email related DNS records automatically. Status of DNS Records below will show an error
        while DNS is propagating (~5 minutes).
        <br/><br/>
        If this domain is already configured to handle email with some other provider, it will overwrite those records.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success" ng-click="enableEmail()">I understand, enable</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal edit mailbox -->
<div class="modal fade" id="mailboxEditModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Edit mailbox {{ mailboxes.edit.mailbox.name }}@{{selectedDomain.domain}}</h4>
      </div>
      <div class="modal-body">
        <form name="mailboxedit_form" role="form" ng-submit="mailboxes.edit.submit()" autocomplete="off">
          <input type="password" style="display: none;">
          <div class="form-group">
            <label class="control-label">Mailbox Owner</label>
            <select class="form-control" ng-model="mailboxes.edit.mailbox.owner" ng-options="u.display for u in users track by u.id"></select>
          </div>
          <div class="form-group" ng-class="{ 'has-error': mailboxes.edit.error }">
            <label class="control-label">Aliases</label>
            <div class="control-label" ng-show="mailboxes.edit.error">
              <small>{{ mailboxes.edit.error.message }}</small>
            </div>
            <div class="input-group form-inline" style="margin-top: 10px;">
              <tag-input class="form-group form-control" placeholder="Add alias" taglist="mailboxes.edit.mailbox.aliases" name="aliases"></tag-input>
              <div class="input-group-addon">@{{ selectedDomain.domain }}</div>
            </div>
          </div>
          <input class="hide" type="submit" ng-disabled="mailboxedit_form.$invalid || mailboxes.edit.busy"/>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success" ng-click="mailboxes.edit.submit()" ng-disabled="mailboxedit_form.$invalid || mailboxes.edit.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailboxes.edit.busy"></i> Save</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal remove mailbox -->
<div class="modal fade" id="mailboxRemoveModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      </div>
      <div class="modal-body">
        <p>Really delete mailbox <b>{{ mailboxes.remove.name }}@{{selectedDomain.domain}}</b>?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-danger" ng-click="mailboxes.remove.submit()" ng-disabled="mailboxes.remove.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailboxes.remove.busy"></i> Delete</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal remove mailinglist -->
<div class="modal fade" id="mailinglistRemoveModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
        </div>
        <div class="modal-body">
          <p>Really delete mailinglist <b>{{ mailinglists.remove.list.name }}@{{selectedDomain.domain}}</b>?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-danger" ng-click="mailinglists.remove.submit()" ng-disabled="mailinglists.remove.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailinglist.remove.busy"></i> Delete</button>
        </div>
      </div>
    </div>
  </div>

<!-- Test email sent -->
<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</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 no-reply@{{selectedDomain.domain}} 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-o-notch fa-spin" ng-show="testEmail.busy"></i><span>Send</span>
        </button>
    </div>
    </div>
  </div>
</div>

<div ng-show="!ready" class="loading-banner">
    <h1><i class="fa fa-circle-o-notch fa-spin"></i></h1>
</div>

<div class="content content-large" ng-show="ready">
  <div class="text-left">
    <h1>
      Email
      <select class="form-control pull-right" style="display: inline-block; width: 200px;" ng-model="selectedDomain" ng-options="a.domain for a in domains" ng-change="refreshDomain()"></select>
    </h1>
  </div>

  <div class="text-left">
    <h3>IMAP and SMTP Server</h3>
  </div>

  <div class="card card-large" style="margin-bottom: 15px;">
    <div class="row">
      <div class="col-md-12">
        Cloudron has a built-in <a ng-href="{{ config.webServerOrigin + '/documentation/email/' }}" target="_blank">email server</a> that allows users to send and receive email for this domain.
        Apps can send emails regardless of this setting.
      </div>
    </div>
    <div class="row" ng-show="selectedDomain.mailConfig.enabled">
      <br/>
      <div class="col-md-12">
       <b><a href="" data-toggle="collapse" data-parent="#accordion" data-target="#mail_settings">Mail server settings for email clients</a></b>
       <div id="mail_settings" class="panel-collapse collapse">
         <br/>
         <p><b>Incoming Mail (IMAP)</b><br/>Server: <span ng-click-select>{{config.mailFqdn}}</span><br/>Port: 993 (TLS)</p>
         <p><b>Outgoing Mail (SMTP)</b><br/>Server: <span ng-click-select>{{config.mailFqdn}}</span><br/>Port: 587 (STARTTLS)</p>
         <p><b>ManageSieve</b><br/>Server: <span ng-click-select>{{config.mailFqdn}}</span><br/>Port: 4190 (TLS)</p>
         <p>Use <i>username</i>@{{ selectedDomain.domain }} and the Cloudron password to access mailboxes of this domain</p>
        </div>
      </div>
    </div>
    <br/>
    <div class="row">
      <div class="col-md-12" ng-show="selectedDomain.provider !== 'caas'">
        <button ng-class="selectedDomain.mailConfig.enabled ? 'btn btn-danger' : 'btn btn-primary'" ng-click="toggleEmailEnabled()" ng-enabled="selectedDomain.mailConfig">{{ selectedDomain.mailConfig.enabled ? "Disable Email" : "Enable Email" }}</button>
      </div>
      <div class="col-md-12" ng-show="selectedDomain.provider === 'caas'">
        <span class="text-danger text-bold">This feature requires the Cloudron to be on <a ng-href="{{ config.webServerOrigin + '/documentation/managed-hosting/#using-a-custom-domain' }}" target="_blank">custom domain</a>.</span>
      </div>
    </div>
  </div>

  <div class="text-left" ng-show="selectedDomain.mailConfig.enabled">
    <h3>Mailboxes</h3>
  </div>

  <div class="card card-large" style="margin-bottom: 15px;" ng-show="selectedDomain.mailConfig.enabled">
    <div class="row">
      <div class="col-md-12">
        Each mailboxes has an owner, who is able to access the mailbox.

        <br/><br/>

        <table class="table table-hover">
          <thead>
            <tr>
              <th>Name</th>
              <th>Owner</th>
              <th>Aliases</th>
              <th class="text-right">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="mailbox in mailboxes.mailboxes">
              <td class="hand" ng-click="mailboxes.edit.show(mailbox)">
                {{ mailbox.name }}
              </td>
              <td class="hand" ng-click="mailboxes.edit.show(mailbox)">
                {{ mailbox.owner.display }}
              </td>
              <td class="hand" ng-click="mailboxes.edit.show(mailbox)">
                {{ mailbox.aliases }}
              </td>
              <td class="text-right no-wrap">
                <button class="btn btn-xs btn-default" ng-click="mailboxes.edit.show(mailbox)"><i class="fa fa-pencil"></i></button>
                <button class="btn btn-xs btn-danger" ng-click="mailboxes.remove.show(mailbox)"><i class="fa fa-trash"></i></button>
              </td>
            </tr>
            <tr>
              <td>
                <input type="text" class="form-control" ng-model="mailboxes.add.name" placeholder="New mailbox">
                <p ng-show="mailboxes.add.error" class="text-danger"><b>{{ mailboxes.add.error }}</b></p>
              </td>
              <td class="text-left elide-table-cell">
                <select class="form-control" ng-model="mailboxes.add.owner" ng-options="u.display for u in users track by u.id"></select>
              </td>
              <td>
                &nbsp;
              </td>
              <td class="text-right no-wrap">
                <button class="btn btn-primary" ng-disabled="!mailboxes.add.name || !mailboxes.add.owner || mailboxes.add.busy" ng-click="mailboxes.add.submit()"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailboxes.add.busy"></i> Add</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="text-left" ng-show="selectedDomain.mailConfig.enabled">
    <h3>Mailinglists</h3>
  </div>

  <div class="card card-large" style="margin-bottom: 15px;" ng-show="selectedDomain.mailConfig.enabled">
    <div class="row">
      <div class="col-md-12">
        Mailinglists will forward all emails to the assigned mailboxes.
      </div>
    </div>
    <br/>
    <table class="table table-hover">
      <thead>
        <tr>
          <th>Name</th>
          <th>Mailboxes</th>
          <th class="text-right" style="width: 100px;">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="list in mailinglists.mailinglists">
          <td style="vertical-align: middle;">
            {{ list.name }}
          </td>
          <td>
            <multiselect ng-model="list.members" options="name for name in mailinglists.availableMailboxNames" data-multiple="true"></multiselect>
          </td>
          <td class="text-right no-wrap">
            <button ng-show="list.members !== list.orig.members" class="btn btn-success" ng-disabled="list.busy" ng-click="mailinglists.submit(list)"><i class="fa" ng-class="{ 'fa-spin': list.busy, 'fa-circle-o-notch': list.busy, 'fa-check': !list.busy }"></i></button>
            <button class="btn btn-danger" ng-click="mailinglists.remove.show(list)"><i class="fa fa-trash"></i></button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="text" class="form-control" ng-model="mailinglists.add.name" placeholder="New Mailinglist">
            <p ng-show="mailinglists.add.error" class="text-danger"><b>{{ mailinglists.add.error }}</b></p>
          </td>
          <td>
            <multiselect ng-model="mailinglists.add.members" options="name for name in mailinglists.availableMailboxNames" data-multiple="true"></multiselect>
          </td>
          <td class="text-right no-wrap">
            <button class="btn btn-primary" ng-disabled="!mailinglists.add.name || !mailinglists.add.members.length || mailinglists.add.busy" ng-click="mailinglists.add.submit()"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailinglists.add.busy"></i> Add</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="text-left" ng-show="selectedDomain.mailConfig.enabled">
    <h3>Catch-all</h3>
  </div>

  <div class="card card-large" style="margin-bottom: 15px;" ng-show="selectedDomain.mailConfig.enabled">
    <div class="row">
      <div class="col-md-12">
        Emails sent to non existing addresses will be forwarded to the following accounts:
      </div>
    </div>
    <br/>
    <div class="row">
      <div class="col-md-6">
        <multiselect ng-model="catchall.addresses" options="address for address in catchall.availableAddresses" data-multiple="true"></multiselect>
        <button class="btn btn-outline btn-primary" ng-disabled="catchall.busy" ng-click="catchall.submit()"><i class="fa fa-circle-o-notch fa-spin" ng-show="catchall.busy"></i> Save</button>
      </div>
    </div>
  </div>

  <div class="text-left">
    <h3>Outbound Mail Relay</h3>
  </div>

  <div class="card card-large" style="margin-bottom: 15px;">
      <div class="row">
        <div class="col-md-12">
          Select the mail server through which Cloudron will send outbound mails:
        </div>
      </div>
      <br/>

      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <select class="form-control" style="width: 50%;" ng-model="mailRelay.preset" ng-options="a.name for a in mailRelayPresets track by a.provider" ng-change="mailRelay.presetChanged()"></select>
          </div>
        </div>
      </div>
      <div class="row" ng-show="mailRelay.preset.provider !== 'cloudron-smtp'">
        <div class="col-md-6">
          <div>
            <form name="mailRelayForm" role="form" ng-submit="mailRelay.submit()" autocomplete="off" novalidate>
              <div class="form-group" ng-class="{ 'has-error': (mailRelayForm.host.$dirty && mailRelayForm.host.$invalid) }">
                <label class="control-label">SMTP Host</label>
                <div class="control-label" ng-show="(!mailRelayForm.host.$dirty && mailRelay.error.host) || (mailRelayForm.host.$dirty && mailRelayForm.host.$invalid)">
                  <small ng-show="!mailRelayForm.host.$dirty && mailRelay.error.host">{{ mailRelay.error.host }}</small>
                </div>
                <input type="text" class="form-control" ng-model="mailRelay.relay.host" name="host" required>
              </div>
              <div class="form-group" ng-class="{ 'has-error': (mailRelayForm.port.$dirty && mailRelayForm.port.$invalid) }">
                <label class="control-label">SMTP Port (STARTTLS)</label>
                <div class="control-label" ng-show="(!mailRelayForm.port.$dirty && mailRelay.error.port) || (mailRelayForm.port.$dirty && mailRelayForm.port.$invalid)">
                  <small ng-show="!mailRelayForm.port.$dirty && mailRelay.error.port">{{ mailRelay.error.port }}</small>
                </div>
                <input type="number" class="form-control" ng-model="mailRelay.relay.port" name="port" required>
              </div>

              <!-- Postmark and Sendgrid -->
              <div ng-show="isProvider('postmark-smtp') || isProvider('sendgrid-smtp')" class="form-group" ng-class="{ 'has-error': (mailRelayForm.serverApiToken.$dirty && mailRelayForm.serverApiToken.$invalid) }">
                <label class="control-label">API Token/Key</label>
                <div class="control-label" ng-show="(!mailRelayForm.serverApiToken.$dirty && mailRelay.error.serverApiToken) || (mailRelayForm.serverApiToken.$dirty && mailRelayForm.serverApiToken.$invalid)">
                  <small ng-show="!mailRelayForm.serverApiToken.$dirty && mailRelay.error.serverApiToken">{{ mailRelay.error.serverApiToken }}</small>
                </div>
                <input type="text" class="form-control" ng-model="mailRelay.relay.serverApiToken" name="serverApiToken" ng-required="isProvider('postmark-smtp') || isProvider('sendgrid-smtp')">
              </div>

              <!-- Other -->
              <div ng-show="!isProvider('postmark-smtp') && !isProvider('sendgrid-smtp')" class="form-group" ng-class="{ 'has-error': (mailRelayForm.username.$dirty && mailRelayForm.username.$invalid) }">
                <label class="control-label">Username</label>
                <div class="control-label" ng-show="(!mailRelayForm.username.$dirty && mailRelay.error.username) || (mailRelayForm.username.$dirty && mailRelayForm.username.$invalid)">
                  <small ng-show="!mailRelayForm.username.$dirty && mailRelay.error.username">{{ mailRelay.error.username }}</small>
                </div>
                <input type="text" class="form-control" ng-model="mailRelay.relay.username" name="username" ng-required="!isProvider('postmark-smtp') && !isProvider('sendgrid-smtp')">
              </div>

              <div ng-show="!isProvider('postmark-smtp') && !isProvider('sendgrid-smtp')" class="form-group" ng-class="{ 'has-error': (mailRelayForm.password.$dirty && mailRelayForm.password.$invalid) }">
                <label class="control-label">Password</label>
                <div class="control-label" ng-show="(!mailRelayForm.password.$dirty && mailRelay.error.password) || (mailRelayForm.password.$dirty && mailRelayForm.password.$invalid)">
                  <small ng-show="!mailRelayForm.password.$dirty && mailRelay.error.password">{{ mailRelay.error.password }}</small>
                </div>
                <input type="password" class="form-control" ng-model="mailRelay.relay.password" name="password" ng-required="!isProvider('postmark-smtp') && !isProvider('sendgrid-smtp')">
              </div>

              <input class="ng-hide" type="submit" ng-disabled="mailRelayForm.$invalid"/>
            </form>
          </div>
        </div>
      </div>
    <div class="row">
      <div class="col-md-12">
        <button class="btn btn-primary" ng-click="mailRelay.submit()" ng-disabled="(mailRelay.preset.provider !== 'cloudron-smtp' && (!mailRelayForm.$dirty || mailRelayForm.$invalid)) || mailRelay.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailRelay.busy"></i> Save</button>

        <span class="has-error text-center" ng-show="mailRelay.error">{{ mailRelay.error }}</span>
        <span class="text-success text-center text-bold" ng-show="mailRelay.success">Saved</span>
      </div>
    </div>
  </div>

  <div class="text-left" ng-show="selectedDomain.provider !== 'caas' && selectedDomain.mailConfig.relay.provider === 'cloudron-smtp'">
    <h3>DNS Records</h3>
  </div>

  <div class="card card-large" style="margin-bottom: 15px;" ng-show="selectedDomain.provider !== 'caas' && selectedDomain.mailConfig.relay.provider === 'cloudron-smtp'">
    <div class="row">

      <div class="col-md-12">
        Set the following DNS records to guarantee email delivery:

        <br/><br/>

        <div ng-repeat="record in expectedDnsRecordsTypes">
          <div class="row" ng-if="expectedDnsRecords[record.value] && (selectedDomain.mailConfig.enabled || (record.name !== 'DMARC' && record.name !== 'MX'))">
            <div class="col-xs-12">
              <p class="text-muted">
                <i ng-hide="refreshBusy" ng-class="expectedDnsRecords[record.value].status ? 'fa fa-check-circle text-success' : 'fa fa-exclamation-triangle text-danger'"></i> &nbsp;
                <a href="" data-toggle="collapse" data-parent="#accordion" data-target="#collapse_dns_{{ record.value }}">{{ record.name }} record</a>
                <button class="btn btn-xs btn-default" ng-click="refreshStatus()" ng-disabled="refreshBusy" ng-show="!expectedDnsRecords[record.value].status"><i class="fa fa-refresh" ng-class="{ 'fa-pulse': refreshBusy }"></i></button>
              </p>
              <div id="collapse_dns_{{ record.value }}" class="panel-collapse collapse">
                <div class="panel-body">
                  <p>Domain: <b ng-click-select><tt>{{ expectedDnsRecords[record.value].domain }}</tt></b></p>
                  <p>Record type: <b ng-click-select><tt>{{ expectedDnsRecords[record.value].type }}</tt></b></p>
                  <p style="overflow: auto; white-space: nowrap;">Expected value: <b ng-click-select><tt>{{ expectedDnsRecords[record.value].expected }}</tt></b></p>
                  <p style="overflow: auto; white-space: nowrap;">Current value: <b ng-click-select><tt>{{ expectedDnsRecords[record.value].value ? expectedDnsRecords[record.value].value : '[not set]' }}</tt></b></p>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>

  <div class="text-left" ng-show="selectedDomain.provider !== 'caas'">
      <h3>SMTP Status</h3>
  </div>

  <div class="card card-large" style="margin-bottom: 15px;" ng-show="selectedDomain.provider !== 'caas'">
    <div class="row">
      <div class="col-md-12">

        <div class="row">
          <div class="col-xs-12">
            <p class="text-muted">
              <i ng-hide="refreshBusy" ng-class="selectedDomain.mailStatus.relay.status ? 'fa fa-check-circle text-success' : 'fa fa-exclamation-triangle text-danger'"></i> &nbsp;
              <a href="" data-toggle="collapse" data-parent="#accordion" data-target="#collapse_outbound_smtp">
                {{ selectedDomain.mailConfig.relay.provider === 'cloudron-smtp' ? 'Outbound SMTP (Direct)' : 'Outbound SMTP (Relay)' }}
              </a>
              <button class="btn btn-xs btn-default" ng-click="refreshStatus()" ng-disabled="refreshBusy" ng-show="!selectedDomain.mailStatus.relay.status"><i class="fa fa-refresh" ng-class="{ 'fa-pulse': refreshBusy }"></i></button>
            </p>
            <div id="collapse_outbound_smtp" class="panel-collapse collapse">
              <div class="panel-body">
                <p><b> {{ selectedDomain.mailStatus.relay.value }} </b> </p>
              </div>
            </div>
          </div>
        </div>

        <div class="row" ng-show="selectedDomain.mailConfig.relay.provider === 'cloudron-smtp'">
          <div class="col-xs-12">
            <p class="text-muted">
              <i ng-hide="refreshBusy" ng-class="selectedDomain.mailStatus.rbl.status ? 'fa fa-check-circle text-success' : 'fa fa-exclamation-triangle text-danger'"></i> &nbsp;
              <a href="" data-toggle="collapse" data-parent="#accordion" data-target="#collapse_rbl">
                  IP Address Blacklist Check
              </a>
              <button class="btn btn-xs btn-default" ng-click="refreshStatus()" ng-disabled="refreshBusy" ng-show="!selectedDomain.mailStatus.rbl.status"><i class="fa fa-refresh" ng-class="{ 'fa-pulse': refreshBusy }"></i></button>
            </p>
            <div id="collapse_rbl" class="panel-collapse collapse">
              <div class="panel-body">
                  <div>This server's IP {{ selectedDomain.mailStatus.rbl.ip }} is <b ng-hide="selectedDomain.mailStatus.rbl.servers.length">not</b> blacklisted.</div>
                  <div ng-repeat="server in selectedDomain.mailStatus.rbl.servers">
                    <a ng-href="{{server.site}}" target="_blank">{{ server.name }}</a>
                  </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12">
            <button class="btn btn-primary pull-left" ng-click="testEmail.show()">Send Test Email</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>