Merge pull request #74 from RobertoLewis/dev

[add] username appears in header on successful login or registration
inky-inc · Jul 5, 2016 · 64ed837 · 64ed837
2 parents 0608700 + ed4ed8f
commit 64ed837
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 16 deletions.
diff --git a/applications/auth/authentication.js b/applications/auth/authentication.js
@@ -11,13 +11,16 @@ function tokenForUser(user) {
 exports.signin = function(req, res, next) {
   //give user a token
   console.log("Inside signin");
-  res.send({ token: tokenForUser(req.user) });
+
+  console.log("username inside signin: ", req.user.username);
+  res.send({ token: tokenForUser(req.user),
+  username: req.user.username  });
 
 }
 
 exports.signup = function(req, res, next) {
   // res.send({ success: 'true'});
-  // console.log(req.body);
+  console.log("req.body: " , req.body);
   const email = req.body.email;
   const username = req.body.username
   const password = req.body.password;
@@ -44,7 +47,8 @@ exports.signup = function(req, res, next) {
     user.save(function(err) {
       if (err) { return next(err); }
       //respond to request indicating user was created
-      res.json({ token: tokenForUser(user) });
+      console.log("user created. username: ", user.username);
+      res.json({ token: tokenForUser(user), username: user.username });
     });
 
 

diff --git a/applications/kcp-main/shared/components/Profile/login.js b/applications/kcp-main/shared/components/Profile/login.js
@@ -11,7 +11,7 @@ import * as actions from '../../redux/actions';
   handleFormSubmit({ email, password }) {
     console.log(email, password);
     //log user in
-    this.props.loginUser({ email, password});
+    this.props.loginUser({ email, password });
   }
 
   renderAlert() {
@@ -24,8 +24,6 @@ import * as actions from '../../redux/actions';
     }
   }
 
-
-
   render() {
     const { handleSubmit, fields: { email, password} } = this.props;
 

diff --git a/applications/kcp-main/shared/components/Profile/registration.js b/applications/kcp-main/shared/components/Profile/registration.js
@@ -1,29 +1,107 @@
 import React, {PropTypes, Component} from 'react';
+import { reduxForm } from 'redux-form';
+import * as actions from '../../redux/actions';
 
-export default class Registration extends Component {
+class Registration extends Component {
   constructor(props) {
     super(props);
 
   }
 
+  handleFormSubmit(formProps) {
+    // console.log("registration info: ", formProps);
+    // Call action creator to sign up the user
+    this.props.registerUser(formProps);
+
+  }
+
+  renderAlert() {
+    if (this.props.errorMessage) {
+      return (
+        <div className="alert alert-danger">
+          <strong>Error</strong> {this.props.errorMessage}
+        </div>
+      );
+    }
+  }
+
   render() {
+    const { handleSubmit, fields: { username, email, password, passwordConfirm }} = this.props;
+
     return (
       <div className="registration-page">
         <div className="form">
-          <form className="registration-form">
-            <input type="text" placeholder="username"/>
-            <input type="text" placeholder="email"/>
-            <input type="text" placeholder="password"/>
-            <input type="text" placeholder="confirm password"/>
-            <button className="btn btn-default btn-lg" >register</button>
+          <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))} className="registration-form">
+            <fieldset className="form-group" >
+              <label>username</label>
+              <input className="form-control" placeholder="username"{...username}/>
+              {username.touched && username.error && <div className="error">{username.error}</div>}
+            </fieldset>
+            <fieldset className="form-group">
+              <label>email</label>
+              <input className="form-control" placeholder="[email protected]" {...email}/>
+              {email.touched && email.error && <div className='error'>{email.error}</div>}
+            </fieldset>
+            <fieldset className="form-group">
+              <label>password</label>
+              <input className="form-control" type="password" placeholder="password" {...password}/>
+              {password.touched && password.error && <div className="error">{password.error}</div>}
+            </fieldset>
+            <fieldset className="form-group">
+              <label>confirm password</label>
+              <input className="form-control" type="password" placeholder="password" {...passwordConfirm}/>
+              {passwordConfirm.touched && passwordConfirm.error && <div className='error'>{passwordConfirm.error}</div>}
+            </fieldset>
+            {this.renderAlert()}
+
+            <button action="submit" className="btn btn-default btn-lg" >register</button>
 
           </form>
         </div>
 
-
       </div>
 
     );
   }
 
 }
+
+function validate(formProps) {
+  const errors = {};
+
+  if (!formProps.username) {
+    errors.username = 'Please enter a username';
+  }
+
+  if (!formProps.email) {
+    errors.email = 'Please enter an email';
+  }
+
+  if (!formProps.password) {
+    errors.password = 'Please enter a password';
+  }
+
+  if (!formProps.passwordConfirm) {
+    errors.passwordConfirm = 'Please enter a password confirmation';
+  }
+
+  //ensures that passwords match
+  if (formProps.password !== formProps.passwordConfirm) {
+    errors.password = 'Passwords must match';
+  }
+
+  console.log("formProps: ", formProps);
+
+  return errors;
+}
+
+function mapStateToProps(state) {
+  return { errorMessage: state.auth.error };
+
+}
+
+export default reduxForm({
+  form: 'registration',
+  fields: ['username', 'email', 'password', 'passwordConfirm'],
+  validate
+}, mapStateToProps, actions)(Registration);
diff --git a/applications/kcp-main/shared/components/header.js b/applications/kcp-main/shared/components/header.js
@@ -13,6 +13,7 @@ class Header extends Component {
     //if authenticated
     if(this.props.authenticated) {
       console.log("authenticated? ", this.props.authenticated);
+
       return [
         <li><div onClick={event => this.goToProfilePage()} href="#" key={1}>profile</div></li>,
         <li><div onClick={event => this.goToPasswordReset()} href="#" key={2}>change password</div></li>,
@@ -31,13 +32,20 @@ class Header extends Component {
 
   }
 
+  renderLinks2() {
+    if(this.props.authenticated){
+      return (<li><div><h3>Hello, {localStorage.kcpUsername}</h3></div></li>);
+    }
+  }
+
 
   render() {
     return (
       <nav className="navbar navbar-light bg-faded" >
         <div className="container-fluid">
           {/*KCP title button*/}
             <ul className="nav navbar-nav navbar-right">
+              {this.renderLinks2()}
               <li className="dropdown">
                 <button href="#" className="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">menu <span className="caret"></span></button>
                 <ul className="dropdown-menu">

diff --git a/applications/kcp-main/shared/redux/actions/index.js b/applications/kcp-main/shared/redux/actions/index.js
@@ -64,9 +64,11 @@ export const loginUser = ({ email, password }) => {
     .then(response => {
       // If request is good
       // update state to indicate user is authenticated
-      dispatch({ type: AUTH_USER });
+      console.log("response and username: ", response.data.username);
+      dispatch(setLoggedInUser());
       // save JWT
       localStorage.setItem('token', response.data.token);
+      localStorage.setItem('kcpUsername', response.data.username);
       // redirect to correct routes
       browserHistory.push('/browse');
     })
@@ -80,6 +82,30 @@ export const loginUser = ({ email, password }) => {
   }
 }
 
+export const registerUser = ({ username, email, password }) => {
+  console.log("inside registerUser");
+  return function(dispatch) {
+    request.post(`${ROOT_URL}/auth/registration`, {  username, email, password })
+      .then(response => {
+        dispatch(setLoggedInUser());
+        localStorage.setItem('token', response.data.token);
+        localStorage.setItem('kcpUsername', response.data.username);
+        browserHistory.push('/browse');
+
+      })
+      .catch(response => dispatch(authError(response.data.error)));
+
+  }
+
+}
+
+export function setLoggedInUser(){
+  console.log("setLoggedInUser");
+  return {
+    type: AUTH_USER
+  };
+}
+
 export function authError(error) {
   return {
     type: AUTH_ERROR,
@@ -89,6 +115,7 @@ export function authError(error) {
 
 export function logoutUser() {
   localStorage.removeItem('token');
+  localStorage.removeItem('kcpUsername');
 
   return { type: UNAUTH_USER };
 }
diff --git a/applications/kcp-main/shared/redux/reducers/authReducer.js b/applications/kcp-main/shared/redux/reducers/authReducer.js
@@ -3,7 +3,7 @@ import { AUTH_USER, UNAUTH_USER, AUTH_ERROR } from '../actions/types';
 export default function(state = {}, action) {
   switch(action.type) {
     case AUTH_USER:
-      return { ...state, authenticated: true };
+      return { ...state, error: '', authenticated: true };
     case UNAUTH_USER:
       return { ...state, authenticated: false };
     case AUTH_ERROR:

diff --git a/applications/kcp-main/shared/styles/style.css b/applications/kcp-main/shared/styles/style.css
@@ -1,5 +1,9 @@
 /*begin form*/
 
+.error {
+  color: red;
+}
+
 .login-page {
   width: 360px;
   padding: 8% 0 0;

diff --git a/autoload/applications.json b/autoload/applications.json
@@ -1,4 +1,11 @@
 [
+	{
+		"app_name": "Kidz Coloring Pages Authorization",
+		"app_description": "KCP Authorization",
+		"base_url": "/auth",
+		"app_dir": "/auth",
+		"entry": "/app.js"
+	},
 
 	{
 		"app_name": "Kidz Coloring Pages API",