Added storing data in browser when logged in

Author: w3irdrobot

package.json

@@ -57,6 +57,7 @@
     "react-hot-loader": "next",
     "semantic-ui-css": "^2.2.10",
     "semantic-ui-react": "^0.68.3",
+    "store": "^2.0.12",
     "webpack": "^2.6.0",
     "webpack-dev-middleware": "^1.10.2",
     "webpack-hot-middleware": "^2.18.0"

src/fe/components/Cms/index.js

@@ -1,25 +1,31 @@
+/* eslint-disable arrow-body-style */
 import React from 'react';
 import { Sidebar, Menu, Icon } from 'semantic-ui-react';
 import { Helmet } from 'react-helmet';
+import store from 'store';
 import styles from './styles.css';
 import Users from '../Users';
 
-const Cms = () => (
-  <div>
-    <Helmet>
-      <title>CMS</title>
-    </Helmet>
+const isLoggedIn = () => !!store.get('loggedIn'); // eslint-disable-line no-unused-vars
 
-    <Sidebar as={Menu} inverted visible vertical width="thin" icon="labeled">
-      <Menu.Item name="users">
-        <Icon name="users" />
-        Users
-      </Menu.Item>
-    </Sidebar>
-    <div className={styles.mainBody}>
-      <Users />
+const Cms = () => {
+  return (
+    <div>
+      <Helmet>
+        <title>CMS</title>
+      </Helmet>
+
+      <Sidebar as={Menu} inverted visible vertical width="thin" icon="labeled">
+        <Menu.Item name="users">
+          <Icon name="users" />
+          Users
+        </Menu.Item>
+      </Sidebar>
+      <div className={styles.mainBody}>
+        <Users />
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default Cms;

src/fe/components/Login/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Grid, Form, Header, Message } from 'semantic-ui-react';
 import { Helmet } from 'react-helmet';
+import store from 'store';
 import styles from './styles.css';
 
 class Login extends React.Component {
@@ -17,18 +18,23 @@ class Login extends React.Component {
     this.onSubmit = this.onSubmit.bind(this);
   }
 
+  componentDidMount() {
+    console.log('loggedIn', store.get('loggedIn'));
+  }
+
   onSubmit(e) {
     e.preventDefault();
 
     const { username, password } = this.state;
 
     this.setState({ error: false });
 
-    if (username === 'george' && password === 'foreman') {
-      return console.log('good job!');
+    if (!(username === 'george' && password === 'foreman')) {
+      return this.setState({ error: true });
     }
 
-    this.setState({ error: true });
+    console.log("you're logged in. yay!");
+    store.set('loggedIn', true);
   }
 
   handleChange(e, { name, value }) {

yarn.lock

@@ -4603,6 +4603,10 @@ stackframe@^0.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
 
+store@^2.0.12:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/store/-/store-2.0.12.tgz#8c534e2a0b831f72b75fc5f1119857c44ef5d593"
+
 stream-browserify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"