cloudron-box/dashboard/public/views/domains.html

<!-- Modal subscription -->
<div class="modal fade" id="subscriptionRequiredModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ 'domains.subscriptionRequired.title' | tr }}</h4>
      </div>
      <div class="modal-body">
        <p ng-bind-html="'domains.subscriptionRequired.description' | 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="openSubscriptionSetup()">{{ 'domains.subscriptionRequired.setupAction' | tr }}</button>
      </div>
    </div>
  </div>
</div>

<!-- modal domain add/configure -->
<div class="modal fade" id="domainConfigureModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" ng-show="domainConfigure.adding">{{ 'domains.domainDialog.addTitle' | tr }}</h4>
        <h4 class="modal-title" ng-hide="domainConfigure.adding">{{ 'domains.domainDialog.editTitle' | tr:{ domain: domainConfigure.domain.domain } }}</h4>
      </div>
      <div class="modal-body">
        <p ng-show="domainConfigure.adding" ng-bind-html="'domains.domainDialog.addDescription' | tr"></p>

        <form name="domainConfigureForm" role="form" novalidate ng-submit="domainConfigure.submit()" autocomplete="off">
          <p class="has-error text-center" ng-show="domainConfigure.error">{{ domainConfigure.error }}</p>

          <div class="form-group" ng-show="domainConfigure.adding">
            <label class="control-label">{{ 'domains.domainDialog.domain' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.newDomain" name="newDomain" ng-disabled="domainConfigure.busy" placeholder="example.com" ng-required="domainConfigure.adding" autofocus>
          </div>

          <div class="form-group">
            <label class="control-label">{{ 'domains.domainDialog.provider' | tr }} <sup><a ng-href="https://docs.cloudron.io/domains/#dns-providers" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
            <select class="form-control" ng-model="domainConfigure.provider" ng-options="a.value as a.name for a in dnsProvider" ng-change="domainConfigure.setDefaultTlsProvider()"></select>
          </div>

          <!-- Route53 -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'route53'">
            <label class="control-label">{{ 'domains.domainDialog.route53AccessKeyId' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.accessKeyId" name="accessKeyId" ng-disabled="domainConfigure.busy" ng-minlength="16" ng-maxlength="32" ng-required="domainConfigure.provider === 'route53'">
          </div>
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'route53'">
            <label class="control-label">{{ 'domains.domainDialog.route53SecretAccessKey' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.secretAccessKey" name="secretAccessKey" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'route53'">
          </div>

          <!-- Google Cloud DNS -->
          <FormGroup v-if="domainConfigure.provider === 'gcdns'">
            <label for="gcdnsKeyFileInput">{{ 'domains.domainDialog.gcdnsServiceAccountKey' | tr }}</label>
            <!-- TODO replace with a pankow input group -->
            <div class="input-group">
              <input type="file" id="gcdnsKeyFileInput" style="display:none"/>
              <input type="text" class="form-control" placeholder="Service Account Key" v-model="gcdnsKeyFileName" id="gcdnsKeyInput" onclick="getElementById('gcdnsKeyFileInput').click();" style="cursor: pointer;" required>
              <span class="input-group-addon">
                <i class="fa fa-upload" onclick="getElementById('gcdnsKeyFileInput').click();"></i>
              </span>
            </div>
          </FormGroup>

          <!-- DigitalOcean -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'digitalocean'">
            <label class="control-label">{{ 'domains.domainDialog.digitalOceanToken' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.digitalOceanToken" name="digitalOceanToken" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'digitalocean'">
          </div>

          <!-- Gandi -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'gandi'">
            <label class="control-label">{{ 'domains.domainDialog.gandiTokenType' | tr }}</label>
            <select class="form-control" ng-model="domainConfigure.gandiTokenType">
              <option value="ApiKey">{{ 'domains.domainDialog.gandiTokenTypeApiKey' | tr }}</option>
              <option value="PAT">{{ 'domains.domainDialog.gandiTokenTypePAT' | tr }}</option>
            </select>
          </div>

          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'gandi'">
            <label class="control-label">{{ 'domains.domainDialog.gandiApiKey' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.gandiApiKey" name="gandiApiKey" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'gandi'">
          </div>

          <!-- GoDaddy -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'godaddy'">
            <label class="control-label">{{ 'domains.domainDialog.goDaddyApiKey' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.godaddyApiKey" name="apiKey" ng-disabled="domainConfigure.busy" ng-minlength="1" ng-required="domainConfigure.provider === 'godaddy'">
          </div>
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'godaddy'">
            <label class="control-label">{{ 'domains.domainDialog.goDaddyApiSecret' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.godaddyApiSecret" name="apiSecret" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'godaddy'">
          </div>

          <!-- Netcup -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'netcup'">
            <label class="control-label">{{ 'domains.domainDialog.netcupCustomerNumber' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.netcupCustomerNumber" name="netcupCustomerNumber" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'netcup'">
          </div>
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'netcup'">
            <label class="control-label">{{ 'domains.domainDialog.netcupApiKey' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.netcupApiKey" name="netcupApiKey" ng-disabled="domainConfigure.busy" ng-minlength="1" ng-required="domainConfigure.provider === 'netcup'">
          </div>
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'netcup'">
            <label class="control-label">{{ 'domains.domainDialog.netcupApiPassword' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.netcupApiPassword" name="netcupApiPassword" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'netcup'">
          </div>

          <!-- OVH -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'ovh'">
            <label class="control-label" for="inputConfigureOvhEndpoint">{{ 'domains.domainDialog.ovhEndpoint' | tr }}</label>
            <select class="form-control" name="endpoint" id="inputConfigureOvhEndpoint" ng-model="domainConfigure.ovhEndpoint" ng-options="a.value as a.name for a in ovhEndpoints" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'ovh'"></select>
          </div>

          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'ovh'">
            <label class="control-label">{{ 'domains.domainDialog.ovhConsumerKey' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.ovhConsumerKey" name="ovhConsumerKey" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'ovh'">
          </div>
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'ovh'">
            <label class="control-label">{{ 'domains.domainDialog.ovhAppKey' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.ovhAppKey" name="ovhAppKey" ng-disabled="domainConfigure.busy" ng-minlength="1" ng-required="domainConfigure.provider === 'ovh'">
          </div>
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'ovh'">
            <label class="control-label">{{ 'domains.domainDialog.ovhAppSecret' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.ovhAppSecret" name="ovhAppSecret" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'ovh'">
          </div>

          <!-- Porkbun -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'porkbun'">
            <label class="control-label">{{ 'domains.domainDialog.porkbunApikey' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.porkbunApikey" name="porkbunApikey" ng-disabled="domainConfigure.busy" ng-minlength="1" ng-required="domainConfigure.provider === 'porkbun'">
          </div>
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'porkbun'">
            <label class="control-label">{{ 'domains.domainDialog.porkbunSecretapikey' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.porkbunSecretapikey" name="porkbunSecretapikey" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'porkbun'">
          </div>

          <!-- Cloudflare -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'cloudflare'">
            <label class="control-label">{{ 'domains.domainDialog.cloudflareTokenType' | tr }}</label>
            <select class="form-control" ng-model="domainConfigure.cloudflareTokenType">
              <option value="GlobalApiKey">{{ 'domains.domainDialog.cloudflareTokenTypeGlobalApiKey' | tr }}</option>
              <option value="ApiToken">{{ 'domains.domainDialog.cloudflareTokenTypeApiToken' | tr }}</option>
            </select>
          </div>

          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'cloudflare'">
            <label class="control-label" ng-show="domainConfigure.cloudflareTokenType === 'GlobalApiKey'">{{ 'domains.domainDialog.cloudflareTokenTypeGlobalApiKey' | tr }}</label>
            <label class="control-label" ng-show="domainConfigure.cloudflareTokenType === 'ApiToken'">{{ 'domains.domainDialog.cloudflareTokenTypeApiToken' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.cloudflareToken" name="cloudflareToken" ng-required="domainConfigure.provider === 'cloudflare'" ng-disabled="domainConfigure.busy">
          </div>
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'cloudflare' && domainConfigure.cloudflareTokenType === 'GlobalApiKey'">
            <label class="control-label">{{ 'domains.domainDialog.cloudflareEmail' | tr }}</label>
            <input type="email" class="form-control" ng-model="domainConfigure.cloudflareEmail" name="cloudflareEmail" ng-required="domainConfigure.provider === 'cloudflare' && domainConfigure.cloudflareTokenType === 'GlobalApiKey'" ng-disabled="domainConfigure.busy">
          </div>

          <div class="checkbox" ng-show="domainConfigure.provider === 'cloudflare'">
            <label>
              <input type="checkbox" ng-model="domainConfigure.cloudflareDefaultProxyStatus"> {{ 'domains.domainDialog.cloudflareDefaultProxyStatus' | tr }}
              <sup><a ng-href="https://docs.cloudron.io/domains/#cloudflare-dns" class="help" target="_blank" tabIndex="-1"><i class="fa fa-question-circle"></i></a></sup>
            </label>
          </div>

          <!-- Linode -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'linode'">
            <label class="control-label">{{ 'domains.domainDialog.linodeToken' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.linodeToken" name="linodeToken" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'linode'">
          </div>

          <!-- Bunny -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'bunny'">
            <label class="control-label">{{ 'domains.domainDialog.bunnyAccessKey' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.bunnyAccessKey" name="bunnyAccessKey" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'bunny'">
          </div>

          <!-- dnsimple -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'dnsimple'">
            <label class="control-label">{{ 'domains.domainDialog.dnsimpleAccessToken' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.dnsimpleAccessToken" name="dnsimpleAccessToken" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'dnsimple'">
          </div>

          <!-- Hetzner -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'hetzner'">
            <label class="control-label">{{ 'domains.domainDialog.hetznerToken' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.hetznerToken" name="hetznerToken" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'hetzner'">
          </div>

          <!-- Vultr -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'vultr'">
            <label class="control-label">{{ 'domains.domainDialog.vultrToken' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.vultrToken" name="vultrToken" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'vultr'">
          </div>

          <!-- deSEC -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'desec'">
            <label class="control-label">{{ 'domains.domainDialog.deSecToken' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.deSecToken" name="deSecToken" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'desec'">
          </div>

          <!-- Name.com -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'namecom'">
            <label class="control-label">{{ 'domains.domainDialog.nameComUsername' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.nameComUsername" name="nameComUsername" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'namecom'">
          </div>
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'namecom'">
            <label class="control-label">{{ 'domains.domainDialog.nameComApiToken' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.nameComToken" name="nameComToken" ng-disabled="domainConfigure.busy" ng-minlength="1" ng-required="domainConfigure.provider === 'namecom'">
          </div>

          <!-- Namecheap -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'namecheap'">
            <label class="control-label">{{ 'domains.domainDialog.namecheapUsername' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.namecheapUsername" name="namecheapUsername" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'namecheap'">
          </div>
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'namecheap'">
            <label class="control-label">{{ 'domains.domainDialog.namecheapApiKey' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.namecheapApiKey" name="namecheapApiKey" ng-disabled="domainConfigure.busy" ng-minlength="1" ng-required="domainConfigure.provider === 'namecheap'">
          </div>

          <p class="small text-info text-bold" ng-show="domainConfigure.provider === 'namecheap'" ng-bind-html="'domains.domainDialog.namecheapInfo' | tr"></p>

          <!-- INWX -->
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'inwx'">
            <label class="control-label">{{ 'domains.domainDialog.inwxUsername' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.inwxUsername" name="inwxUsername" ng-disabled="domainConfigure.busy" ng-required="domainConfigure.provider === 'inwx'">
          </div>
          <div class="form-group" ng-class="{ 'has-error': false }" ng-show="domainConfigure.provider === 'inwx'">
            <label class="control-label">{{ 'domains.domainDialog.inwxPassword' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainConfigure.inwxPassword" name="inwxPassword" ng-disabled="domainConfigure.busy" ng-minlength="1" ng-required="domainConfigure.provider === 'inwx'">
          </div>

          <p class="small text-info text-bold" ng-show="domainConfigure.provider === 'wildcard'" ng-bind-html="'domains.domainDialog.wildcardInfo' | tr:{ domain: domainConfigure.adding ? domainConfigure.newDomain : domainConfigure.domain.domain }"></p>
          <p class="small text-info text-bold" ng-show="domainConfigure.provider === 'manual'" ng-bind-html="'domains.domainDialog.manualInfo' | tr"></p>
          <p class="small text-info text-bold" ng-show="needsPort80(domainConfigure.provider, domainConfigure.tlsConfig.provider)" ng-bind-html="'domains.domainDialog.letsEncryptInfo' | tr"></p>

          <a href="" ng-click="domainConfigure.advancedVisible = true" ng-hide="domainConfigure.advancedVisible">{{ 'domains.domainDialog.advancedAction' | tr }}</a>
          <div  uib-collapse="!domainConfigure.advancedVisible">
            <div class="form-group">
              <label class="control-label">{{ 'domains.domainDialog.zoneName' | tr }} <sup><a ng-href="https://docs.cloudron.io/domains/#zone-name" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
              <input type="text" class="form-control" ng-model="domainConfigure.zoneName" name="zoneName" ng-disabled="domainConfigure.busy">
            </div>

            <div class="form-group">
              <label class="control-label">{{ 'domains.domainDialog.certProvider' | tr }} <sup><a ng-href="https://docs.cloudron.io/certificates/#certificate-providers" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
              <select class="form-control" ng-model="domainConfigure.tlsConfig.provider" ng-options="a.value as a.name for a in tlsProvider"></select>
            </div>

            <!-- Fallback certificate -->
            <div ng-show="domainConfigure.tlsConfig.provider !== 'fallback'">
              <label class="control-label">{{ 'domains.domainDialog.fallbackCert' | tr }}</label>
              <p ng-bind-html="'domains.domainDialog.fallbackCertInfo' | tr"></p>
            </div>

            <div ng-show="domainConfigure.tlsConfig.provider === 'fallback'">
              <label class="control-label">{{ 'domains.domainDialog.fallbackCertCustomCert' | tr }}</label>
              <p ng-bind-html="'domains.domainDialog.fallbackCertCustomCertInfo' | tr:{ customCertLink: 'https://docs.cloudron.io/certificates/#custom-certificates' }"></p>
            </div>

            <div class="form-group" ng-class="{ 'has-error': (!fallbackCert.cert.$dirty && fallbackCert.error) }">
              <div class="input-group">
                <input type="file" id="fallbackCertFileInput" style="display:none"/>
                <input type="text" class="form-control" placeholder="{{ 'domains.domainDialog.fallbackCertCertificatePlaceholder' | tr }}" ng-model="domainConfigure.fallbackCert.certificateFileName" name="cert" onclick="getElementById('fallbackCertFileInput').click();" style="cursor: pointer;" ng-disabled="domainConfigure.busy">
                <span class="input-group-addon"><i class="fa fa-upload" onclick="getElementById('fallbackCertFileInput').click();"></i></span>
              </div>
            </div>
            <div class="form-group" ng-class="{ 'has-error': (!fallbackCert.key.$dirty && fallbackCert.error) }">
              <div class="input-group">
                <input type="file" id="fallbackKeyFileInput" style="display:none"/>
                <input type="text" class="form-control" placeholder="{{ 'domains.domainDialog.fallbackCertKeyPlaceholder' | tr }}" ng-model="domainConfigure.fallbackCert.keyFileName" id="fallbackKeyInput" name="key" onclick="getElementById('fallbackKeyFileInput').click();" style="cursor: pointer;" ng-disabled="domainConfigure.busy">
                <span class="input-group-addon"><i class="fa fa-upload" onclick="getElementById('fallbackKeyFileInput').click();"></i></span>
              </div>
            </div>

          </div> <!-- advanced -->

          <input class="ng-hide" type="submit" ng-disabled="domainConfigureForm.$invalid || domainConfigure.busy"/>
        </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="domainConfigure.submit()" ng-disabled="domainConfigureForm.$invalid || domainConfigure.busy"><i class="fa fa-circle-notch fa-spin" ng-show="domainConfigure.busy"></i> {{ 'main.dialog.save' | tr }}</button>
      </div>
    </div>
  </div>
</div>

<!-- modal domain wellknown -->
<div class="modal fade" id="domainWellKnownModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ 'domains.domainWellKnown.title' | tr:{ domain: domainWellKnown.domain.domain } }}</h4>
      </div>
      <div class="modal-body">
        <p ng-bind-html="'domains.domainDialog.wellKnownDescription' | tr:{ domain: domainWellKnown.domain.domain, docsLink: 'https://docs.cloudron.io/domains/#well-known-locations' }"></p>

        <form name="domainWellKnownForm" role="form" novalidate ng-submit="domainWellKnown.submit()" autocomplete="off">
          <p class="has-error text-center" ng-show="domainWellKnown.error">{{ domainWellKnown.error }}</p>

          <div class="form-group">
            <label class="control-label">{{ 'domains.domainDialog.matrixHostname' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainWellKnown.matrixHostname" name="matrixHostname" ng-disabled="domainWellKnown.busy">
          </div>

          <div class="form-group">
            <label class="control-label">{{ 'domains.domainDialog.mastodonHostname' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainWellKnown.mastodonHostname" name="mastodonHostname" ng-disabled="domainWellKnown.busy">
          </div>

          <div class="form-group">
            <label class="control-label">{{ 'domains.domainDialog.jitsiHostname' | tr }}</label>
            <input type="text" class="form-control" ng-model="domainWellKnown.jitsiHostname" name="jitsiHostname" ng-disabled="domainWellKnown.busy">
          </div>

          <input class="ng-hide" type="submit" ng-disabled="domainWellKnownForm.$invalid || domainWellKnown.busy"/>
        </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="domainWellKnown.submit()" ng-disabled="domainWellKnownForm.$invalid || domainWellKnown.busy"><i class="fa fa-circle-notch fa-spin" ng-show="domainWellKnown.busy"></i> {{ 'main.dialog.save' | tr }}</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal domain remove -->
<div class="modal fade" id="domainRemoveModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ 'domains.removeDialog.title' | tr:{ domain: domainRemove.domain.domain } }}</h4>
      </div>
      <div class="modal-body">
        <p ng-bind-html="'domains.removeDialog.description' | tr:{ domain: domainRemove.domain.domain }"></p>
        <br/>
        <span class="has-error" ng-show="domainRemove.error">{{ domainRemove.error }}</span>
      </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-danger" ng-click="domainRemove.submit()" ng-disabled="domainRemove.busy"><i class="fa fa-circle-notch fa-spin" ng-show="domainRemove.busy"></i> {{ 'domains.removeDialog.removeAction' | tr }}</button>
      </div>
    </div>
  </div>
</div>

<div class="content">
  <h1 class="section-header">
    {{ 'domains.title' | tr }}
    <button class="btn btn-primary btn-outline" ng-show="domains.length <= pageSize" ng-click="domainAdd.show()"><i class="fa fa-plus"></i> {{ 'domains.addDomain' | tr }}</button>
  </h1>

  <div class="users-toolbar" ng-show="domains.length > pageSize">
    <input type="text" id="domainSearchInput" class="form-control" style="max-width: 350px;" ng-model="domainSearchString" placeholder="{{ 'main.searchPlaceholder' | tr }}"/>
    <div style="flex-grow: 1;"></div>
    <button class="btn btn-primary btn-outline pull-right" ng-click="domainAdd.show()"><i class="fa fa-plus"></i> {{ 'domains.addDomain' | tr }}</button>
  </div>
  <div class="card card-large">
    <div class="row ng-hide" ng-show="!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-lg-12">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>{{ 'domains.domain' | tr }}</th>
              <th class="text-left hidden-xs hidden-sm">{{ 'domains.provider' | tr }}</th>
              <th style="width: 100px" class="text-right">{{ 'main.actions' | tr }}</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="domain in domains | filter:domainSearchString | limitTo:pageSize:((currentPage-1)*pageSize)">
              <td class="elide-table-cell hand" ng-click="domainConfigure.show(domain)">
                {{ domain.domain }}
              </td>
              <td class="text-left elide-table-cell hidden-xs hidden-sm hand" ng-click="domainConfigure.show(domain)">
                {{ prettyProviderName(domain) }}
              </td>
              <td class="text-right no-wrap" style="vertical-align: bottom">
                <button class="btn btn-xs btn-default" ng-click="domainWellKnown.show(domain)" uib-tooltip="{{ 'domains.tooltipWellKnown' | tr }}"><i class="fa fa-atlas"></i></button>
                <button class="btn btn-xs btn-default" ng-click="domainConfigure.show(domain)" uib-tooltip="{{ 'domains.tooltipEdit' | tr }}"><i class="fa fa-pencil-alt"></i></button>
                <button class="btn btn-xs btn-danger" ng-click="domainRemove.show(domain)" uib-tooltip="{{ 'domains.tooltipRemove' | tr }}" ng-disabled="domain.domain === config.adminDomain"><i class="far fa-trash-alt"></i></button>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="pull-left">
          {{ 'domains.count' | tr:{ count: (domains | filter:domainSearchString).length } }}
        </div>
        <div class="pull-right" ng-show="domains.length > pageSize">
          <button class="btn btn-default btn-outline btn-xs" ng-click="showPrevPage()" ng-class="{ 'btn-primary': currentPage > 1 }" ng-disabled="currentPage <= 1"><i class="fa fa-angle-double-left"></i> {{ 'main.pagination.prev' | tr }}</button>
          <span style="margin: 0 5px; line-height: 1.5; font-size: 12px;">{{ currentPage }}</span>
          <button class="btn btn-default btn-outline btn-xs" ng-click="showNextPage()" ng-class="{ 'btn-primary': (domains | filter:domainSearchString).length > (currentPage * pageSize) }" ng-disabled="(domains | filter:domainSearchString).length <= (currentPage * pageSize)">{{ 'main.pagination.next' | tr }} <i class="fa fa-angle-double-right"></i></button>
        </div>
      </div>
    </div>
  </div>

  <h3 class="section-header">
    {{ 'domains.renewCerts.title' | tr }}
    <div class="btn-group btn-group-sm pull-right">
      <button type="button" class="btn btn-small btn-default dropdown-toggle" ng-show="renewCerts.tasks.length" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" uib-tooltip="{{ 'domains.renewCerts.showLogsAction' | tr }}">
        <i class="fas fa-align-left"></i> <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li ng-repeat="task in renewCerts.tasks">
          <a ng-href="/logs.html?taskId={{task.id}}" target="_blank" class="text-right">
          {{ task.ts | prettyLongDate }} <i class="fa" style="margin-left: 20px" ng-class="{ 'status-active fa-check-circle': !task.active && task.success, 'fa-circle-notch fa-spin': task.active, 'status-error fa-times-circle': !task.active && !task.success }"></i>
          </a>
        </li>
      </ul>
    </div>
  </h3>

  <div class="card">
    <div class="row">
      <div class="col-md-12">
        <p ng-bind-html="'domains.renewCerts.description' | tr"></p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12" style="margin-bottom: 10px;">
        <div ng-show="renewCerts.busy" class="progress progress-striped active animateMe">
          <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ renewCerts.percent }}%"></div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <p ng-show="renewCerts.busy">{{ renewCerts.message }}</p>
        <p ng-hide="renewCerts.busy">
          <div class="has-error" ng-show="!renewCerts.active">{{ renewCerts.errorMessage }}</div>
        </p>
        <button class="btn btn-outline btn-primary pull-right" ng-click="renewCerts.renew()" ng-disabled="renewCerts.busy">{{ 'domains.renewCerts.renewAllAction' | tr }}</button>
      </div>
    </div>
  </div>

  <h3 class="section-header">
    {{ 'domains.syncDns.title' | tr }}
    <div class="btn-group btn-group-sm pull-right">
      <button type="button" class="btn btn-small btn-default dropdown-toggle" ng-show="syncDns.tasks.length" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" uib-tooltip="{{ 'domains.renewCerts.showLogsAction' | tr }}">
        <i class="fas fa-align-left"></i> <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li ng-repeat="task in syncDns.tasks">
          <a ng-href="/logs.html?taskId={{task.id}}" target="_blank" class="text-right">
          {{ task.ts | prettyLongDate }} <i class="fa" style="margin-left: 20px" ng-class="{ 'status-active fa-check-circle': !task.active && task.success, 'fa-circle-notch fa-spin': task.active, 'status-error fa-times-circle': !task.active && !task.success }"></i>
          </a>
        </li>
      </ul>
    </div>
  </h3>

  <div class="card">
    <div class="row">
      <div class="col-md-12">
        <p ng-bind-html="'domains.syncDns.description' | tr"></p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12" style="margin-bottom: 10px;">
        <div ng-show="syncDns.busy" class="progress progress-striped active animateMe">
          <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ syncDns.percent }}%"></div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <p ng-show="syncDns.busy">{{ syncDns.message }}</p>
        <p ng-hide="syncDns.busy">
          <div class="has-error" ng-show="!syncDns.active">{{ syncDns.errorMessage }}</div>
        </p>
        <button class="btn btn-outline btn-primary pull-right" ng-click="syncDns.sync()" ng-disabled="syncDns.busy">{{ 'domains.syncDns.syncAction' | tr }}</button>
      </div>
    </div>
  </div>

  <h3 class="section-header">
    {{ 'domains.changeDashboardDomain.title' | tr }}
    <div class="btn-group btn-group-sm pull-right">
      <button type="button" class="btn btn-small btn-default dropdown-toggle" ng-show="changeDashboard.tasks.length" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" uib-tooltip="{{ 'domains.renewCerts.showLogsAction' | tr }}">
        <i class="fas fa-align-left"></i> <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li ng-repeat="task in changeDashboard.tasks">
          <a ng-href="/logs.html?taskId={{task.id}}" target="_blank" class="text-right">
          {{ task.ts | prettyLongDate }} <i class="fa" style="margin-left: 20px" ng-class="{ 'status-active fa-check-circle': !task.active && task.success, 'fa-circle-notch fa-spin': task.active, 'status-error fa-times-circle': !task.active && !task.success }"></i>
          </a>
        </li>
      </ul>
    </div>
  </h3>

  <div class="card">
    <div class="row">
      <div class="col-md-7">
        <p ng-bind-html="'domains.changeDashboardDomain.description' | tr"></p>
      </div>
      <div class="col-md-5">
        <div class="input-group">
          <span class="input-group-addon" style="background-color: white;">my.</span>
          <select class="form-control pull-right" style="display: inline-block;" ng-model="changeDashboard.selectedDomain" ng-options="a.domain for a in domains"></select>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12" style="margin-bottom: 10px;">
        <div ng-show="changeDashboard.busy" class="progress progress-striped active animateMe">
          <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ changeDashboard.percent }}%"></div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-8">
        <p ng-show="changeDashboard.busy">{{ changeDashboard.message }}</p>
        <p ng-hide="changeDashboard.busy">
          <div class="has-error" ng-show="!changeDashboard.active">{{ changeDashboard.errorMessage }}</div>
        </p>
      </div>
      <div class="col-md-4 text-right">
        <button class="btn btn-outline btn-primary" ng-click="changeDashboard.change()" ng-hide="changeDashboard.busy" ng-disabled="changeDashboard.selectedDomain.domain === changeDashboard.adminDomain.domain">{{ 'domains.changeDashboardDomain.changeAction' | tr }}</button>
        <button class="btn btn-outline btn-danger" ng-click="changeDashboard.stop()" ng-show="changeDashboard.busy" style="margin-right: 10px">{{ 'domains.changeDashboardDomain.cancelAction' | tr }}</button>
      </div>
    </div>
  </div>
</div>