Show error message if subdomain was entered in setupdns view

webadmin/src/3rdparty/js/angular-tld.js

@@ -7,14 +7,19 @@ angular.module('ngTld', [])
     .directive('checkTld', checkTld);
 
 function ngTld() {
-    var tldExists = function($path) {
+    function tldExists($path) {
         // https://github.com/oncletom/tld.js/issues/58
         return ($path.$viewValue.slice(-1) !== '.') && $path.$viewValue === tld.getDomain($path.$viewValue);
     }
 
+    function isSubdomain($path) {
+        return ($path.$viewValue.slice(-1) !== '.') && !!tld.getDomain($path.$viewValue) && $path.$viewValue !== tld.getDomain($path.$viewValue);
+    }
+
     return {
         tldExists: tldExists,
-    }
+        isSubdomain: isSubdomain
+    };
 }
 
 function checkTld(ngTld) {
@@ -23,11 +28,13 @@ function checkTld(ngTld) {
         require: 'ngModel',
         link: function(scope, element, attr, ngModel) {
             ngModel.$validators.invalidTld = function(modelValue, viewValue) {
-                var status = true;
-                status = ngTld.tldExists(ngModel);
-                return status;
-            }
+                return ngTld.tldExists(ngModel);
+            };
+
+            ngModel.$validators.invalidSubdomain = function(modelValue, viewValue) {
+                return !ngTld.isSubdomain(ngModel);
+            };
         }
-    }
+    };
 }
 

webadmin/src/setupdns.html

@@ -55,9 +55,10 @@
                                 <h1>Cloudron Setup</h1>
                                 <h3>Provide the domain for your Cloudron</h3>
                                 <p>Apps will be installed on subdomains of that domain.</p>
-                                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.domain.$dirty && dnsCredentialsForm.domain.$invalid }">
+                                <div class="form-group" style="margin-bottom: 0;" ng-class="{ 'has-error': dnsCredentialsForm.domain.$dirty && dnsCredentialsForm.domain.$invalid }">
                                     <input type="text" class="form-control" ng-model="dnsCredentials.domain" name="domain" check-tld placeholder="example.com" required autofocus ng-disabled="dnsCredentials.busy">
                                 </div>
+                                <p>&nbsp;<span ng-show="dnsCredentialsForm.domain.$error.invalidSubdomain" class="text-danger">Subdomains are <a href="https://cloudron.io/references/selfhosting.html#domain-setup" target="_blank" title="Domain documentation">not supported</a></span></p>
                             </div>
                         </div>
                         <div class="row">

webadmin/src/theme.scss

@@ -637,6 +637,11 @@ h1, h2, h3 {
 .has-error,
 .text-danger {
     color: $brand-danger;
+
+    a {
+        text-decoration: underline;
+        color: $brand-danger;
+    }
 }
 
 footer {