Merge pull request #5 from andyxtran/andy

completed front end login and signup functionalities

client/App.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Router, Route } from 'react-router-dom';
 import Header from './components/Header';
-import Landing from './components/Landing';
+import Dashboard from './components/Dashboard';
 import Login from './components/LoginForm';
 import SignUp from './components/SignUpForm';
 import './css/App.css';
@@ -14,21 +14,23 @@ class App extends Component {
     super(props);
     this.state = {
       user: 'PICHICIEGO',
-      avatar: "http://www.squishable.com/mm5/graphics/00000001/opensquish_pink_fairy_armadillo_303018_design.jpg"
+      avatar: 'http://www.squishable.com/mm5/graphics/00000001/opensquish_pink_fairy_armadillo_303018_design.jpg'
     }
   }
 
   render() {
+
     return (
       <Router history={history}>
-        <div className="main-container v-flex">
+        <div className='main-container v-flex'>
           <Header
             username={this.state.user}
             avatar={this.state.avatar}
           />
 
-          <Route exact path="/" component={Login} />
-          <Route path="/register" component={SignUp} />
+          <Route exact path='/' component={Login} />
+          <Route path='/register' component={SignUp} />
+          <Route path='/dashboard' component={Dashboard} />
         </div>
       </Router>
     )

client/components/AddCard.jsx

@@ -52,7 +52,7 @@ class AddCard extends Component {
 
   render() {
       return(
-          <div>
+          <form>
               Job title:
               <input type = "text" name = "jobTitle" value = {this.state.jobTitle}
               onChange = {this.updateState} /> <br/>
@@ -76,7 +76,7 @@ class AddCard extends Component {
               onChange = {this.updateState} /> <br/>
               <button onClick={this.addCard}>Add Card</button>
               <button onClick={this.deleteCard}>Delete Card</button>
-          </div>
+          </form>
       )
   }
 }

client/components/Dashboard.jsx

@@ -1,9 +1,5 @@
 import React, { Component } from 'react';
-
-import SignUpForm from './SignUpForm';
-import LoginForm from './LoginForm';
-import JobCards from './JobCards';
-import AddCard from './AddCard';
+import { Redirect, Route } from 'react-router';
 import '../css/Dashboard.css';
 import JobApplied from './JobApplied';
 
@@ -12,41 +8,31 @@ class Dashboard extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      showModal: true
+      isLoggedIn: false
     }
 
     this.toggleModal = this.toggleModal.bind(this);
   }
 
-  componentDidMount() {
-    if (window.sessionStorage.getItem('Authorized') == 'true') {
+  componentWillMount() {
+    if (window.sessionStorage.getItem('Authorized') === 'true') {
       this.setState({
-        showModal: !this.state.showModal
+        isLoggedIn: true
       })
     }
   }
 
   toggleModal() {
     this.setState({
-      showModal: !this.state.showModal
-    })
+      isLoggedIn: !this.state.isLoggedIn
+    });
   }
 
   render() {
-    if (this.state.showModal) {
-      return (
-        <div className="dashboard-container">
-          <FormModal toggleModal={this.toggleModal} />
-        </div>
-      )
-    } else {
-      return (
-        <div>
-          <JobApplied toggleModal={this.toggleModal} />
-        </div>
-      )
-    }
-  }
+    return this.state.isLoggedIn ? 
+      <JobApplied /> :
+      <Redirect to='/' />; 
+  }   
 }
 
 export default Dashboard;

client/components/JobApplied.jsx

@@ -6,13 +6,48 @@ import '../css/JobPostings.css';
 class JobApplied extends Component {
   constructor(props) {
     super(props)
+    this.state = {
+      jobsArray: [
+      {
+      card_id: 1,
+      title: 'Senior Engineer',
+      company: 'Google',
+      description: 'NY position for google',
+      location: 'Manhattan, NY',
+      salary: 190000,
+      notes: 'This is my dream job!',
+      contact: 'Sundar',
+      priority: 1,
+      link: 'www.google.com/jobapplication',
+      created_date: 'February 5 2019',
+      last_updated: 'February 11 2019'
+      },
+      {
+        card_id: 2,
+        title: 'Mid Engineer',
+        company: 'Facebook',
+        description: 'NY position for FB',
+        location: 'Manhattan, NY',
+        salary: 150000,
+        notes: 'Hacksss!',
+        contact: 'Zuckerberg',
+        priority: 2,
+        link: 'www.facebook.com/jobapplication',
+        created_date: 'February 6 2019',
+        last_updated: 'February 10 2019'
+        }
+    ]}
   }
 
   render() {
+    const jobsToRender = [];
+    this.state.jobsArray.forEach(job => {
+      jobsToRender.push(<JobCards jobsArray={job} />)
+    })
     return (
       <div className="job-posting-container v-flex">
         <AddCard />
-        <JobCards />
+        {jobsToRender}
       </div>
     )
   }

client/components/JobCards.jsx

@@ -3,18 +3,28 @@ import '../css/JobCards.css';
 
 class JobCards extends Component {
   constructor(props) {
-    super(props)
+    super(props);
   }
   render() {
+    const { 
+      title,  company, description, location, salary, notes, 
+      contact, link, priority, created_date, last_updated 
+    } = this.props.jobsArray;
     return (
       <div className="jobCards">
-        <label>Job title: </label><span>{'------- '}</span><br />
-        <label>Company: </label><span>{'------- '}</span><br />
-        <label>Job Description: </label><span>{'------ '}</span><br />
-        <label>Job Location: </label><span>{'-------'}</span><br />
-        <label>URL: </label><span>{'-------'}</span><br />
-        <label>Salary range: </label><span>{'------- '}</span><br />
-        <label>Note: </label><span>{'------- '}</span><br />
+        <ul>
+          <li>Title: {title}</li>
+          <li>Company: {company}</li>
+          <li>Description: {description}</li>
+          <li>Location: {location}</li>
+          <li>Salary: {salary}</li>
+          <li>Contact: {contact}</li>
+          <li>Link: {link}</li>
+          <li>Priority: {priority}</li>
+          <li>Created at: {created_date}</li>
+          <li>Updated at: {last_updated}</li>
+          <li>Notes: {notes}</li>
+        </ul>
       </div>
     )
   }

client/components/LoginForm.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { withRouter } from 'react-router';
-import { NavLink } from 'react-router-dom'
+import { NavLink, Redirect } from 'react-router-dom'
 import '../css/LoginForm.css';
 
 class LoginForm extends Component {
@@ -10,6 +10,7 @@ class LoginForm extends Component {
     this.state = {
       username: '',
       password: '',
+      loginError: false
     }
     this.updateState = this.updateState.bind(this);
     this.submitState = this.submitState.bind(this);
@@ -20,12 +21,13 @@ class LoginForm extends Component {
       [event.target.name]: event.target.value
     }
     this.setState(input);
-    //console.log(this.state);
   }
 
-  submitState() {
+  submitState(e) {
+    e.preventDefault();
+
     if (this.state.username === '' || this.state.password === '') {
-      alert("Must fill username AND password")
+      alert("Must fill username AND password");
     } else {
       let data = this.state
 
@@ -37,28 +39,45 @@ class LoginForm extends Component {
         body: JSON.stringify(data)
       })
         .then(res => {
-          if (res.redirected === true) {
-            // this.props.history.push('/secret')
-            // window.location.reload(); // temporary fix
+          if (res.status === 200) {
+            // this.props.history is used to redirect the user to 
+            // another router from outside the render() method
             window.sessionStorage.setItem('Authorized', 'true');
-            this.props.toggleModal();
+            this.props.history.push('/dashboard');
+          } else {
+            this.setState({ loginError: true, username: '', password: '' });
           }
         });
     }
   }
 
   render() {
+    if (window.sessionStorage.getItem('Authorized') === 'true') {
+      return <Redirect to='/dashboard' />;
+    }
+
+    let errorMessage = [];
+    if (this.state.loginError) {
+      errorMessage.push(<span>Username/password not found.</span>);
+    }
+
     return (
-      <div className="login-form-container v-flex">
-        <p>User Name:</p>
-        <input type="text" name="username" placeholder="User Name (Required)" value={this.state.username}
-          onChange={this.updateState} />
-        <p>Password:</p>
-        <input type="text" name="password" placeholder="Password (Required)" value={this.state.password}
-          onChange={this.updateState} />
-        <button onClick={this.submitState}>Login</button>
-        <NavLink to='/register'><button>Sign Up</button></NavLink>
-      </div>
+      <form onSubmit={this.submitState} className="login-form-container v-flex">
+        <label htmlFor="login_form_username">User Name:</label>
+        <input type="text" id="login_form_username" name="username" 
+          placeholder="User Name (Required)" value={this.state.username}
+          required onChange={this.updateState} />
+
+        <label htmlFor="login_form_password">Password:</label>
+        <input type="password" id="login_form_password" name="password" 
+          placeholder="Password (Required)" value={this.state.password}
+          required onChange={this.updateState} />
+
+          {errorMessage}
+
+        <button type="submit">Login</button>
+        <NavLink to="/register"><button>Sign Up</button></NavLink>
+      </form>
     );
   }
 }

server/controllers/sessionController.js

@@ -13,11 +13,11 @@ sessionController.isLoggedIn = async (req, res, next) => {
   const { ssid } = req.cookies;
   if (!ssid) return null;
   try {
-    jwt.verify(ssid, 'JWT_SECRET_KEY')
+    jwt.verify(ssid, 'JWT_SECRET_KEY');
     console.log('verified session!');
     next();
   } catch (err) {
-    console.log('expired token')
+    console.log('expired token');
     res.redirect('http://localhost:3000/');
   }
 };

server/db/cardModel.js

@@ -32,10 +32,11 @@ client
       created_date TIMESTAMP DEFAULT NOW(),
       last_updated TIMESTAMP DEFAULT CURRENT_TIMESTAMP
     );
-  `,
-  )
-  .then(res => res)
-  .catch(e => console.error(e.stack));
+  `)
+  .then((res) => {
+    return res;
+  })
+  .catch(e => console.error('ERROR in cardModel', e.stack));
 
 // create a new card that is tied to a unique user
 cardModel.createCard = async (req, res) => {

server/server.js

@@ -27,6 +27,7 @@ app.get('/', (req, res, next) => {
 // user should be presented with a new card page after successful signup
 // 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');