2018-01-22 13:01:38 -08:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" / >
2018-06-04 21:06:44 -07:00
< title > Cloudron Domain Setup < / title >
2018-04-10 14:49:49 +02:00
< link id = "favicon" href = "/api/v1/cloudron/avatar" rel = "icon" type = "image/png" >
2018-01-22 13:01:38 -08:00
<!-- Theme CSS -->
2018-04-10 14:49:49 +02:00
< link type = "text/css" rel = "stylesheet" href = "/theme.css" >
2018-01-22 13:01:38 -08:00
<!-- Custom Fonts -->
2018-04-10 14:49:49 +02:00
< link type = "text/css" rel = "stylesheet" href = "/3rdparty/css/font-awesome.min.css" >
2018-01-22 13:01:38 -08:00
<!-- jQuery -->
2018-04-10 14:49:49 +02:00
< script type = "text/javascript" src = "/3rdparty/js/jquery.min.js" > < / script >
2018-01-22 13:01:38 -08:00
<!-- Bootstrap Core JavaScript -->
2018-04-10 14:49:49 +02:00
< script type = "text/javascript" src = "/3rdparty/js/bootstrap.min.js" > < / script >
2018-01-22 13:01:38 -08:00
<!-- Angularjs scripts -->
2018-04-10 14:49:49 +02:00
< script type = "text/javascript" src = "/3rdparty/js/angular.min.js" > < / script >
< script type = "text/javascript" src = "/3rdparty/js/angular-loader.min.js" > < / script >
< script type = "text/javascript" src = "/3rdparty/js/angular-md5.min.js" > < / script >
< script type = "text/javascript" src = "/3rdparty/js/angular-ui-notification.min.js" > < / script >
< script type = "text/javascript" src = "/3rdparty/js/autofill-event.js" > < / script >
2018-01-22 13:01:38 -08:00
<!-- Angular directives for tldjs -->
2018-04-10 14:49:49 +02:00
< script type = "text/javascript" src = "/3rdparty/js/tld.js" > < / script >
2018-01-22 13:01:38 -08:00
2018-05-15 15:46:24 -07:00
<!-- Angular directives for bootstrap https://angular - ui.github.io/bootstrap/ -->
< script type = "text/javascript" src = "/3rdparty/js/ui-bootstrap-tpls-1.3.3.min.js" > < / script >
2018-01-22 13:01:38 -08:00
<!-- Setup Application -->
2018-04-10 14:49:49 +02:00
< script type = "text/javascript" src = "/js/setupdns.js" > < / script >
2018-01-22 13:01:38 -08:00
< / head >
< body class = "setup" ng-app = "Application" ng-controller = "SetupDNSController" >
< div class = "main-container ng-cloak text-center" ng-show = "state === 'waitingForDnsSetup' || state === 'waitingForBox'" >
< div class = "row" >
< div class = "col-md-6 col-md-offset-3" >
< i class = "fa fa-circle-o-notch fa-spin fa-5x" > < / i > < br / >
< h3 > Waiting for domain and certificate setup< / h3 >
< / div >
< / div >
< / div >
< div class = "main-container ng-cloak" ng-show = "state === 'initialized'" >
< div class = "row" >
< div class = "col-md-6 col-md-offset-3" >
< div class = "card" style = "max-width: none; padding: 20px;" >
< form name = "dnsCredentialsForm" role = "form" novalidate ng-submit = "setDnsCredentials()" autocomplete = "off" >
< div class = "row" >
2018-06-05 22:26:49 -07:00
< div class = "col-md-10 col-md-offset-1 text-center" >
2018-01-22 13:01:38 -08:00
< h1 > Cloudron Setup< / h1 >
< h3 > Provide a domain for your Cloudron< / h3 >
2018-05-15 15:46:24 -07:00
< p > Apps will be installed on subdomains of this domain< / p >
2018-06-04 21:06:44 -07:00
< / div >
< / div >
< div class = "row" >
2018-07-29 19:45:52 -07:00
< div class = "col-md-10 col-md-offset-1" >
2018-06-04 21:06:44 -07:00
< br / >
2018-01-22 13:01:38 -08:00
< div class = "form-group" style = "margin-bottom: 0;" ng-class = "{ 'has-error': dnsCredentialsForm.domain.$dirty && dnsCredentialsForm.domain.$invalid }" >
2018-06-04 21:06:44 -07:00
< label class = "control-label" > Primary Domain< / label >
2018-01-22 13:01:38 -08:00
< input type = "text" class = "form-control" ng-model = "dnsCredentials.domain" name = "domain" placeholder = "example.com" required autofocus ng-disabled = "dnsCredentials.busy" >
< / div >
< / div >
< / div >
2018-05-19 17:54:37 -07:00
< br / >
2018-01-22 13:01:38 -08:00
< div class = "row" >
2018-07-29 19:45:52 -07:00
< div class = "col-md-10 col-md-offset-1" >
2018-06-04 21:06:44 -07:00
< h3 class = "text-center" > Domain Configuration< / h3 >
2018-01-22 13:01:38 -08:00
< p class = "has-error text-center" ng-show = "dnsCredentials.error" > {{ dnsCredentials.error }}< / p >
2018-06-04 21:06:44 -07:00
< br / >
2018-01-22 13:01:38 -08:00
< div class = "form-group" >
2018-06-04 21:06:44 -07:00
< label class = "control-label" > Domain Provider< / label >
2018-09-26 18:16:21 -07:00
< select class = "form-control" ng-model = "dnsCredentials.provider" ng-options = "a.value as a.name for a in dnsProvider" ng-disabled = "dnsCredentials.busy" ng-change = "setDefaultTlsProvider()" > < / select >
2018-01-22 13:01:38 -08:00
< / div >
<!-- Route53 -->
< div class = "form-group" ng-class = "{ 'has-error': dnsCredentialsForm.accessKeyId.$dirty && dnsCredentialsForm.accessKeyId.$invalid }" ng-show = "dnsCredentials.provider === 'route53'" >
2018-06-04 21:06:44 -07:00
< label class = "control-label" > Access Key Id< / label >
2018-01-22 13:01:38 -08:00
< input type = "text" class = "form-control" ng-model = "dnsCredentials.accessKeyId" name = "accessKeyId" placeholder = "Access Key Id" ng-minlength = "16" ng-maxlength = "32" ng-required = "dnsCredentials.provider === 'route53'" ng-disabled = "dnsCredentials.busy" >
< / div >
< div class = "form-group" ng-class = "{ 'has-error': dnsCredentialsForm.secretAccessKey.$dirty && dnsCredentialsForm.secretAccessKey.$invalid }" ng-show = "dnsCredentials.provider === 'route53'" >
2018-06-04 21:06:44 -07:00
< label class = "control-label" > Secret Access Key< / label >
2018-01-22 13:01:38 -08:00
< input type = "text" class = "form-control" ng-model = "dnsCredentials.secretAccessKey" name = "secretAccessKey" placeholder = "Secret Access Key" ng-required = "dnsCredentials.provider === 'route53'" ng-disabled = "dnsCredentials.busy" >
< / div >
<!-- Google Cloud DNS -->
< div class = "form-group" ng-class = "{ 'has-error': false }" ng-show = "dnsCredentials.provider === 'gcdns'" >
2018-06-04 21:06:44 -07:00
< label class = "control-label" > Service Account Key< / label >
2018-01-22 13:01:38 -08:00
< div class = "input-group" >
< input type = "file" id = "gcdnsKeyFileInput" style = "display:none" / >
< input type = "text" class = "form-control" placeholder = "Service Account Key" ng-model = "dnsCredentials.gcdnsKey.keyFileName" id = "gcdnsKeyInput" name = "cert" onclick = "getElementById('gcdnsKeyFileInput').click();" style = "cursor: pointer;" ng-required = "dnsCredentials.provider === 'gcdns'" ng-disabled = "dnsCredentials.busy" >
< span class = "input-group-addon" >
< i class = "fa fa-upload" onclick = "getElementById('gcdnsKeyFileInput').click();" > < / i >
< / span >
< / div >
< / div >
<!-- DigitalOcean -->
< div class = "form-group" ng-class = "{ 'has-error': dnsCredentialsForm.digitalOceanToken.$dirty && dnsCredentialsForm.digitalOceanToken.$invalid }" ng-show = "dnsCredentials.provider === 'digitalocean'" >
2018-06-04 21:44:15 -07:00
< label class = "control-label" > DigitalOcean Token < sup > < 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" class = "help" target = "_blank" > < i class = "fa fa-question-circle" > < / i > < / a > < / sup > < / label >
2018-01-22 13:01:38 -08:00
< input type = "text" class = "form-control" ng-model = "dnsCredentials.digitalOceanToken" name = "digitalOceanToken" placeholder = "API Token" ng-required = "dnsCredentials.provider === 'digitalocean'" ng-disabled = "dnsCredentials.busy" >
< / div >
2018-05-06 17:07:00 -07:00
<!-- Gandi -->
< div class = "form-group" ng-class = "{ 'has-error': dnsCredentialsForm.gandiApiKey.$dirty && dnsCredentialsForm.gandiApiKey.$invalid }" ng-show = "dnsCredentials.provider === 'gandi'" >
2018-06-04 21:44:15 -07:00
< label class = "control-label" > Gandi API Key < sup > < a href = "http://doc.livedns.gandi.net/" class = "help" target = "_blank" > < i class = "fa fa-question-circle" > < / i > < / a > < / sup > < / label >
2018-05-06 17:07:00 -07:00
< input type = "text" class = "form-control" ng-model = "dnsCredentials.gandiApiKey" name = "gandiApiKey" placeholder = "API Key" ng-required = "dnsCredentials.provider === 'gandi'" ng-disabled = "dnsCredentials.busy" >
< / div >
2018-05-06 21:52:25 -07:00
<!-- GoDaddy -->
< div class = "form-group" ng-class = "{ 'has-error': dnsCredentialsForm.godaddyApiKey.$dirty && dnsCredentialsForm.godaddyApiKey.$invalid }" ng-show = "dnsCredentials.provider === 'godaddy'" >
2018-06-04 21:06:44 -07:00
< label class = "control-label" > API Key < sup > < a href = "https://developer.godaddy.com/keys" class = "help" target = "_blank" > < i class = "fa fa-question-circle" > < / i > < / a > < / sup > < / label >
2018-05-06 21:52:25 -07:00
< input type = "text" class = "form-control" ng-model = "dnsCredentials.godaddyApiKey" name = "godaddyApiKey" placeholder = "API Key" ng-minlength = "1" ng-required = "dnsCredentials.provider === 'godaddy'" ng-disabled = "dnsCredentials.busy" >
< / div >
< div class = "form-group" ng-class = "{ 'has-error': dnsCredentialsForm.godaddyApiSecret.$dirty && dnsCredentialsForm.godaddyApiSecret.$invalid }" ng-show = "dnsCredentials.provider === 'godaddy'" >
2018-06-04 21:06:44 -07:00
< label class = "control-label" > API Secret< / label >
2018-05-06 21:52:25 -07:00
< input type = "text" class = "form-control" ng-model = "dnsCredentials.godaddyApiSecret" name = "godaddyApiSecret" placeholder = "API Secret" ng-required = "dnsCredentials.provider === 'godaddy'" ng-disabled = "dnsCredentials.busy" >
< / div >
2018-01-22 13:01:38 -08:00
<!-- Cloudflare -->
< div class = "form-group" ng-class = "{ 'has-error': dnsCredentialsForm.cloudflareToken.$dirty && dnsCredentialsForm.cloudflareToken.$invalid }" ng-show = "dnsCredentials.provider === 'cloudflare'" >
2018-06-04 21:06:44 -07:00
< label class = "control-label" > Global API Key< / label >
2018-01-23 18:15:48 -08:00
< input type = "text" class = "form-control" ng-model = "dnsCredentials.cloudflareToken" name = "cloudflareToken" placeholder = "Global API Key" ng-required = "dnsCredentials.provider === 'cloudflare'" ng-disabled = "dnsCredentials.busy" >
2018-01-22 13:01:38 -08:00
< / div >
< div class = "form-group" ng-class = "{ 'has-error': dnsCredentialsForm.cloudflareEmail.$dirty && dnsCredentialsForm.cloudflareEmail.$invalid }" ng-show = "dnsCredentials.provider === 'cloudflare'" >
2018-06-04 21:06:44 -07:00
< label class = "control-label" > Cloudflare Email< / label >
2018-01-22 13:01:38 -08:00
< input type = "email" class = "form-control" ng-model = "dnsCredentials.cloudflareEmail" name = "cloudflareEmail" placeholder = "Cloudflare Account Email" ng-required = "dnsCredentials.provider === 'cloudflare'" ng-disabled = "dnsCredentials.busy" >
< / div >
2018-05-09 18:44:03 +02:00
<!-- Name.com -->
< div class = "form-group" ng-class = "{ 'has-error': dnsCredentialsForm.nameComUsername.$dirty && dnsCredentialsForm.nameComUsername.$invalid }" ng-show = "dnsCredentials.provider === 'namecom'" >
2018-06-04 21:06:44 -07:00
< label class = "control-label" > Name.com Username< / label >
2018-05-09 18:44:03 +02:00
< input type = "text" class = "form-control" ng-model = "dnsCredentials.nameComUsername" name = "nameComUsername" placeholder = "Name.com Username" ng-required = "dnsCredentials.provider === 'namecom'" ng-disabled = "dnsCredentials.busy" >
< / div >
< div class = "form-group" ng-class = "{ 'has-error': dnsCredentialsForm.nameComToken.$dirty && dnsCredentialsForm.nameComToken.$invalid }" ng-show = "dnsCredentials.provider === 'namecom'" >
2018-06-04 21:06:44 -07:00
< label class = "control-label" > API Token < sup > < a href = "https://www.name.com/account/settings/api" class = "help" target = "_blank" > < i class = "fa fa-question-circle" > < / i > < / a > < / sup > < / label >
2018-05-09 18:44:03 +02:00
< input type = "text" class = "form-control" ng-model = "dnsCredentials.nameComToken" name = "nameComToken" placeholder = "Name.com API Token" ng-required = "dnsCredentials.provider === 'namecom'" ng-disabled = "dnsCredentials.busy" >
< / div >
2018-01-22 13:01:38 -08:00
<!-- Wildcard -->
2018-09-12 11:45:07 -07:00
< p class = "small text-info" ng-show = "dnsCredentials.provider === 'wildcard'" >
2018-01-22 13:01:38 -08:00
< span > Setup A records for < b > *.{{ dnsCredentials.domain || 'example.com' }}< / b > and < b > {{ dnsCredentials.domain || 'example.com' }}< / b > to this server's IP.< / span >
< / p >
<!-- Manual -->
2018-09-12 11:45:07 -07:00
< p class = "small text-info" ng-show = "dnsCredentials.provider === 'manual'" >
< span > Setup an A record for < b > my.{{ dnsCredentials.domain || 'example.com' }}< / b > to this server's IP.< br / > < / span >
2018-01-22 13:01:38 -08:00
< / p >
2018-06-04 20:49:18 -07:00
< div ng-show = "provider === 'ami'" >
< br / >
< h3 > Owner verification< / h3 >
< p > Provide the EC2 instance id to verify you have access to this server.< / p >
< div class = "form-group" ng-class = "{ 'has-error': dnsCredentialsForm.instanceId.$dirty && (dnsCredentialsForm.instanceId.$invalid || error) }" >
< input type = "text" class = "form-control" ng-model = "instanceId" id = "inputInstanceId" name = "instanceId" placeholder = "AWS EC2 instance id" ng-maxlength = "20" ng-minlength = "10" ng-required = "provider === 'ami'" autocomplete = "off" >
< / div >
< p > < span ng-show = "error" class = "text-danger" > {{ error }}< / span > < / p >
2018-01-22 13:01:38 -08:00
< / div >
2018-05-15 15:46:24 -07:00
2018-09-26 18:09:43 -07:00
< p class = "small text-info" ng-show = "needsPort80(dnsCredentials.provider, dnsCredentials.tlsConfig.provider)" > Let's Encrypt requires your server to be reachable on port 80< / p >
2018-06-04 20:49:18 -07:00
< br / >
< div uib-collapse = "!dnsCredentials.advancedVisible" >
2018-08-28 21:47:16 -07:00
2018-09-05 19:32:53 -07:00
< div ng-show = "hyphenatedSubdomains" >
2018-08-28 21:47:16 -07:00
< label >
2018-09-05 19:32:53 -07:00
< input type = "checkbox" ng-model = "dnsCredentials.hyphenatedSubdomains" name = "hyphenatedSubdomains" ng-disabled = "dnsCredentials.busy" / > Hyphenate Subdomains
2018-08-28 21:47:16 -07:00
< / label >
2018-09-05 19:32:53 -07:00
< p > When enabled, apps are installed into < code > < location> -< domain> < / code > < / p >
< br / >
2018-08-28 21:47:16 -07:00
< / div >
2018-06-04 20:49:18 -07:00
< div class = "form-group" >
2018-06-05 21:14:10 -07:00
< label class = "control-label" > Zone Name (Optional)< / label >
2018-06-04 20:49:18 -07:00
< input type = "text" class = "form-control" ng-model = "dnsCredentials.zoneName" name = "zoneName" placeholder = "{{dnsCredentials.domain | zoneName}}" ng-disabled = "dnsCredentials.busy" >
< / div >
2018-05-15 15:46:24 -07:00
2018-06-04 20:49:18 -07:00
< div class = "form-group" >
2018-06-04 21:06:44 -07:00
< label class = "control-label" > Certificate Provider< / label >
2018-06-04 20:49:18 -07:00
< select class = "form-control" ng-model = "dnsCredentials.tlsConfig.provider" ng-options = "a.value as a.name for a in tlsProvider" ng-disabled = "dnsCredentials.busy" > < / select >
< / div >
< / div >
2018-07-29 19:43:36 -07:00
< div class = "text-center" >
< a href = "" ng-click = "dnsCredentials.advancedVisible = true" ng-hide = "dnsCredentials.advancedVisible" > Advanced settings...< / a >
< a href = "" ng-click = "dnsCredentials.advancedVisible = false" ng-show = "dnsCredentials.advancedVisible" > Hide Advanced settings< / a >
< / div >
2018-05-15 15:46:24 -07:00
< / div >
< / div >
< br / >
< br / >
2018-01-22 13:01:38 -08:00
< div class = "row" >
< div class = "col-md-12 text-center" >
2018-01-23 11:55:36 -08:00
< button type = "submit" class = "btn btn-primary" ng-disabled = "dnsCredentialsForm.$invalid" / > < i class = "fa fa-circle-o-notch fa-spin" ng-show = "dnsCredentials.busy" > < / i > Next< / button >
2018-01-22 13:01:38 -08:00
< / div >
< / div >
< br / >
< div class = "row" >
< div class = "col-md-12 text-center" >
< small > You can setup a new Cloudron or restore from a backup in the next step< / small >
< / div >
< / div >
< / form >
< / div >
< / div >
< / div >
< / div >
< footer class = "text-center" >
< span class = "text-muted" > © 2018 < a href = "https://cloudron.io" target = "_blank" > Cloudron< / a > < / span >
< span class = "text-muted" > < a href = "https://twitter.com/cloudron_io" target = "_blank" > Twitter < i class = "fa fa-twitter" > < / i > < / a > < / span >
2018-02-23 15:53:23 -08:00
< span class = "text-muted" > < a href = "https://forum.cloudron.io" target = "_blank" > Forum < i class = "fa fa-comments" > < / i > < / a > < / span >
2018-01-22 13:01:38 -08:00
< / footer >
< / body >
< / html >
