diff --git a/webui/components/session.js b/webui/components/session.js index 5ca5ce9b9..08a660deb 100644 --- a/webui/components/session.js +++ b/webui/components/session.js @@ -1,11 +1,10 @@ export default class Session { constructor({ req } = {}) { this._session = {}; - this._user = {}; try { if (req) { - this.session = { + this._session = { csrfToken: req.connection._httpMessage.locals._csrf } if (req.user) this._session.user = req.user; @@ -17,6 +16,7 @@ export default class Session { } catch(err) { // Handle if error reading from localStorage or server state is safe to ignore // (will just cause session data to be fetched by ajax) + return; } } @@ -47,16 +47,22 @@ export default class Session { async getSession(forceUpdate) { if (typeof windows === 'undefined') { - return new Promise(resolve => { resolve(this._session); }); + return new Promise(resolve => { + resolve(this._session); + }); } - if (forceUpdate === true) this._removeLocalStore('session'); + if (forceUpdate === true) { + this._session = {}; + this._removeLocalStore('session'); + } this._session = this._getLocalStore('session'); - if (this._session && Object.keys(this._session).length > 0) { - if (this._session.expires && this._session.expires > Date.now()) { - return new Promise(resolve => { resolve(this._session); }); - } + + if (this._session && Object.keys(this._session).length > 0 && this._session.expires && this._session.expires > Date.now()) { + return new Promise(resolve => { + resolve(this._session); + }); } return new Promise((resolve, reject) => { @@ -94,10 +100,11 @@ export default class Session { let xhr = new window.XMLHTTPRequest(); xhr.open('POST', '/login', true); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); - xhr.onreadystatechange = () => { + xhr.onreadystatechange = async () => { if (xhr.readyState === 4) { - if (xhr.status != 200) + if (xhr.status != 200) { reject(Error('XMLHttpRequest error: Error while attempting to login')); + } return resolve(true); } diff --git a/webui/pages/index.js b/webui/pages/index.js index 64c0ca13e..55eab2849 100644 --- a/webui/pages/index.js +++ b/webui/pages/index.js @@ -1,11 +1,13 @@ import React from 'react'; -import Link from 'next/prefetch'; +import Link from 'next/link'; import withSession from '../components/with-session'; const Index = ({ session, isLoggedIn }) => { return (

Hello Worlds!

+ {!isLoggedIn &&

Login

} + {isLoggedIn &&

Logout

}
); } diff --git a/webui/pages/login.js b/webui/pages/login.js new file mode 100644 index 000000000..69843f9f8 --- /dev/null +++ b/webui/pages/login.js @@ -0,0 +1,77 @@ +import React from 'react'; +import withSession from '../components/with-session'; +import Session from '../components/session'; + +class Login extends React.Component { + constructor (props) { + super(props); + this.state = { + username: '', + password: '' + }; + this.handleSubmit = this.handleSubmit.bind(this); + this.handleUsernameChange = this.handleUsernameChange.bind(this); + this.handlePasswordChange = this.handlePasswordChange.bind(this); + } + + handleUsernameChange(event) { + this.setState({ + username: event.target.value.trim(), + password: this.state.password + }); + } + handlePasswordChange(event) { + this.setState({ + username: this.state.username, + password: event.target.value.trim() + }); + } + + async handleSubmit(evnet) { + event.preventDefault(); + + const session = new Session(); + session + .login(this.username, this.password) + .then(() => { + this.props.url.push('/'); + }) + .catch(err => { + console.log(err); + }); + } + + render() { + let loginForm =
; + if (!this.props.session.user) { + loginForm = ( +
+
+ +

Login

+

+
+ +

+

+
+ +

+

+ +

+
+
+ ) + } + + return ( +
+

Authentication

+ {loginForm} +
+ ) + } +} + +export default withSession(Login); \ No newline at end of file diff --git a/webui/routes/auth.js b/webui/routes/auth.js index b2fa18383..84a6ed327 100644 --- a/webui/routes/auth.js +++ b/webui/routes/auth.js @@ -47,9 +47,11 @@ exports.configure = ({ } })); +/* server.use((req, res, next) => { csrf(req, res, next); }); + */ passport.use(new Strategy((username, password, cb) => { models.User.findOne({ where: {username: username} }).then(user => {