Implement simple login system

elevenpassin · Dec 26, 2017 · c2df622 · c2df622
1 parent 1d36deb
commit c2df622
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 19 deletions.
diff --git a/app.js b/app.js
@@ -53,25 +53,38 @@ const app = express();
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }));
 
-app.post('/login', bodyParser.json(), (req, res) => {
+app.post('/login', async (req, res) => {
   console.log('Got user information: \n', req.body);
-  res.send(req.body);
+  const { username, password } = req.body;
+
+  try {
+    const userData = await User.findOne({ name: username, password  });
+    if (userData.password === password) {
+      res.send(JSON.stringify({
+        auth: true
+      }));
+    } else {
+      res.send(JSON.stringify({
+        auth: false
+      }));
+    }
+  } catch(e) {
+    console.error(e);
+  }
 })
 
 app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));
 
 app.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' }));
 
-
-
 app.listen(3001, () => {
   console.log(`
     =====
     Server running at http://localhost:3001/
     GraphiQL running at http://localhost:3001/graphiql/
     =====
   `)
-})
+});
 
 
 

diff --git a/client/src/App.js b/client/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import 'antd/dist/antd.css';
 import logo from './logo.svg';
 import './App.css';
@@ -11,16 +11,33 @@ import Blogposts from './components/Blogposts.jsx';
 import Navbar from './components/Navbar.jsx';
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      auth: false
+    }
+
+    this.setAuth = this.setAuth.bind(this);
+  }
+
+  setAuth(auth) {
+    this.setState({ auth })
+  }
+
   render() {
     return (
       <div className="App">
-        <Route path="/" component={Navbar} />
+        <Route path="/" render={(props) => (
+          <Navbar setAuth={this.setAuth} auth={this.state.auth} {...props} />
+        )} />
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
           <h1 className="App-title">GraphQL Based blog</h1>
         </header>
         <Route exact path="/" component={Blogposts} />
-        <Route exact path="/account" component={Account} />
+        <Route exact path="/account" render={(props) => (
+          this.state.auth === false ? <Account setAuth={this.setAuth} {...props} /> : null
+        )} />
       </div>
     );
   }

diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
@@ -6,10 +6,11 @@ import {
   Link
 } from 'react-router-dom';
 
+const SubMenu = Menu.SubMenu;
+const MenuItemGroup = Menu.ItemGroup;
+
 export default class Navbar extends Component {
-  handleClick = (e) => {
-    this.setState({ current: e.key });
-  }
+
 
   constructor(props){
     super(props);
@@ -18,7 +19,18 @@ export default class Navbar extends Component {
     }
   }
 
+  handleClick = (e) => {
+    if (e.key === "signout") {
+      this.props.setAuth(false);
+      this.props.history.push('/');
+    }
+    this.setState({ current: e.key });
+  }
+
   render() {
+
+    const { auth } = this.props;
+
     return (
       <Menu
         theme="dark"
@@ -31,11 +43,26 @@ export default class Navbar extends Component {
             Home
           </Link>
         </Menu.Item>
-        <Menu.Item key="/account">
-          <Link to="/account">
-            Login / Signup
-          </Link>
-        </Menu.Item>
+        {
+          auth ? (
+            <SubMenu title={<span>Account</span>}>
+              <Menu.Item key="/account">
+                <Link to={"/account"}>
+                  Dashboard
+                </Link>
+              </Menu.Item>
+              <Menu.Item key="signout" >
+                  Sign out
+              </Menu.Item>
+            </SubMenu>
+          ) : (
+            <Menu.Item key="/account">
+              <Link to={"/account"}>
+                Sign in
+              </Link>
+            </Menu.Item>
+          )
+        }
       </Menu>
     )
   }

diff --git a/client/src/pages/Account.jsx b/client/src/pages/Account.jsx
@@ -3,15 +3,32 @@ import { Form, Icon, Input, Button, Checkbox, Row, Col } from 'antd';
 const FormItem = Form.Item;
 
 class NormalLoginForm extends React.Component {
+
+
+  constructor(props) {
+    super(props);
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
   handleSubmit = (e) => {
     e.preventDefault();
-    this.props.form.validateFields((err, values) => {
+    this.props.form.validateFields(async (err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
-        fetch('/login', {
+        const resp = await fetch('/login', {
           method: 'POST',
-          body: JSON.stringify(values)
+          headers: new Headers({
+            "Content-Type": "application/json"
+          }),
+          body: JSON.stringify(values),
         });
+
+        const data = await resp.json();
+
+        if (data.auth === true) {
+          this.props.setAuth(true);
+        }
       }
     });
   }

diff --git a/models/user.js b/models/user.js
@@ -8,6 +8,10 @@ const userSchema = new Schema({
     type: String,
     required: true
   },
+  password: {
+    type: String,
+    required: true
+  },
   posts: {
     type: [String],
   },