frontend/smart-hut/src/views/Login.js

import React, {Component} from 'react';
import {Button, Form, Grid, Header, Image, Message, Icon, Checkbox, Input} from 'semantic-ui-react';

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: "",
      password : "",
      fireRedirect: false,
      error : { state : false,
                message: ""},
    };
  }

  handleLogin = (e) => {

    e.preventDefault();
		const params = {
			"usernameOrEmail": this.state.user,
      "password": this.state.password,
    };

    this.props.auth({
      user: this.state.user,
      params : params,
    }).then(res => {
      if (res.status === "Errore") {
        this.setState({error: { state: true,
                                message: "Errore"}});
      }
    }).catch(err => {
      console.log(err);
    });
  };

  onChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: val});
  };

  toggle = () => this.setState((prevState) => ({ rememberme: !prevState.rememberme }));

  render() {
    return (
      <React.Fragment>
        <Button
          circular
          icon="right arrow"
          style={{margin: "2em"}}
          href="/"
        >
          <Icon name='arrow alternate circle left'/>
          Go Home
        </Button>
        <Grid textAlign='center' style={{height: '70vh'}} verticalAlign='middle'>
          <Grid.Column style={{maxWidth: 450}}>
            <Header as='h2' color='blue' textAlign='center'>
              <Image src='img/logo.png'/> Log-in to SmartHut
            </Header>
            <Form size='large' style={{marginTop : "2em"}}  error={this.state.error.state}>
                <Message
                  error
                  header='Login Error'
                  content= {this.state.error.message}
                />
                <Form.Input
                  control={Input}
                  type="text"
                  icon='user'
                  name="user"
                  iconPosition='left'
                  placeholder='Username or E-mail'
                  onChange={this.onChangeHandler}
                />
                <Form.Input
                  icon='lock'
                  iconPosition='left'
                  placeholder='Password'
                  name="password"
                  type='password'
                  onChange={this.onChangeHandler}
                />
              <Checkbox type="checkbox" name="rememberme" onClick={this.toggle} label='Remember me' style={{margin: "1.5em 0", float : "left"}}/>

              <Button  color='blue' fluid size='large' onClick={this.handleLogin}>
                  Login
              </Button>
            </Form>
            <Message>
              <p><a href="/forgot-password">Forgot Password?</a></p>
              <p>New to us? <a href='/signup'>  Sign Up</a></p>
            </Message>
          </Grid.Column>
        </Grid>
      </React.Fragment>
    )
  }
}