{/* Add an empty span here so we can use the same style as above */}
{/* This pushes the close button to the right side */}
-
+
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index 6590f9130..ad9129b22 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -24,6 +24,7 @@ import FollowingPage from 'page/following';
import ListBlockedPage from 'page/listBlocked';
import FourOhFourPage from 'page/fourOhFour';
import SignInPage from 'page/signIn';
+import SignInVerifyPage from 'page/signInVerify';
import ChannelsPage from 'page/channels';
// Tell the browser we are handling scroll restoration
@@ -77,6 +78,7 @@ function AppRouter(props: Props) {
+
diff --git a/ui/constants/pages.js b/ui/constants/pages.js
index 05ad52c85..9a21f7f48 100644
--- a/ui/constants/pages.js
+++ b/ui/constants/pages.js
@@ -1,4 +1,5 @@
export const AUTH = 'signin';
+export const AUTH_VERIFY = 'verify';
export const BACKUP = 'backup';
export const CHANNEL = 'channel';
export const DISCOVER = 'discover';
diff --git a/ui/page/signInVerify/index.js b/ui/page/signInVerify/index.js
new file mode 100644
index 000000000..c00a9b77c
--- /dev/null
+++ b/ui/page/signInVerify/index.js
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { doToast } from 'lbry-redux';
+import SignInVerifyPage from './view';
+
+const select = () => ({});
+const perform = {
+ doToast,
+};
+
+export default connect(
+ select,
+ perform
+)(SignInVerifyPage);
diff --git a/ui/page/signInVerify/view.jsx b/ui/page/signInVerify/view.jsx
new file mode 100644
index 000000000..dd78b743d
--- /dev/null
+++ b/ui/page/signInVerify/view.jsx
@@ -0,0 +1,72 @@
+// @flow
+import React, { useState } from 'react';
+import { withRouter } from 'react-router';
+import Page from 'component/page';
+import ReCAPTCHA from "react-google-recaptcha";
+import Button from 'component/button';
+import { Lbryio } from 'lbryinc';
+import * as PAGES from 'constants/pages';
+
+type Props = {
+ history: { push: string => void },
+ doToast: ({}) => void
+};
+
+function SignInVerifyPage(props: Props) {
+ const { history: { push }, doToast } = props;
+ const urlParams = new URLSearchParams(location.search);
+ const authToken = urlParams.get('auth_token');
+ const userSubmittedEmail = urlParams.get('email');
+ const verificationToken = urlParams.get('verification_token');
+
+ const [isAuthenticationSuccess, setIsAuthenticationSuccess] = useState(false);
+
+ function onAuthError(message) {
+ doToast({
+ message: message || __('Authentication failure.'),
+ isError: true,
+ });
+ //push(`/$/${PAGES.AUTH}`);
+ }
+
+ React.useEffect(() => {
+ if (!authToken || !userSubmittedEmail || !verificationToken) {
+ onAuthError(__('Invalid or expired sign-in link.'));
+ }
+ }, [authToken, userSubmittedEmail, verificationToken, doToast, push]);
+
+ function onCaptchaChange(value) {
+ Lbryio.call('user_email', 'confirm', {
+ auth_token: authToken,
+ email: userSubmittedEmail,
+ verification_token: verificationToken,
+ recaptcha: value,
+ })
+ .then(() => {
+ setIsAuthenticationSuccess(true);
+ })
+ .catch(() => {
+ onAuthError(__('Invalid captcha response or other authentication error.'));
+ });
+ }
+
+ return (
+
+
+ {isAuthenticationSuccess ? __('Sign In Success!') : __('Sign In to lbry.tv') }
+ { isAuthenticationSuccess ? __('You can now close this tab.') : __('Click below to sign in to lbry.tv') }
+ { !isAuthenticationSuccess &&
+
+
+
}
+
+
+ );
+};
+
+export default withRouter(SignInVerifyPage);
diff --git a/yarn.lock b/yarn.lock
index b4bc468cd..1799da845 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9635,7 +9635,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9870,6 +9870,14 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.1, rc@^1.2.7, rc@^1.2.8:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
+react-async-script@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/react-async-script/-/react-async-script-1.1.1.tgz#f481c6c5f094bf4b94a9d52da0d0dda2e1a74bdf"
+ integrity sha512-pmgS3O7JcX4YtH/Xy//NXylpD5CNb5T4/zqlVUV3HvcuyOanatvuveYoxl3X30ZSq/+q/+mSXcNS8xDVQJpSeA==
+ dependencies:
+ hoist-non-react-statics "^3.3.0"
+ prop-types "^15.5.0"
+
react-compound-slider@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/react-compound-slider/-/react-compound-slider-1.2.2.tgz#1cc6809bb2d0282ad90a06040e2b10635edfbea3"
@@ -9910,6 +9918,14 @@ react-ga@^2.5.7:
resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.5.7.tgz#1c80a289004bf84f84c26d46f3a6a6513081bf2e"
integrity sha512-UmATFaZpEQDO96KFjB5FRLcT6hFcwaxOmAJZnjrSiFN/msTqylq9G+z5Z8TYzN/dbamDTiWf92m6MnXXJkAivQ==
+react-google-recaptcha@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-2.0.1.tgz#3276b29659493f7ca2a5b7739f6c239293cdf1d8"
+ integrity sha512-4Y8awVnarn7+gdVpu8uvSmRJzzlMMoXqdhLoyToTOfVK6oM+NaChNI8NShnu75Q2YGHLvR1IA1FWZesuYHwn5w==
+ dependencies:
+ prop-types "^15.5.0"
+ react-async-script "^1.1.1"
+
react-hot-loader@^4.11.1:
version "4.11.1"
resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.11.1.tgz#2cabbd0f1c8a44c28837b86d6ce28521e6d9a8ac"