log in integration start
This commit is contained in:
parent
c45ae3c873
commit
b6f8158956
|
@ -4,7 +4,8 @@
|
||||||
"description": "sign up and sign in auth",
|
"description": "sign up and sign in auth",
|
||||||
"main": "server.js",
|
"main": "server.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "nodemon server.js"
|
"start": "nodemon server.js",
|
||||||
|
"app": "cd .. && npm start"
|
||||||
},
|
},
|
||||||
"author": "B. Priyatham Sai chand",
|
"author": "B. Priyatham Sai chand",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
|
|
|
@ -1,57 +1,45 @@
|
||||||
import React, { Component } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
class SignInForm extends Component {
|
const SignInForm = () => {
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
this.state = {
|
let [data,setData] = useState({
|
||||||
email: '',
|
email: '',
|
||||||
password: ''
|
password: ''
|
||||||
};
|
|
||||||
|
|
||||||
this.handleChange = this.handleChange.bind(this);
|
|
||||||
this.handleSubmit = this.handleSubmit.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleChange(e) {
|
|
||||||
let target = e.target;
|
|
||||||
let value = target.type === 'checkbox' ? target.checked : target.value;
|
|
||||||
let name = target.name;
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
[name]: value
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const handleChange = e => {
|
||||||
|
|
||||||
|
setData({...data,[e.target.name]: e.target.value});
|
||||||
|
|
||||||
|
}
|
||||||
|
const submitData = () => {
|
||||||
|
console.log(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSubmit(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
console.log('The form was submitted with the following data:');
|
|
||||||
console.log(this.state);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
let {email,password} = data;
|
||||||
return (
|
return (
|
||||||
<div className="FormCenter">
|
<div className="FormCenter">
|
||||||
<form onSubmit={this.handleSubmit} className="FormFields" onSubmit={this.handleSubmit}>
|
<form className="FormFields">
|
||||||
<div className="FormField">
|
<div className="FormField">
|
||||||
<label className="FormField__Label" htmlFor="email">E-Mail Address</label>
|
<label className="FormField__Label" htmlFor="email">E-Mail Address</label>
|
||||||
<input type="email" id="email" className="FormField__Input" placeholder="Enter your email" name="email" value={this.state.email} onChange={this.handleChange} />
|
<input type="email" id="email" className="FormField__Input" value={ email } placeholder="Enter your email" name="email" onChange={(e) => handleChange(e)} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="FormField">
|
<div className="FormField">
|
||||||
<label className="FormField__Label" htmlFor="password">Password</label>
|
<label className="FormField__Label" htmlFor="password">Password</label>
|
||||||
<input type="password" id="password" className="FormField__Input" placeholder="Enter your password" name="password" value={this.state.password} onChange={this.handleChange} />
|
<input type="password" id="password" className="FormField__Input" value={ password } placeholder="Enter your password" name="password" onChange={(e) => handleChange(e)} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="FormField">
|
<div className="FormField">
|
||||||
<button className="FormField__Button mr-20">Sign In</button> <Link exact to="/sign-up" className="FormField__Link">Not a member?</Link>
|
<button className="FormField__Button mr-20" onClick={() => submitData()}>Sign In</button> <Link exact to="/sign-up" className="FormField__Link">Not a member?</Link>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
export default SignInForm;
|
export default SignInForm;
|
Loading…
Reference in New Issue