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

4
5
import React from 'react';
import {FormattedMessage} from 'react-intl';
6

7
import {ServerError} from 'mattermost-redux/types/errors';
8
9
10

import {ActionFunc, ActionResult} from 'mattermost-redux/types/actions';

11
import {trackEvent} from 'actions/diagnostics_actions.jsx';
12
import {browserHistory} from 'utils/browser_history';
13
import {AnnouncementBarTypes, AnnouncementBarMessages, VerifyEmailErrors} from 'utils/constants';
14
import logoImage from 'images/logo.png';
15
import BackButton from 'components/common/back_button';
16
import LoadingScreen from 'components/loading_screen';
17

18
19
import * as GlobalActions from 'actions/global_actions.jsx';

20
21
22
23
24
25
26
27
type Props = {
    location: {
        search: string;
    };
    siteName?: string;
    actions: {
        verifyUserEmail: (token: string) => ActionFunc | ActionResult;
        getMe: () => ActionFunc | ActionResult;
28
        logError: (error: ServerError, displayable: boolean) => void;
29
30
31
32
33
34
35
36
37
38
        clearErrors: () => void;
    };
    isLoggedIn: boolean;

}

type State = {
    verifyStatus: string;
    serverError: JSX.Element | null;
}
39

40
41
export default class DoVerifyEmail extends React.PureComponent<Props, State> {
    public constructor(props: Props) {
42
43
44
45
        super(props);

        this.state = {
            verifyStatus: 'pending',
46
            serverError: null,
47
48
        };
    }
49

50
    public componentDidMount(): void {
51
52
53
        this.verifyEmail();
    }

54
    handleRedirect() {
55
56
57
        if (this.props.isLoggedIn) {
            GlobalActions.redirectUserToDefaultTeam();
        } else {
58
59
60
61
62
63
64
65
66
67
            let link = '/login?extra=verified';
            const email = (new URLSearchParams(this.props.location.search)).get('email');
            if (email) {
                link += '&email=' + encodeURIComponent(email);
            }
            const redirectTo = (new URLSearchParams(this.props.location.search)).get('redirect_to');
            if (redirectTo) {
                link += '&redirect_to=' + redirectTo;
            }
            browserHistory.push(link);
68
        }
69
70
    }

71
    async handleSuccess() {
72
        this.setState({verifyStatus: 'success'});
73
        this.props.actions.clearErrors();
74
        if (this.props.isLoggedIn) {
75
            this.props.actions.logError({
76
                message: AnnouncementBarMessages.EMAIL_VERIFIED,
77
78
                type: AnnouncementBarTypes.SUCCESS,
            } as any, true);
79
            trackEvent('settings', 'verify_email');
80
81
82
83
84
85
            const me = await this.props.actions.getMe();
            if ('data' in me) {
                this.handleRedirect();
            } else if ('error' in me) {
                this.handleError(VerifyEmailErrors.FAILED_USER_STATE_GET);
            }
86
87
88
89
90
        } else {
            this.handleRedirect();
        }
    }

91
92
    handleError(type: string) {
        let serverError = null;
93
94
95
96
97
98
99
        if (type === VerifyEmailErrors.FAILED_EMAIL_VERIFICATION) {
            serverError = (
                <FormattedMessage
                    id='signup_user_completed.invalid_invite'
                    defaultMessage='The invite link was invalid. Please speak with your Administrator to receive an invitation.'
                />
            );
100
        } else if (type === VerifyEmailErrors.FAILED_USER_STATE_GET) {
101
102
103
104
105
106
107
108
109
110
111
112
113
            serverError = (
                <FormattedMessage
                    id='signup_user_completed.failed_update_user_state'
                    defaultMessage='Please clear your cache and try to log in.'
                />
            );
        }
        this.setState({
            verifyStatus: 'failure',
            serverError,
        });
    }

114
115
    verifyEmail = async () => {
        const {actions: {verifyUserEmail}} = this.props;
116
        const verify = await verifyUserEmail((new URLSearchParams(this.props.location.search)).get('token') || '');
117

118
        if ('data' in verify) {
119
            this.handleSuccess();
120
        } else if ('error' in verify) {
121
            this.handleError(VerifyEmailErrors.FAILED_EMAIL_VERIFICATION);
122
        }
123
    }
124

125
126
127
128
129
    render() {
        if (this.state.verifyStatus !== 'failure') {
            return (<LoadingScreen/>);
        }

130
131
132
133
134
135
136
137
138
        let serverError = null;
        if (this.state.serverError) {
            serverError = (
                <div className={'form-group has-error'}>
                    <label className='control-label'>{this.state.serverError}</label>
                </div>
            );
        }

139
140
        return (
            <div>
141
                <BackButton/>
142
143
                <div className='col-sm-12'>
                    <div className='signup-team__container'>
144
                        <img
145
                            alt={'signup team logo'}
146
147
148
149
                            className='signup-team-logo'
                            src={logoImage}
                        />
                        <div className='signup__content'>
150
                            <h1>{this.props.siteName}</h1>
151
152
153
154
155
156
157
                            <h4 className='color--light'>
                                <FormattedMessage
                                    id='web.root.signup_info'
                                    defaultMessage='All team communication in one place, searchable and accessible anywhere'
                                />
                            </h4>
                            {serverError}
158
159
160
161
162
163
164
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}