Merge pull request BitLucid#1615 from BitLucid/feat/recap

Subtlize the recaptcha.

Makefile

@@ -280,6 +280,7 @@ dist-clean: clean
 
 clear-vendor:
 	rm -rf vendor deploy/vendor
+	@echo "vendor and deploy/vendor cleared, you will want to re: make create-structure to get the directories back"
 
 
 

cypress/e2e/signup.cy.js

@@ -8,6 +8,8 @@
 // getting started guide:
 // https://on.cypress.io/introduction-to-cypress
 
+const zSubmitButtonSelector = '#become-a-ninja'
+
 describe('signup a new ninja', () => {
   beforeEach(() => {
     // cy.standardLogin()
@@ -26,9 +28,8 @@ describe('signup a new ninja', () => {
     cy.get('input[type=password][name=cpass]').type(Cypress.env('TEST_PASSWORD'), { log: false })
     const random = (Math.random() + 1).toString(36).substring(7);
     cy.get('input[name=send_name]').type(`cypress-test-user${random}`)
-    const submitButtonSelector = 'input[type=submit]'
-    cy.get(submitButtonSelector).should('be.visible')
-    cy.get(submitButtonSelector).click()
+    cy.get(zSubmitButtonSelector).should('be.visible')
+    cy.get(zSubmitButtonSelector).click()
     cy.get('[role=alert]').should('be.visible')
   })
 
@@ -54,9 +55,8 @@ describe('signup a new ninja', () => {
     cy.get('input[type=password]').first().type(Cypress.env('TEST_PASSWORD'), { log: false })
     cy.get('input[type=password][name=cpass]').type(Cypress.env('TEST_PASSWORD'), { log: false })
     cy.get('input[name=send_name]').type(randomSendName)
-    const submitButton = 'input[type=submit]'
-    cy.get(submitButton).should('be.visible')
-    cy.get(submitButton).click()
+    cy.get(zSubmitButtonSelector).should('be.visible')
+    cy.get(zSubmitButtonSelector).click()
     cy.get('[role=alert]').should('not.exist')
     cy.contains('You are almost ready to be a ninja!').should('be.visible')
     cy.contains(randomEmailLabel).should('be.visible')

deploy/conf/nw.local.nginx

@@ -95,7 +95,7 @@ server {
 
 	location ~ \.php$ {
 		#add_header X-Frame-Options SAMEORIGIN;
-		add_header Content-Security-Policy "default-src * blob: filesystem: about: ws: wss: 'unsafe-eval' 'unsafe-inline'; script-src 'self' https://www.gstatic.com https://www.google.com https://ajax.googleapis.com https://api.github.com https://ws-na.amazon-adsystem.com http://pagead2.googlesyndication.com https://tpc.googlesyndication.com https://www.googleadservices.com 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src * 'self' https://localhost:* https://localhost:8765 http://www.ninjawars.net http://ninjawars.net;  style-src 'self' https://use.fontawesome.com https://fonts.gstatic.com data: blob: 'unsafe-inline'; font-src 'self' https://use.fontawesome.com https://fonts.gstatic.com data: blob: 'unsafe-inline';";
+		add_header Content-Security-Policy "default-src * blob: filesystem: about: ws: wss: 'unsafe-eval' 'unsafe-inline'; script-src 'self' https://www.gstatic.com https://www.google.com https://www.recaptcha.net https://ajax.googleapis.com https://api.github.com https://ws-na.amazon-adsystem.com http://pagead2.googlesyndication.com https://tpc.googlesyndication.com https://www.googleadservices.com 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src * 'self' https://localhost:* https://localhost:8765 http://www.ninjawars.net http://ninjawars.net;  style-src 'self' https://use.fontawesome.com https://fonts.gstatic.com data: blob: 'unsafe-inline'; font-src 'self' https://use.fontawesome.com https://fonts.gstatic.com data: blob: 'unsafe-inline';";
 		fastcgi_param PHP_VALUE "session.cookie_domain= \n date.timezone=America/New_York \n default_charset=UTF-8 \n session.gc_maxlifetime=144000 \n display_errors=On \n";
 		# Check session via: php-fpm8.2 -i | grep session.gc
 		fastcgi_pass unix:/run/php/php8.2-fpm.sock;
@@ -105,7 +105,7 @@ server {
 
 	location @php {
 		#add_header X-Frame-Options SAMEORIGIN;
-		add_header Content-Security-Policy "default-src * blob: filesystem: about: ws: wss: 'unsafe-eval' 'unsafe-inline'; script-src 'self' https://www.gstatic.com https://www.google.com https://ajax.googleapis.com https://api.github.com https://ws-na.amazon-adsystem.com http://pagead2.googlesyndication.com https://tpc.googlesyndication.com https://www.googleadservices.com 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src * 'self' https://localhost:* https://localhost:8765 http://www.ninjawars.net http://ninjawars.net;  style-src 'self' https://use.fontawesome.com https://fonts.gstatic.com data: blob: 'unsafe-inline'; font-src 'self' https://use.fontawesome.com https://fonts.gstatic.com data: blob: 'unsafe-inline';";
+		add_header Content-Security-Policy "default-src * blob: filesystem: about: ws: wss: 'unsafe-eval' 'unsafe-inline'; script-src 'self' https://www.gstatic.com https://www.google.com https://www.recaptcha.net https://ajax.googleapis.com https://api.github.com https://ws-na.amazon-adsystem.com http://pagead2.googlesyndication.com https://tpc.googlesyndication.com https://www.googleadservices.com 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src * 'self' https://localhost:* https://localhost:8765 http://www.ninjawars.net http://ninjawars.net;  style-src 'self' https://use.fontawesome.com https://fonts.gstatic.com data: blob: 'unsafe-inline'; font-src 'self' https://use.fontawesome.com https://fonts.gstatic.com data: blob: 'unsafe-inline';";
 		# Check session via: php-fpm8.2 -i | grep session.gc
 		fastcgi_param PHP_VALUE "session.cookie_domain= \n date.timezone=America/New_York \n default_charset=UTF-8 \n session.gc_maxlifetime=144000 \n display_errors=On \n";
 		fastcgi_pass unix:/run/php/php8.2-fpm.sock;

deploy/lib/control/SignupController.php

@@ -11,8 +11,9 @@
 use NinjaWars\core\extensions\NWTemplate;
 use NinjaWars\core\extensions\StreamedViewResponse;
 use Symfony\Component\HttpFoundation\Request;
-use ReCaptcha\ReCaptcha as Recap;
+// use ReCaptcha\ReCaptcha;
 use Nmail;
+use debug;
 
 /**
  * Implements user actions for creating an account
@@ -78,16 +79,17 @@ public function signup(Container $p_dependencies)
             // compare a random number against the recaptcha quotient to see if recaptcha gets used
             $quotient = defined('RECAPTCHA_QUOTIENT') ? RECAPTCHA_QUOTIENT : 1;
             if ($quotient === 1 || rand(1, $quotient) === 1) {
-                $gRecaptchaResponse = $request->get('g-recaptcha-response');
-                $recaptcha = new Recap(RECAPTCHA_SECRET_KEY);
+                $gRecaptchaResponse = $request->get('token-reponse');
+                $recaptcha = new \ReCaptcha\ReCaptcha(RECAPTCHA_SECRET_KEY);
                 $resp = $recaptcha
                     // ->setExpectedHostname('www.ninjawars.net')
                     // 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));
                 if ($resp->isSuccess() !== true) {
                     error_log('Signup form client had a Recaptcha failure: ' . print_r($resp->getErrorCodes(), true));
-                    throw new \RuntimeException('There was a problem with the captcha, please wait 10 seconds and try again.', 0);
+                    throw new \RuntimeException('There was a problem with the submission, please wait 10 seconds and try again.', 0);
                 }
             }
             // Post recaptcha or if recaptcha skipped

deploy/templates/login.tpl

@@ -9,6 +9,9 @@
   .three-bar > div, .three-bar > section{
     flex:1;
   }
+  .grecaptcha-badge { 
+    visibility: hidden; 
+  }
 {/literal}
 </style>
 <div class='three-bar'>
@@ -92,5 +95,6 @@
     </div>
   </footer>
   {* see https://www.google.com/recaptcha/admin/site/692084162/settings *}
-  <script src="https://www.google.com/recaptcha/api.js?render={$smarty.const.RECAPTCHA_SITE_KEY}"></script>
+  <!-- See staff page for policy information. -->
+  <script src="https://www.recaptcha.net/recaptcha/api.js?render={$smarty.const.RECAPTCHA_SITE_KEY}"></script>
 </div>

deploy/templates/signup.success.tpl

@@ -13,7 +13,7 @@ if (0.01) {
 }
 /* ]]> */
 </script>
-<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
+<script type="text/javascript" src="https://www.googleadservices.com/pagead/conversion.js">
 </script>
 <noscript>
 <div style="display:inline;">

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" method="post">
+	<form id='signup' action="/signup/signup" onSubmit='recFormSubmit' method="post">
 
     <fieldset>
      <legend>Create Your Login Info</legend>
@@ -135,17 +135,15 @@
 	  {* 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'>
-			<input
-				class="btn btn-vital g-recaptcha" 
+			<button
+				class="btn btn-vital" 
 				id='become-a-ninja' 
 				type="submit" 
 				name="submit"
-				value="Become a Ninja!"
-				{*data-callback='onSubmit' 
-				data-action='submit'
-				data-sitekey="{$smarty.const.RECAPTCHA_SITE_KEY}"
-				*}
-			/>
+			>
+			Become A Ninja!
+			</button>
+			<input type='hidden' name='token-response' id='token-response' value=''>
 		</div>
 	    <div>
 	    	<small>
@@ -159,52 +157,64 @@
 
 {/if}
 
-	<section class='glassbox'>
-		<h3>Problems?</h3>
-		<div class='hero'>
-
-		<ul>
-			<li>
-			Lost Your Password? <a href="/assistance">go to reset password</a>
-			</li>
-			<li>
-				Already a ninja? <a href='/login'>login instead</a>
-			</li>
-			<li>
-				Didn't get your confirmation code? <a href="/assistance">Resend Confirmation Email</a>
-			</li>
-			<li>
-			Get more info about Ninja type &amp; the game:
-				<a href="http://ninjawars.pbworks.com/" target="_blank" class='extLink'>on the Wiki</a>.
-			</li>
-			<li>
-			Or <a href='/staff'>Contact Us</a>.
-			</li>
-		</ul>
-		</div>
+	<footer>
+		<section class='glassbox'>
+			<h3>Problems?</h3>
+			<div class='hero'>
+
+				<ul>
+					<li>
+					Lost Your Password? <a href="/assistance">go to reset password</a>
+					</li>
+					<li>
+						Already a ninja? <a href='/login'>login instead</a>
+					</li>
+					<li>
+						Didn't get your confirmation code? <a href="/assistance">Resend Confirmation Email</a>
+					</li>
+					<li>
+					Get more info about Ninja type &amp; the game:
+						<a href="http://ninjawars.pbworks.com/" target="_blank" class='extLink'>on the Wiki</a>.
+					</li>
+					<li>
+					Or <a href='/staff'>Contact Us</a>.
+					</li>
+				</ul>
+			</div>
+
+		</section>
+	</footer>
 
-	</section>
+	<style>
+	{literal}
+		.grecaptcha-badge { 
+			visibility: hidden;
+		}
+	{/literal}
+	</style>
 	{* see https://www.google.com/recaptcha/admin/site/692084162/settings *}
-	{* <script src="https://www.google.com/recaptcha/api.js?render={$smarty.const.RECAPTCHA_SITE_KEY}"></script> *}
-	{* Eventually include this on the splash page and login page as well *}
-	<script src="https://www.google.com/recaptcha/api.js?render={$smarty.const.RECAPTCHA_SITE_KEY}"></script>
+	<!-- 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/signup.js'></script>
 	<script>
+	const recaptchaSiteKey = '{$smarty.const.RECAPTCHA_SITE_KEY}';
 	{literal}
-		// function onSubmit(token) {
-		// 	debug('Login submit handler executed.');
-		// 	document.getElementById("signup").submit();
-			// log('Signup submit handler fired.');
-			// e.preventDefault();
-			// grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
-			// 	// Add your logic to submit to your backend server here.
-			// 	log('Signup submit handler executed.');
-			// 	log(token);
-			// 	document.getElementById("signup").submit();
-			// });
-			//
-		// }
+
+		function recFormSubmit(e){
+			e.preventDefault();
+			e.stopPropagation();
+			console.debug('Running grecaptcha.execute')
+			grecaptcha.ready(function() {
+				grecaptcha.execute(recaptchaSiteKey, {action: 'submit'}).then(function(token) {
+					console.debug('grecaptcha.execute token', token);
+					// Add your logic to submit to your backend server here.
+					$('#token-response').val(token);
+					$('#signup').submit();
+				});
+			});
+		}
+		// Currently in form onSubmit
 	{/literal}
 	</script>
 

deploy/templates/splash.tpl

@@ -47,7 +47,8 @@
     </div><!-- End of core -->
 
 <!-- Version: {$version} -->
-
+<!-- See staff page for policy information. -->
+<script src="https://www.recaptcha.net/recaptcha/api.js?render={$smarty.const.RECAPTCHA_SITE_KEY}"></script>
 {literal}
 <script>
 if (top.location != location) { // Framebreak on the splash page to prevent any issues.

deploy/templates/staff.tpl

@@ -110,6 +110,10 @@ Email Ninjawars Staff
     <li> Some pixel art by Roy Ronalds </li>
     <li>Alegion - the original for the Koi photograph Background - <a
 href='http://alegion.deviantart.com/'>alegion.deviantart.com/</a></li>
+    <li>This site is protected by reCAPTCHA and the Google
+    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
+    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
+    </li>
   </ul>
 </section>
 

deploy/www/css/splash.css

@@ -54,6 +54,10 @@
     padding: 0;
 }
 
+.grecaptcha-badge {
+    visibility: hidden;
+}
+
 /* Medium and Large screen modifications */
 @media screen and (min-width: 800px) {
     .splash #top-logo {

deploy/www/css/style.css

@@ -1060,6 +1060,10 @@ form#signup fieldset span {
     font-style: italic;
 }
 
+.grecaptcha-badge {
+    visibility: hidden;
+}
+
 legend {
     font-family: 'Roboto', Arial, sans-serif;
     padding: 0.2em 0.5em;

deploy/www/js/signup.js

@@ -6,7 +6,7 @@
 // eslint-disable-next-line no-var
 // const { location: tLocation, top: tTop } = window;
 // const { location: tFrameLocation } = tTop || {};
-const { log, debug } = console || { log: () => { }, debug: () => { } };
+const { log, debug } = console || { log: () => { /** noop */ }, debug: () => { /** noop */ } };
 
 /**
  * Executions on the signup page.
@@ -29,6 +29,10 @@ const { log, debug } = console || { log: () => { }, debug: () => { } };
 
 // 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