Add port num field in login page

API Port number can be changed in RS. The input in login can be
used to change the default port number which is 9092.

webui-src/app/login.js

@@ -9,57 +9,58 @@ function renderLoginPage(callback) {
   onSuccessCallback = callback;
 };
 
-let loginComponent = {
-  view: function() {
+const loginComponent = {
+  view: () => {
+    let uname = '';
+    let passwd = '';
+    let port = 9092;
+    let advanced = false;
     return m('.login-page',
       m('.login-container', [
         m(
           'img.logo[src=../../data/retroshare.svg][alt=retroshare_icon][width=30%]'
         ),
-        m(
-          'input.field[type=text][placeholder=Username][id=uname][autofocus]'
-        ),
-        m(
-          'input.field[type=password][placeholder=Password][id=passwd]', {
-            onchange: verifyLogin,
+        m('input[type=text][placeholder=Username][autofocus]', {
+          onchange: (e) => uname = e.target.value
+        }),
+        m('input[type=password][placeholder=Password]', {
+          onchange: (e) => { passwd = e.target.value }
+        }),
+        m('.extra', [
+          'Port:',
+          m('input[type=number]', {
+            value: port,
+            oninput: (e) => { port = e.target.value }
           }),
+        ]),
         m('button.submit-btn', {
-          onclick: verifyLogin,
+          onclick: () => verifyLogin(uname, passwd, port),
         }, 'Login'),
         m('p.error[id=error]'),
       ]));
   }
 };
 
-function verifyLogin() {
-  let [uname, passwd] = getKeys();
+function verifyLogin(uname, passwd, port) {
   let loginHeader = {
     'Authorization': 'Basic ' + btoa(uname + ':' + passwd)
   };
-  rs.rsJsonApiRequest('/rsPeers/GetRetroshareInvite', {}, loginHandleWrapper(
-      uname, passwd), true,
+  if(port !== 9092) {
+    rs.setKeys('', '', port, false);
+  }
+  rs.rsJsonApiRequest('/rsPeers/GetRetroshareInvite', {},
+    (data, successful) => {
+      if(successful) {
+        rs.setKeys(uname, passwd);
+        onSuccessCallback();
+      } else {
+        displayErrorMessage('Incorrect login/password.');
+      }
+    },
+    true,
     loginHeader);
 };
 
-function getKeys() {
-  let uname = document.getElementById('uname')
-    .value;
-  let passwd = document.getElementById('passwd')
-    .value;
-  return [uname, passwd];
-};
-
-function loginHandleWrapper(uname, passwd) {
-  let onResponse = function(data, successful) {
-    if(successful) {
-      rs.setKeys(uname, passwd);
-      onSuccessCallback();
-    } else {
-      displayErrorMessage('Incorrect login/password.');
-    }
-  };
-  return onResponse;
-};
 
 function displayErrorMessage(message) {
   m.render(document.getElementById('error'), message);

webui-src/app/rswebui.js

@@ -2,17 +2,19 @@
 
 let m = require('mithril');
 
-const API_URL = 'http://127.0.0.1:9092';
+const API_URL = 'http://127.0.0.1:';
 let loginKey = {
   username: '',
   passwd: '',
   isVerified: false,
+  port: 9092,
 };
 
 // Make this as object property?
-function setKeys(username, password, verified = true) {
+function setKeys(username, password, port = 9092, verified = true) {
   loginKey.username = username;
   loginKey.passwd = password;
+  loginKey.port = port;
   loginKey.isVerified = verified;
 }
 
@@ -35,7 +37,7 @@ function rsJsonApiRequest(path, data, callback, async = true, headers = {},
   // Eg. Retroshare switched off, wrong path, incorrect data, etc.
   return m.request({
       method: 'POST',
-      url: API_URL + path,
+      url: API_URL + loginKey.port + path,
       async,
       extract: (xhr) => {
         // Empty string is not valid json and fails on parse

webui-src/app/theme.css

@@ -240,7 +240,7 @@ Target specific sections
     position: relative;
     top: 100px;
     width: 30%;
-    height: 55%;
+    min-height: 55%;
     border-radius: 5px;
 
     display: flex;
@@ -250,8 +250,8 @@ Target specific sections
 }
 .login-container * {
     margin-top: 15px;
-    /* Not let elements flow out of container */
-    max-width: 100%;
+}.login-container .extra {
+    margin: 0;
 }
 
 /* Navbar */