add initial login page. CSRF protection not applied

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);
         }

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 (
     <div>
       <h1>Hello Worlds!</h1>
+      {!isLoggedIn && <p><Link href='/login'><a>Login</a></Link></p>}
+      {isLoggedIn && <p><Link href='/logout'><a>Logout</a></Link></p>}
     </div>
   );
 }

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 = <div />;
+    if (!this.props.session.user) {
+      loginForm = (
+        <div>
+          <form id='login' method='post' action='/login' onSubmit={this.handleSubmit}>
+            <input name='_csrf' type='hidden' value={this.props.session.csrfToken} />
+            <h3>Login</h3>
+            <p>
+              <label htmlFor='username'>Username</label><br />
+              <input name='username' type='text' id='username' value={this.state.username} onChange={this.handleUsernameChange} />
+            </p>
+            <p>
+              <label htmlFor='password'>Password</label><br />
+              <input name='password' type='text' id='password' value={this.state.password} onChange={this.handlePasswordChange} />
+            </p>
+            <p>
+              <button id='submitButton' type='submit'>Login</button>
+            </p>
+          </form>
+        </div>
+      )
+    }
+
+    return (
+      <div>
+        <h2>Authentication</h2>
+        {loginForm}
+      </div>
+    )
+  }
+}
+
+export default withSession(Login);

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 => {