frontend/smart-hut/src/views/Forgot-password.js

import React, {Component} from 'react';
import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react';
import {Redirect } from "react-router-dom";
import { call } from '../client_server';


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

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

    handleSendEmail = (e) => {
      e.preventDefault();
      const params = {
        "email" : this.state.user,
      }

      call.initResetPassword(params)
        .then(res => {
          console.log(res);
          if (res.status === 200) {
            this.setState({success : true});
          }
          if (res.status === "Errore") {
            this.setState({ error: { state: true,
                            message: "Errore"}});
          }
          //set a message that an email has been sent
        }).catch(err => {
            console.log(err);
        });
    };

    render() {
        if (this.state.success) {
          return <Redirect to="sent-email" />
        }
        return (
          <React.Fragment>
            <Button
              circular
              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'/> Reset Password
                </Header>
                <Form size='large' style={{marginTop : "2em"}} error={this.state.error.state}>
                    <Message
                      error
                      header='Send E-mail Error'
                      content= {this.state.error.message}
                    />
                    <Form.Input
                        icon='address card outline'
                        iconPosition='left'
                        placeholder='Username or E-mail'
                        name="user"
                        type='text'
                        onChange={this.onChangeHandler}
                        required
                    /> 
                    <Button  color='blue' fluid size='large' onClick={this.handleSendEmail}>
                        Send E-mail
                    </Button>
                </Form>
              </Grid.Column>
            </Grid>
          </React.Fragment>
        )
      }
}