hide fix captcha in guest until button click and fix recaptcha issue

sspenst · May 12, 2024 · f9db2d2 · f9db2d2
1 parent 3826bb2
commit f9db2d2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/components/settings/settingsAccountGuest.tsx b/components/settings/settingsAccountGuest.tsx
@@ -5,18 +5,10 @@ import toast from 'react-hot-toast';
 export default function SettingsAccountGuest() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [password2, setPassword2] = useState('');
   const [username, setUsername] = useState('');
   const router = useRouter();
 
   async function fetchSignup() {
-    if (password !== password2) {
-      toast.dismiss();
-      toast.error('Password does not match');
-
-      return;
-    }
-
     toast.dismiss();
     toast.loading('Creating account...');
 
@@ -73,7 +65,6 @@ export default function SettingsAccountGuest() {
         <input className={inputClass} placeholder='Username' type='text' required onChange={(e) => { setUsername(e.target.value); }} />
         <input className={inputClass} placeholder='Email' type='email' required onChange={(e) => { setEmail(e.target.value);}} />
         <input className={inputClass} placeholder='Password' type='password' required onChange={(e) => { setPassword(e.target.value); }} />
-        <input className={inputClass} onChange={(e) => { setPassword2(e.target.value); }} placeholder='Confirm Password' type='password' required />
       </div>
       <div className='flex justify-end'>
         <button className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-pointer'

diff --git a/pages/[subdomain]/play-as-guest/index.tsx b/pages/[subdomain]/play-as-guest/index.tsx
@@ -20,14 +20,18 @@ export default function PlayAsGuest({ recaptchaPublicKey }: {recaptchaPublicKey?
   const { userConfig, mutateUser, setShouldAttemptAuth } = useContext(AppContext);
   const [name, setName] = useState<string>('');
   const recaptchaRef = useRef<ReCAPTCHA>(null);
-  const [recaptchaToken, setRecaptchaToken] = useState<string>('');
+  const recaptchaToken = useRef<string | null>(null);
   const [registrationState, setRegistrationState] = useState('registering');
   const router = useRouter();
   const [temporaryPassword, setTemporaryPassword] = useState<string>('');
+  const [showRecaptcha, setShowRecaptcha] = useState(false);
 
   function onRecaptchaChange(value: string | null) {
+    console.log('sup', value);
+
     if (value) {
-      setRecaptchaToken(value);
+      recaptchaToken.current = value;
+      setTimeout(fetchSignup, 50);
     }
   }
 
@@ -123,23 +127,36 @@ export default function PlayAsGuest({ recaptchaPublicKey }: {recaptchaPublicKey?
         <li>Your guest account may be deleted after 7 days of no activity</li>
         <li>By creating a guest account you agree to our <a className='underline' href='https://docs.google.com/document/d/e/2PACX-1vR4E-RcuIpXSrRtR3T3y9begevVF_yq7idcWWx1A-I9w_VRcHhPTkW1A7DeUx2pGOcyuKifEad3Qokn/pub' rel='noreferrer' target='_blank'>terms of service</a> and reviewed the <a className='underline' href='https://docs.google.com/document/d/e/2PACX-1vSNgV3NVKlsgSOEsnUltswQgE8atWe1WCLUY5fQUVjEdu_JZcVlRkZcpbTOewwe3oBNa4l7IJlOnUIB/pub' rel='noreferrer' target='_blank'>privacy policy</a></li>
       </ul>
-      { recaptchaPublicKey && (
+      { recaptchaPublicKey && showRecaptcha ? (
         <ReCAPTCHA
           size='normal'
           onChange={onRecaptchaChange}
           ref={recaptchaRef}
           sitekey={recaptchaPublicKey ?? ''}
         />
-      )}
-      <button className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-pointer' onClick={fetchSignup}>
+      ) :
+        <button className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-pointer' onClick={fetchSignup}>
         Play
-      </button>
+        </button>
+      }
       <Link className='font-bold text-sm text-blue-500 hover:text-blue-400' href='/signup'>
         Sign up with a regular account instead
       </Link>
     </div>;
 
   async function fetchSignup() {
+    if (recaptchaPublicKey && !showRecaptcha) {
+      setShowRecaptcha(true);
+
+      return;
+    }
+
+    if (!recaptchaToken.current) {
+      toast.error('Please complete the recaptcha');
+
+      return;
+    }
+
     const tutorialCompletedAt = window.localStorage.getItem('tutorialCompletedAt') || '0';
     const utm_source = window.localStorage.getItem('utm_source') || '';
 
@@ -156,7 +173,7 @@ export default function PlayAsGuest({ recaptchaPublicKey }: {recaptchaPublicKey?
         name: 'Guest',
         email: 'guest@guest.com',
         password: 'guest-account',
-        recaptchaToken: recaptchaToken,
+        recaptchaToken: recaptchaToken.current,
         guest: true,
         tutorialCompletedAt: tutorialCompletedAt,
         utm_source: utm_source