Feat/signup rec iteration 6

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;
     }

deploy/resources.build.php

@@ -15,7 +15,7 @@
 define('DEBUG', true);                    // *** Shorter debugging constant name, set as false on live.
 define('SERVER_ROOT', realpath(__DIR__) . '/');        // *** The root deployment directory of the game
 // Generally for the install purposes the SERVER_ROOT should correspond to /srv/ninjawars/deploy/
-define('WEB_ROOT', "http://localhost:8765/");            // *** The base URL used to access the game, http://www.ninjawars.net on live
+define('WEB_ROOT', "http://localhost:8765/");            // *** The base URL used to access the game, https://www.ninjawars.net on live
 define('ADMIN_EMAIL', "[email protected]");        // *** For logs/emailed errors.
 define('SUPPORT_EMAIL', "[email protected]");    // *** For public questions.
 define('SUPPORT_EMAIL_NAME', "Ninjawars Tchalvak");

deploy/templates/login.tpl

@@ -72,7 +72,7 @@
               <div class='centered'>
                 <input tabindex=3 name="login_request" id='request-login' class='btn btn-vital' type="submit" value="Login">
               </div>
-              <div class='centered'>
+              <div class='centered my-thick'>
                 <a tabindex=4 href='/assistance'>forgot?</a>
               </div>
             </div>
@@ -97,4 +97,5 @@
   {* 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='/js/login.js'></script>
 </div>

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
+					}
 				});
 			});
 		}

deploy/www/js/login.js

@@ -0,0 +1,22 @@
+/**
+ * General behaviors for the login page.
+ */
+// @ts-check
+
+const { location: lLocation, top: lTop } = window;
+const { location: lFrameLocation } = lTop || {};
+
+/**
+ * Executions on the signup page.
+ */
+(() => {
+  // eslint-disable-next-line no-unused-vars
+  const { log, debug } = console || { log: () => { /** noop */ }, debug: () => { /** noop */ } };
+  debug('iife run on login.js');
+  // eslint-disable-next-line eqeqeq
+  if (lLocation != lFrameLocation) { // Framebreak
+    if (window.top && window.top.location && window.top.location.href) {
+      window.top.location.href = document.location.href;
+    }
+  }
+})();

deploy/www/js/signup.js

@@ -3,42 +3,36 @@
  */
 // @ts-check
 
-// const { location: tLocation, top: tTop } = window;
-// const { location: tFrameLocation } = tTop || {};
-// eslint-disable-next-line no-unused-vars
-const { log, debug } = console || { log: () => { /** noop */ }, debug: () => { /** noop */ } };
+const { location: tLocation, top: tTop } = window;
+const { location: tFrameLocation } = tTop || {};
 
 /**
  * Executions on the signup page.
  */
 (() => {
+  // 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
-  // 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;
-  //   }
-  // }
+  // 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;
+    }
+  }
   $( // on document ready
     () => {
       $('#become-a-ninja').hide().fadeIn(1500);
-      debug('Fading in the submit');
+      // delay debugging of the response value
+      setTimeout(() => {
+        const response = $('#signup input[name=g-recaptcha-response]').val();
+        debug(['Recaptcha response token delayed val:', response]);
+      }, 4000);
     },
   );
 })();
 
-// const signupFormId = 'signup';
-
 /**
  * Callback for the recaptcha widget.
  * https://www.google.com/recaptcha/admin/site/692084162/settings
  */
-// // eslint-disable-next-line no-unused-vars
-// function onSubmit(token) {
-//   // For recaptcha
-//   if (!document) {
-//     throw new Error('Invalid call to recapcha onSubmit, in environment with no document');
-//   } else {
-//     document && document.getElementById(signupFormId).submit();
-//   }
-// }
+// Is handled in the form itself by recFormSubmit