Source: components/contributepage/ConfirmAccount.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 Footer from '../footer/Footer'

/**
 * Confirm account component
 */
class ConfirmAccount extends Component {

    constructor(props) {
        super(props);
        this.state = {confirm: false}
    }

    componentDidMount() {
        // When component is mounted do the confirmation check
        this.confirmUser();
    }

    /**
     * Actually confirm the user
     * If no confirmation code or email is given via the URL the confirm: false state stays
     * If confirmation code and email are given, the confirmAccount action is dispatched
     */
    confirmUser() {
        if((this.props.confirmationCode) && (this.props.email)) {
            this.setState({confirm: true})
            this.props.confirmAccount(this.props.confirmationCode, this.props.email);
        }
    }

    render() {

        return(
            <div>
                <Header />
                <div className="container container-small">
                    <Subheader title={"subheader.confirm_account"} />
                </div>
                <div className="container container-very-small">
                    <div className="default-element">
                        <h3>{getTranslation("confirmaccount.title")}</h3>
                        <div className="default-element-content">
                        {((this.props.fetching.dataFetching.data === 'confirm') && (this.props.fetching.dataFetching.isFetching)) &&
                            <div>
                                <div className="loader"></div>
                                <p>{getTranslation("confirmaccount.checking")}</p>
                            </div>
                        }
                        {((this.props.fetching.dataFetching.data !== 'confirm') && (!this.props.fetching.dataFetching.isFetching) && (!this.state.confirm)) &&
                            <div>
                                <p>{getTranslation("confirmaccount.thank_you")}</p>
                                <p>{getTranslation("confirmaccount.next_steps")}</p>
                            </div>
                        }
                        {((this.props.fetching.dataFetching.data === 'confirm') && (!this.props.fetching.dataFetching.isFetching) && (this.state.confirm)) &&
                            <div>
                                <div className="big-icon-container">
                                        <i className={"fa "+(!this.props.fetching.dataFetching.status ? "fa-times" : "fa-check")+" big-icon"} aria-hidden="true"></i>
                                </div>
                                <p>{getTranslation(this.props.fetching.dataFetching.message)}</p>
                            </div>
                        }
                            <Link to="/experts"><button className="btn btn-green centered">{getTranslation("confirmaccount.linkback")}</button></Link>
                        </div>
                    </div>
                </div>
                <div className="container container-small">
                <Footer pages={this.props.pages} />
                </div>
            </div>
        )
    }
}
export default ConfirmAccount;