cloudron-box/webadmin/src/views/certs.html

<div class="modal fade" id="dnsCredentialsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Configure DNS</h4>
            </div>
            <div class="modal-body">
                <form name="dnsCredentialsForm" role="form" novalidate ng-submit="setDnsCredentials()" autocomplete="off">
                    <fieldset>
                        <p class="has-error text-center" ng-show="dnsCredentials.error">{{ dnsCredentials.error }}</p>

                        <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.customDomainId.$invalid }" uib-tooltip="{{ config.provider === 'caas' ? '' : 'Changing the domain is not yet supported' }}">
                            <label class="control-label" for="customDomainId">Domain name</label>
                            <input type="text" class="form-control" ng-model="dnsCredentials.customDomain" id="customDomainId" name="customDomainId" ng-disabled="dnsCredentials.busy || config.provider !== 'caas'" placeholder="example.com" required autofocus>
                        </div>

                        <div class="form-group">
                            <label class="control-label" for="dnsCredentialsProvider">DNS API provider</label>
                            <select class="form-control" id="dnsCredentialsProvider" ng-model="dnsCredentials.provider" ng-options="a.value as a.name for a in dnsProvider"></select>
                        </div>

                        <!-- Route53 -->
                        <div class="form-group" ng-class="{ 'has-error': false }" ng-show="dnsCredentials.provider === 'route53'">
                            <label class="control-label" for="dnsCredentialsAccessKeyId">Access key id</label>
                            <input type="text" class="form-control" ng-model="dnsCredentials.accessKeyId" id="dnsCredentialsAccessKeyId" name="accessKeyId" ng-disabled="dnsCredentials.busy" ng-minlength="16" ng-maxlength="32" ng-required="dnsCredentials.provider === 'route53'">
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': false }" ng-show="dnsCredentials.provider === 'route53'">
                            <label class="control-label" for="dnsCredentialsSecretAccessKey">Secret access key</label>
                            <input type="text" class="form-control" ng-model="dnsCredentials.secretAccessKey" id="dnsCredentialsSecretAccessKey" name="secretAccessKey" ng-disabled="dnsCredentials.busy" ng-required="dnsCredentials.provider === 'route53'">
                        </div>

                        <!-- DigitalOcean -->
                        <div class="form-group" ng-class="{ 'has-error': false }" ng-show="dnsCredentials.provider === 'digitalocean'">
                            <label class="control-label" for="dnsCredentialsDigitalOceanToken">DigitalOcean token</label>
                            <input type="text" class="form-control" ng-model="dnsCredentials.digitalOceanToken" id="dnsCredentialsDigitalOceanToken" name="digitalOceanToken" ng-disabled="dnsCredentials.busy" ng-required="dnsCredentials.provider === 'digitalocean'">
                        </div>

                        <!-- Cloudflare -->
                        <div class="form-group" ng-class="{ 'has-error': false }" ng-show="dnsCredentials.provider === 'cloudflare'">
                            <label class="control-label" for="dnsCredentialsCloudflareToken">Cloudflare token</label>
                            <input type="text" class="form-control" ng-model="dnsCredentials.cloudflareToken" id="dnsCredentialsCloudflareToken" name="cloudflareToken" placeholder="API Key" ng-required="dnsCredentials.provider === 'cloudflare'" ng-disabled="dnsCredentials.busy">
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': false }" ng-show="dnsCredentials.provider === 'cloudflare'">
                            <label class="control-label" for="dnsCredentialsCloudflareEmail">Cloudflare email</label>
                            <input type="email" class="form-control" ng-model="dnsCredentials.cloudflareEmail" id="dnsCredentialsCloudflareEmail" name="cloudflareEmail" placeholder="Cloudflare Account Email" ng-required="dnsCredentials.provider === 'cloudflare'" ng-disabled="dnsCredentials.busy">
                        </div>

                        <!-- this will be autofilled by most browsers regardless of the attribute, since the next field is a password field.... -->
                        <input type="text" class="form-control hide">

                        <!-- all provider -->
                        <div class="form-group" ng-class="{ 'has-error': false }">
                            <label class="control-label" for="dnsCredentialsPassword">Provide your password to confirm this action</label>
                            <input type="password" class="form-control" ng-model="dnsCredentials.password" id="dnsCredentialsPassword" name="password" ng-disabled="dnsCredentials.busy" required>
                        </div>

                        <input class="ng-hide" type="submit" ng-disabled="dnsCredentialsForm.$invalid || dnsCredentials.busy"/>
                    </fieldset>
                </form>

                <p ng-show="dnsCredentials.provider === 'route53'">
                    This domain must be hosted on <a href="https://aws.amazon.com/route53/?nc2=h_m1" target="_blank">AWS Route53</a>.
                </p>

                <p ng-show="dnsCredentials.provider === 'digitalocean'">
                    This domain must be hosted on <a href="https://www.digitalocean.com/community/tutorials/how-to-set-up-a-host-name-with-digitalocean#step-two%E2%80%94change-your-domain-server" target="_blank">DigitalOcean</a>.
                </p>

                <p ng-show="dnsCredentials.provider === 'cloudflare'">
                    This domain must be hosted on <a href="https://www.cloudflare.com" target="_blank">Cloudflare</a>.
                </p>

                <p ng-show="dnsCredentials.provider === 'wildcard'">
                    Setup <i>A</i> records for <b>*.{{ dnsCredentials.customDomain || 'example.com' }}</b> and <b>{{ dnsCredentials.customDomain || 'example.com' }}</b> to this server's IP.
                </p>

                <p ng-show="dnsCredentials.provider === 'manual'">
                    Setup an <i>A</i> record for <b>my.{{ dnsCredentials.customDomain || 'example.com' }}</b> to this server's IP. All DNS records have to be setup manually <i>before</i> each app installation.
                </p>
            </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="setDnsCredentials()" ng-disabled="dnsCredentialsForm.$invalid || dnsCredentials.busy">
                    <i class="fa fa-circle-o-notch fa-spin" ng-show="dnsCredentials.busy"></i>
                    <span ng-show="dnsCredentials.customDomain === config.fqdn">Save</span>
                    <span ng-show="dnsCredentials.customDomain !== config.fqdn">Change Domain</span>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="content">
  <div class="text-left">
    <h1>Domain & Certificates</h1>
  </div>

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

  <div class="card" style="margin-bottom: 15px;">
      <div class="row">
          <div class="col-md-12">
              <p ng-show="!config.isCustomDomain">To use a custom domain, configure your domain to use <a target="_blank" href="https://aws.amazon.com/route53/">Route53.</a> Moving to a custom domain will retain all your apps and data and will take around 15 minutes.</p>

              <table width="100%">
                  <tr>
                      <td class="text-muted" style="vertical-align: top;">Domain name</td>
                      <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.fqdn }}</td>
                  </tr>

                  <tr>
                      <td class="text-muted" style="vertical-align: top;">DNS provider</td>
                      <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ dnsConfig.provider }}</td>
                  </tr>

                  <tr ng-show="dnsConfig.provider === 'manual' && !dnsConfig.wildcard">
                      <td colspan="2">
                          <br/>
                          No DNS provider is configured. All DNS records need to be setup manually.
                          To avoid manual setup for each installed app, set a DNS API provider.
                      </td>
                  </tr>

                  <tr ng-show="dnsConfig.provider === 'manual' && dnsConfig.wildcard">
                      <td colspan="2">
                          <br/>
                          Wildcard DNS provider is configured. Always ensure there is a wildcard DNS record for this server's IP.
                      </td>
                  </tr>

                  <tr ng-show="dnsConfig.provider === 'noop'">
                      <td colspan="2">
                          <br/>
                          No DNS provider configured. All DNS records need to be setup manually and all DNS checks are skipped.
                      </td>
                  </tr>

                  <tr ng-show="config.isCustomDomain && dnsConfig.provider === 'route53'">
                      <td class="text-muted" style="vertical-align: top;">Access key id</td>
                      <td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ dnsConfig.accessKeyId || 'unset' }}</td>
                  </tr>
                  <tr ng-show="config.isCustomDomain && dnsConfig.provider === 'route53'">
                      <td class="text-muted" style="vertical-align: top;">Secret access key</td>
                      <td class="text-right" style="vertical-align: top; white-space: nowrap;" ng-click-reveal="dnsConfig.secretAccessKey"><i>hidden</i></td>
                  </tr>

                  <tr ng-show="config.isCustomDomain && dnsConfig.provider === 'digitalocean'">
                      <td class="text-muted" style="vertical-align: top;">DigitalOcean token</td>
                      <td class="text-right" style="vertical-align: top; white-space: nowrap;" ng-click-reveal="dnsConfig.token"><i>hidden</i></td>
                  </tr>

                  <!-- add some space -->
                  <tr>
                      <td><br/></td>
                      <td></td>
                  </tr>

                  <tr>
                      <td class="text-muted" style="vertical-align: top;"></td>
                      <td class="text-right" style="vertical-align: top;"><button class="btn btn-outline btn-primary" ng-click="showChangeDnsCredentials()">Change</button></td>
                  </tr>
              </table>
          </div>
      </div>
   </div>

  <div class="text-left">
    <h3>SSL Certificates</h3>
  </div>

  <div class="card" style="margin-bottom: 15px;">
      <div class="row" ng-show="!config.isCustomDomain">
          <div class="col-md-12">
              Certificates can only by set for custom domains.
          </div>
      </div>

      <div class="row" ng-show="config.isCustomDomain">
          <div class="col-md-12">
              <form name="defaultCertForm" ng-submit="setDefaultCert()">
                  <fieldset>
                      <p>Certificates are automatically obtained and renewed from <a href="https://letsencrypt.org/" target="_blank">Let’s Encrypt</a>. See the current rate limit <a href="https://letsencrypt.org/docs/rate-limits/" target="_blank">here</a>.</p>
                      <br/>
                      <label class="control-label" for="defaultCertInput">Fallback Certificate</label>
                      <p>This wildcard certificate will be used for apps, should getting a Let’s Encrypt certificate fail.</p>
                      <div class="has-error text-center" ng-show="defaultCert.error">{{ defaultCert.error }}</div>
                      <div class="text-success text-center" ng-show="defaultCert.success"><b>Upload successful</b></div>
                      <div class="form-group" ng-class="{ 'has-error': (!defaultCert.cert.$dirty && defaultCert.error) }">
                          <div class="input-group">
                              <input type="file" id="defaultCertFileInput" style="display:none"/>
                              <input type="text" class="form-control" placeholder="Certificate" ng-model="defaultCert.certificateFileName" id="defaultCertInput" name="cert" onclick="getElementById('defaultCertFileInput').click();" style="cursor: pointer;" ng-disabled="defaultCert.busy" required>
                              <span class="input-group-addon">
                                  <i class="fa fa-upload" onclick="getElementById('defaultCertFileInput').click();"></i>
                              </span>
                          </div>
                      </div>
                      <div class="form-group" ng-class="{ 'has-error': (!defaultCert.key.$dirty && defaultCert.error) }">
                          <div class="input-group">
                              <input type="file" id="defaultKeyFileInput" style="display:none"/>
                              <input type="text" class="form-control" placeholder="Key" ng-model="defaultCert.keyFileName" id="defaultKeyInput" name="key" onclick="getElementById('defaultKeyFileInput').click();" style="cursor: pointer;" ng-disabled="defaultCert.busy" required>
                              <span class="input-group-addon">
                                  <i class="fa fa-upload" onclick="getElementById('defaultKeyFileInput').click();"></i>
                              </span>
                          </div>
                      </div>
                      <button type="submit" class="btn btn-outline btn-success pull-right" ng-disabled="defaultCertForm.$invalid || busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="defaultCert.busy"></i> Upload</button>
                  </fieldset>
              </form>
          </div>
      </div>
      <div class="row hide">
          <div class="col-md-12">
              <form name="adminCertForm" ng-submit="setAdminCert()">
                  <fieldset>
                      <label class="control-label" for="adminCertInput">Settings Certificate</label>
                      <p>This certificate will be used for this Settings application.</p>
                      <div class="has-error text-center" ng-show="adminCert.error">{{ adminCert.error }}</div>
                      <div class="text-success text-center" ng-show="adminCert.success"><b>Upload successful</b></div>
                      <div class="form-group" ng-class="{ 'has-error': (!adminCert.cert.$dirty && adminCert.error) }">
                          <div class="input-group">
                              <input type="file" id="adminCertFileInput" style="display:none"/>
                              <input type="text" class="form-control" placeholder="Certificate" ng-model="adminCert.certificateFileName" id="adminCertInput" name="cert" onclick="getElementById('adminCertFileInput').click();" style="cursor: pointer;" ng-disabled="adminCert.busy" required>
                              <span class="input-group-addon">
                                  <i class="fa fa-upload" onclick="getElementById('adminCertFileInput').click();"></i>
                              </span>
                          </div>
                      </div>
                      <div class="form-group" ng-class="{ 'has-error': (!adminCert.key.$dirty && adminCert.error) }">
                          <div class="input-group">
                              <input type="file" id="adminKeyFileInput" style="display:none"/>
                              <input type="text" class="form-control" placeholder="Key" ng-model="adminCert.keyFileName" id="adminKeyInput" name="key" onclick="getElementById('adminKeyFileInput').click();" style="cursor: pointer;" ng-disabled="adminCert.busy" required>
                              <span class="input-group-addon">
                                  <i class="fa fa-upload" onclick="getElementById('adminKeyFileInput').click();"></i>
                              </span>
                          </div>
                      </div>
                      <button type="submit" class="btn btn-outline btn-success pull-right" ng-disabled="adminCertForm.$invalid || busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="adminCert.busy"></i> Upload</button>
                  </fieldset>
              </form>
          </div>
      </div>
  </div>
</div>