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

<div style="max-width: 600px; margin: 0 auto;">
    <div class="text-left">
        <h1>DNS & Certs</h1>
    </div>
</div>

<div style="max-width: 600px; margin: 0 auto;">
    <div class="text-left">
        <h3>DNS Credentials</h3>
    </div>
</div>

<div class="card" style="margin-bottom: 15px;">
    <div class="row">
        <div class="col-md-12">
            <p>Currently only Amazon <a href="https://aws.amazon.com/route53/">Route53</a> is supported. Let us know if you require a different DNS provider <a href="#/support">here</a>.</p>

            <table width="100%">
                <tr>
                    <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 }}</td>
                </tr>
                <tr>
                    <td class="text-muted" style="vertical-align: top;">Secret Access Key</td>
                    <td class="text-right" style="vertical-align: top; white-space: nowrap;"><i>hidden</i></td>
                </tr>
                <tr>
                    <td class="text-muted" style="vertical-align: top;"></td>
                    <td class="text-right" style="vertical-align: top;"><span class="text-success" ng-show="dnsCredentials.success"><b>Done</b></span> &nbsp; &nbsp; <button class="btn btn-outline btn-xs btn-primary" ng-show="!dnsCredentials.formVisible" ng-click="showDnsCredentialsForm()">Change</button></td>
                </tr>
            </table>

            <div class="collapse" id="collapseDnsCredentialsForm" data-toggle="false">
                <p>The security credentials have to be valid for full Route53 access.</p>
                <form name="dnsCredentialsForm" ng-submit="setDnsCredentials()">
                    <fieldset>
                        <div class="has-error text-center" ng-show="dnsCredentials.error">{{ dnsCredentials.error }}</div>

                        <div class="form-group" ng-class="{ 'has-error': false }">
                            <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" required>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': false }">
                            <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" required>
                        </div>

                        <button type="submit" class="btn btn-outline btn-success pull-right" ng-disabled="dnsCredentialsForm.$invalid || busy"><i class="fa fa-spinner fa-pulse" ng-show="dnsCredentials.busy"></i> Save</button>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
 </div>

<div style="max-width: 600px; margin: 0 auto;">
    <div class="text-left">
        <h3>SSL Certificates</h3>
    </div>
</div>

<div class="card" style="margin-bottom: 15px;">
    <div class="row">
        <div class="col-md-12">
            <form name="defaultCertForm" ng-submit="setDefaultCert()">
                <fieldset>
                    <p>By default certificates will be obtained via <a href="https://letsencrypt.org/" target="_blank">Let’s Encrypt</a>.</p>
                    <br/>
                    <label class="control-label" for="defaultCertInput">Fallback Certificate</label>
                    <p>A wildcard certificate that will be used for apps where getting a Let’s Encrypt certificate failed. This might be due to rate limits on Let’s Encrypt side.</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-spinner fa-pulse" 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-spinner fa-pulse" ng-show="adminCert.busy"></i> Upload</button>
                </fieldset>
            </form>
        </div>
    </div>
</div>