lbry-desktop/ui/component/userEmailVerify/view.jsx

122 lines
3.5 KiB
React
Raw Normal View History

2018-04-03 17:14:55 +02:00
// @flow
import * as React from 'react';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2019-09-26 18:07:11 +02:00
import UserSignOutButton from 'component/userSignOutButton';
2020-01-09 20:03:47 +01:00
import I18nMessage from 'component/i18nMessage';
import Card from 'component/common/card';
import { SITE_HELP_EMAIL } from 'config';
const THIRTY_SECONDS_IN_MS = 30000;
2018-04-03 17:14:55 +02:00
type Props = {
email: string,
2019-10-28 15:04:37 +01:00
isReturningUser: boolean,
resendVerificationEmail: (string) => void,
2019-10-28 15:04:37 +01:00
resendingEmail: boolean,
checkEmailVerified: () => void,
toast: (string) => void,
2019-01-08 03:46:33 +01:00
user: {
has_verified_email: boolean,
},
2018-04-03 17:14:55 +02:00
};
type State = {
wait: boolean,
};
class UserEmailVerify extends React.PureComponent<Props, State> {
2018-04-03 17:14:55 +02:00
constructor(props: Props) {
2017-06-03 01:09:52 +02:00
super(props);
2019-01-08 03:46:33 +01:00
this.emailVerifyCheckInterval = null;
this.state = { wait: false };
2018-06-07 04:40:32 +02:00
(this: any).handleResendVerificationEmail = this.handleResendVerificationEmail.bind(this);
2017-06-03 01:09:52 +02:00
}
2019-01-08 03:46:33 +01:00
componentDidMount() {
this.emailVerifyCheckInterval = setInterval(() => {
this.checkIfVerified();
}, 5000);
2017-06-03 01:09:52 +02:00
}
2019-01-08 03:46:33 +01:00
componentDidUpdate() {
2019-08-27 16:43:42 +02:00
const { user } = this.props;
2019-08-27 16:43:42 +02:00
if (this.emailVerifyCheckInterval && user && user.has_verified_email) {
2019-01-08 03:46:33 +01:00
clearInterval(this.emailVerifyCheckInterval);
}
}
componentWillUnmount() {
if (this.emailVerifyCheckInterval) {
clearInterval(this.emailVerifyCheckInterval);
2017-12-23 03:09:06 +01:00
}
2017-06-03 01:09:52 +02:00
}
2018-06-07 04:40:32 +02:00
handleResendVerificationEmail() {
2019-10-28 15:04:37 +01:00
const { email, resendVerificationEmail, toast } = this.props;
if (!this.state.wait) {
resendVerificationEmail(email);
toast(__('New email sent.'));
this.setState({
wait: true,
});
setTimeout(() => this.setState({ wait: false }), THIRTY_SECONDS_IN_MS);
} else {
toast(__('Please wait a bit longer before requesting again.'));
}
}
2019-01-08 03:46:33 +01:00
checkIfVerified() {
const { checkEmailVerified } = this.props;
checkEmailVerified();
2019-01-08 03:46:33 +01:00
}
emailVerifyCheckInterval: ?IntervalID;
2017-06-03 01:09:52 +02:00
render() {
2019-10-28 15:04:37 +01:00
const { email, isReturningUser, resendingEmail } = this.props;
2019-07-18 00:48:11 +02:00
2017-06-08 23:15:34 +02:00
return (
<div className="main__sign-up">
<Card
2020-08-26 22:28:33 +02:00
title={isReturningUser ? __('Check Your email') : __('Confirm your account')}
subtitle={
<p>
2020-12-23 22:51:41 +01:00
{__(
'We just sent an email to %email% with a link for you to %verify_text%. Remember to check other email folders like spam or promotions.',
{
email,
verify_text: isReturningUser ? __('log in') : __('verify your account'),
}
)}
</p>
}
actions={
<React.Fragment>
<div className="section__actions">
<Button
button="primary"
label={__('Resend Link')}
onClick={this.handleResendVerificationEmail}
disabled={resendingEmail}
/>
<UserSignOutButton label={__('Start Over')} />
</div>
2020-08-21 17:18:47 +02:00
<p className="help--card-actions">
<I18nMessage
tokens={{
help_link: <Button button="link" href={`mailto:${SITE_HELP_EMAIL}`} label={`${SITE_HELP_EMAIL}`} />,
2020-08-21 17:18:47 +02:00
chat_link: <Button button="link" href="https://chat.lbry.com" label={__('chat')} />,
}}
>
Email %help_link% or join our %chat_link% if you encounter any trouble verifying.
</I18nMessage>
</p>
</React.Fragment>
}
/>
</div>
2017-06-08 23:15:34 +02:00
);
2017-06-03 01:09:52 +02:00
}
}
2017-06-08 23:15:34 +02:00
export default UserEmailVerify;