Feat/password UPDATED

client/src/components/Artist.jsx

@@ -188,7 +188,7 @@ class Artist extends Component {
               <Container>
                 <span>{first_name} {last_name}</span>
                 {' '}
-                <button onClick={this.directMessageHandler}>Direct message</button>
+                {this.props.userId ? <Button onClick={this.directMessageHandler} content="Direct message"/> : null}
                 {' '}
                 {fb_link ? <Button circular color='facebook' icon='facebook' onClick={() => {
                   this._socialMedia(fb_link);

client/src/components/UserSettings.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Container, Image } from 'semantic-ui-react';
+import { Container, Image, Button, Input, Segment} from 'semantic-ui-react';
 import { connect } from 'react-redux';
 
 let currentPassword = null;
@@ -12,21 +12,31 @@ const _setInputsToNull = () => {
   confirmPassword.value = '';
 };
 
-const ChangePassword = () => {
-  return (
-    <span>
-      <br />
-      Current password:
-      <input type="password" placeholder="current password" ref={node => currentPassword = node} />
-      <br />
-      New password:
-      <input type="password" placeholder="new password" ref={node => newPassword = node} />
-      <br />
-      Confirm password:
-      <input type="password" placeholder="confirm password" ref={node => confirmPassword = node} />
-      <input type="submit" value="Submit" />
-    </span>
-  );
+class ChangePassword extends Component {
+//please do NOT change the input into semantic Input, things break!!! and don't change the outer most span into semantic-ui thing. it breaks as well.
+//NEED TO SET THE WIDTH OF THE FORM:
+  render() {
+    return (
+      <span className="ui form">
+        <br />
+        Current password:
+        <input as='input' type="password" placeholder="current password" ref={node => {
+          currentPassword = node
+        }} />
+        <br />
+        New password:
+        <input as='input' type="password" placeholder="new password" ref={node => {
+          newPassword = node
+        }} />
+        <br />
+        Confirm password:
+        <input type="password" placeholder="confirm password" ref={node => {
+          confirmPassword = node
+        }} />
+        <Input type="submit" value="Submit" />
+      </span>
+    );
+  }
 }
 
 class UserSettings extends Component {
@@ -47,55 +57,38 @@ class UserSettings extends Component {
   _submitHandler(e) {
     e.preventDefault();
     let { userId } = this.props.user;
-    fetch('/user/' + userId, {
-      method: 'GET',
-      headers: {
-        'Authorization': `Bearer ${sessionStorage.getItem('authToken')}`
-      }
-    })
-    .then(response => {
-      if (!response.ok) {
-        throw Error(response.statusText);
-      }
-
-      return response.json();
-    })
-    .then(data => {
-      if (currentPassword.value === data.password) {
-        if (newPassword.value === confirmPassword.value) {
-          fetch('/user/' + userId + '/changePassword', {
-            headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${sessionStorage.getItem('authToken')}`
-            },
-            method: 'POST',
-            body: JSON.stringify({
-              userId: userId,
-              password: newPassword.value
-            })
-          })
-          .then(response => {
-            if (!response.ok) {
-              throw Error('error');
-            } else {
-              alert('Successfully changed password');
-              _setInputsToNull();
-            }
-          })
-        } else {
-          alert('Please enter the same password');
-          _setInputsToNull();
+    if (newPassword.value !== confirmPassword.value) {
+      alert('Please enter the same password');
+      _setInputsToNull();
+    } else {
+      fetch('/user/' + userId + '/changePassword', {
+        headers: new Headers({
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${sessionStorage.getItem('authToken')}`
+        }),
+        method: 'POST',
+        body: JSON.stringify({
+          currentPassword: currentPassword.value,
+          newPassword: newPassword.value
+        })
+      })
+      .then(response => {
+        if (!response.ok) {
+          throw Error('Failed');
         }
-      } else {
-        alert('You entered the wrong current password');
+        return response.text();
+      })
+      .then(data => {
+         alert('Successfully changed the password');
+         this.setState({
+          toggle: !this.state.toggle
+         });
+      })
+      .catch(err => {
+        alert('Failed to change password');
         _setInputsToNull();
-      }
-    })
-    .catch(err => {
-      alert('Error: change password failed!');
-       _setInputsToNull();
-    });
+      })
+    }
   }
 
   render(){
@@ -110,7 +103,7 @@ class UserSettings extends Component {
           <br />
           Phone number: xxxxxxx
           <br />
-          <button onClick={(e) => {this._clickHandler(e)}}>Change password</button>
+          <Button onClick={(e) => {this._clickHandler(e)}} content="Change password" />
           {this.state.toggle? <ChangePassword /> : null}
           </form>
         </Container>

client/src/components/WriteMessage.jsx

@@ -49,8 +49,9 @@ class WriteMessage extends React.Component {
       dispatch(ChatActions.chatMessage(messagePayload));
     })
     .catch((error) => {
+      //this can dispatch an error to the reducer and when the fronend detects error, render something differently
       console.log('handleFormSubmit failed! Error: ', error);
-    })
+    });
   }
 
   // retrieveMessages() {

package.json

@@ -27,6 +27,7 @@
     "babel-preset-react": "^6.23.0",
     "babel-preset-stage-2": "^6.24.1",
     "bcrypt": "^1.0.2",
+    "bcrypt-promised": "^1.0.1",
     "body-parser": "^1.17.1",
     "cloudinary": "^1.8.0",
     "cookie-parser": "^1.4.3",

server/controllers/loginSignup.js

@@ -2,6 +2,7 @@ const router = require('express').Router();
 const model = require('../database/queries');
 const Moment = require('moment');
 const jwt = require('jsonwebtoken');
+const bcrypt = require('bcrypt-promised');
 
 const serverErr = { ERR: { status: 500, message: 'Something went wrong. So Sorry!' } };
 
@@ -14,25 +15,21 @@ router.post('/login', (req, res) => {
     if(response.length === 0) {
       throw Error('user does not exist!');
     } else {
-    //check if password matches the ones in database, consider HASH
-      if (response[0].password === password) {
-        //succeed! we can assign a token here!
+      bcrypt.compare(password, response[0].password)
+      .then(result => {
         let authToken = jwt.sign({
           username: username,
           userId: response[0].id,
           type: response[0].type,
           isAuthenticated: true,
           exp: Math.floor(Date.now() / 1000) + (60 * 60 * 24)
         }, process.env.jwtSecret);
-
         res.setHeader('x-username', username);
         res.setHeader('x-userId', response[0].id);
         res.setHeader('x-type', response[0].type);
         res.cookie('jwt', authToken);
         res.status(201).send(JSON.stringify(authToken));
-      } else {
-        throw Error('Wrong password');
-      }
+      });
     }
   })
   .catch(err => {
@@ -58,10 +55,19 @@ router.post('/signup', (req, res) => {
       //   email:
       //   type:
       // };
-      return model.createUser(req.body);
+      const saltRounds = 10;
+      return bcrypt.hash(password, saltRounds)
+            .then(hash => {
+              let userObj = Object.assign({}, req.body);
+              userObj.password = hash;
+              return userObj;
+            });
     }
   })
-  .then((result) => {
+  .then(result => {
+    return model.createUser(result);
+  })
+  .then(result => {
     let authToken = jwt.sign({
           username: username,
           userId: result[0].id,

server/controllers/user.js

@@ -1,6 +1,6 @@
 const router = require('express').Router();
 const model = require('../database/queries');
-const bcrypt = require('bcrypt');
+const bcrypt = require('bcrypt-promised');
 const authenticate = require('../middlewares/authenticate.js');
 
 const serverErr = { ERR: { status: 500, message: 'Something went wrong. So Sorry!' } };
@@ -20,12 +20,31 @@ router.get('/:userId', authenticate, (req, res) => {
 });
 
 router.post('/:userId/changePassword', authenticate, (req, res) => {
-  model.changeUserPassword(req.body.userId, req.body.password)
+  let { currentPassword, newPassword } = req.body;
+  let { userId } = req.user;
+
+  model.getUser(userId)
   .then(response => {
-    res.status(201).send('changed password');
+    bcrypt.compare(currentPassword, response[0].password)
+    .then(result => {
+      const saltRounds = 10;
+      bcrypt.hash(newPassword, saltRounds)
+      .then(hash => {
+        return model.changeUserPassword(userId, hash)
+        .then(response => {
+          res.status(201).send('Successfully changed password');
+        })
+        .catch(err => {
+          res.status(400).send('Failed to change password');
+        });
+      });
+    })
+    .catch(err => {
+      res.status(400).send('You entered wrong current password');
+    });
   })
   .catch(err => {
-    res.status(400).send('failed to change password');
+    res.status(400).send('Failed to change password');
   });
 });