From 56eeca76a531b42e04d8e099ec6357892ac35ce8 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 19 Nov 2019 12:22:08 -0500
Subject: [PATCH] show refresh message if the captcha hasn't loaded after 2
 seconds

---
 ui/page/signInVerify/view.jsx | 36 +++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/ui/page/signInVerify/view.jsx b/ui/page/signInVerify/view.jsx
index 272612fc2..203467a4e 100644
--- a/ui/page/signInVerify/view.jsx
+++ b/ui/page/signInVerify/view.jsx
@@ -3,7 +3,9 @@ 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 I18nMessage from 'component/i18nMessage';
 import * as PAGES from 'constants/pages';
 
 type Props = {
@@ -17,6 +19,8 @@ function SignInVerifyPage(props: Props) {
     doToast,
   } = props;
   const [isAuthenticationSuccess, setIsAuthenticationSuccess] = useState(false);
+  const [showCaptchaMessage, setShowCaptchaMessage] = useState(false);
+  const [captchaLoaded, setCaptchaLoaded] = useState(false);
   const urlParams = new URLSearchParams(location.search);
   const authToken = urlParams.get('auth_token');
   const userSubmittedEmail = urlParams.get('email');
@@ -43,10 +47,30 @@ function SignInVerifyPage(props: Props) {
     }
   }, [needsRecaptcha]);
 
+  React.useEffect(() => {
+    let captchaTimeout;
+
+    if (needsRecaptcha && !captchaLoaded) {
+      captchaTimeout = setTimeout(() => {
+        setShowCaptchaMessage(true);
+      }, 2000);
+    }
+
+    return () => {
+      if (captchaTimeout) {
+        clearTimeout(captchaTimeout);
+      }
+    };
+  }, [needsRecaptcha, captchaLoaded]);
+
   function onCaptchaChange(value) {
     verifyUser(value);
   }
 
+  function onCaptchaReady() {
+    setCaptchaLoaded(true);
+  }
+
   function verifyUser(captchaValue) {
     Lbryio.call('user_email', 'confirm', {
       auth_token: authToken,
@@ -75,11 +99,23 @@ function SignInVerifyPage(props: Props) {
             ? __('Click below to sign in to lbry.tv')
             : __('Welcome back! You are automatically being signed in.')}
         </p>
+        <p className="section__subtitle">
+          {showCaptchaMessage && !isAuthenticationSuccess && (
+            <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>
         {!isAuthenticationSuccess && needsRecaptcha && (
           <div className="section__actions">
             <ReCAPTCHA
               sitekey="6LePsJgUAAAAAFTuWOKRLnyoNKhm0HA4C3elrFMG"
               onChange={onCaptchaChange}
+              asyncScriptOnLoad={onCaptchaReady}
               onExpired={onAuthError}
               onErrored={onAuthError}
             />