Source: components/contributepage/ForgotPassword.js

import React, { Component } from 'react'
import Header from '../header/Header';
import Subheader from '../subheader/Subheader';
import { Link } from 'react-router-dom';
import getTranslation from '../../i18n/'
import EmailValidator from 'email-validator'
import Footer from '../footer/Footer'

/**
 * Forgot password form
 */
class ForgotPassword extends Component {

    constructor(props) {
        super(props);
        this.state = {
            emailForm: true,
            passwordForm: false,
            email: '',
            errorMessages: [],
            errors: {
            email: false
            }
        }
    }

    /** 
     * Update the fields, function gets called if any of the form fields gets changed
     * @param  {} event
     */
    updateField(event) {
        const target = event.target;
        const name = target.name;
        const value = target.value;
        this.setState({ [name] : value })

        let errors = this.state.errors;

        // If the field is empty set the error state for this field to true
        if(event.target.value === '') {
            errors[name] = true;
        } else {
            errors[name] = false;
        }

        // If the email field does not contain a valid email set the error state for this field to true
        if(name === 'email') {
            if(!EmailValidator.validate(event.target.value)) {
                errors[name] = true;
            } else {
                errors[name] = false;
            }
        }
    }

    /**
     * The actual request for the password forgotten function
     * Validates the given email and if no error exists dispatches the forgotPassword action
     * @param  {} event
     */
    forgotPasswordRequest(event) {
        event.preventDefault()
        let errorMessages = [];

        // Check if valid email is given
        if(!EmailValidator.validate(this.state.email)) {
            errorMessages.push('forms.general.error.message.valid_email');
        }

        // If no validation error => dispatch forgotPassword action
        if(errorMessages.length === 0) {
            this.props.forgotPassword(this.state.email);
        }
        this.setState({errorMessages: errorMessages});
    }

    render() {

        // By default no fetching is happening
        let errorMessages = this.state.errorMessages;

        // Fetch error message from response, if error does not exist in state yet push it in the errorMessages array
        if((this.props.fetching.formRequest.form === 'forgotpassword') && (!this.props.fetching.formRequest.isFetching) && (!this.props.fetching.formRequest.status)) {
            let index_of = errorMessages.indexOf(this.props.fetching.formRequest.message);
            if(index_of === -1) {
                errorMessages.push(this.props.fetching.formRequest.message)
            }
        }

        return(
            <div>
                <Header />
                <div className="container container-small">
                    <Subheader title={"subheader.reset_password"} />
                </div>
                <div className="container container-very-small">
                    <div className="default-element default-element-dark">
                        <h3>{getTranslation("forgotpassword.title")}</h3>
                        <div className="default-element-content">
                            {((this.props.fetching.formRequest.form === 'forgotpassword') && (this.props.fetching.formRequest.isFetching)) &&
                                <div>
                                    <div className="loader"></div>
                                </div>
                            }
                            {((this.props.fetching.formRequest.form !== 'forgotpassword') && (!this.props.fetching.formRequest.isFetching) && (!this.props.fetching.formRequest.status)) &&
                                <div>
                                    <p>{getTranslation("forgotpassword.teaser")}</p>
                                    {errorMessages.length > 0 &&
                                        <div className="error-messages">
                                            {errorMessages.map((error, index) =>
                                                <p key={index}>{getTranslation(error)}</p>
                                            )}
                                        </div>
                                    }
                                    <form onSubmit={(e) => this.forgotPasswordRequest(e)}>
                                      <label className="centered">{getTranslation('forms.general.email.label')}:{this.state.errors.email && <span className="validation-error">{getTranslation('forms.general.error.hints.valid_email')}</span>}</label>
                                      <input name="email" className={(this.state.errors.email ? 'v-error' : 'v-check')} type="email" placeholder={getTranslation('forms.general.email.placeholder')} value={this.state.email} onChange={(e) => this.updateField(e)} />
                                      <button type="submit" className="btn-icon btn-green btn-signin">{getTranslation("forgotpassword.button.submit")}</button> <span className="green-link"><Link to="/experts/contribute">{getTranslation("forgotpassword.back_to_signin")}</Link></span>
                                    </form>
                                </div>
                            }
                            {((this.props.fetching.formRequest.form === 'forgotpassword') && (!this.props.fetching.formRequest.isFetching)) &&
                                <div>
                                    <div className="big-icon-container">
                                            <i className={"fa "+(!this.props.fetching.formRequest.status ? "fa-times" : "fa-check")+" big-icon"} aria-hidden="true"></i>
                                    </div>
                                    <p>{getTranslation(this.props.fetching.formRequest.message)}</p>
                                    <Link to="/experts"><button className="btn btn-green centered">{getTranslation("forgotpassword.back_to_homepage")}</button></Link>
                                </div>
                            }


                        </div>
                    </div>
                </div>
                <div className="container container-small">
                <Footer pages={this.props.pages} />
                </div>
            </div>
        )
    }
}
export default ForgotPassword;