Add validation for the host field

css/themes/base16-default.css

@@ -301,6 +301,9 @@ tr.bufferline:hover {
 input[type=text], input[type=password], #sendMessage, .badge {
     box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.2) inset;
 }
+input[type=text].is-invalid{
+    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(255, 0, 0, 0.6) inset;
+}
 
 input[type=text], input[type=password], #sendMessage, .btn-send, .btn-send-image, .btn-complete-nick {
     color: var(--base05);

css/themes/dark.css

@@ -86,6 +86,9 @@ input[type=text], input[type=password], #sendMessage, .badge, .btn-send, .btn-se
     color: #ccc;
     background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
 }
+input[type=text].is-invalid{
+    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(255, 0, 0, 0.8) inset;
+}
 
 .btn-complete-nick:hover, .btn-complete-nick:focus,
 .btn-send:hover, .btn-send:focus,

css/themes/light.css

@@ -68,6 +68,9 @@ select.form-control, select option, input[type=text], input[type=password], #sen
     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px 1px 7px 0px rgba(255, 255, 255, 0.8) inset;
     background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.3);
 }
+input[type=text].is-invalid{
+    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px 1px 7px 0px rgba(255, 0, 0, 0.8) inset;
+}
 
 #connection-infos {
     color: #aaa;

index.html

@@ -104,7 +104,7 @@
                   <div class="input-group">
                     <div class="row no-gutter">
                       <div class="col-sm-9">
-                        <input type="text" class="form-control favorite-font" id="host" ng-model="settings.host" ng-change="parseHost()" placeholder="Address" autocapitalize="off">
+                        <input type="text" class="form-control favorite-font" id="host" ng-model="settings.host" ng-change="parseHost()" ng-class="{'is-invalid': hostInvalid}" placeholder="Address" autocapitalize="off">
                       </div>
                       <div class="col-sm-3">
                         <input type="text" class="form-control favorite-font" id="port" ng-model="settings.port" ng-disabled="portDisabled" placeholder="Port">
@@ -136,7 +136,7 @@
                     </label>
                   </div>
                 </div>
-                <button class="btn btn-lg btn-primary" ng-click="connect()" ng-cloak>{{ connectbutton }}  <i ng-class="connectbuttonicon" class="glyphicon"></i></button>
+                <button class="btn btn-lg btn-primary" ng-disabled="hostInvalid" ng-click="connect()" ng-cloak>{{ connectbutton }}  <i ng-class="connectbuttonicon" class="glyphicon"></i></button>
               </form>
             </div>
           </div>

js/glowingbear.js

@@ -663,31 +663,32 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         //If host is specified here the dedicated port field is disabled
 
         var parts;
+        $rootScope.hostInvalid = false;
 
         //host
         var regexHost = /^([^:\/]*|\[.*\])$/;
         var regexHostPort = /^([^:]*|\[.*\]):(\d+)$/;
         var regexHostPortPath = /^([^:]*|\[.*\]):(\d*)\/(.+)$/;
-        if((parts = regexHost.exec(settings.host)) !== null)
+        if((parts = regexHost.exec(settings.host)) !== null) {
-        {
             settings.hostOnly = parts[1];
             $rootScope.portDisabled = false;
         }
         //host:port
-        else if((parts = regexHostPort.exec(settings.host)) !== null)
+        else if((parts = regexHostPort.exec(settings.host)) !== null) {
-        {
             settings.hostOnly = parts[1];
             settings.port = parts[2];
             $rootScope.portDisabled = true;
         }
         //host:port/path
-        else if((parts = regexHostPortPath.exec(settings.host)) !== null)
+        else if((parts = regexHostPortPath.exec(settings.host)) !== null) {
-        {
             settings.hostOnly = parts[1];
             settings.port = parts[2];
             settings.path = parts[3];
             $rootScope.portDisabled = true;
         }
+        else {
+            $rootScope.hostInvalid = true;
+        }
 
     };