<?php
  $creds = json_decode(file_get_contents('/etc/menlo/conf/test_page_secrets', false), true);
  $site_key = $creds['recaptcha_v2_invisible']['site_key'];
?>
<html>
  <head>
    <title>reCAPTCHA v2 invisible: Programmatically bind the challenge to a div</title>
    <!-- See https://developers.google.com/recaptcha/docs/invisible#explicit_render,
             https://developers.google.com/recaptcha/docs/display#explicit_render -->
    <script>
      var onloadCallback = function() {
        // Programmatically bind to the submit button when the recaptcha
        // script finishes loading
        grecaptcha.render(document.getElementById('recaptcha_div'), {
          'sitekey': '<?php echo $site_key ?>',
          'size': 'invisible',
          'callback':  onRecaptchaComplete
        });
        document.getElementById('submit_button').disabled = false;
      };

      function onRecaptchaComplete() {
        document.getElementById("demo-form").submit();
      }

      function buttonClick() {
        // Programmatically invoke the recaptcha
        grecaptcha.execute();
      }
    </script>
  </head>
  <body>
    <form id="demo-form" action="verify_token.php" method="POST">
      <!-- reCAPTCHA puts a <div class=grecaptcha-badge> inside this div when
        gcaptcha.render is called which contains a <textarea id=g-recaptcha-response>
        which is where the response value is filled in by the recaptcha code. -->
      <div id="recaptcha_div"></div>
      <button id="submit_button" disabled type="button"
        onclick="javascript:buttonClick()">Submit</button>
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
  </body>
</html>
