Expanded front-end functionality. Reorganied forms, restructure login…

… route, etc

client/components/AddCard.jsx

@@ -1,17 +1,19 @@
 import React, { Component } from 'react';
 
 class AddCard extends Component {
-  constructor(props){
+  constructor(props) {
     super(props);
 
     this.state = {
-      jobTitle :'',
-      company:'',
-      jobDescription:'',
-      jobLocation:'',
-      url:'',
-      salaryRange:'',
-      note:''
+      title: '',
+      company: '',
+      description: '',
+      location: '',
+      link: '',
+      salary: 0,
+      notes: '',
+      contact: '',
+      priority: 0
     }
 
     this.updateState = this.updateState.bind(this);
@@ -20,10 +22,10 @@ class AddCard extends Component {
   }
 
   updateState(event) {
-      const input = {
-          [event.target.name]: event.target.value
-      }
-      this.setState(input);
+    const input = {
+      [event.target.name]: event.target.value
+    }
+    this.setState(input);
   }
 
   addCard() {
@@ -36,48 +38,80 @@ class AddCard extends Component {
       },
       body: JSON.stringify(data)
     })
-    .then(res => {
-    res.json()
-    })
-    .then(res => console.log(res))
+      .then(res => {
+        res.json()
+      })
+      .then(res => console.log(res))
 
   }
 
   deleteCard(Card) {
     fetch('/deleteCards', {
-        method: 'DELETE'
-      })
+      method: 'DELETE'
+    })
       .then(response => response.json());
-    }
+  }
+
+  handleFormSubmission(e) {
+    e.preventDefault();
+
+    const reqBody = {
+      title: this.state.title,
+      company: this.state.company,
+      description: this.state.description,
+      location: this.state.location,
+      link: this.state.link,
+      salary: this.state.salary,
+      notes: this.state.notes,
+      contact: this.state.contact,
+      priority: this.state.priority,
+      username: "dsadas"
+    };
+  }
 
   render() {
-      return(
-          <form>
-              Job title:
-              <input type = "text" name = "jobTitle" value = {this.state.jobTitle}
-              onChange = {this.updateState} /> <br/>
-              Company:
-              <input type = "text" name = "company" value = {this.state.company}
-              onChange = {this.updateState} /> <br/>
-              Job Description:
-              <input type = "text" name = "jobDescription" value = {this.state.jobDescription}
-              onChange = {this.updateState} /> <br/>
-              Job Location:
-              <input type = "text" name = "jobLocation" value = {this.state.jobLocation}
-              onChange = {this.updateState} /> <br/>
-              URL:
-              <input type = "text" name = "url" value = {this.state.url}
-              onChange = {this.updateState} /> <br/>
-              Salary range:
-              <input type = "text" name = "salaryRange" value = {this.state.salaryRange}
-              onChange = {this.updateState} /> <br/>
-              Note:
-              <input type = "text" name = "note" value = {this.state.note}
-              onChange = {this.updateState} /> <br/>
-              <button onClick={this.addCard}>Add Card</button>
-              <button onClick={this.deleteCard}>Delete Card</button>
-          </form>
-      )
+    return (
+      <form onSubmit={this.handleFormSubmission}>
+        <label htmlFor="title">Job title:</label>
+        <input type="text" name="title" id="signup_title" value={this.state.jobTitle}
+          onChange={this.updateState} />
+
+        <label htmlFor="signup_company">Company:</label>
+        <input type="text" name="company" id="signup_company" value={this.state.company}
+          onChange={this.updateState} />
+
+        <label htmlFor="signup_description">Job Description:</label>
+        <input type="text" name="description" id="signup_description" value={this.state.jobDescription}
+          onChange={this.updateState} />
+
+        <label htmlFor="signup_location">Job Location:</label>
+        <input type="text" name="location" id="signup_location" value={this.state.jobLocation}
+          onChange={this.updateState} />
+
+        <label htmlFor="signup_link">URL:</label>
+        <input type="text" name="link" id="signup_link" value={this.state.url}
+          onChange={this.updateState} />
+
+        <label htmlFor="signup_salary">Salary range:</label>
+        <input type="text" name="salary" id="signup_salary" value={this.state.salaryRange}
+          onChange={this.updateState} />
+
+        <label htmlFor="signup_notes">Note:</label>
+        <input type="text" name="notes" id="signup_notes" value={this.state.note}
+          onChange={this.updateState} />
+
+        <label htmlFor="signup_contact">Contact:</label>
+        <input type="text" name="contact" id="signup_contact" value={this.state.jobTitle}
+          onChange={this.updateState} />
+
+        <label htmlFor="signup_priority">Priority:</label>
+        <input type="text" name="priority" id="signup_priority" value={this.state.jobTitle}
+          onChange={this.updateState} />
+
+        <button type="submit">Add Card</button>
+        <button onClick={this.deleteCard}>Delete Card</button>
+      </form>
+    )
   }
 }
 

client/components/Dashboard.jsx

@@ -3,23 +3,25 @@ import { Redirect, Route } from 'react-router';
 import '../css/Dashboard.css';
 import JobApplied from './JobApplied';
 
-
 class Dashboard extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      isLoggedIn: false
+      isLoggedIn: true
     }
 
     this.toggleModal = this.toggleModal.bind(this);
   }
 
   componentWillMount() {
-    if (window.sessionStorage.getItem('Authorized') === 'true') {
-      this.setState({
-        isLoggedIn: true
+    const jwtValue = this.props.location.state.jwt;
+    fetch('/verifyJwt', {
+      // pass JWT in body
+    })
+      .then(res => res.json())
+      .then(res => {
+        // if success, set state is logged in to true
       })
-    }
   }
 
   toggleModal() {

client/components/LoginForm.jsx

@@ -38,12 +38,15 @@ class LoginForm extends Component {
         },
         body: JSON.stringify(data)
       })
+        .then(res => res.json())
         .then(res => {
-          if (res.status === 200) {
+          if (res.hasOwnProperty('jwt')) {
             // this.props.history is used to redirect the user to 
             // another router from outside the render() method
-            window.sessionStorage.setItem('Authorized', 'true');
-            this.props.history.push('/dashboard');
+            this.props.history.push({
+              pathname: '/dashboard',
+              state: { jwt: res.jwt }
+            });
           } else {
             this.setState({ loginError: true, username: '', password: '' });
           }

server/controllers/sessionController.js

@@ -1,11 +1,13 @@
 const jwt = require('jsonwebtoken');
-const User = require('../db/userModel');
 
 const sessionController = {};
 
 sessionController.startSession = (req, res, next) => {
-  const jwtPayload = { username : req.body.username };
-  res.cookie('ssid', jwt.sign(jwtPayload, 'JWT_SECRET_KEY', { expiresIn: 30000 }), { HttpOnly: true });
+  const jwtPayload = { username: req.body.username };
+  const jwtValue = jwt.sign(jwtPayload, 'JWT_SECRET_KEY', { expiresIn: 30000 });
+  res.cookie('ssid', jwtValue, { httpOnly: true });
+  req.locals = { jwt: jwtValue };
+
   next();
 };
 
@@ -14,10 +16,8 @@ sessionController.isLoggedIn = async (req, res, next) => {
   if (!ssid) return null;
   try {
     jwt.verify(ssid, 'JWT_SECRET_KEY');
-    console.log('verified session!');
     next();
   } catch (err) {
-    console.log('expired token');
     res.redirect('http://localhost:3000/');
   }
 };

server/controllers/userController.js

@@ -4,8 +4,9 @@ const userController = {};
 
 userController.verify = async (req, res, next) => {
   const result = await User.verify(req);
-  res.locals.result = result;
-  next();
+  if (!result) return res.status(401).json({ error: 'ERROR' });
+
+  return next();
 };
 
 userController.signup = async (req, res, next) => {

server/db/cardModel.js

@@ -1,6 +1,6 @@
 const pg = require('pg');
 
-const uri = 'postgres://pfa:pfa@localhost/jobs';
+const uri = 'postgres://victor:victor@localhost/jobs';
 const client = new pg.Client(uri);
 
 client.connect((err) => {
@@ -52,6 +52,7 @@ cardModel.createCard = async (req, res) => {
     priority,
     username,
   } = req.body;
+
   return client
     .query(
       `

server/db/userModel.js

@@ -3,7 +3,7 @@ const bcrypt = require('bcrypt');
 
 const saltRounds = 10;
 
-const uri = 'postgres://pfa:pfa@localhost/jobs';
+const uri = 'postgres://victor:victor@localhost/jobs';
 const client = new pg.Client(uri);
 
 client.connect((err) => {

server/server.js

@@ -28,14 +28,10 @@ app.get('/', (req, res, next) => {
 // app.post('/signin', userController.verify, sessionController.startSession, cardController.getCards, (req, res, next) => {
 //   if (res.locals.result) res.status(200).send();
 
-app.post('/signin', userController.verify, sessionController.startSession, (req, res, next) => {
-  if (res.locals.result) res.status(200).redirect(`${req.baseUrl}/secret`);
-  else res.status(404).send('could not find username and/or password');
-});
-
-app.get('/secret', sessionController.isLoggedIn, (req, res, next) => {
-  res.status(200).send('secret page!');
-});
+app.post('/signin',
+  userController.verify,
+  sessionController.startSession,
+  (req, res) => res.status(200).json({ jwt: req.locals.jwt }));
 
 app.post('/signup', userController.signup, (req, res, next) => {
   if (res.locals.result) res.status(200).redirect(`${req.baseUrl}/secret`);