Signup rec work.

BitLucid · Jan 29, 2024 · 6366c50 · 6366c50
1 parent 83a53c6
commit 6366c50
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 9 deletions.
diff --git a/deploy/lib/control/SignupController.php b/deploy/lib/control/SignupController.php
@@ -77,14 +77,20 @@ public function signup(Container $p_dependencies)
             $this->validateSignupRequest($signupRequest); // guard method
             // Recaptcha section
 
-            $gRecaptchaResponse = $request->get('token-reponse');
+            $gRecaptchaResponse = $request->get('g-recaptcha-response');
+            debug($request->request->all());
+            if (!$gRecaptchaResponse) {
+                debug('recaptcha token from form: ', $gRecaptchaResponse);
+                error_log('Warning: Signup form client had no Recaptcha info, token: ' . print_r($gRecaptchaResponse, true));
+                throw new \RuntimeException('There was a problem with the form submission, please contact us.', 0);
+            }
             $recaptcha = new \ReCaptcha\ReCaptcha(RECAPTCHA_SECRET_KEY);
             $resp = $recaptcha
-                // ->setExpectedHostname('www.ninjawars.net')
+                //->setExpectedHostname(WEB_ROOT)
                 // Above is needed if "domain/package name validation" disabled at
                 // https://www.google.com/recaptcha/admin/site/352364760
                 ->verify($gRecaptchaResponse, $request->getClientIp());
-            error_log('Signup form client had a Recaptcha response: ' . print_r($gRecaptchaResponse, true) . print_r($resp, true));
+            error_log('Signup form client had a Recaptcha info of token: ' . print_r($gRecaptchaResponse, true) . ' response: ' . print_r($resp, true));
             // compare a random number against the recaptcha quotient to
             // see if recaptcha even gets used
             $divisor = defined('RECAPTCHA_DIVISOR') ? RECAPTCHA_DIVISOR : 1;
@@ -231,6 +237,7 @@ private function buildSignupRequest($p_request)
         $signupRequest->enteredPass       = Filter::toSimple($p_request->get('key') ?? '');
         $signupRequest->enteredCPass      = Filter::toSimple($p_request->get('cpass') ?? '');
         $signupRequest->clientIP          = $p_request->getClientIp();
+        $signupRequest->gRecaptchaResponse      = $p_request->get('g-recaptcha-response') ?? '';
 
         return $signupRequest;
     }

diff --git a/deploy/templates/signup.tpl b/deploy/templates/signup.tpl
@@ -79,7 +79,7 @@
 
 {if !$submit_successful}
 	{* Do not change this without changing the recaptcha in signup.js *}
-	<form id='signup' action="/signup/signup" onSubmit='recFormSubmit' method="post">
+	<form id='signup' action="/signup/signup" method="post">
 
     <fieldset>
      <legend>Create Your Login Info</legend>
@@ -185,15 +185,17 @@
 	  {* This section is used by signup.js and should only be changed in concert with that script below *}
 	  {* It is also tested via the cypress signup.cy.js script, so changes should be checked by running that *}
 	  	<div style='min-height:6rem' class='centered'>
+		  	<input id="g-recaptcha-response" type="hidden" name="g-recaptcha-response" value='INVALID'>
 			<button
 				class="btn btn-vital" 
 				id='become-a-ninja' 
+				data-sitekey="{$smarty.const.RECAPTCHA_SITE_KEY}" 
+				data-callback='recFormSubmit' 
 				type="submit" 
 				name="submit"
 			>
 			Become A Ninja!
 			</button>
-			<input type='hidden' name='g-recaptcha-response' id='g-recaptcha-response' value=''>
 		</div>
 	    <div class='text-centered'>
 	    	<small>
@@ -261,13 +263,33 @@
 	{* see https://www.google.com/recaptcha/admin/site/692084162/settings *}
 	<!-- See staff page for policy information. -->
 	<script src="https://www.recaptcha.net/recaptcha/api.js?render={$smarty.const.RECAPTCHA_SITE_KEY}"></script>
+	{* <script src="https://www.recaptcha.net/recaptcha/api.js"></script> *}
+
 	
 	<script src='/js/signup.js'></script>
 	<script>
 	const recaptchaSiteKey = '{$smarty.const.RECAPTCHA_SITE_KEY}';
 	{literal}
+		const submitButtonId = 'become-a-ninja';
+
+		$(() => {
+			$('#signup').on('submit', recFormSubmit);
+		})
 
+		function recOnSubmit(token) {
+			console.debug('onSubmit token', token);
+			$('#signup button[type=submit]').requestSubmit();
+		}
+
+		// see: https://stackoverflow.com/questions/51507695/google-recaptcha-v3-example-demo
 		function recFormSubmit(e){
+			const { log, debug } = console || { log: () => { /** noop */ }, debug: () => { /** noop */ } };
+			debug('Form submitted');
+			const token = $('#g-recaptcha-response').val();
+			if(token && token !== 'INVALID'){
+				return true;
+			}
+			// Otherwise, get the token and request a validated submit
 			e.preventDefault();
 			e.stopPropagation();
 			console.debug('Running grecaptcha.execute')
@@ -276,7 +298,16 @@
 					console.debug('grecaptcha.execute token', token);
 					// Add your logic to submit to your backend server here.
 					$('#g-recaptcha-response').val(token);
-					$('#signup').submit();
+					debug('token', token);
+					const button = document.getElementById(submitButtonId);
+					const form = document.getElementById('signup');
+					if(form.requestSubmit){
+						// This infinite loops at the moment
+						button && form.requestSubmit(button) || form.requestSubmit();
+					}
+					else {
+						form.submit(); // With no validation
+					}
 				});
 			});
 		}

diff --git a/deploy/www/js/signup.js b/deploy/www/js/signup.js
@@ -13,7 +13,7 @@ const { location: tFrameLocation } = tTop || {};
   // eslint-disable-next-line no-unused-vars
   const { log, debug } = console || { log: () => { /** noop */ }, debug: () => { /** noop */ } };
   debug('iife run on signup.js');
-  // // eslint-disable-next-line eqeqeq
+  // eslint-disable-next-line eqeqeq
   if (tLocation != tFrameLocation) { // Framebreak on the signup page as well.
     if (window.top && window.top.location && window.top.location.href) {
       window.top.location.href = document.location.href;
@@ -22,8 +22,11 @@ const { location: tFrameLocation } = tTop || {};
   $( // on document ready
     () => {
       $('#become-a-ninja').hide().fadeIn(1500);
-      const response = $('#signup input[name=g-recaptcha-response]').val();
-      debug(response);
+      // delay debugging of the response value
+      setTimeout(() => {
+        const response = $('#signup input[name=g-recaptcha-response]').val();
+        debug(['Recaptcha response token delayed val:', response]);
+      }, 4000);
     },
   );
 })();