Use separate form fields for host and port

index.html

@@ -53,9 +53,14 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
               <strong>Oh no!</strong> We cannot connect!
             </div>
         <div class="form-group">
-          <label class="control-label" for="hostport">Hostname and port</label>
-          <input type="text" class="form-control" id="hostport" ng-model="hostport" placeholder="Hostport">
-          <p class="help-block">Enter the hostname and the port to the WeeChat relay, separated by a :</p>
+          <label class="control-label" for="host">WeeChat hostname</label>
+          <input type="text" class="form-control" id="host" ng-model="host" placeholder="Address">
+          <p class="help-block">Enter the hostname to the WeeChat relay</p>
+        </div>
+        <div class="form-group">
+          <label class="control-label" for="port">WeeChat port number</label>
+          <input type="text" class="form-control" id="port" ng-model="port" placeholder="9001">
+          <p class="help-block">Enter the the port to the WeeChat relay</p>
         </div>
         <div class="form-group">
           <label class="control-label" for="password">WeeChat relay password</label>

js/websockets.js

@@ -320,9 +320,9 @@ weechat.factory('connection', ['$rootScope', '$log', 'handlers', 'colors', 'mode
     }
 
     // Takes care of the connection and websocket hooks
-    var connect = function (hostport, passwd, ssl) {
+    var connect = function (host, port, passwd, ssl) {
         var proto = ssl ? 'wss':'ws';
-        websocket = new WebSocket(proto+"://" + hostport + "/weechat");
+        websocket = new WebSocket(proto+"://" + host + ':' + port + "/weechat");
         websocket.binaryType = "arraybuffer"
 
         websocket.onopen = function (evt) {
@@ -424,7 +424,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
 
     $rootScope.buffer = []
 
-    $store.bind($scope, "hostport", "localhost:9001");
+    $store.bind($scope, "host", "localhost");
+    $store.bind($scope, "port", "9001");
     $store.bind($scope, "proto", "weechat");
     $store.bind($scope, "password", "");
     $store.bind($scope, "ssl", false);
@@ -462,7 +463,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
     };
 
     $scope.connect = function() {
-        connection.connect($scope.hostport, $scope.password, $scope.ssl);
+        connection.connect($scope.host, $scope.port, $scope.password, $scope.ssl);
     }
     $rootScope.getLines = function() {
       var count = 20;