diff --git a/webui-src/.eslintrc.json b/webui-src/.eslintrc.json index f6f7dc7..09c591c 100644 --- a/webui-src/.eslintrc.json +++ b/webui-src/.eslintrc.json @@ -15,7 +15,7 @@ "rules": { "indent": [ "error", - 4 + 2 ], "linebreak-style": [ "error", diff --git a/webui-src/app/login.js b/webui-src/app/login.js index fcfec1a..b8bb434 100644 --- a/webui-src/app/login.js +++ b/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; diff --git a/webui-src/app/main.js b/webui-src/app/main.js index 484403c..c263863 100644 --- a/webui-src/app/main.js +++ b/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)) + } +});