WEBDEV-7354 Add Recaptcha to review form

* Draft recaptcha implementation

* Tidy up hidden inputs and error handling

* Clarify tests and comment re: hidden action input

* Update to prod recaptcha manager

* Tidy up following CR

* Disable submit button if recaptcha not set up

* Add error styling and improve error handling

* Experiment with error handling for bad site-key

* Update error handling

* Adjust error handling and testing

* Remove test logging

* Update default hostname

* Add recaptcha bypass option

* Tidy up bypass implementation

* Add /demo to deploy comment

* Tidy up following CR

* Adjust default key and error messaging

Author: rebecca-shoptaw

.github/workflows/pr-preview.yml

@@ -14,13 +14,18 @@ on:
 
 concurrency: preview-${{ github.ref }}
 
+env:
+  PREVIEW_BRANCH: gh-pages
 jobs:
   deploy-preview:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
       - uses: actions/setup-node@v4
+        with:
+          node-version: latest
+
 
       - name: Install and Build
         run: |
@@ -30,6 +35,29 @@ jobs:
       # Reference: https://github.com/rossjrw/pr-preview-action
       - name: Deploy preview
         uses: rossjrw/pr-preview-action@v1
+        id: preview-step
         with:
           source-dir: ./ghpages/
           umbrella-dir: pr
+          preview-branch: ${{ env.PREVIEW_BRANCH }}
+          comment: false
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        if: steps.preview-step.outputs.deployment-action == 'deploy'
+        with:
+          header: pr-preview
+          message: |
+            [PR Preview Action](https://github.com/rossjrw/pr-preview-action) ${{ steps.preview-step.outputs.action-version }}
+            :---:
+            | <p></p> :rocket: View preview at <br> ${{ steps.preview-step.outputs.preview-url }}demo/ <br><br>
+            | <h6>Built to branch [`${{ env.PREVIEW_BRANCH }}`](${{ github.server_url }}/${{ github.repository }}/tree/${{ env.PREVIEW_BRANCH }}) at ${{ steps.preview-step.outputs.action-start-time }}. <br> Preview will be ready when the [GitHub Pages deployment](${{ github.server_url }}/${{ github.repository }}/deployments) is complete. <br><br> </h6>
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        if: steps.preview-step.outputs.deployment-action == 'remove'
+        with:
+          header: pr-preview
+          message: |
+            [PR Preview Action](https://github.com/rossjrw/pr-preview-action) ${{ steps.preview-step.outputs.action-version }}
+            :---:
+            Preview removed because the pull request was closed.
+            ${{ steps.preview-step.outputs.action-start-time }}

README.md

@@ -46,6 +46,11 @@ npm install
 ```bash
 npm run test
 ```
+### Local Demo
+```bash
+npm run start
+```
+**Note:** If you'd like ReCaptcha to work in your dev environment, you'll want to temporarily replace the `defaultSiteKey` in `app-root.ts` with the current IA site key. If you don't know what that is, ask in the UX team channel.
 
 ### Watch mode
 ```bash

demo/app-root.ts

@@ -1,35 +1,83 @@
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
 
 import { Review } from '@internetarchive/metadata-service';
 import '../src/review-form';
-
-const mockOldReview = new Review({
-  stars: 3,
-  reviewtitle: 'What a cool book!',
-  reviewbody: 'I loved it.',
-  reviewer: 'foo-bar',
-  reviewdate: '2025-03-03 18:13:36',
-  createdate: '2025-02-25 14:28:19',
-});
+import {
+  RecaptchaManager,
+  RecaptchaManagerInterface,
+} from '@internetarchive/recaptcha-manager';
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
+  private mockOldReview = new Review({
+    stars: 3,
+    reviewtitle: 'What a cool book!',
+    reviewbody: 'I loved it.',
+    reviewer: 'foo-bar',
+    reviewdate: '2025-03-03 18:13:36',
+    createdate: '2025-02-25 14:28:19',
+  });
+
+  private goodRecaptchaManager: RecaptchaManagerInterface =
+    new RecaptchaManager({
+      defaultSiteKey: 'demo-key',
+    });
+
+  private badRecaptchaManager: RecaptchaManagerInterface = new RecaptchaManager(
+    {
+      defaultSiteKey: 'i-am-a-bad-key-that-will-fail',
+    },
+  );
+
+  private errors: string[] = [
+    "Sorry, we couldn't submit your review.",
+    'Write a better one.',
+  ];
+
+  @state()
+  private recaptchaManager?: RecaptchaManagerInterface;
+
+  @state()
+  private bypassRecaptcha: boolean = false;
+
+  @state()
+  private showErrors: boolean = false;
+
   render() {
-    return html`
+    return html`${!this.recaptchaManager
+        ? html`<button
+              @click=${() =>
+                (this.recaptchaManager = this.goodRecaptchaManager)}
+            >
+              Turn on ReCaptcha (good site key)</button
+            ><button
+              @click=${() => (this.recaptchaManager = this.badRecaptchaManager)}
+            >
+              Turn on ReCaptcha (bad site key)
+            </button> `
+        : nothing}
+      <button @click=${() => (this.bypassRecaptcha = !this.bypassRecaptcha)}>
+        ${!this.bypassRecaptcha ? 'Bypass' : 'Enable'} ReCaptcha
+      </button>
+      <button @click=${() => (this.showErrors = !this.showErrors)}>
+        ${this.showErrors ? 'Hide' : 'Show'} Pre-filled Errors
+      </button>
       <div class="container">
         <ia-review-form
           .identifier=${'goody'}
-          .oldReview=${mockOldReview}
+          .oldReview=${this.mockOldReview}
+          .recaptchaManager=${this.recaptchaManager}
+          .prefilledErrors=${this.showErrors ? this.errors : []}
+          ?bypassRecaptcha=${this.bypassRecaptcha}
         ></ia-review-form>
-      </div>
-    `;
+      </div>`;
   }
 
   static styles = css`
     .container {
       max-width: 750px;
-      margin: 0 auto;
+      margin: 10px auto;
     }
   `;
 }

package-lock.json

@@ -67,6 +67,7 @@
   },
   "dependencies": {
     "@internetarchive/metadata-service": "^1.0.3",
+    "@internetarchive/recaptcha-manager": "^1.0.0",
     "@lit/localize": "^0.12.2",
     "lit": "^2.8.0"
   }