Merge branch 'release/v0.1.0'

thomas367 · Apr 5, 2020 · d34fa4b · d34fa4b
2 parents 0dcb322 + 0426400
commit d34fa4b
Show file tree

Hide file tree

Showing 34 changed files with 874 additions and 45 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,7 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"],
+    "plugins": [
+        ["@babel/plugin-proposal-decorators", { "legacy": true }],
+        ["@babel/plugin-proposal-class-properties", { "loose": true }]
+    ]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,32 @@
+{
+    "parser": "babel-eslint",
+    "env": {
+        "browser": true,
+        "node": true,
+        "es6": true
+    },
+    "plugins": ["react", "prettier"],
+    "rules": {
+        "no-plusplus": 0,
+        "no-underscore-dangle": 0,
+        "no-mixed-operators": 0,
+        "class-methods-use-this": 0,
+        "indent": ["error", 4],
+        "comma-dangle": 0
+    },
+    "extends": [
+        "airbnb-base",
+        "plugin:react/recommended",
+        "plugin:import/errors",
+        "plugin:import/warnings",
+        "prettier",
+        "plugin:compat/recommended"
+    ],
+    "settings": {
+        "import/resolver": {
+            "webpack": {
+                "config": "webpack.config.dev.js"
+            }
+        }
+    }
+}
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+12.16.1
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+    "printWidth": 120,
+    "useTabs": false,
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+}
diff --git a/assets/images/icon.png b/assets/images/icon.png
diff --git a/assets/images/showcase.jpg b/assets/images/showcase.jpg
diff --git a/package.json b/package.json
@@ -1,11 +1,14 @@
 {
   "name": "nodedemo",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "description": "nodeDemo",
   "main": "server.js",
   "scripts": {
-    "start": "node server",
-    "dev-server": "nodemon server"
+    "build": "",
+    "start": "node src/server/server",
+    "dev-client": "webpack-dev-server --config ./webpack.config.dev.js --mode development",
+    "dev-server": "nodemon src/server/server",
+    "dev": "concurrently \"npm run dev-server\" \"npm run dev-client\""
   },
   "repository": {
     "type": "git",
@@ -24,9 +27,47 @@
     "express-validator": "^6.4.0",
     "gravatar": "^1.8.0",
     "jsonwebtoken": "^8.5.1",
-    "mongoose": "^5.9.4"
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.1.8",
+    "mongoose": "^5.9.4",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.1.2"
   },
   "devDependencies": {
-    "nodemon": "^2.0.2"
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-decorators": "^7.8.3",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/react-fontawesome": "^0.1.9",
+    "@material-ui/core": "^4.9.7",
+    "axios": "^0.19.2",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
+    "classnames": "^2.2.6",
+    "clean-webpack-plugin": "^3.0.0",
+    "concurrently": "^5.1.0",
+    "css-loader": "^3.4.2",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-import-resolver-webpack": "^0.12.1",
+    "eslint-loader": "^3.0.3",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
+    "file-loader": "^6.0.0",
+    "node-sass": "^4.13.1",
+    "nodemon": "^2.0.2",
+    "prettier": "^1.19.1",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.1.3",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Node</title>
+</head>
+
+<body>
+    <div id="root"></div>
+    <script src="./bundle.js"></script>
+</body>
+
+</html>
diff --git a/src/client/app.react.js b/src/client/app.react.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import Navbar from 'client/components/layout/navbar/navbar.react';
+import Landing from 'client/components/layout/landing/landing.react';
+import Login from 'client/components/auth/login/login.react';
+import Register from 'client/components/auth/register/register.react';
+import Dashboard from 'client/components/dashboard/dashboard.react';
+import PrivateRoute from 'client/components/routing/privateRoute.react';
+import { Route, Switch } from 'react-router-dom';
+import styles from 'client/app.scss';
+
+function App() {
+    return (
+        <>
+            <Navbar />
+            <Route exact path="/" component={Landing} />
+            <section className={styles.container}>
+                <Switch>
+                    <Route exact path="/register" component={Register} />
+                    <Route exact path="/login" component={Login} />
+                    <PrivateRoute exact path="/dashboard" component={Dashboard} />
+                </Switch>
+            </section>
+        </>
+    );
+}
+
+export default App;
diff --git a/src/client/app.scss b/src/client/app.scss
@@ -0,0 +1,20 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Raleway', sans-serif;
+    line-height: 1.6;
+    font-size: 16px;
+}
+
+.container {
+    max-width: 1100px;
+    margin: auto;
+    overflow: hidden;
+    padding: 0 32px;
+    margin-top: 96px;
+    margin-bottom: 48px;
+}
diff --git a/src/client/components/auth/login/login.react.js b/src/client/components/auth/login/login.react.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from 'client/components/auth/login/login.scss';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { Button, TextField } from '@material-ui/core';
+import { Link, Redirect } from 'react-router-dom';
+import { inject, observer } from 'mobx-react';
+
+const Login = props => {
+    const { inProgress, token, doLogin } = props;
+
+    const [formData, setFormData] = React.useState({
+        email: '',
+        password: ''
+    });
+
+    const { email, password } = formData;
+
+    const handleInput = e => {
+        setFormData({ ...formData, [e.target.name]: e.target.value });
+    };
+
+    const handleSubmitForm = e => {
+        e.preventDefault();
+        doLogin(formData);
+    };
+
+    if (token) {
+        return <Redirect to="/dashboard" />;
+    }
+
+    return (
+        <div className={styles.container}>
+            <h1 className={styles.header}>Sign In</h1>
+            <p className={styles.subheader}>
+                <FontAwesomeIcon icon={faUser} /> Sign into Your Account
+            </p>
+            <form onSubmit={e => handleSubmitForm(e)}>
+                <div className={styles.formGroup}>
+                    <TextField
+                        type="email"
+                        placeholder="Email Address"
+                        name="email"
+                        size="small"
+                        fullWidth
+                        variant="outlined"
+                        value={email}
+                        onChange={e => handleInput(e)}
+                    />
+                </div>
+                <div className={styles.formGroup}>
+                    <TextField
+                        type="password"
+                        placeholder="Password"
+                        name="password"
+                        size="small"
+                        fullWidth
+                        variant="outlined"
+                        value={password}
+                        onChange={e => handleInput(e)}
+                    />
+                </div>
+                <Button type="submit" variant="contained" color="primary" disabled={inProgress}>
+                    Login
+                </Button>
+            </form>
+            <p className={styles.alternateRegister}>
+                Don't have an account?
+                <Link to="/register" className={styles.link}>
+                    Sign Up
+                </Link>
+            </p>
+        </div>
+    );
+};
+
+Login.propTypes = {
+    inProgress: PropTypes.bool,
+    token: PropTypes.string,
+    doLogin: PropTypes.func
+};
+
+export default inject(stores => ({
+    inProgress: stores.auth.inProgress,
+    // errors: stores.auth.errors,
+    doLogin: stores.auth.doLogin,
+    token: stores.common.token
+}))(observer(Login));
diff --git a/src/client/components/auth/login/login.scss b/src/client/components/auth/login/login.scss
@@ -0,0 +1,33 @@
+.container {
+    max-width: 1100px;
+    margin: auto;
+    overflow: hidden;
+    padding: 0 32px;
+    margin-top: 96px;
+    margin-bottom: 48px;
+}
+
+.header {
+    font-size: 48px;
+    line-height: 1.2;
+    margin-bottom: 16px;
+    color: #3f51b5;
+}
+
+.subheader {
+    font-size: 24px;
+    margin-bottom: 16px;
+}
+
+.formGroup {
+    margin: 19px 0;
+}
+
+.alternateRegister {
+    margin: 16px 0;
+}
+
+.link {
+    text-decoration: none;
+    color: #3f51b5
+}