1import React from 'react';
2import {sendFormData} from '../services/';
3
4class Signup extends React.Component{
5  constructor(props){
6    super(props);
7     this.state = {
8       isDisabled:true
9     }                                                                                                 
10     this.submitForm = this.submitForm.bind(this);
11  }
12  validateEmail(email){
13   const pattern = /[a-zA-Z0-9]+[\.]?([a-zA-Z0-9]+)?[\@][a-z]{3,9}[\.][a-z]{2,5}/g;
14   const result = pattern.test(email);
15   if(result===true){
16     this.setState({
17       emailError:false,
18       email:email
19     })
20   } else{
21     this.setState({
22       emailError:true
23     })
24   }
25 }
26 handleChange(e){
27  const target = e.target;
28  const value = target.type === 'checkbox' ? target.checked : target.value;
29  const name = target.name;
30  this.setState({
31    [name]: value
32  });
33  if(e.target.name==='firstname'){
34    if(e.target.value==='' || e.target.value===null ){
35      this.setState({
36        firstnameError:true
37      })
38    } else {
39      this.setState({
40        firstnameError:false,     
41        firstName:e.target.value
42      })
43    }
44  }
45  if(e.target.name==='lastname'){
46    if(e.target.value==='' || e.target.value===null){
47      this.setState({
48        lastnameError:true
49      })
50    } else {
51      this.setState({
52        lastnameError:false,
53        lastName:e.target.value
54      })
55    }
56  }
57  if(e.target.name==='email'){
58   this.validateEmail(e.target.value);
59  }
60  if(e.target.name==='password'){
61    if(e.target.value==='' || e.target.value===null){
62      this.setState({
63        passwordError:true
64      })
65    } else {
66      this.setState({
67        passwordError:false,
68        password:e.target.value
69      })
70    }
71 }
72 if(this.state.firstnameError===false && this.state.lastnameError===false && 
73  this.state.emailError===false && this.state.passwordError===false){
74    this.setState({
75      isDisabled:false
76    })
77 }
78}
79submitForm(e){
80  e.preventDefault();
81  const data = {
82   firstName: this.state.firstName,
83   lastName: this.state.lastName,
84   email: this.state.email,
85   password: this.state.password
86  }
87  sendFormData(data).then(res=>{
88    if(res.status===200){
89      alert(res.data);
90      this.props.history.push('/');
91    }else{
92
93    } 
94  });
95 }
96render(){
97return(
98  <div className="container">
99    <div className="card card-login mx-auto mt-5">
100      <div className="card-header">Register here</div>
101        <div className="card-body">
102            <form id="signup-form">
103              <div className="form-group">
104                <div className="form-label-group">
105                  <input type="text" id="firstname" name="firstname" className="form-control" placeholder="Enter firstname" onChange={(e)=>{this.handleChange(e)}} />
106                  <label htmlFor="firstname">firstname</label>
107                  {this.state.firstnameError ? <span style={{color: "red"}}>Please Enter some value</span> : ''} 
108                </div>
109              </div>
110              <div className="form-group">
111                <div className="form-label-group">
112                  <input type="text" id="lastname" name="lastname" className="form-control" placeholder="Enter lastname" onChange={(e)=>{this.handleChange(e)}} />
113                  <label htmlFor="lastname">lastname</label>
114                  {this.state.lastnameError ? <span style={{color: "red"}}>Please Enter some value</span> : ''}
115                </div>
116              </div>
117              <div className="form-group">
118                <div className="form-label-group">
119                  <input type="email" id="email" name="email" className="form-control" placeholder="Enter your email" onChange={(e)=>{this.handleChange(e)}} />
120                  <label htmlFor="email">email</label>
121                  {this.state.emailError ? <span style={{color: "red"}}>Please Enter valid email address</span> : ''}
122                </div>
123              </div>                
124              <div className="form-group">
125                <div className="form-label-group">
126                  <input type="password" id="password" name="password" className="form-control" placeholder="Password" onChange={(e)=>{this.handleChange(e)}} />
127                  <label htmlFor="password">Password</label>
128                  {this.state.passwordError ? <span style={{color: "red"}}>Please enter some   value</span> : ''}
129                </div>
130              </div>                
131              <button className="btn btn-primary btn-block" disabled={this.state.isDisabled} onClick={this.submitForm}>Signup</button>
132            </form>
133        </div>
134      </div>
135    </div>
136  );
137 }
138}
139export default Signup;
140

1if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)) {
2