make login function as route

webui-src/.eslintrc.json

@@ -15,7 +15,7 @@
     "rules": {
         "indent": [
             "error",
-            4
+            2
         ],
         "linebreak-style": [
             "error",

webui-src/app/login.js

@@ -1,72 +1,78 @@
-var m = require('mithril');
-var rs = require('rswebui');
+const m = require('mithril');
+const rs = require('rswebui');
 
-let onSuccessCallback = undefined;
-
-function renderLoginPage(callback) {
-  // Cannot use mount because vDOM will not let any other component overrides
-  m.render(document.getElementById('main'), m(loginComponent));
-  onSuccessCallback = callback;
-};
-
-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[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(uname, passwd, port),
-        }, 'Login'),
-        m('p.error[id=error]'),
-      ]));
-  }
-};
-
-function verifyLogin(uname, passwd, port) {
+const verifyLogin = function(uname, passwd, port) {
   let loginHeader = {
-    'Authorization': 'Basic ' + btoa(uname + ':' + passwd)
+    Authorization: 'Basic ' + btoa(uname + ':' + passwd)
   };
-  if(port !== 9092) {
+  if (port !== 9092) {
     rs.setKeys('', '', port, false);
   }
-  rs.rsJsonApiRequest('/rsPeers/GetRetroshareInvite', {},
+  rs.rsJsonApiRequest(
+    '/rsPeers/GetRetroshareInvite',
+    {},
     (data, successful) => {
-      if(successful) {
+      if (successful) {
         rs.setKeys(uname, passwd);
-        onSuccessCallback();
+        m.route.set('/home');
       } else {
         displayErrorMessage('Incorrect login/password.');
       }
     },
     true,
-    loginHeader);
+    loginHeader
+  );
 };
 
-
-function displayErrorMessage(message) {
+const displayErrorMessage = function(message) {
   m.render(document.getElementById('error'), message);
 };
 
-module.exports = {
-  renderLoginPage,
+const loginComponent = function() {
+  let uname = '';
+  let passwd = '';
+  let port = 9092;
+  return {
+    view: () => {
+      return m(
+        '.login-page',
+        m('.login-container', [
+          m('img.logo[width=30%]', {
+            src: '../data/retroshare.svg',
+            alt: 'retroshare_icon'
+          }),
+          m('input[autofocus]', {
+            type: 'text',
+            placeholder: 'Username',
+            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(uname, passwd, port)
+            },
+            'Login'
+          ),
+          m('p.error[id=error]')
+        ])
+      );
+    }
+  };
 };
 
+module.exports = loginComponent;

webui-src/app/main.js

@@ -1,7 +1,14 @@
-let m = require('mithril');
-let login = require('login');
-let rs = require('rswebui');
+const m = require('mithril');
 
+const login = require('login');
+const home = require('home');
+const network = require('network/network');
+const people = require('people/people');
+const chat = require('chat/chat');
+const mail = require('mail/mail_resolver');
+const files = require('files/files_resolver');
+const channels = require('channels/channels');
+const config = require('config/config_resolver');
 
 const navIcon = {
   home: m('i.fas.fa-home'),
@@ -11,89 +18,86 @@ const navIcon = {
   mail: m('i.fas.fa-envelope'),
   files: m('i.fas.fa-folder-open'),
   channels: m('i.fas.fa-tv'),
-  config: m('i.fas.fa-cogs'),
+  config: m('i.fas.fa-cogs')
 };
 
 const navbar = () => {
-  active = 0;
+  let active = 0;
   return {
-    view: (vnode) => m('nav.tab-menu',
-      Object.keys(vnode.attrs.links)
-      .map((linkName, i) => m('a.tab-menu-item', {
-        href: vnode.attrs.links[linkName],
-        class: active === i ? 'selected-tab-item' : '',
-        oncreate: m.route.link,
-        onclick: () => {
-          active = i
-        },
-      }, [navIcon[linkName], linkName])),
-    ),
+    view: vnode =>
+      m(
+        'nav.tab-menu',
+        Object.keys(vnode.attrs.links).map((linkName, i) =>
+          m(
+            'a.tab-menu-item',
+            {
+              href: vnode.attrs.links[linkName],
+              class: active === i ? 'selected-tab-item' : '',
+              oncreate: m.route.link,
+              onclick: () => {
+                active = i;
+              }
+            },
+            [navIcon[linkName], linkName]
+          )
+        )
+      )
   };
 };
 
 const Layout = () => {
   return {
-    view: (vnode) => m('.content', [
-      m(navbar, {
-        links: {
-          home: '/home',
-          network: '/network',
-          people: '/people',
-          chat: '/chat',
-          mail: '/mail/inbox',
-          files: '/files/files',
-          channels: '/channels',
-          config: '/config/network',
-        },
-      }),
-      m('#tab-content', vnode.children),
-    ]),
+    view: vnode =>
+      m('.content', [
+        m(navbar, {
+          links: {
+            home: '/home',
+            network: '/network',
+            people: '/people',
+            chat: '/chat',
+            mail: '/mail/inbox',
+            files: '/files/files',
+            channels: '/channels',
+            config: '/config/network'
+          }
+        }),
+        m('#tab-content', vnode.children)
+      ])
   };
 };
 
-function onSuccess() {
-  let home = require('home');
-  let network = require('network/network');
-  let people = require('people/people');
-  let chat = require('chat/chat');
-  let mail = require('mail/mail_resolver');
-  let files = require('files/files_resolver');
-  let channels = require('channels/channels');
-  let config = require('config/config_resolver');
-
-  m.route(document.getElementById('main'), '/home', {
-    '/home': {
-      render: (v) => m(Layout, m(home))
-    },
-    '/network': {
-      render: (v) => m(Layout, m(network))
-    },
-    '/people': {
-      render: (v) => m(Layout, m(people))
-    },
-    '/chat': {
-      render: (v) => m(Layout, m(chat))
-    },
-    '/chat/:lobby': {
-      render: (v) => m(Layout, m(chat, v.attrs))
-    },
-    '/mail/:tab': {
-      render: (v) => m(Layout, m(mail, v.attrs))
-    },
-    '/mail/:tab/:msgId': {
-      render: (v) => m(Layout, m(mail, v.attrs))
-    },
-    '/files/:tab': {
-      render: (v) => m(Layout, m(files, v.attrs))
-    },
-    '/channels': {
-      render: (v) => m(Layout, m(channels))
-    },
-    '/config/:tab': {
-      render: (v) => m(Layout, m(config, v.attrs))
-    },
-  });
-};
-
-login.renderLoginPage(onSuccess);
-
+m.route(document.getElementById('main'), '/', {
+  '/': {
+    render: () => m(login)
+  },
+  '/home': {
+    render: () => m(Layout, m(home))
+  },
+  '/network': {
+    render: () => m(Layout, m(network))
+  },
+  '/people': {
+    render: () => m(Layout, m(people))
+  },
+  '/chat': {
+    render: () => m(Layout, m(chat))
+  },
+  '/chat/:lobby': {
+    render: v => m(Layout, m(chat, v.attrs))
+  },
+  '/mail/:tab': {
+    render: v => m(Layout, m(mail, v.attrs))
+  },
+  '/mail/:tab/:msgId': {
+    render: v => m(Layout, m(mail, v.attrs))
+  },
+  '/files/:tab': {
+    render: v => m(Layout, m(files, v.attrs))
+  },
+  '/channels': {
+    render: () => m(Layout, m(channels))
+  },
+  '/config/:tab': {
+    render: v => m(Layout, m(config, v.attrs))
+  }
+});