From 9aba90a6f714d4e6a5ab02babac53ddc788a9c2b Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Thu, 16 Feb 2017 19:34:34 +0100
Subject: [PATCH] Show error message if subdomain was entered in setupdns view

---
 webadmin/src/3rdparty/js/angular-tld.js | 21 ++++++++++++++-------
 webadmin/src/setupdns.html              |  3 ++-
 webadmin/src/theme.scss                 |  5 +++++
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/webadmin/src/3rdparty/js/angular-tld.js b/webadmin/src/3rdparty/js/angular-tld.js
index 349bbd72a..58bbc9713 100644
--- a/webadmin/src/3rdparty/js/angular-tld.js
+++ b/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);
+            };
         }
-    }
+    };
 }
 
diff --git a/webadmin/src/setupdns.html b/webadmin/src/setupdns.html
index ce0d7e131..de029be09 100644
--- a/webadmin/src/setupdns.html
+++ b/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">
diff --git a/webadmin/src/theme.scss b/webadmin/src/theme.scss
index 739f09c98..9dafdc07f 100644
--- a/webadmin/src/theme.scss
+++ b/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 {