cloudron-box/src/views/emails.html

<!-- Modal change mail server domain -->
<div class="modal fade" id="mailLocationModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ 'emails.changeDomainDialog.title' | tr }}</h4>
      </div>
      <div class="modal-body">
        <div ng-bind-html=" 'emails.changeDomainDialog.description' | tr "></div>
        <br>

        <form name="mailLocationForm" role="form" novalidate ng-submit="mailLocation.submit()" autocomplete="off">
          <div class="form-group" ng-class="{ 'has-error': (mailLocationForm.subdomain.$dirty && mailLocationForm.subdomain.$invalid) || (!mailLocationForm.subdomain.$dirty && mailLocation.error)}">
            <label class="control-label">{{ 'emails.changeDomainDialog.location' | tr }}</label>

            <div class="has-error" ng-show="mailLocation.error">{{ mailLocation.error.message }}</div>

            <div class="input-group form-inline">
              <input type="text" class="form-control" ng-model="mailLocation.subdomain" id="mailLocationLocationInput" name="location" placeholder="{{ 'emails.changeDomainDialog.locationPlaceholder' | tr }}" autofocus>

              <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  <span>{{ (!mailLocation.subdomain ? '' : '.') + mailLocation.domain.domain }}</span>
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                  <li ng-repeat="domain in domains">
                    <a href="" ng-click="mailLocation.domain = domain">{{ domain.domain }}</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <p class="text-center text-warning text-bold" ng-show="mailLocation.domain.provider === 'manual'" ng-bind-html="'emails.changeDomainDialog.manualInfo' | tr:{ domain: mailLocation.domain.domain }"></p>

          <input class="ng-hide" type="submit" ng-disabled="mailLocationForm.$invalid"/>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
        <button type="button" class="btn btn-success" ng-click="mailLocation.submit()" ng-disabled="mailLocationForm.$invalid || mailLocation.busy"><i class="fa fa-circle-notch fa-spin" ng-show="mailLocation.busy"></i> {{ 'main.dialog.save' | tr }}</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal change max email size -->
<div class="modal fade" id="maxEmailSizeChangeModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ 'emails.changeMailSizeDialog.title' | tr }}</h4>
      </div>
      <div class="modal-body">
        <div ng-bind-html=" 'emails.changeMailSizeDialog.description' | tr "></div>
        <br>
        <form name="maxEmailSizeChangeForm" role="form" novalidate ng-submit="maxEmailSize.submit()" autocomplete="off">
          <div class="form-group">
            <label class="control-label">{{ 'emails.changeMailSizeDialog.size' | tr }} <b>{{ maxEmailSize.size | prettyDiskSize }}</b></label>
            <slider ng-model="maxEmailSize.size" tooltip="hide" min="1048576" max="1073741824" step="1048576"></slider>
          </div>
          <input class="ng-hide" type="submit"/>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
        <button type="button" class="btn btn-success" ng-click="maxEmailSize.submit()" ng-disabled="maxEmailSize.size === maxEmailSize.currentSize"><i class="fa fa-circle-notch fa-spin" ng-show="maxEmailSize.busy"></i> {{ 'main.dialog.save' | tr }}</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal solr config -->
<div class="modal fade" id="solrConfigModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ 'emails.solrConfig.title' | tr }}</h4>
      </div>
      <div class="modal-body">
        <p ng-bind-html=" 'emails.solrConfig.description' | tr "></p>

        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="solrConfig.enabled">{{ 'emails.solrConfig.enableSolrCheckbox' | tr }}</input>
          </label>
        </div>

        <!-- only show this when user is trying to enable -->
        <p class="has-error" ng-show="!solrConfig.currentConfig.enabled && !solrConfig.enoughMemory">{{ 'emails.solrConfig.notEnoughMemory' | tr }}</p>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
        <button type="button" class="btn btn-success" ng-click="solrConfig.submit()" ng-disabled="(!solrConfig.currentConfig.enabled && !solrConfig.enoughMemory) || solrConfig.enabled === solrConfig.currentConfig.enabled || solrConfig.busy"><i class="fa fa-circle-notch fa-spin" ng-show="solrConfig.busy"></i> {{ 'main.dialog.save' | tr }}</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal change spam config -->
<div class="modal fade" id="spamConfigChangeModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ 'emails.spamFilterDialog.title' | tr }}</h4>
      </div>
      <div class="modal-body">
        <form name="spamConfigChangeForm" role="form" novalidate ng-submit="spamConfig.submit()" autocomplete="off">
          <div class="form-group">
            <label class="control-label">{{ 'emails.spamFilterDialog.blacklisteAddresses' | tr }}</label>
            <p class="small">{{ 'emails.spamFilterDialog.blacklisteAddressesInfo' | tr }}</p>
            <div class="has-error" ng-show="spamConfig.error.blacklist">{{ spamConfig.error.blacklist }}</div>
            <textarea ng-model="spamConfig.blacklist" placeholder="{{ 'emails.spamFilterDialog.blacklisteAddressesPlaceholder' | tr }}" name="blacklist" class="form-control" ng-class="{ 'has-error': !spamConfigChangeForm.blacklist.$dirty && spamConfig.error.blacklist }" rows="4"></textarea>
          </div>
          <div class="form-group">
            <label class="control-label">{{ 'emails.spamFilterDialog.customRules' | tr }} <sup><a ng-href="https://docs.cloudron.io/email/#custom-spam-filtering-rules" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
            <div class="has-error" ng-show="spamConfig.error.config">{{ spamConfig.error.config }}</div>
            <textarea ng-model="spamConfig.config" placeholder="{{ 'emails.spamFilterDialog.customRulesPlaceholder' | tr }}" class="form-control"  name="config" ng-class="{ 'has-error': !spamConfigChangeForm.config.$dirty && spamConfig.error.config }" rows="4"></textarea>
          </div>
          <input class="ng-hide" type="submit"/>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
        <button type="button" class="btn btn-success" ng-click="spamConfig.submit()"><i class="fa fa-circle-notch fa-spin" ng-show="spamConfig.busy"></i> {{ 'main.dialog.save' | tr }}</button>
      </div>
    </div>
  </div>
</div>

<!-- 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">{{ 'emails.testMailDialog.title' | tr:{ domain: testEmail.domain.domain } }}</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 ng-bind-html="'emails.testMailDialog.description' | tr:{ domain: testEmail.domain.domain }"></p>
            <br/>
            <div class="form-group" ng-class="{ 'has-error': testEmail.error.key }">
              <label class="control-label" for="inputTestEmailKey">{{ 'emails.testMailDialog.mailTo' | tr }}</label>
              <input type="text" class="form-control" ng-model="testEmail.mailTo" id="inputTestMailTo" name="mailTo" ng-disabled="testEmail.busy" placeholder="{{ 'emails.testMailDialog.mailToPlaceholder' | tr }}" 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">{{ 'main.dialog.cancel' | tr }}</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> {{ 'emails.testMailDialog.sendAction' | tr }}</button>
      </div>
    </div>
  </div>
</div>

<div class="content content-large">
  <div class="text-left">
    <h1>{{ 'emails.title' | tr }}</h1>
  </div>

  <div class="text-left">
    <h3>{{ 'emails.domains.title' | tr }}</h3>
  </div>

  <div class="card card-large" 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: 30%">{{ 'emails.domains.domain' | tr }}</th>
              <th style="width: 60%">{{ 'emails.domains.config' | tr }}</th>
              <th style="width: 10%">{{ 'main.actions' | tr }}</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="elide-table-cell no-padding">
                <a href="/#/email/{{ domain.domain }}" class="email-domain-list-item">
                  <span ng-show="domain.inbound && domain.outbound">{{ 'emails.domains.stats' | tr:{ mailboxCount: domain.mailboxCount, usage: (domain.usage | prettyByteSize) } }}</span>
                  <span ng-show="!domain.inbound && domain.outbound">{{ 'emails.domains.outbound' | tr }}</span>
                  <span ng-show="!domain.inbound && !domain.outbound">{{ 'emails.domains.disabled' | tr }}</span>
                </a>
              </td>
              <td class="text-right no-wrap">
                <button class="btn btn-xs btn-default" ng-click="testEmail.show(domain)" uib-tooltip="{{ 'emails.domains.testEmailTooltip' | tr }}"><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" ng-show="user.role === 'owner'">
    <h3>{{ 'emails.settings.title' | tr }}</h3>
  </div>

  <div class="card card-large" style="margin-bottom: 15px;">
    <p ng-bind-html=" 'emails.settings.info' | tr "></p>

    <div class="row">
      <div class="col-xs-6">
        <span class="text-muted">{{ 'emails.settings.location' | tr }}</span>
      </div>
      <div class="col-xs-6 text-right">
        <span>{{ mailLocation.currentLocation.subdomain + (!mailLocation.currentLocation.subdomain ? '' : '.') + mailLocation.currentLocation.domain.domain }}
          <a ng-hide="mailLocation.busy" href="" ng-click="mailLocation.show()"><i class="fa fa-edit text-small"></i></a> <!-- ng-disabled does not work for links -->
        </span>
      </div>
      <div class="col-xs-6">
        <span class="text-muted">{{ 'emails.settings.maxMailSize' | tr }}</span>
      </div>
      <div class="col-xs-6 text-right">
        <span>{{ maxEmailSize.currentSize | prettyDiskSize }} <a href="" ng-click="maxEmailSize.show()"><i class="fa fa-edit text-small"></i></a></span>
      </div>
      <div class="col-xs-6">
        <span class="text-muted">{{ 'emails.settings.spamFilter' | tr }}</span>
      </div>
      <div class="col-xs-6 text-right">
        <span>{{ 'emails.settings.spamFilterOverview' | tr:{ blacklistCount: spamConfig.acl.blacklist.length } }} <a href="" ng-click="spamConfig.show()"><i class="fa fa-edit text-small"></i></a></span>
      </div>
      <div class="col-xs-6">
        <span class="text-muted">{{ 'emails.settings.solrFts' | tr }}</span>
      </div>
      <div class="col-xs-6 text-right" ng-show="solrConfig.currentConfig">
        <span ng-show="solrConfig.currentConfig.enabled">
          {{ 'emails.settings.solrEnabled' | tr }}
          <span ng-show="solrConfig.running">/ {{ 'emails.settings.solrRunning' | tr }}</span>
          <span ng-hide="solrConfig.running">/ {{ 'emails.settings.solrNotRunning' | tr }}</span>
        </span>
        <span ng-hide="solrConfig.currentConfig.enabled">{{ 'emails.settings.solrDisabled' | tr }}</span>
        <a href="" ng-click="solrConfig.show()"><i class="fa fa-edit text-small"></i></a>
      </div>
    </div>

    <div class="row" ng-show="mailLocation.busy">
      <div class="col-md-12" style="margin-top: 10px;">
        {{ 'emails.settings.changeDomainProgress' | tr }}
        <div class="progress progress-striped active animateMe">
          <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ mailLocation.percent }}%"></div>
        </div>
        <p>{{ mailLocation.message }}</p>
      </div>
    </div>
  </div>

  <br/>

  <div class="text-left" ng-show="user.role === 'owner'">
    <h3>{{ 'emails.eventlog.title' | tr }}</h3>
  </div>

  <div class="row" ng-show="user.role === 'owner'">
    <div class="col-md-12">
      <div class="maillog-filter">
        <input class="form-control" style="width: 200px;" placeholder="{{ 'emails.eventlog.searchPlaceholder' | tr }}" type="text" ng-model="activity.search" ng-model-options="{ debounce: 1000 }" ng-change="activity.updateFilter()" />
        <multiselect ng-model="activity.selectedTypes" ms-header="{{ 'emails.typeFilterHeader' | tr }}" options="a.name for a in activityTypes" data-multiple="true"  ng-change="activity.updateFilter(true)" filter-after-rows="5" scroll-after-rows="10"></multiselect>
        <select class="form-control" ng-model="activity.pageItems" ng-options="a.name for a in pageItemCount" ng-change="activity.updateFilter(true)"></select>
      </div>
      <div class="pull-right">
        <button class="btn btn-default btn-outline" ng-click="activity.refresh()"><i class="fas fa-sync-alt" ng-class="{ 'fa-spin': busyRefresh }"></i></button>
        <button class="btn btn-default btn-outline" ng-click="activity.showPrevPage()" ng-disabled="activity.busy || activity.currentPage <= 1"><i class="fa fa-angle-double-left"></i> {{ 'main.pagination.prev' | tr }}</button>
        <button class="btn btn-default btn-outline" ng-click="activity.showNextPage()" ng-disabled="activity.busy || activity.perPage > activity.eventLogs.length">{{ 'main.pagination.next' | tr }} <i class="fa fa-angle-double-right"></i></button>
      </div>
    </div>
  </div>

  <div class="card card-large" style="margin-top: 10px; margin-bottom: 15px;" ng-show="user.role === 'owner'">
    <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%"><!-- Icon --></th>
              <th style="width: 20%">{{ 'emails.eventlog.time' | tr }}</th>
              <th style="width: 75%">{{ 'emails.eventlog.details' | tr }}</th>
            </tr>
          </thead>
          <tbody ng-show="activity.busy">
            <tr>
              <td colspan="4" class="text-center">
                <i class="fa fa-circle-notch fa-spin"></i>
              </td>
            </tr>
          </tbody>
          <tbody ng-hide="activity.eventLogs.length || activity.busy">
            <tr>
              <td colspan="4" class="text-center">
                <br>
                <br>
                {{ 'emails.eventlog.empty' | tr }}
                <br>
                <br>
              </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-arrow-circle-left" ng-show="eventlog.type === 'delivered'" uib-tooltip="{{ 'emails.eventlog.type.outgoing' | tr }}"></i>
                <i class="fas fa-history" ng-show="eventlog.type === 'deferred'" uib-tooltip="{{ 'emails.eventlog.type.deferred' | tr }}"></i>
                <i class="fas fa-arrow-circle-right" ng-show="eventlog.type === 'received'" uib-tooltip="{{ 'emails.eventlog.type.incoming' | tr }}"></i>
                <i class="fas fa-align-justify" ng-show="eventlog.type === 'queued'" uib-tooltip="{{ 'emails.eventlog.type.queued' | tr }}"></i>
                <i class="fas fa-minus-circle" ng-show="eventlog.type === 'denied'" uib-tooltip="{{ 'emails.eventlog.type.denied' | tr }}"></i>
                <i class="fas fa-hand-paper" ng-show="eventlog.type === 'bounce'" uib-tooltip="{{ 'emails.eventlog.type.bounce' | tr }}"></i>
                <i class="fas fa-filter" ng-show="eventlog.type === 'spam-learn'" uib-tooltip="{{ 'emails.eventlog.type.spamFilterTrained' | tr }}"></i>
              </td>
              <td class="no-wrap"><span uib-tooltip="{{ eventlog.ts | prettyLongDate }}" class="arrow">{{ eventlog.ts | prettyDate }}</span></td>
              <td>
                <span ng-show="eventlog.type === 'bounce'">{{ 'emails.eventlog.type.bounceInfo' | tr:eventlog }}</span>
                <span ng-show="eventlog.type === 'deferred'">{{ 'emails.eventlog.type.deferredInfo' | tr:eventlog }}</span>
                <span ng-show="eventlog.type === 'queued'">
                  <span ng-show="eventlog.direction === 'inbound'">{{ 'emails.eventlog.type.inboundInfo' | tr:eventlog }}</span>
                  <span ng-show="eventlog.direction === 'outbound'">{{ 'emails.eventlog.type.outboundInfo' | tr:eventlog }}</span>
                </span>
                <span ng-show="eventlog.type === 'received'">{{ 'emails.eventlog.type.receivedInfo' | tr:eventlog }}</span>
                <span ng-show="eventlog.type === 'delivered'">{{ 'emails.eventlog.type.deliveredInfo' | tr:eventlog }}</span>
                <span ng-show="eventlog.type === 'denied'">{{ 'emails.eventlog.type.deniedInfo' | tr:eventlog }}</span>
                <span ng-show="eventlog.type === 'spam-learn'">{{ 'emails.eventlog.type.spamFilterTrainedInfo' | tr:eventlog }}</span>
              </td>
            </tr>
            <tr ng-show="activity.activeEventLog === eventlog">
              <td colspan="6">
                <pre class="eventlog-details">{{ eventlog | json }}</pre>
              </td>
            </tr>
          </tbody>
        </table>

        <br/>

        <a class="btn btn-primary pull-right" href="/logs.html?id=mail" target="_blank">{{ 'emails.eventlog.showRawLogsAction' | tr }}</a>
      </div>
    </div>
  </div>

</div>