user auth - frontend and backend

.gitignore

@@ -1 +1,2 @@
+.DS_Store
 /node_modules

app.js

@@ -1,11 +1,15 @@
-var createError = require('http-errors');
-var express = require('express');
-var path = require('path');
-var cookieParser = require('cookie-parser');
-var logger = require('morgan');
+const createError = require('http-errors');
+const express = require('express');
+const bodyParser = require('body-parser');
+const path = require('path');
+const cookieParser = require('cookie-parser');
+const logger = require('morgan');
+const MongoClient = require('mongodb').MongoClient;
+const assert = require('assert');
+const cookieSession = require('cookie-session');
 
-var indexRouter = require('./routes/index');
-var usersRouter = require('./routes/users');
+const apiRouter = require('./app/routes/api');
+const authRouter = require('./app/routes/auth');
 
 var app = express();
 
@@ -15,20 +19,30 @@ app.set('view engine', 'jade');
 
 app.use(logger('dev'));
 app.use(express.json());
+app.use(bodyParser.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
 
-app.use('/', indexRouter);
-app.use('/users', usersRouter);
+app.use(cookieSession({
+  name: 'session',
+  secret: 'flkasjgoeeovneogsfafjasdjfslkjlgjs',
+  maxAge: 365 * 24 * 60 * 60 * 1000 // 1 year
+}));
+
+app.use('/api', apiRouter);
+app.use('/api/auth', authRouter);
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname + '/client/build/index.html'));
+});
 
 // catch 404 and forward to error handler
-app.use(function(req, res, next) {
+app.use(function (req, res, next) {
   next(createError(404));
 });
 
 // error handler
-app.use(function(err, req, res, next) {
+app.use(function (err, req, res, next) {
   // set locals, only providing error in development
   res.locals.message = err.message;
   res.locals.error = req.app.get('env') === 'development' ? err : {};
@@ -38,4 +52,18 @@ app.use(function(err, req, res, next) {
   res.render('error');
 });
 
+function main() {
+  console.log('startup dgdg');
+
+  const dbUrl = 'mongodb://localhost:27017';
+  const dbName = 'dgdg-dev';
+  let client = new MongoClient(dbUrl, { useUnifiedTopology: true });
+  client.connect(function (err) {
+    assert.equal(null, err);
+    app.locals.database = client.db(dbName);
+  });
+};
+
+main();
+
 module.exports = app;

app/Authenticator.js

@@ -0,0 +1,30 @@
+const bcrypt = require('bcryptjs');
+
+class Authenticator {
+
+  constructor(database) {
+    this.database = database;
+  };
+
+  getAuthenticatedUser(req, callback) {
+    if (req.session.userId) {
+      let collection = this.database.collection('users');
+      collection.findOne({ id: req.session.userId }, {}, function (dbErr, dbRes) {
+        if (dbErr === null) {
+          if (dbRes === null) {
+            callback(null);
+          } else {
+            callback(dbRes);
+          }
+        } else {
+          callback(null);
+        }
+      });
+    } else {
+      callback(null);
+    }
+  };
+
+};
+
+module.exports = Authenticator;

app/controllers/UserController.js

@@ -0,0 +1,106 @@
+const { v4: uuidv4 } = require('uuid');
+const bcrypt = require('bcryptjs');
+
+class UserController {
+
+  constructor(database) {
+    this.database = database;
+  };
+
+  createUser(data, scb, ecb) {
+    console.log('UserController: create user: ' + data.username);
+    let collection = this.database.collection('users');
+    collection.findOne({ username: data.username }, {}, function (dbErr, dbRes) {
+      if (dbErr === null) {
+        if (dbRes === null) {
+          bcrypt.hash(data.password, 10, (err, hash) => {
+            if (err) {
+              ecb({
+                code: 'app error',
+                message: 'could not hash password'
+              });
+            }
+            let user = {
+              id: uuidv4(),
+              username: data.username,
+              passwordHash: hash,
+              role: 'user'
+            };
+            collection.insertOne(user, function (insertErr, insertRes) {
+              if (insertErr === null) {
+                let res = {
+                  id: user.id,
+                  username: user.username,
+                  role: user.role
+                };
+                scb(res);
+              } else {
+                ecb({
+                  code: 'database error. could not create user',
+                  message: insertErr.message
+                });
+              }
+            });
+          });
+        } else {
+          ecb({
+            code: 'app error',
+            message: 'user already exists'
+          })
+        }
+      } else {
+        ecb({
+          code: 'database error',
+          message: dbErr.message
+        });
+      }
+    });
+  };
+
+  login(data, scb, ecb) {
+    console.log('UserController: login: ' + data.username);
+    let collection = this.database.collection('users');
+    collection.findOne({ username: data.username }, {}, function (dbErr, user) {
+      if (dbErr === null) {
+        if (user === null) {
+          ecb({
+            code: 'app error',
+            message: 'user already exists'
+          });
+        } else {
+          bcrypt.compare(data.password, user.passwordHash, (cryptErr, cryptRes) => {
+            if (cryptErr) {
+              ecb({
+                code: 'app error',
+                message: 'could not hash password'
+              });
+            } else {
+              if (cryptRes === true) {
+                let res = {
+                  id: user.id,
+                  username: user.username,
+                  role: user.role
+                };
+                scb(res);
+              } else {
+                ecb({ code: 'user error', message: 'authentication failed' });
+              }
+            }
+          });
+        }
+      } else {
+        ecb({
+          code: 'database error',
+          message: dbErr.message
+        });
+      }
+    });
+  };
+
+  getUserData(user, scb, ecb) {
+    scb({});
+  };
+
+};
+
+module.exports = UserController;

app/routes/api.js

@@ -0,0 +1,35 @@
+const express = require('express');
+const router = express.Router();
+const UserController = require('../controllers/UserController');
+const Authenticator = require('../Authenticator');
+
+router.get('/', function (req, res, next) {
+  let rnd = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
+  res.send('respond with some api calls - ' + rnd);
+});
+
+router.get('/user', function (req, res, next) {
+  app = req.app;
+  db = app.locals.database;
+
+  let authenticator = new Authenticator(db);
+  let ctrl = new UserController(db);
+
+  let scb = function (data) {
+    res.json(data);
+  };
+
+  let ecb = function (err) {
+    res.status(400).send(err);
+  };
+
+  authenticator.getAuthenticatedUser(req, function (user) {
+    if (user) {
+      ctrl.getUserData(user, scb, ecb);
+    } else {
+      ecb({ code: 'app error', message: 'user not logged in.' });
+    }
+  });
+});
+
+module.exports = router;

app/routes/auth.js

@@ -0,0 +1,83 @@
+const express = require('express');
+const router = express.Router();
+const UserController = require('../controllers/UserController');
+const Authenticator = require('../Authenticator');
+
+router.get('/identity', function (req, res, next) {
+  app = req.app;
+  db = app.locals.database;
+
+  let authenticator = new Authenticator(db);
+
+  authenticator.getAuthenticatedUser(req, function (user) {
+    if (user) {
+      res.json({
+        id: user.id,
+        username: user.username,
+        role: user.role
+      });
+    } else {
+      res.json({});
+    }
+  });
+});
+
+router.post('/register', function (req, res, next) {
+  app = req.app;
+  db = app.locals.database;
+
+  let authenticator = new Authenticator(db);
+  let ctrl = new UserController(db);
+
+  let scb = function (data) {
+    req.session.userId = data.id;
+    res.json(data);
+  };
+
+  let ecb = function (err) {
+    console.error(err.code + ': ' + err.message);
+    res.status(400).send(err);
+  };
+
+  authenticator.getAuthenticatedUser(req, function (user) {
+    if (user) {
+      ecb({ code: 'app error', message: 'user already logged in.' });
+    } else {
+      ctrl.createUser(req.body, scb, ecb);
+    }
+  });
+});
+
+router.post('/login', function (req, res, next) {
+  app = req.app;
+  db = app.locals.database;
+
+  let authenticator = new Authenticator(db);
+  let ctrl = new UserController(db);
+
+  let scb = function (data) {
+    req.session.userId = data.id;
+    res.json(data);
+  };
+
+  let ecb = function (err) {
+    console.error(err.code + ': ' + err.message);
+    res.status(400).send(err);
+  };
+
+  authenticator.getAuthenticatedUser(req, function (user) {
+    if (user) {
+      ecb({ code: 'app error', message: 'user already logged in.' });
+    } else {
+      ctrl.login(req.body, scb, ecb);
+    }
+  });
+
+});
+
+router.get('/logout', function (req, res, next) {
+  req.session = null;
+  res.json({});
+});
+
+module.exports = router;

bin/www

@@ -5,7 +5,7 @@
  */
 
 var app = require('../app');
-var debug = require('debug')('dgdg:server');
+var debug = require('debug')('nodeproto:server');
 var http = require('http');
 
 /**

client/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

client/README.md

@@ -0,0 +1,68 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br>
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br>
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `npm run build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

client/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "antd": "^4.0.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.1.2",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "proxy": "http://localhost:9051",
+  "devDependencies": {
+    "react-scripts": "3.4.1"
+  }
+}

client/public/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>DGDG</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

client/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

client/src/App.css

@@ -0,0 +1,39 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 40vmin;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@font-face {
+  font-family: 'Super-FamiFont';
+  src: url('./fonts/Super-FamiFont.ttf.eot'); /* IE9 Compat Modes */
+  src: url('./fonts/Super-FamiFont.ttf.woff') format('woff'), /* Pretty Modern Browsers */
+       url('./fonts/Super-FamiFont.ttf.svg') format('svg'); /* Legacy iOS */
+}

client/src/App.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import AppRouter from './router/AppRouter';
+import { Provider } from 'react-redux';
+import store from './store'
+import './App.css';
+
+class App extends Component {
+  render() {
+    return (
+      <Provider store={store}>
+        <AppRouter />
+      </Provider>
+    );
+  }
+}
+
+export default App;

client/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

client/src/actions/appActions.js

@@ -0,0 +1,86 @@
+import ApiService from '../services/ApiService';
+import {
+    QUESTIONS_LOADED,
+    QUESTIONS_LOAD_ERROR,
+    USER_AUTHENTICATED,
+    USER_LOGGED_OUT,
+    USER_REGISTERED
+} from './types';
+
+export const loadQuestions = (userId) => dispatch => {
+    const service = new ApiService();
+    const scb = (data) => {
+        dispatch({
+            type: QUESTIONS_LOADED,
+            data: data
+        });
+    }
+    const ecb = (error) => {
+        dispatch({
+            type: QUESTIONS_LOAD_ERROR,
+            error: error
+        });
+    }
+    service.getQuestions(userId, scb, ecb);
+};
+
+export const loginUser = (username, password, onSuccess, onError) => dispatch => {
+    const service = new ApiService();
+    const scb = (data) => {
+        dispatch({
+            type: USER_AUTHENTICATED,
+            data: data
+        });
+        if (onSuccess) onSuccess(data);
+    };
+    const ecb = (error) => {
+        if (onError) onError(error);
+    };
+    service.login(username, password, scb, ecb);
+};
+
+export const registerUser = (username, password, onSuccess, onError) => dispatch => {
+    const service = new ApiService();
+    const scb = (data) => {
+        dispatch({
+            type: USER_REGISTERED,
+            data: data
+        });
+        if (onSuccess) onSuccess(data);
+    };
+    const ecb = (error) => {
+        if (onError) onError(error);
+    };
+    service.register(username, password, scb, ecb);
+};
+
+export const getIdentity = () => dispatch => {
+    const service = new ApiService();
+    const scb = (data) => {
+        if (data.id) {
+            dispatch({
+                type: USER_AUTHENTICATED,
+                data: data
+            });
+        }
+    };
+    const ecb = (error) => { };
+
+    service.identity(scb, ecb);
+};
+
+export const logoutUser = (onSuccess, onError) => dispatch => {
+    const service = new ApiService();
+    const scb = () => {
+        dispatch({
+            type: USER_LOGGED_OUT,
+            data: {}
+        });
+        if (onSuccess) onSuccess();
+    };
+    const ecb = (error) => {
+        if (onError) onError(error);
+     };
+
+    service.logoutUser(scb, ecb);
+};

client/src/actions/types.js

@@ -0,0 +1,5 @@
+export const USER_AUTHENTICATED = 'USER_AUTHENTICATED';
+export const USER_LOGGED_OUT = 'USER_LOGGED_OUT';
+export const USER_REGISTERED = 'USER_REGISTERED';
+export const QUESTIONS_LOADED = 'QUESTIONS_LOADED';
+export const QUESTIONS_LOAD_ERROR = 'QUESTIONS_LOADED';

client/src/components/AppHeader/AppHeader.js

@@ -0,0 +1,112 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { logoutUser } from '../../actions/appActions';
+import { Link } from 'react-router-dom';
+import { withRouter, Redirect } from "react-router";
+import { Layout, Menu, Typography } from 'antd';
+import 'antd/dist/antd.css';
+import {
+  UserOutlined
+} from '@ant-design/icons';
+
+const { Header } = Layout;
+const { SubMenu } = Menu;
+
+const styles = {
+  logo: {
+    float: 'left',
+    color: 'white',
+    fontSize: '1.4em',
+    marginRight: 30,
+    fontFamily: 'Helvetica'
+  },
+
+  logoImage: {
+    float: 'left',
+    color: 'white',
+    marginRight: 30,
+    marginTop: 7,
+    height: 50,
+    width: 50
+  }
+};
+
+class AppHeader extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      logoutSuccess: false
+    }
+  }
+
+  handleClick = e => {
+    switch (e.key) {
+      case 'logout':
+        console.log('logout clicked');
+        this.props.logoutUser(() => {
+          this.setState({
+            logoutSuccess: true
+          });
+        }, (error) => {
+          console.log('error logging out: ' + error);
+        });
+        break;
+      default:
+        break;
+    }
+  };
+
+  render() {
+
+    let userInfo = (
+      <Link to="/login">
+        <Typography>login</Typography>
+      </Link>
+    );
+
+    const redirectAfterLogout = this.state.logoutSuccess ? <Redirect to='/login' /> : <div></div>
+
+    if (this.props.user) {
+      userInfo = (
+        <Menu theme='dark' onClick={this.handleClick} mode="horizontal">
+          <SubMenu
+            key="user"
+            title={
+              <span>
+                <UserOutlined />
+                <span>{this.props.user.username}</span>
+              </span>
+            }>
+            <Menu.Item key="logout">logout</Menu.Item>
+          </SubMenu>
+        </Menu>
+      )
+    };
+
+    return (
+      <Header style={{ position: 'fixed', zIndex: 1, width: '100%', background: '#3399cc' }}>
+        {redirectAfterLogout}
+        <div style={styles.logo}>
+          <img style={styles.logoImage} src='images/logo.png' alt='' />
+          <Link style={styles.logo} to="/">Die Gesellschaft der Gegenwart</Link>
+        </div>
+        <div style={{ float: 'right' }}>
+          {userInfo}
+        </div>
+      </Header>
+    )
+  }
+};
+
+AppHeader.propTypes = {
+  logoutUser: PropTypes.func.isRequired,
+  user: PropTypes.object
+};
+
+const mapStateToProps = state => ({
+  user: state.appData.user
+});
+
+export default withRouter(connect(mapStateToProps, { logoutUser })(AppHeader));

client/src/components/Login/Login.js

@@ -0,0 +1,130 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { loginUser } from '../../actions/appActions';
+import { Form, Input, Button, Typography } from 'antd';
+import { Redirect } from 'react-router-dom';
+
+const layout = {
+  labelCol: {
+    span: 8,
+  },
+  wrapperCol: {
+    span: 16,
+  },
+};
+const tailLayout = {
+  wrapperCol: {
+    offset: 8,
+    span: 16,
+  },
+};
+
+class Login extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loginErrorMessage: undefined,
+      loginSuccess: false
+    }
+  }
+
+  onFinish = values => {
+    console.log('on finish');
+    this.props.loginUser(values.username, values.password, (user) => {
+      this.setState({
+        loginErrorMessage: undefined,
+        loginSuccess: true
+      });
+    }, (error) => {
+      this.setState({
+        loginErrorMessage: error.message
+      });
+    });
+  };
+
+  onFinishFailed = errorInfo => {
+    console.log('Failed:', errorInfo);
+  };
+
+
+
+  render() {
+
+    let errorMessageStyle = { display: 'none' };
+    if (this.state.loginErrorMessage) {
+      errorMessageStyle = {};
+    }
+
+    const redirectAfterLogin = this.state.loginSuccess ? <Redirect to='/' /> : <div></div>
+
+
+    return (
+      <div>
+        {redirectAfterLogin}
+        <h2 style={{ textAlign: 'center' }}>Login</h2>
+        <Form
+          {...layout}
+          name="basic"
+          initialValues={{
+            remember: true,
+          }}
+          onFinish={this.onFinish}
+          onFinishFailed={this.onFinishFailed}
+        >
+          <Form.Item
+            label="Username"
+            name="username"
+            rules={[
+              {
+                required: true,
+                message: 'Please input your username!',
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="Password"
+            name="password"
+            rules={[
+              {
+                required: true,
+                message: 'Please input your password!',
+              },
+            ]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Form.Item
+            style={errorMessageStyle}
+            label=" "
+            colon={false}
+            name="error message">
+            <Typography.Text className="ant-form-text" type="danger">
+              {this.state.loginErrorMessage}
+            </Typography.Text>
+          </Form.Item>
+
+          <Form.Item {...tailLayout}>
+            <Button type="primary" htmlType="submit">
+              Submit
+        </Button>
+          </Form.Item>
+        </Form>
+      </div>
+    )
+  };
+
+};
+
+Login.propTypes = {
+  loginUser: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => ({});
+
+export default connect(mapStateToProps, { loginUser })(Login);

client/src/components/QuestionList/QuestionList.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { loadQuestions } from '../../actions/appActions';
+import { connect } from 'react-redux';
+
+class QuestionList extends Component {
+
+  render() {
+    return (
+      <h1>Questions</h1>
+    )
+  };
+};
+
+QuestionList.propTypes = {
+  loadQuestions: PropTypes.func.isRequired,
+  questions: PropTypes.array,
+};
+
+const mapStateToProps = state => ({
+  questions: state.appData.questions,
+  questionsLoadError: state.appData.questionsLoadError
+});
+
+export default connect(mapStateToProps, { loadQuestions })(QuestionList);

client/src/components/Register/Register.js

@@ -0,0 +1,118 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { registerUser } from '../../actions/appActions';
+import { Form, Input, Button, Typography } from 'antd';
+
+const layout = {
+  labelCol: {
+    span: 8,
+  },
+  wrapperCol: {
+    span: 16,
+  },
+};
+const tailLayout = {
+  wrapperCol: {
+    offset: 8,
+    span: 16,
+  },
+};
+
+class Register extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      registerErrorMessage: undefined
+    }
+  }
+
+  onFinish = values => {
+    this.props.registerUser(values.username, values.password, (user) => {
+      this.setState({
+        registerErrorMessage: undefined
+      });
+    }, (error) => {
+      this.setState({
+        registerErrorMessage: error.message
+      });
+    });
+  };
+
+  onFinishFailed = errorInfo => { };
+
+  render() {
+
+    let errorMessageStyle = { display: 'none' };
+    if (this.state.registerErrorMessage) {
+      errorMessageStyle = {};
+    }
+
+    return (
+      <div>
+        <h2 style={{ textAlign: 'center' }}>Register</h2>
+        <Form
+          {...layout}
+          name="basic"
+          initialValues={{
+            remember: true,
+          }}
+          onFinish={this.onFinish}
+          onFinishFailed={this.onFinishFailed}
+        >
+          <Form.Item
+            label="Username"
+            name="username"
+            rules={[
+              {
+                required: true,
+                message: 'Please input your username!',
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="Password"
+            name="password"
+            rules={[
+              {
+                required: true,
+                message: 'Please input your password!',
+              },
+            ]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Form.Item
+            style={errorMessageStyle}
+            label=" "
+            colon={false}
+            name="error message">
+            <Typography.Text className="ant-form-text" type="danger">
+              {this.state.registerErrorMessage}
+            </Typography.Text>
+          </Form.Item>
+
+          <Form.Item {...tailLayout}>
+            <Button type="primary" htmlType="submit">
+              Submit
+        </Button>
+          </Form.Item>
+        </Form>
+      </div>
+    )
+  };
+
+};
+
+Register.propTypes = {
+  registerUser: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => ({});
+
+export default connect(mapStateToProps, { registerUser })(Register);

client/src/components/index.js

@@ -0,0 +1,9 @@
+import AppHeader from './AppHeader/AppHeader';
+import Login from './Login/Login';
+import Register from './Register/Register';
+
+export {
+  AppHeader,
+  Login,
+  Register
+};

client/src/fonts/Super-FamiFont.ttf.svg

@@ -0,0 +1,518 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg>
+<metadata>
+Created by FontForge 20090622 at Mon Jul  2 10:48:03 2018
+ By ffonts
+Made by 629Fonts. 2017. All Rights Reserved
+</metadata>
+<defs>
+<font id="SuperFamiFont" horiz-adv-x="252" >
+  <font-face 
+    font-family="Super FamiFont"
+    font-weight="400"
+    font-stretch="normal"
+    units-per-em="2048"
+    panose-1="2 0 5 0 0 0 0 0 0 0"
+    ascent="1638"
+    descent="-410"
+    x-height="1434"
+    cap-height="1434"
+    bbox="91 0 2818 1664"
+    underline-thickness="150"
+    underline-position="-292"
+    unicode-range="U+0020-U+F002"
+  />
+<missing-glyph horiz-adv-x="1914" 
+d="M381 1664h128v-1408h-128v1408zM637 1664h128v-1408h-128v1408zM1149 384v1280h640v-1664h-1664v1664h128v-1536h640v1536h128v-1280h128zM1021 256v-128h128v128h-128z" />
+    <glyph glyph-name=".notdef" horiz-adv-x="1914" 
+d="M381 1664h128v-1408h-128v1408zM637 1664h128v-1408h-128v1408zM1149 384v1280h640v-1664h-1664v1664h128v-1536h640v1536h128v-1280h128zM1021 256v-128h128v128h-128z" />
+    <glyph glyph-name=".null" 
+ />
+    <glyph glyph-name="nonmarkingreturn" 
+ />
+    <glyph glyph-name="space" unicode=" " horiz-adv-x="500" 
+ />
+    <glyph glyph-name="space" unicode="&#xa0;" horiz-adv-x="500" 
+ />
+    <glyph glyph-name="exclam" unicode="!" 
+ />
+    <glyph glyph-name="quotedbl" unicode="&#x22;" 
+ />
+    <glyph glyph-name="numbersign" unicode="#" 
+ />
+    <glyph glyph-name="dollar" unicode="$" 
+ />
+    <glyph glyph-name="percent" unicode="%" 
+ />
+    <glyph glyph-name="ampersand" unicode="&#x26;" 
+ />
+    <glyph glyph-name="quotesingle" unicode="'" 
+ />
+    <glyph glyph-name="parenleft" unicode="(" 
+ />
+    <glyph glyph-name="parenright" unicode=")" 
+ />
+    <glyph glyph-name="asterisk" unicode="*" 
+ />
+    <glyph glyph-name="plus" unicode="+" 
+ />
+    <glyph glyph-name="comma" unicode="," 
+ />
+    <glyph glyph-name="hyphen" unicode="-" horiz-adv-x="1223" 
+d="M208 873h979v-294h-979v294z" />
+    <glyph glyph-name="hyphen" unicode="&#xad;" horiz-adv-x="1223" 
+d="M208 873h979v-294h-979v294z" />
+    <glyph glyph-name="period" unicode="." 
+ />
+    <glyph glyph-name="slash" unicode="/" 
+ />
+    <glyph glyph-name="zero" unicode="0" horiz-adv-x="2046" 
+d="M1925 717q0 -186 -62 -321.5t-178.5 -223t-283 -130t-378.5 -42.5t-378.5 42.5t-282.5 130t-178.5 223t-62.5 321.5t62.5 321.5t178.5 223t282.5 130t378.5 42.5t378.5 -42.5t283 -130t178.5 -223t62 -321.5zM1023 303q444 0 444 414t-444 414t-444 -414t444 -414z" />
+    <glyph glyph-name="one" unicode="1" horiz-adv-x="910" 
+d="M785 1434v-1434h-459v1134h-207v300h666z" />
+    <glyph glyph-name="two" unicode="2" horiz-adv-x="1843" 
+d="M122 0v435q0 209 128 320.5t370 111.5h484q161 0 161 135q0 132 -161 132h-942v300h1063q239 0 368.5 -111.5t129.5 -320.5t-131 -320.5t-381 -111.5h-473q-158 0 -158 -135v-138h1103v-297h-1561z" />
+    <glyph glyph-name="three" unicode="3" horiz-adv-x="1789" 
+d="M120 1434h1049q239 0 368.5 -111.5t129.5 -320.5q0 -197 -194 -284q194 -77 194 -286t-129.5 -320.5t-368.5 -111.5h-1049v300h928q161 0 161 132q0 138 -161 138h-828v297h828q161 0 161 135q0 132 -161 132h-928v300z" />
+    <glyph glyph-name="four" unicode="4" horiz-adv-x="2017" 
+d="M1213 0v254h-1091v300l907 880h642v-880h227v-300h-227v-254h-458zM1213 1183l-625 -629h625v629z" />
+    <glyph glyph-name="five" unicode="5" horiz-adv-x="1816" 
+d="M124 1434h1531v-300h-1073v-267h615q242 0 370 -111.5t128 -320.5q0 -212 -128 -323.5t-370 -111.5h-1073v297h955q158 0 158 138q0 135 -158 135h-955v864z" />
+    <glyph glyph-name="six" unicode="6" horiz-adv-x="1848" 
+d="M1024 0q-483 0 -692.5 180.5t-209.5 536.5t209.5 536.5t622.5 180.5h649v-297h-591q-215 0 -310.5 -66t-112.5 -198h641q242 0 370 -124.5t128 -313.5q0 -192 -153 -313.5t-551 -121.5zM589 579q7 -129 102.5 -204t320.5 -75q258 0 258 144q0 135 -158 135h-523z" />
+    <glyph glyph-name="seven" unicode="7" horiz-adv-x="1811" 
+d="M1170 1134h-1051v300h1573v-300l-757 -1134h-522z" />
+    <glyph glyph-name="eight" unicode="8" horiz-adv-x="1816" 
+d="M759 1134q-161 0 -161 -132q0 -135 161 -135h299q161 0 161 135q0 132 -161 132h-299zM1078 300q161 0 161 132q0 138 -161 138h-339q-161 0 -161 -138q0 -132 161 -132h339zM1179 1434q239 0 363.5 -111.5t124.5 -320.5q0 -187 -234 -284q264 -87 264 -326
+q0 -169 -129.5 -280.5t-368.5 -111.5h-581q-239 0 -368.5 111.5t-129.5 280.5q0 239 264 326q-234 97 -234 284q0 209 124.5 320.5t363.5 111.5h541z" />
+    <glyph glyph-name="nine" unicode="9" horiz-adv-x="1847" 
+d="M914 1434q423 0 617.5 -180.5t194.5 -536.5t-209.5 -536.5t-622.5 -180.5h-649v297h591q215 0 310.5 66t112.5 198h-641q-242 0 -370 109.5t-128 298.5q0 192 188 328.5t606 136.5zM1259 855q-7 129 -87.5 204t-285.5 75q-308 0 -308 -154q0 -125 158 -125h523z" />
+    <glyph glyph-name="colon" unicode=":" 
+ />
+    <glyph glyph-name="semicolon" unicode=";" 
+ />
+    <glyph glyph-name="semicolon" unicode="&#x37e;" 
+ />
+    <glyph glyph-name="less" unicode="&#x3c;" 
+ />
+    <glyph glyph-name="equal" unicode="=" 
+ />
+    <glyph glyph-name="greater" unicode="&#x3e;" 
+ />
+    <glyph glyph-name="question" unicode="?" 
+ />
+    <glyph glyph-name="at" unicode="@" 
+ />
+    <glyph glyph-name="A" unicode="A" horiz-adv-x="1845" 
+d="M630 0q-253 0 -390 117.5t-137 325.5q0 207 137 324.5t390 117.5h636v52q0 109 -51.5 153t-177.5 44h-825v300h842q355 0 512.5 -135t157.5 -441v-858h-1094zM1266 591h-513q-185 0 -185 -148q0 -149 185 -149h513v297z" />
+    <glyph glyph-name="B" unicode="B" horiz-adv-x="1755" 
+d="M581 579v-279h414q196 0 196 139q0 140 -196 140h-414zM1140 1434q205 0 323 -95t118 -285q0 -95 -28 -154.5t-65.5 -94t-75 -49.5t-57.5 -20q39 -6 89.5 -25.5t96 -61.5t77 -107t31.5 -162q0 -184 -125 -282t-338 -98h-1063v1434h1017zM934 873q96 0 142.5 31t46.5 101
+q0 69 -46.5 100.5t-142.5 31.5h-353v-264h353z" />
+    <glyph glyph-name="C" unicode="C" horiz-adv-x="1704" 
+d="M1586 1131h-549q-250 0 -362 -97t-112 -317t110 -317t361 -97h552v-303h-666q-404 0 -609 180.5t-205 536.5q0 355 205 536t609 181h666v-303z" />
+    <glyph glyph-name="D" unicode="D" horiz-adv-x="1845" 
+d="M581 1131v-828h224q251 0 366 97t115 317t-117 317t-367 97h-221zM919 1434q404 0 609 -181t205 -536q0 -356 -205 -536.5t-609 -180.5h-796v1434h796z" />
+    <glyph glyph-name="E" unicode="E" horiz-adv-x="1714" 
+d="M1587 1137h-591q-215 0 -310.5 -66t-112.5 -198h1014v-294h-1014q7 -129 102.5 -204t320.5 -75h591v-300h-649q-413 0 -622.5 180.5t-209.5 536.5t209.5 536.5t622.5 180.5h649v-297z" />
+    <glyph glyph-name="F" unicode="F" horiz-adv-x="1721" 
+d="M116 717q0 356 209.5 536.5t622.5 180.5h649v-297h-591q-215 0 -310.5 -66t-112.5 -198h1014v-294h-1023v-579h-458v717z" />
+    <glyph glyph-name="G" unicode="G" horiz-adv-x="1813" 
+d="M1686 854v-854h-766q-404 0 -609 180.5t-205 536.5q0 355 205 536t609 181h766v-293h-649q-250 0 -362 -97t-112 -327q0 -220 110 -317t361 -97h194v267h-296v284h754z" />
+    <glyph glyph-name="H" unicode="H" horiz-adv-x="1908" 
+d="M581 567v-567h-458v1434h458v-567h742v567h458v-1434h-458v567h-742z" />
+    <glyph glyph-name="I" unicode="I" horiz-adv-x="708" 
+d="M581 1434v-1434h-458v1434h458z" />
+    <glyph glyph-name="J" unicode="J" horiz-adv-x="1410" 
+d="M1288 1434v-717q0 -356 -205 -536.5t-609 -180.5h-366v303h252q251 0 361 97t110 317v717h457z" />
+    <glyph glyph-name="K" unicode="K" horiz-adv-x="1871" 
+d="M1721 1434l-693 -641l754 -793h-546l-655 696v-696h-458v1434h458v-585l607 585h533z" />
+    <glyph glyph-name="L" unicode="L" horiz-adv-x="1807" 
+d="M575 1434v-917q0 -214 251 -214h872v-303h-986q-594 0 -594 517v917h457z" />
+    <glyph glyph-name="M" unicode="M" horiz-adv-x="2408" 
+d="M1831 0v858q0 144 -72 205.5t-239 61.5h-95v-1125h-458v1125h-386v-1125h-458v1434h1475q362 0 526 -141t164 -453v-840h-457z" />
+    <glyph glyph-name="N" unicode="N" horiz-adv-x="1853" 
+d="M1109 1434q292 0 458 -141t166 -453v-840h-458v843q0 150 -77 216t-201 66h-416v-1125h-458v1434h986z" />
+    <glyph glyph-name="O" unicode="O" horiz-adv-x="2022" 
+d="M1910 717q0 -186 -62 -321.5t-178.5 -223t-283 -130t-378.5 -42.5t-378.5 42.5t-282.5 130t-178.5 223t-62.5 321.5t62.5 321.5t178.5 223t282.5 130t378.5 42.5t378.5 -42.5t283 -130t178.5 -223t62 -321.5zM1008 303q444 0 444 414t-444 414t-444 -414t444 -414z" />
+    <glyph glyph-name="P" unicode="P" horiz-adv-x="1800" 
+d="M123 0v1434h945q321 0 471.5 -127.5t150.5 -348.5q0 -218 -149 -345.5t-473 -127.5h-487v-485h-458zM1208 957q0 180 -221 180h-406v-358h406q221 0 221 178z" />
+    <glyph glyph-name="Q" unicode="Q" horiz-adv-x="2028" 
+d="M1008 303q444 0 444 414t-444 414t-444 -414t444 -414zM1008 0q-212 0 -378.5 42.5t-282.5 130t-178.5 223t-62.5 321.5t62.5 321.5t178.5 223t282.5 130t378.5 42.5t378.5 -42.5t283 -130t178.5 -223t62 -321.5q0 -256 -197 -417h197v-300h-902z" />
+    <glyph glyph-name="R" unicode="R" horiz-adv-x="1881" 
+d="M1268 940q0 197 -221 197h-466v-398h466q221 0 221 201zM926 445h-345v-445h-458v1434h1035q301 0 446.5 -137.5t145.5 -355.5q0 -221 -144 -358q-73 -70 -186 -104l363 -479h-537z" />
+    <glyph glyph-name="S" unicode="S" horiz-adv-x="1817" 
+d="M145 0v297h945q158 0 158 138q0 135 -158 135h-473q-249 0 -380.5 111.5t-131.5 320.5t129.5 320.5t368.5 111.5h1063v-300h-941q-162 0 -162 -132q0 -135 162 -135h483q243 0 370.5 -111.5t127.5 -320.5q0 -212 -127.5 -323.5t-370.5 -111.5h-1063z" />
+    <glyph glyph-name="T" unicode="T" horiz-adv-x="1789" 
+d="M662 1134h-557v300h1573v-300h-557v-1134h-459v1134z" />
+    <glyph glyph-name="U" unicode="U" horiz-adv-x="1825" 
+d="M742 0q-292 0 -458 141t-166 453v840h458v-843q0 -150 77 -216t201 -66h386v1125h458v-1434h-956z" />
+    <glyph glyph-name="V" unicode="V" horiz-adv-x="2073" 
+d="M777 0l-683 1434h479l468 -1017l468 1017h468l-683 -1434h-517z" />
+    <glyph glyph-name="W" unicode="W" horiz-adv-x="2916" 
+d="M1785 0l-329 976l-330 -976h-503l-529 1434h473l339 -981l311 981h502l315 -981l335 981h449l-530 -1434h-503z" />
+    <glyph glyph-name="X" unicode="X" horiz-adv-x="1984" 
+d="M1270 726l621 -726h-532l-373 467l-376 -467h-519l623 717l-606 717h516l373 -463l379 463h498z" />
+    <glyph glyph-name="Y" unicode="Y" horiz-adv-x="1993" 
+d="M766 462l-674 972h516l394 -637l398 637h498l-674 -972v-462h-458v462z" />
+    <glyph glyph-name="Z" unicode="Z" horiz-adv-x="1706" 
+d="M1589 1434v-300l-864 -834h864v-300h-1473v300l864 834h-864v300h1473z" />
+    <glyph glyph-name="bracketleft" unicode="[" 
+ />
+    <glyph glyph-name="backslash" unicode="\" 
+ />
+    <glyph glyph-name="bracketright" unicode="]" 
+ />
+    <glyph glyph-name="asciicircum" unicode="^" 
+ />
+    <glyph glyph-name="underscore" unicode="_" 
+ />
+    <glyph glyph-name="grave" unicode="`" 
+ />
+    <glyph glyph-name="a" unicode="a" horiz-adv-x="1845" 
+d="M630 0q-253 0 -390 117.5t-137 325.5q0 207 137 324.5t390 117.5h636v52q0 109 -51.5 153t-177.5 44h-825v300h842q355 0 512.5 -135t157.5 -441v-858h-1094zM1266 591h-513q-185 0 -185 -148q0 -149 185 -149h513v297z" />
+    <glyph glyph-name="b" unicode="b" horiz-adv-x="1755" 
+d="M581 579v-279h414q196 0 196 139q0 140 -196 140h-414zM1140 1434q205 0 323 -95t118 -285q0 -95 -28 -154.5t-65.5 -94t-75 -49.5t-57.5 -20q39 -6 89.5 -25.5t96 -61.5t77 -107t31.5 -162q0 -184 -125 -282t-338 -98h-1063v1434h1017zM934 873q96 0 142.5 31t46.5 101
+q0 69 -46.5 100.5t-142.5 31.5h-353v-264h353z" />
+    <glyph glyph-name="c" unicode="c" horiz-adv-x="1704" 
+d="M1586 1131h-549q-250 0 -362 -97t-112 -317t110 -317t361 -97h552v-303h-666q-404 0 -609 180.5t-205 536.5q0 355 205 536t609 181h666v-303z" />
+    <glyph glyph-name="d" unicode="d" horiz-adv-x="1845" 
+d="M581 1131v-828h224q251 0 366 97t115 317t-117 317t-367 97h-221zM919 1434q404 0 609 -181t205 -536q0 -356 -205 -536.5t-609 -180.5h-796v1434h796z" />
+    <glyph glyph-name="e" unicode="e" horiz-adv-x="1714" 
+d="M1587 1137h-591q-215 0 -310.5 -66t-112.5 -198h1014v-294h-1014q7 -129 102.5 -204t320.5 -75h591v-300h-649q-413 0 -622.5 180.5t-209.5 536.5t209.5 536.5t622.5 180.5h649v-297z" />
+    <glyph glyph-name="f" unicode="f" horiz-adv-x="1721" 
+d="M116 717q0 356 209.5 536.5t622.5 180.5h649v-297h-591q-215 0 -310.5 -66t-112.5 -198h1014v-294h-1023v-579h-458v717z" />
+    <glyph glyph-name="g" unicode="g" horiz-adv-x="1813" 
+d="M1686 854v-854h-766q-404 0 -609 180.5t-205 536.5q0 355 205 536t609 181h766v-293h-649q-250 0 -362 -97t-112 -327q0 -220 110 -317t361 -97h194v267h-296v284h754z" />
+    <glyph glyph-name="h" unicode="h" horiz-adv-x="1908" 
+d="M581 567v-567h-458v1434h458v-567h742v567h458v-1434h-458v567h-742z" />
+    <glyph glyph-name="i" unicode="i" horiz-adv-x="708" 
+d="M581 1434v-1434h-458v1434h458z" />
+    <glyph glyph-name="j" unicode="j" horiz-adv-x="1410" 
+d="M1288 1434v-717q0 -356 -205 -536.5t-609 -180.5h-366v303h252q251 0 361 97t110 317v717h457z" />
+    <glyph glyph-name="k" unicode="k" horiz-adv-x="1871" 
+d="M1721 1434l-693 -641l754 -793h-546l-655 696v-696h-458v1434h458v-585l607 585h533z" />
+    <glyph glyph-name="l" unicode="l" horiz-adv-x="1807" 
+d="M575 1434v-917q0 -214 251 -214h872v-303h-986q-594 0 -594 517v917h457z" />
+    <glyph glyph-name="m" unicode="m" horiz-adv-x="2408" 
+d="M1831 0v858q0 144 -72 205.5t-239 61.5h-95v-1125h-458v1125h-386v-1125h-458v1434h1475q362 0 526 -141t164 -453v-840h-457z" />
+    <glyph glyph-name="n" unicode="n" horiz-adv-x="1853" 
+d="M1109 1434q292 0 458 -141t166 -453v-840h-458v843q0 150 -77 216t-201 66h-416v-1125h-458v1434h986z" />
+    <glyph glyph-name="o" unicode="o" horiz-adv-x="2022" 
+d="M1910 717q0 -186 -62 -321.5t-178.5 -223t-283 -130t-378.5 -42.5t-378.5 42.5t-282.5 130t-178.5 223t-62.5 321.5t62.5 321.5t178.5 223t282.5 130t378.5 42.5t378.5 -42.5t283 -130t178.5 -223t62 -321.5zM1008 303q444 0 444 414t-444 414t-444 -414t444 -414z" />
+    <glyph glyph-name="p" unicode="p" horiz-adv-x="1800" 
+d="M123 0v1434h945q321 0 471.5 -127.5t150.5 -348.5q0 -218 -149 -345.5t-473 -127.5h-487v-485h-458zM1208 957q0 180 -221 180h-406v-358h406q221 0 221 178z" />
+    <glyph glyph-name="q" unicode="q" horiz-adv-x="2028" 
+d="M1008 303q444 0 444 414t-444 414t-444 -414t444 -414zM1008 0q-212 0 -378.5 42.5t-282.5 130t-178.5 223t-62.5 321.5t62.5 321.5t178.5 223t282.5 130t378.5 42.5t378.5 -42.5t283 -130t178.5 -223t62 -321.5q0 -256 -197 -417h197v-300h-902z" />
+    <glyph glyph-name="r" unicode="r" horiz-adv-x="1881" 
+d="M1268 940q0 197 -221 197h-466v-398h466q221 0 221 201zM926 445h-345v-445h-458v1434h1035q301 0 446.5 -137.5t145.5 -355.5q0 -221 -144 -358q-73 -70 -186 -104l363 -479h-537z" />
+    <glyph glyph-name="s" unicode="s" horiz-adv-x="1817" 
+d="M145 0v297h945q158 0 158 138q0 135 -158 135h-473q-249 0 -380.5 111.5t-131.5 320.5t129.5 320.5t368.5 111.5h1063v-300h-941q-162 0 -162 -132q0 -135 162 -135h483q243 0 370.5 -111.5t127.5 -320.5q0 -212 -127.5 -323.5t-370.5 -111.5h-1063z" />
+    <glyph glyph-name="t" unicode="t" horiz-adv-x="1789" 
+d="M662 1134h-557v300h1573v-300h-557v-1134h-459v1134z" />
+    <glyph glyph-name="u" unicode="u" horiz-adv-x="1825" 
+d="M742 0q-292 0 -458 141t-166 453v840h458v-843q0 -150 77 -216t201 -66h386v1125h458v-1434h-956z" />
+    <glyph glyph-name="v" unicode="v" horiz-adv-x="2073" 
+d="M777 0l-683 1434h479l468 -1017l468 1017h468l-683 -1434h-517z" />
+    <glyph glyph-name="w" unicode="w" horiz-adv-x="2916" 
+d="M1785 0l-329 976l-330 -976h-503l-529 1434h473l339 -981l311 981h502l315 -981l335 981h449l-530 -1434h-503z" />
+    <glyph glyph-name="x" unicode="x" horiz-adv-x="1984" 
+d="M1270 726l621 -726h-532l-373 467l-376 -467h-519l623 717l-606 717h516l373 -463l379 463h498z" />
+    <glyph glyph-name="y" unicode="y" horiz-adv-x="1993" 
+d="M766 462l-674 972h516l394 -637l398 637h498l-674 -972v-462h-458v462z" />
+    <glyph glyph-name="z" unicode="z" horiz-adv-x="1706" 
+d="M1589 1434v-300l-864 -834h864v-300h-1473v300l864 834h-864v300h1473z" />
+    <glyph glyph-name="braceleft" unicode="{" 
+ />
+    <glyph glyph-name="bar" unicode="|" 
+ />
+    <glyph glyph-name="braceright" unicode="}" 
+ />
+    <glyph glyph-name="asciitilde" unicode="~" 
+ />
+    <glyph glyph-name="exclamdown" unicode="&#xa1;" 
+ />
+    <glyph glyph-name="cent" unicode="&#xa2;" 
+ />
+    <glyph glyph-name="sterling" unicode="&#xa3;" 
+ />
+    <glyph glyph-name="currency" unicode="&#xa4;" 
+ />
+    <glyph glyph-name="yen" unicode="&#xa5;" 
+ />
+    <glyph glyph-name="brokenbar" unicode="&#xa6;" 
+ />
+    <glyph glyph-name="section" unicode="&#xa7;" 
+ />
+    <glyph glyph-name="dieresis" unicode="&#xa8;" 
+ />
+    <glyph glyph-name="copyright" unicode="&#xa9;" 
+ />
+    <glyph glyph-name="ordfeminine" unicode="&#xaa;" 
+ />
+    <glyph glyph-name="guillemotleft" unicode="&#xab;" 
+ />
+    <glyph glyph-name="logicalnot" unicode="&#xac;" 
+ />
+    <glyph glyph-name="registered" unicode="&#xae;" 
+ />
+    <glyph glyph-name="macron" unicode="&#xaf;" 
+ />
+    <glyph glyph-name="degree" unicode="&#xb0;" 
+ />
+    <glyph glyph-name="plusminus" unicode="&#xb1;" 
+ />
+    <glyph glyph-name="uni00B2" unicode="&#xb2;" 
+ />
+    <glyph glyph-name="uni00B3" unicode="&#xb3;" 
+ />
+    <glyph glyph-name="acute" unicode="&#xb4;" 
+ />
+    <glyph glyph-name="mu" unicode="&#xb5;" 
+ />
+    <glyph glyph-name="paragraph" unicode="&#xb6;" 
+ />
+    <glyph glyph-name="periodcentered" unicode="&#xb7;" 
+ />
+    <glyph glyph-name="periodcentered" unicode="&#x2219;" 
+ />
+    <glyph glyph-name="cedilla" unicode="&#xb8;" 
+ />
+    <glyph glyph-name="uni00B9" unicode="&#xb9;" 
+ />
+    <glyph glyph-name="ordmasculine" unicode="&#xba;" 
+ />
+    <glyph glyph-name="guillemotright" unicode="&#xbb;" 
+ />
+    <glyph glyph-name="onequarter" unicode="&#xbc;" 
+ />
+    <glyph glyph-name="onehalf" unicode="&#xbd;" 
+ />
+    <glyph glyph-name="threequarters" unicode="&#xbe;" 
+ />
+    <glyph glyph-name="questiondown" unicode="&#xbf;" 
+ />
+    <glyph glyph-name="Agrave" unicode="&#xc0;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Aacute" unicode="&#xc1;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Acircumflex" unicode="&#xc2;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Atilde" unicode="&#xc3;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Adieresis" unicode="&#xc4;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Aring" unicode="&#xc5;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="AE" unicode="&#xc6;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Ccedilla" unicode="&#xc7;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Egrave" unicode="&#xc8;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Eacute" unicode="&#xc9;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Ecircumflex" unicode="&#xca;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Edieresis" unicode="&#xcb;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Igrave" unicode="&#xcc;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Iacute" unicode="&#xcd;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Icircumflex" unicode="&#xce;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Idieresis" unicode="&#xcf;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Eth" unicode="&#xd0;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Ntilde" unicode="&#xd1;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Ograve" unicode="&#xd2;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Oacute" unicode="&#xd3;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Ocircumflex" unicode="&#xd4;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Otilde" unicode="&#xd5;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Odieresis" unicode="&#xd6;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="multiply" unicode="&#xd7;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Oslash" unicode="&#xd8;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Ugrave" unicode="&#xd9;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Uacute" unicode="&#xda;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Ucircumflex" unicode="&#xdb;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Udieresis" unicode="&#xdc;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Yacute" unicode="&#xdd;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="Thorn" unicode="&#xde;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="germandbls" unicode="&#xdf;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="agrave" unicode="&#xe0;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="aacute" unicode="&#xe1;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="acircumflex" unicode="&#xe2;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="atilde" unicode="&#xe3;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="adieresis" unicode="&#xe4;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="aring" unicode="&#xe5;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="ae" unicode="&#xe6;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="ccedilla" unicode="&#xe7;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="egrave" unicode="&#xe8;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="eacute" unicode="&#xe9;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="ecircumflex" unicode="&#xea;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="edieresis" unicode="&#xeb;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="igrave" unicode="&#xec;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="iacute" unicode="&#xed;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="icircumflex" unicode="&#xee;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="idieresis" unicode="&#xef;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="eth" unicode="&#xf0;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="ntilde" unicode="&#xf1;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="ograve" unicode="&#xf2;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="oacute" unicode="&#xf3;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="ocircumflex" unicode="&#xf4;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="otilde" unicode="&#xf5;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="odieresis" unicode="&#xf6;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="divide" unicode="&#xf7;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="oslash" unicode="&#xf8;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="ugrave" unicode="&#xf9;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="uacute" unicode="&#xfa;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="ucircumflex" unicode="&#xfb;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="udieresis" unicode="&#xfc;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="yacute" unicode="&#xfd;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="thorn" unicode="&#xfe;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="ydieresis" unicode="&#xff;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="dotlessi" unicode="&#x131;" horiz-adv-x="266" 
+ />
+    <glyph glyph-name="circumflex" unicode="&#x2c6;" 
+ />
+    <glyph glyph-name="caron" unicode="&#x2c7;" 
+ />
+    <glyph glyph-name="uni02C9" unicode="&#x2c9;" 
+ />
+    <glyph glyph-name="breve" unicode="&#x2d8;" 
+ />
+    <glyph glyph-name="dotaccent" unicode="&#x2d9;" 
+ />
+    <glyph glyph-name="ring" unicode="&#x2da;" 
+ />
+    <glyph glyph-name="ogonek" unicode="&#x2db;" 
+ />
+    <glyph glyph-name="tilde" unicode="&#x2dc;" 
+ />
+    <glyph glyph-name="hungarumlaut" unicode="&#x2dd;" 
+ />
+    <glyph glyph-name="endash" unicode="&#x2013;" 
+ />
+    <glyph glyph-name="emdash" unicode="&#x2014;" 
+ />
+    <glyph glyph-name="quoteleft" unicode="&#x2018;" 
+ />
+    <glyph glyph-name="quoteright" unicode="&#x2019;" 
+ />
+    <glyph glyph-name="quotesinglbase" unicode="&#x201a;" 
+ />
+    <glyph glyph-name="quotedblleft" unicode="&#x201c;" 
+ />
+    <glyph glyph-name="quotedblright" unicode="&#x201d;" 
+ />
+    <glyph glyph-name="quotedblbase" unicode="&#x201e;" 
+ />
+    <glyph glyph-name="dagger" unicode="&#x2020;" 
+ />
+    <glyph glyph-name="daggerdbl" unicode="&#x2021;" 
+ />
+    <glyph glyph-name="bullet" unicode="&#x2022;" 
+ />
+    <glyph glyph-name="ellipsis" unicode="&#x2026;" 
+ />
+    <glyph glyph-name="guilsinglleft" unicode="&#x2039;" 
+ />
+    <glyph glyph-name="guilsinglright" unicode="&#x203a;" 
+ />
+    <glyph glyph-name="fraction" unicode="&#x2044;" 
+ />
+    <glyph glyph-name="fraction" unicode="&#x2215;" 
+ />
+    <glyph glyph-name="franc" unicode="&#x20a3;" 
+ />
+    <glyph glyph-name="lira" unicode="&#x20a4;" 
+ />
+    <glyph glyph-name="peseta" unicode="&#x20a7;" 
+ />
+    <glyph glyph-name="Euro" unicode="&#x20ac;" 
+ />
+    <glyph glyph-name="afii61352" unicode="&#x2116;" 
+ />
+    <glyph glyph-name="trademark" unicode="&#x2122;" 
+ />
+    <glyph glyph-name="partialdiff" unicode="&#x2202;" 
+ />
+    <glyph glyph-name="Delta" unicode="&#x2206;" 
+ />
+    <glyph glyph-name="product" unicode="&#x220f;" 
+ />
+    <glyph glyph-name="summation" unicode="&#x2211;" 
+ />
+    <glyph glyph-name="minus" unicode="&#x2212;" 
+ />
+    <glyph glyph-name="radical" unicode="&#x221a;" 
+ />
+    <glyph glyph-name="infinity" unicode="&#x221e;" 
+ />
+    <glyph glyph-name="integral" unicode="&#x222b;" 
+ />
+    <glyph glyph-name="approxequal" unicode="&#x2248;" 
+ />
+    <glyph glyph-name="lessequal" unicode="&#x2264;" 
+ />
+    <glyph glyph-name="greaterequal" unicode="&#x2265;" 
+ />
+    <glyph glyph-name="uniF001" unicode="&#xf001;" 
+ />
+    <glyph glyph-name="uniF001" unicode="&#xfb01;" 
+ />
+    <glyph glyph-name="uniF002" unicode="&#xf002;" 
+ />
+    <glyph glyph-name="uniF002" unicode="&#xfb02;" 
+ />
+  </font>
+</defs></svg>

client/src/index.css

@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}

client/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: http://bit.ly/CRA-PWA
+serviceWorker.unregister();

client/src/logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

client/src/pages/DashboardPage/DashboardPage.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+
+class DashboardPage extends Component {
+
+  render() {
+    return (
+      <div>
+        <h1>Dashboard</h1>
+      </div>
+    )
+  }
+}
+
+export default DashboardPage;

client/src/pages/LoginPage/LoginPage.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import { Login } from '../../components'
+
+class LoginPage extends Component {
+
+  render() {
+    return (
+      <Login />
+    )
+  }
+};
+
+export default LoginPage;

client/src/pages/RegisterPage/RegisterPage.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import { Register } from '../../components'
+
+class RegisterPage extends Component {
+
+  render() {
+    return (
+      <Register />
+    )
+  }
+};
+
+export default RegisterPage;

client/src/pages/SplashScreenPage/SplashScreenPage.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+class SplashScreenPage extends Component {
+
+  render() {
+    return (
+
+      <div>
+        <h1>
+          loading application...
+        </h1>
+        <img src='images/logo.png' alt='' />
+      </div>
+    )
+  };
+
+};
+
+export default SplashScreenPage;

client/src/pages/WelcomePage/WelcomePage.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+
+class WelcomePage extends Component {
+
+  render() {
+    return (
+      <div>
+        <h1>Welcome Page</h1>
+      </div>
+    )
+  }
+};
+
+export default WelcomePage;

client/src/pages/index.js

@@ -0,0 +1,13 @@
+import DashboardPage from './DashboardPage/DashboardPage';
+import LoginPage from './LoginPage/LoginPage';
+import RegisterPage from './RegisterPage/RegisterPage';
+import SplashScreenPage from './SplashScreenPage/SplashScreenPage';
+import WelcomePage from './WelcomePage/WelcomePage';
+
+export {
+  DashboardPage,
+  LoginPage,
+  RegisterPage,
+  SplashScreenPage,
+  WelcomePage
+};

client/src/reducers/appData.js

@@ -0,0 +1,43 @@
+import {
+  USER_AUTHENTICATED,
+  USER_LOGGED_OUT,
+  QUESTIONS_LOADED,
+  QUESTIONS_LOAD_ERROR
+} from '../actions/types';
+
+const initialState = {
+  user: undefined,
+  questions: []
+};
+
+export default function (state = initialState, action) {
+
+  switch (action.type) {
+    case USER_AUTHENTICATED: {
+      return {
+        ...state,
+        user: action.data
+      };
+    }
+    case USER_LOGGED_OUT: {
+      return {
+        ...state,
+        user: undefined
+      };
+    }
+    case QUESTIONS_LOADED: {
+      return {
+        ...state,
+        questions: action.data
+      };
+    }
+    case QUESTIONS_LOAD_ERROR: {
+      return {
+        ...state,
+        questionsLoadError: action.error
+      };
+    }
+    default:
+      return state;
+  }
+};

client/src/reducers/index.js

@@ -0,0 +1,7 @@
+import { combineReducers } from 'redux';
+import appData from './appData';
+
+
+export default combineReducers({
+  appData
+});

client/src/router/AppRouter.js

@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { getIdentity } from '../actions/appActions';
+import {
+  BrowserRouter as Router,
+  Redirect,
+  Route,
+  Switch
+} from 'react-router-dom';
+import { Layout } from 'antd';
+import {
+  DashboardPage,
+  LoginPage,
+  RegisterPage,
+  SplashScreenPage,
+  WelcomePage
+} from '../pages';
+import { AppHeader } from '../components';
+import 'antd/dist/antd.css';
+
+const { Content } = Layout;
+
+// A wrapper for <Route> that redirects to the login
+// screen if you're not yet authenticated.
+export const PrivateRoute = ({ children, ...rest }) => {
+
+  console.log('rest: ' + rest);
+  console.log('rest.exact: ' + rest.exact);
+  console.log('rest.user: ' + rest.user);
+
+  return (
+    <Route
+      {...rest}
+      render={({ location }) =>
+        rest.user ? (
+          children
+        ) : (
+            <Redirect
+              to={{
+                pathname: "/login",
+                state: { from: location }
+              }}
+            />
+          )
+      }
+    />
+  );
+};
+
+
+class AppRouter extends Component {
+
+  componentDidMount = () => {
+    this.props.getIdentity();
+  };
+
+  render() {
+    return (
+      <Router>
+        <Layout style={{ height: "100%" }}>
+          <AppHeader />
+          <Content style={{ padding: '0 50px', marginTop: 64 }}>
+            <div style={{ background: '#fff', padding: 24 }}>
+              <Switch>
+                <Route exact path='/'>
+                  <WelcomePage />
+                </Route>
+                <PrivateRoute exact path='/start' user={this.props.user}>
+                  <DashboardPage />
+                </PrivateRoute>
+                <Route exact path='/foo'>
+                  <SplashScreenPage />
+                </Route>
+                <Route exact path='/login'>
+                  <LoginPage />
+                </Route>
+                <Route exact path='/register'>
+                  <RegisterPage />
+                </Route>
+              </Switch>
+            </div>
+          </Content>
+        </Layout>
+      </Router>
+    )
+  };
+};
+
+AppRouter.propTypes = {
+  getIdentity: PropTypes.func.isRequired,
+  user: PropTypes.object,
+};
+
+const mapStateToProps = state => ({
+  user: state.appData.user
+});
+
+export default connect(mapStateToProps, { getIdentity })(AppRouter);

client/src/serviceWorker.js

@@ -0,0 +1,135 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read http://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit http://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}

client/src/services/ApiService.js

@@ -0,0 +1,82 @@
+class ApiService {
+
+  getQuestions(userId, onSuccess, onError) {
+    this._get('/api/questions' + userId, onSuccess, onError);
+  };
+
+  identity(onSuccess, onError) {
+    this._get('/api/auth/identity', onSuccess, onError);
+  };
+
+  login(username, password, onSuccess, onError) {
+    let requestData = {
+      username: username,
+      password: password
+    };
+    this._post('/api/auth/login', requestData, onSuccess, onError);
+  };
+
+  logoutUser(onSuccess, onError) {
+    this._get('/api/auth/logout', onSuccess, onError);
+  };
+
+  register(username, password, onSuccess, onError) {
+    let requestData = {
+      username: username,
+      password: password
+    };
+    this._post('/api/auth/register', requestData, onSuccess, onError);
+  };
+
+  _get(url, onSuccess, onError) {
+    fetch(url)
+      .then(this._handleResponse(onSuccess, onError))
+      .catch((error) => {
+        onError({ error: error.message });
+      });
+  };
+
+  _post(url, requestData, onSuccess, onError) {
+    fetch(url, {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(requestData)
+    })
+      .then(this._handleResponse(onSuccess, onError))
+      .catch((error) => {
+        onError(error);
+      });
+  };
+
+  _put(url, requestData, onSuccess, onError) {
+    fetch(url, {
+      method: 'PUT',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(requestData)
+    }).then(this._handleResponse(onSuccess, onError))
+      .catch((error) => {
+        onError(error);
+      })
+  };
+
+  _handleResponse = (onSuccess, onError) => (response) => {
+    if (response.status === 200) {
+      response.json()
+        .then(onSuccess)
+    } else if (response.status === 400) {
+      // JSON Syntax error
+      response.json().then(onError)
+    }
+    else {
+      onError({ "message": "Backend returned status: " + response.status })
+    }
+  };
+}
+
+export default ApiService;

client/src/store.js

@@ -0,0 +1,23 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from './reducers';
+
+const initialState = {};
+
+const middleware = [thunk];
+
+let devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
+if (process.env.NODE_ENV === 'test' || process.env.NODE_ENV === 'production' || !devTools) {
+    devTools = a => a;
+}
+
+const store = createStore(
+  rootReducer,
+  initialState,
+  compose(
+    applyMiddleware(...middleware),
+    devTools
+  )
+);
+
+export default store;

footage/321a03a2e2219a65052c9a2115d42074.ico/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

footage/321a03a2e2219a65052c9a2115d42074.ico/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

package.json

@@ -1,16 +1,25 @@
 {
-  "name": "dgdg",
+  "name": "nodeproto",
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "node ./bin/www"
+    "start": "PORT=9051 node ./bin/www",
+    "dev": "PORT=9051 nodemon ./bin/www"
   },
   "dependencies": {
+    "bcryptjs": "^2.4.3",
+    "body-parser": "^1.19.0",
     "cookie-parser": "~1.4.4",
+    "cookie-session": "^1.4.0",
     "debug": "~2.6.9",
     "express": "~4.16.1",
     "http-errors": "~1.6.3",
     "jade": "~1.11.0",
-    "morgan": "~1.9.1"
+    "mongodb": "^3.5.5",
+    "morgan": "~1.9.1",
+    "uuid": "^7.0.2"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.2"
   }
 }

routes/index.js

@@ -1,9 +0,0 @@
-var express = require('express');
-var router = express.Router();
-
-/* GET home page. */
-router.get('/', function(req, res, next) {
-  res.render('index', { title: 'Express' });
-});
-
-module.exports = router;

routes/users.js

@@ -1,9 +0,0 @@
-var express = require('express');
-var router = express.Router();
-
-/* GET users listing. */
-router.get('/', function(req, res, next) {
-  res.send('respond with a resource');
-});
-
-module.exports = router;

views/error.jade

@@ -1,6 +0,0 @@
-extends layout
-
-block content
-  h1= message
-  h2= error.status
-  pre #{error.stack}

views/index.jade

@@ -1,5 +0,0 @@
-extends layout
-
-block content
-  h1= title
-  p Welcome to #{title}

views/layout.jade

@@ -1,7 +0,0 @@
-doctype html
-html
-  head
-    title= title
-    link(rel='stylesheet', href='/stylesheets/style.css')
-  body
-    block content