lbry-desktop/ui/page/signInVerify/view.jsx

141 lines
4.1 KiB
React
Raw Normal View History

2019-11-14 01:33:36 +01:00
// @flow
2020-08-25 19:40:39 +02:00
import { SITE_NAME } from 'config';
import * as PAGES from 'constants/pages';
2019-11-14 01:33:36 +01:00
import React, { useState } from 'react';
import { withRouter } from 'react-router';
import Page from 'component/page';
2019-11-14 15:34:55 +01:00
import ReCAPTCHA from 'react-google-recaptcha';
import Button from 'component/button';
2019-11-14 01:33:36 +01:00
import { Lbryio } from 'lbryinc';
import I18nMessage from 'component/i18nMessage';
import Card from 'component/common/card';
2019-11-14 01:33:36 +01:00
type Props = {
history: { push: string => void, location: { search: string } },
2019-11-14 15:34:55 +01:00
doToast: ({}) => void,
2019-11-14 01:33:36 +01:00
};
function SignInVerifyPage(props: Props) {
2019-11-14 15:34:55 +01:00
const {
history: { push, location },
2019-11-14 15:34:55 +01:00
doToast,
} = props;
2019-11-19 17:55:56 +01:00
const [isAuthenticationSuccess, setIsAuthenticationSuccess] = useState(false);
const [showCaptchaMessage, setShowCaptchaMessage] = useState(false);
const [captchaLoaded, setCaptchaLoaded] = useState(false);
2019-11-14 01:33:36 +01:00
const urlParams = new URLSearchParams(location.search);
const authToken = urlParams.get('auth_token');
const userSubmittedEmail = urlParams.get('email');
const verificationToken = urlParams.get('verification_token');
2019-11-19 17:55:56 +01:00
const needsRecaptcha = urlParams.get('needs_recaptcha') === 'true';
2019-11-14 01:33:36 +01:00
function onAuthError(message) {
doToast({
message: message || __('Authentication failure.'),
isError: true,
});
2019-11-14 15:30:26 +01:00
push(`/$/${PAGES.AUTH}`);
2019-11-14 01:33:36 +01:00
}
React.useEffect(() => {
if (!authToken || !userSubmittedEmail || !verificationToken) {
onAuthError(__('Invalid or expired sign-in link.'));
}
}, [authToken, userSubmittedEmail, verificationToken, doToast, push]);
2019-11-19 17:55:56 +01:00
React.useEffect(() => {
if (!needsRecaptcha) {
verifyUser();
}
}, [needsRecaptcha]);
React.useEffect(() => {
let captchaTimeout;
if (needsRecaptcha && !captchaLoaded) {
captchaTimeout = setTimeout(() => {
setShowCaptchaMessage(true);
}, 2000);
}
return () => {
if (captchaTimeout) {
clearTimeout(captchaTimeout);
}
};
}, [needsRecaptcha, captchaLoaded]);
2019-11-14 01:33:36 +01:00
function onCaptchaChange(value) {
2019-11-19 17:55:56 +01:00
verifyUser(value);
}
function onCaptchaReady() {
setCaptchaLoaded(true);
}
2019-11-19 17:55:56 +01:00
function verifyUser(captchaValue) {
2019-11-14 01:33:36 +01:00
Lbryio.call('user_email', 'confirm', {
auth_token: authToken,
email: userSubmittedEmail,
verification_token: verificationToken,
2019-11-19 17:55:56 +01:00
...(captchaValue ? { recaptcha: captchaValue } : {}),
2019-11-14 01:33:36 +01:00
})
2019-11-14 15:34:55 +01:00
.then(() => {
setIsAuthenticationSuccess(true);
})
.catch(() => {
onAuthError(__('Invalid captcha response or other authentication error.'));
});
2019-11-14 01:33:36 +01:00
}
return (
2020-08-21 17:49:13 +02:00
<Page authPage>
<div className="main__sign-up">
<Card
2020-08-24 19:59:37 +02:00
title={isAuthenticationSuccess ? __('Log in success!') : __('Log in to %SITE_NAME%', { SITE_NAME })}
subtitle={
<React.Fragment>
<p>
{isAuthenticationSuccess
? __('You can now close this tab.')
: needsRecaptcha
? null
: __('Welcome back! You are automatically being signed in.')}
</p>
{showCaptchaMessage && !isAuthenticationSuccess && (
<p>
<I18nMessage
tokens={{
refresh: (
<Button button="link" label={__('refreshing')} onClick={() => window.location.reload()} />
),
}}
>
Not seeing a captcha? Check your ad blocker or try %refresh%.
</I18nMessage>
</p>
)}
</React.Fragment>
}
actions={
!isAuthenticationSuccess &&
needsRecaptcha && (
<div className="section__actions">
<ReCAPTCHA
sitekey="6LePsJgUAAAAAFTuWOKRLnyoNKhm0HA4C3elrFMG"
onChange={onCaptchaChange}
asyncScriptOnLoad={onCaptchaReady}
onExpired={onAuthError}
onErrored={onAuthError}
/>
</div>
)
}
/>
</div>
2019-11-14 01:33:36 +01:00
</Page>
);
2019-11-14 15:34:55 +01:00
}
2019-11-14 01:33:36 +01:00
export default withRouter(SignInVerifyPage);