Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // child component
- class LoginForm extends Component {
- constructor(props) {
- super(props);
- this.onChangeUsername = this.onChangeUsername.bind(this);
- this.onChangePassword = this.onChangePassword.bind(this);
- this.onSubmit = this.onSubmit.bind(this);
- this.state = {
- username: '',
- password: '',
- authenticated: false,
- };
- }
- onChangeUsername = (e) => {
- this.setState({username: e.target.value});
- };
- onChangePassword = (e) => {
- this.setState({password: e.target.value});
- };
- onSubmit(e) {
- const params = {
- username: this.state.username,
- password: this.state.password
- };
- // This is where you need to put your data to pass to the parent. Notice it's a prop. You pass whatever you want to the parent
- which you set here in the child
- this.props.callbackFromParent(params);
- e.preventDefault();
- };
- // parent component
- class Login extends Component {
- constructor(props) {
- super(props);
- this.state = {
- username: '',
- password: '',
- authenticated: false,
- loginData: {},
- status: 200,
- };
- }
- componentDidMount() {
- fetch('/users/authenticated')
- .then(res => res.text())
- .then(
- (res) => {
- if(res === 'true') {
- this.setState({authenticated: true});
- } else {
- this.setState({authenticated: false, loginData: {} });
- }
- }
- )
- .catch(err => console.log(err));
- }
- // callback function to loginFrom child component
- parentCallback = async (dataFromChild) => {
- await this.setState({ loginData: dataFromChild});
- // Axios.post('/users/test', this.state.loginData).then((data) => {
- // console.log(data);
- // }).catch(err => console.log(err));
- Axios.post('/users/login', this.state.loginData).then((data) => {
- data.status === 200 ? this.setState({ status: 200, authenticated: true }) : console.log('Unauthorized');
- }).catch((err) => {
- err ? this.setState({ status: 401, authenticated: false }) : console.log('No errors');
- });
- }
- render() {
- const { authenticated } = this.state;
- const { status } = this.state;
- if(authenticated === true) {
- return(
- <div>
- <Redirect to="/income"/>
- </div>
- )
- } else {
- return status === 401 ? <div className="App"><LoginForm callbackFromParent={this.parentCallback}/><br/><span className="errorMessage">Username and password do not match.<br/>Please try again.</span></div> : <div className="App"><LoginForm callbackFromParent={this.parentCallback}/></div>;
- }
- }
- }
- export default Login
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement