should_verify_email.jsx 3.79 KB
Newer Older
1 2
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
3

4
import PropTypes from 'prop-types';
5
import React from 'react';
6
import {FormattedMessage} from 'react-intl';
7

8
import {resendVerification} from 'actions/user_actions.jsx';
9
import BackButton from 'components/common/back_button.jsx';
10
import {localizeMessage} from 'utils/utils.jsx';
11

12 13 14 15 16
export default class ShouldVerifyEmail extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
17
            resendStatus: 'none',
18 19
        };
    }
20 21

    handleResend = () => {
22
        const email = (new URLSearchParams(this.props.location.search)).get('email');
23 24 25

        this.setState({resendStatus: 'sending'});

26
        resendVerification(
27 28 29 30 31 32 33 34
            email,
            () => {
                this.setState({resendStatus: 'success'});
            },
            () => {
                this.setState({resendStatus: 'failure'});
            }
        );
35 36 37 38 39 40 41 42
    }
    render() {
        let resendConfirm = '';
        if (this.state.resendStatus === 'success') {
            resendConfirm = (
                <div>
                    <br/>
                    <p className='alert alert-success'>
43 44 45 46
                        <i
                            className='fa fa-check'
                            title={localizeMessage('generic_icons.success', 'Success Icon')}
                        />
47 48 49 50 51 52 53 54 55 56 57 58 59 60
                        <FormattedMessage
                            id='email_verify.sent'
                            defaultMessage=' Verification email sent.'
                        />
                    </p>
                </div>
            );
        }

        if (this.state.resendStatus === 'failure') {
            resendConfirm = (
                <div>
                    <br/>
                    <p className='alert alert-danger'>
61 62 63 64
                        <i
                            className='fa fa-times'
                            title={localizeMessage('generic_icons.fail', 'Faliure Icon')}
                        />
65 66 67 68 69 70 71 72
                        <FormattedMessage id='email_verify.failed'/>
                    </p>
                </div>
            );
        }

        return (
            <div>
73
                <BackButton/>
74 75 76 77 78 79 80
                <div className='col-sm-12'>
                    <div className='signup-team__container'>
                        <h3>
                            <FormattedMessage
                                id='email_verify.almost'
                                defaultMessage='{siteName}: You are almost done'
                                values={{
81
                                    siteName: this.props.siteName,
82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
                                }}
                            />
                        </h3>
                        <div>
                            <p>
                                <FormattedMessage
                                    id='email_verify.notVerifiedBody'
                                    defaultMessage='Please verify your email address. Check your inbox for an email.'
                                />
                            </p>
                            <button
                                onClick={this.handleResend}
                                className='btn btn-primary'
                            >
                                <FormattedMessage
                                    id='email_verify.resend'
                                    defaultMessage='Resend Email'
                                />
                            </button>
                            {resendConfirm}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

ShouldVerifyEmail.propTypes = {
111
    location: PropTypes.object.isRequired,
112
    siteName: PropTypes.string,
113
};