From 3826bb2a916701d6b81ce8e695180db7af93c780 Mon Sep 17 00:00:00 2001
From: Danny Miller <k2xl.com@gmail.com>
Date: Sun, 12 May 2024 10:10:34 -0400
Subject: [PATCH] reduce fields in signup form. hide recaptcha until after
 signup button is click

---
 components/forms/signupForm.tsx | 29 +++++++++++------------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/components/forms/signupForm.tsx b/components/forms/signupForm.tsx
index 65f4ffd9b..ef72d2589 100644
--- a/components/forms/signupForm.tsx
+++ b/components/forms/signupForm.tsx
@@ -16,11 +16,11 @@ export default function SignupForm({ recaptchaPublicKey }: SignupFormProps) {
   const [email, setEmail] = useState<string>('');
   const { mutateUser, setShouldAttemptAuth } = useContext(AppContext);
   const [password, setPassword] = useState<string>('');
-  const [password2, setPassword2] = useState<string>('');
   const router = useRouter();
   const [username, setUsername] = useState<string>('');
   const [recaptchaToken, setRecaptchaToken] = useState<string>('');
   const recaptchaRef = useRef<ReCAPTCHA>(null);
+  const [showRecaptcha, setShowRecaptcha] = useState<boolean>(false);
 
   function onRecaptchaChange(value: string | null) {
     if (value) {
@@ -31,13 +31,6 @@ export default function SignupForm({ recaptchaPublicKey }: SignupFormProps) {
   function onSubmit(event: React.FormEvent) {
     event.preventDefault();
 
-    if (password !== password2) {
-      toast.dismiss();
-      toast.error('Passwords do not match');
-
-      return;
-    }
-
     if (password.length < 8 || password.length > 50) {
       toast.dismiss();
       toast.error('Password must be between 8 and 50 characters');
@@ -59,6 +52,12 @@ export default function SignupForm({ recaptchaPublicKey }: SignupFormProps) {
       return;
     }
 
+    if (!showRecaptcha && recaptchaPublicKey) {
+      setShowRecaptcha(true);
+
+      return;
+    }
+
     toast.dismiss();
     toast.loading('Registering...');
 
@@ -137,22 +136,16 @@ export default function SignupForm({ recaptchaPublicKey }: SignupFormProps) {
           </label>
           <input onChange={e => setPassword(e.target.value)} className='shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline' id='password' type='password' placeholder='******************' />
         </div>
-        <div>
-          <label className='block text-sm font-bold mb-2' htmlFor='password2'>
-            Re-enter password
-          </label>
-          <input onChange={e => setPassword2(e.target.value)} className='shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline' id='password2' type='password' placeholder='******************' />
-        </div>
-        <div className='w-full pt-2'>
-          {recaptchaPublicKey && (
+        {recaptchaPublicKey && showRecaptcha && (
+          <div className='w-full pt-2'>
             <ReCAPTCHA
               size='normal'
               onChange={onRecaptchaChange}
               ref={recaptchaRef}
               sitekey={recaptchaPublicKey ?? ''}
             />
-          )}
-        </div>
+          </div>
+        )}
         <div className='flex items-center justify-between gap-1'>
           <input type='checkbox' id='terms_agree_checkbox' required />
           <label htmlFor='terms_agree_checkbox' className='text-xs p-1'>