feature: implement Inline errors for signup form

ddouglasz · Apr 24, 2018 · ca9643e · ca9643e
1 parent b93094c
commit ca9643e
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 41 deletions.
diff --git a/app.js b/app.js
@@ -4,7 +4,7 @@ import bodyParser from 'body-parser';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import logger from 'morgan';
 import path from 'path';
-import routes from './server/routes/routes';
+import routes from './server/routes/router';
 import config from './webpack.config.dev';
 
 const app = express();

diff --git a/client/src/components/account/SIgnUp.jsx b/client/src/components/account/SIgnUp.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { PropTypes } from 'prop-types';
 import toastr from 'toastr';
-import  SignUpForm  from './SIgnUpForm';
+import SignUpForm from './SIgnUpForm';
 import { connect } from 'react-redux';
 import { signupAction } from '../../actions/signupActions';
 
@@ -12,12 +12,12 @@ class SignUp extends React.Component {
   render() {
     const { signupAction } = this.props;
     return (
-      <SignUpForm signupAction={ signupAction }  />
-     );
+      <SignUpForm signupAction={signupAction} />
+    );
   }
-} 
+}
 
- SignUp.propTypes = {
+SignUp.propTypes = {
   signupAction: PropTypes.func.isRequired
 }
 

diff --git a/client/src/components/account/SIgnUpForm.jsx b/client/src/components/account/SIgnUpForm.jsx
@@ -2,8 +2,7 @@ import React from 'react';
 import { PropTypes } from 'prop-types'; 
 import { Link } from 'react-router-dom';
 import { signupAction } from "../../actions/signupActions";
-// import InputField from '../common/InputField';
-// import SignUp from     './SignUp';
+import classnames from 'classnames';
 
 class SignUpForm extends React.Component {
   constructor(props){
@@ -12,44 +11,39 @@ class SignUpForm extends React.Component {
       firstName: '',
       lastName: '',
       email: '',
-      password: ''
+      password: '',
+      errors: [],
+      isLoading: false
     }
     this.onChange = this.onChange.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
-  }
-   // handleChange(event) {
-  //   const entries = this.state.data;
-  //   entries[event.target.id] = event.target.value;
-  //   this.setState({ data: entries });
-  // }
+  };
+
+
 
   onChange(e) {
     this.setState({ [e.target.name]: e.target.value });
   }
 
 onSubmit(e) {
 e.preventDefault();
-this.props.signupAction(this.state);
+this.setState({ errors : [] , isLoading: true });
+  this.props.signupAction(this.state).then(
+    () => {
+      // this.props.addFlashMessage({
+      //          type: 'sucess',
+      //          text: 'You have successfully signup, welcome'
+      //      })
+      this.context.router.history.push('/businessCatalog');
+    },
+    ({ response }) => this.setState({ errors: response.data.message, isLoading: false })
+  );
 }
 
-  render() {
-
 
-    //   const propTypes = {
-    //   onChange: PropTypes.func,
-    //   onClickSave: PropTypes.func,
-    //   firstName: PropTypes.string,
-    //   lastName: PropTypes.string,
-    //   email: PropTypes.string,
-    //   password: PropTypes.string,
-    // }
-
-
-    // function SignUpForm ({
-    //   firstName, onChange, lastName, email, password, onClickSave
-    // } ) {
+  render() {
+    const { errors } = this.state;
     return (
-      // <form onSubmit={this.onSubmit}>
       <div className="gen background" onSubmit={this.onSubmit}>
         <div className="signup-page-background">
           <form className="form-signup form-spacing" >
@@ -63,6 +57,8 @@ this.props.signupAction(this.state);
             <div className="signup-input-style">
               <div className="row">
                 <div className="col-md-12">
+                {errors && <span className="help-block text-danger">{errors}</span>  }
+
                   <div className="form-group form-spacing">
                     <div className="input-group mb-2 mr-sm-2 mb-sm-0">
                       <div className="input-group-addon" style={{ width: 2.6 + 'rem' }} >
@@ -76,10 +72,11 @@ this.props.signupAction(this.state);
                         placeholder="First Name"
                         value={this.state.firstName}
                         onChange={this.onChange}
-                        dataerror="First Name is required"
+                        required
+                        autoFocus
                       />
+                     </div>
                     </div>
-                  </div>
                 </div>
                 <div className="col-md-12">
                   <div className="form-group form-spacing">
@@ -116,7 +113,7 @@ this.props.signupAction(this.state);
                         placeholder="E-Mail Address"
                         value={this.state.email}
                         onChange={this.onChange}
-                        // required
+                        required
                         autoFocus
                       />
                     </div>
@@ -139,26 +136,29 @@ this.props.signupAction(this.state);
                         placeholder="Password*"
                         value={this.state.password}
                         onChange={this.onChange}
-                        // required
+                        required
                       />
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-            <button type="submit" className="btn  btn-decor btn-success btn-block" >
+            <button disabled={this.state.isLoading} className="btn  btn-decor btn-success btn-block" >
               <i className="fa font-b fa-user-plus" />
             </button>
           </form>
         </div>
       </div>
-      // </form>
 
     );
   }
 }
 SignUpForm.propTypes = {
   signupAction: PropTypes.func.isRequired
 }
+SignUpForm.contextTypes = {
+  router: PropTypes.object.isRequired
+}
+
 
 export default SignUpForm;
diff --git a/client/src/components/businesses/BusinessProfile.jsx b/client/src/components/businesses/BusinessProfile.jsx
@@ -107,7 +107,7 @@ const BusinessProfile = () => {
                 </div>
               </div>
               <div className="form-group form-spacing row">
-                <label for="smFormGroupInput" className="col-sm-12 col-form-label col-form-label-sm" />
+                <label htmlFor="smFormGroupInput" className="col-sm-12 col-form-label col-form-label-sm" />
                 <div className="col-sm-8" id="description">
                   <textarea className="form-control" id="exampleTextarea" rows="3" placeholder="add a review" />
                 </div>

diff --git a/client/src/components/businesses/EditBusiness.jsx b/client/src/components/businesses/EditBusiness.jsx
@@ -36,7 +36,7 @@ const EditBusiness = () => {
                             <div className="form-group form-spacing">
                                 <label className="col-sm-3 control-label" ><strong>Business description:</strong></label>
                                 <div className="form-group form-spacing row">
-                                        <label for="smFormGroupInput" className="col-sm-12 col-form-label col-form-label-sm"></label>
+                                        <label htmlFor="smFormGroupInput" className="col-sm-12 col-form-label col-form-label-sm"></label>
                                         <div className="col-sm-8" id="description">
                                           <textarea className="form-control" id="exampleTextarea" rows="4" placeholder="add brief summary of business content here..."></textarea>
                                         </div>

diff --git a/client/src/components/businesses/RegisterBusiness.jsx b/client/src/components/businesses/RegisterBusiness.jsx
@@ -36,7 +36,7 @@ const RegisterBusiness = () => {
                             <div className="form-group form-spacing">
                                 <label className="col-sm-3 control-label" ><strong>Business description:</strong></label>
                                 <div className="form-group form-spacing row">
-                                        <label for="smFormGroupInput" className="col-sm-12 col-form-label col-form-label-sm"></label>
+                                        <label htmlFor="smFormGroupInput" className="col-sm-12 col-form-label col-form-label-sm"></label>
                                         <div className="col-sm-8" id="description">
                                           <textarea className="form-control" id="exampleTextarea" rows="4" placeholder="add brief summary of business content here..."></textarea>
                                         </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "body-parser": "^1.18.2",
     "chai": "^4.1.2",
     "chai-http": "^3.0.0",
+    "classnames": "^2.2.5",
     "cross-fetch": "^2.1.0",
     "dotenv": "^5.0.1",
     "eslint": "^4.9.0",