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

90 lines
2.6 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';
2017-06-03 01:09:52 +02:00
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,
2019-10-28 15:04:37 +01:00
toast: string => void,
2019-01-08 03:46:33 +01:00
user: {
has_verified_email: boolean,
},
2018-04-03 17:14:55 +02:00
};
2019-01-08 03:46:33 +01:00
class UserEmailVerify extends React.PureComponent<Props> {
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;
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;
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;
resendVerificationEmail(email);
toast(__('New email sent.'));
}
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 (
<React.Fragment>
2019-10-28 15:04:37 +01:00
<h1 className="section__title--large">{isReturningUser ? __('Check Your Email') : __('Confirm Your Email')}</h1>
2019-09-26 18:07:11 +02:00
<p className="section__subtitle">
2019-11-14 16:16:53 +01:00
{__('An email was sent to %email%. Follow the link to %verify_text%. After, this page will update automatically.', {
2019-10-28 15:04:37 +01:00
email,
verify_text: isReturningUser ? __('sign in') : __('verify your email'),
})}
2019-07-21 23:31:22 +02:00
</p>
2019-09-26 18:07:11 +02:00
<div className="section__body section__actions">
2019-07-21 23:31:22 +02:00
<Button
button="primary"
2019-10-28 15:04:37 +01:00
label={__('Resend Email')}
2019-07-21 23:31:22 +02:00
onClick={this.handleResendVerificationEmail}
2019-10-28 15:04:37 +01:00
disabled={resendingEmail}
2019-07-21 23:31:22 +02:00
/>
2019-09-26 18:07:11 +02:00
<UserSignOutButton label={__('Start Over')} />
</div>
2019-07-21 23:31:22 +02:00
<p className="help">
{__('Email')} <Button button="link" href="mailto:help@lbry.com" label="help@lbry.com" /> or join our{' '}
<Button button="link" href="https://chat.lbry.com" label="chat" />{' '}
{__('if you encounter any trouble verifying.')}
</p>
</React.Fragment>
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;