reduce fields in signup form. hide recaptcha until after signup butto…

…n is click

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'>