@salesforcedevs/dw-components 1.3.397-canary.3 → 1.3.397-canary.5

package/lwc.config.json

@@ -25,6 +25,7 @@
         "dw/podcastsGrid",
         "dw/podcastsPromo",
         "dw/rcgTable",
+        "dw/recaptcha",
         "dw/slackCta",
         "dw/slackSuccess",
         "dw/tbidLoginMenu",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.397-canary.3",
+    "version": "1.3.397-canary.5",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {

package/src/modules/dw/deSignupForm/deSignupForm.html

@@ -117,7 +117,11 @@
             <span lwc:dom="manual" class="legal-checkbox privacy-terms"></span>
         </dx-checkbox>
 
-        <slot class="form-captcha-slot" name="form-captcha-slot"></slot>
+        <slot
+            class="form-captcha-slot"
+            name="form-captcha-slot"
+            onslotchange={onSlotChange}
+        ></slot>
 
         <dx-button
             class="submit-button"

package/src/modules/dw/deSignupForm/deSignupForm.ts

@@ -4,6 +4,7 @@ import { track as trackGtm } from "dxUtils/analytics";
 import { submitForm, ErrorCode, SignupForm, UserData } from "./submitForm";
 import { CountryOptions } from "typings/custom";
 import { stateMap } from "dwUtils/forms";
+import Recaptcha from "packages/@salesforcedevs/dw-components/src/modules/dw/recaptcha/recaptcha";
 
 type SelectOption = { value: string; label: string };
 type Country = SelectOption & {
@@ -47,7 +48,7 @@ export default class DeSignupForm extends LightningElement {
     private marketingText: string = "";
     private showLegalCheckbox: boolean = false;
     private privacyText: string = "";
-    private recaptchaToken = "";
+    private recaptchaComponent: Recaptcha | null = null;
 
     @track knownDuplicateUsers: string[] = [];
 
@@ -74,26 +75,6 @@ export default class DeSignupForm extends LightningElement {
         return stateMap[this.country] || [];
     }
 
-    @api
-    recaptchaCallback(responseToken: string) {
-        this.recaptchaToken = responseToken;
-    }
-
-    @api
-    recaptchaExpiredCallback() {
-        this.recaptchaToken = "";
-    }
-
-    @api
-    recaptchaErrorCallback() {
-        this.resetRecaptcha();
-    }
-
-    private resetRecaptcha() {
-        this.recaptchaToken = "";
-        (window as any).grecaptcha?.reset();
-    }
-
     connectedCallback(): void {
         this.getCountryList();
     }
@@ -104,6 +85,10 @@ export default class DeSignupForm extends LightningElement {
         this.updateInnerHtml("span.legal-checkbox", this.privacyText);
     }
 
+    onSlotChange(e: Event) {
+        this.recaptchaComponent = e.target as Recaptcha;
+    }
+
     createUUID() {
         if ("crypto" in window && "randomUUID" in crypto) {
             return crypto.randomUUID();
@@ -169,7 +154,7 @@ export default class DeSignupForm extends LightningElement {
         }
 
         const formData = this.prepareUserData();
-        if (!formData || !this.recaptchaToken) {
+        if (!formData) {
             return;
         }
 
@@ -188,7 +173,7 @@ export default class DeSignupForm extends LightningElement {
         );
 
         this.setSubmitButtonDisabled(true);
-        submitForm(formData, this.recaptchaToken)
+        submitForm(formData)
             .then(() => {
                 trackGtm(event.target!, "custEv_signUp", {
                     authentication_method: "email",
@@ -212,7 +197,7 @@ export default class DeSignupForm extends LightningElement {
                         "/developer-legacy/signup/account-verification";
                 } else {
                     this.setSubmitButtonDisabled(false);
-                    this.resetRecaptcha();
+                    this.recaptchaComponent?.reset();
                     if (error.message === ErrorCode.DUPLICATE) {
                         this.knownDuplicateUsers.push(formData.user.username);
                     } else {
@@ -257,7 +242,15 @@ export default class DeSignupForm extends LightningElement {
             validCheckboxes = validCheckboxes && checkbox.reportValidity();
         });
 
-        if (fields.some((field) => !field.valid) || !validCheckboxes) {
+        const hasInvalidCaptcha =
+            this.recaptchaComponent &&
+            !this.recaptchaComponent.reportValidity();
+
+        if (
+            fields.some((field) => !field.valid) ||
+            !validCheckboxes ||
+            hasInvalidCaptcha
+        ) {
             return null;
         }
 
@@ -277,7 +270,8 @@ export default class DeSignupForm extends LightningElement {
             user: userData as UserData,
             default_driver: DEFAULT_DRIVER,
             info_email: InfoEmail,
-            form_join_id_unique: this.createUUID()
+            form_join_id_unique: this.createUUID(),
+            "g-recaptcha-response": this.recaptchaComponent?.value
         };
 
         return formData;

package/src/modules/dw/deSignupForm/submitForm.ts

@@ -24,6 +24,7 @@ export type SignupForm = {
     default_driver: string;
     info_email: "True" | "False";
     form_join_id_unique: string;
+    "g-recaptcha-response"?: string;
 };
 
 type OrgStatus = "New" | "In Progress" | "Error";
@@ -79,19 +80,13 @@ const checkOrgStatus = (id: string, retries = 0): Promise<void> => {
     });
 };
 
-export const submitForm = async (
-    formData: SignupForm,
-    recaptchaToken: string
-): Promise<void> => {
+export const submitForm = async (formData: SignupForm): Promise<void> => {
     const response = await fetch(CREATE_PATH, {
         method: "POST",
         headers: {
             "Content-Type": "application/json"
         },
-        body: JSON.stringify({
-            ...formData,
-            "g-recaptcha-response": recaptchaToken
-        })
+        body: JSON.stringify(formData)
     });
 
     if (!response.ok) {

package/src/modules/dw/recaptcha/recaptcha.css

@@ -0,0 +1,14 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+.container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-bottom: var(--dx-g-spacing-lg);
+}
+
+.error-message-box {
+    margin-top: var(--dx-g-spacing-xs);
+    display: block;
+}

package/src/modules/dw/recaptcha/recaptcha.html

@@ -0,0 +1,12 @@
+<template>
+    <div class="container">
+        <div class="g-recaptcha"></div>
+        <div
+            if:true={errorMessage}
+            aria-live="assertive"
+            class="error-message-box dx-text-form-error-message"
+        >
+            {errorMessage}
+        </div>
+    </div>
+</template>

package/src/modules/dw/recaptcha/recaptcha.ts

@@ -0,0 +1,94 @@
+import { api, LightningElement } from "lwc";
+
+// NOTE: This component assumes it is the only Recaptcha widget on a page.
+type RecaptchaApi = {
+    render(element: HTMLElement | null, recaptchaConfig: any): void;
+    reset(): void;
+};
+
+export default class Recaptcha extends LightningElement {
+    private errorMessage = "";
+    private recaptchaDiv!: HTMLDivElement;
+    private recaptchaApi?: RecaptchaApi;
+    private recaptchaToken = "";
+
+    @api missingErrorMessage = "Complete the captcha";
+    @api recaptchaSiteKey = "";
+
+    @api // read only
+    get value() {
+        return this.recaptchaToken;
+    }
+
+    @api
+    recaptchaScriptOnLoad = (recaptchaApi: RecaptchaApi) => {
+        this.recaptchaApi = recaptchaApi;
+        if (this.recaptchaDiv) {
+            this.renderRecaptcha();
+        }
+    };
+
+    @api
+    reset = () => this.resetRecaptcha();
+
+    @api
+    reportValidity = () => {
+        if (!this.checkValidity()) {
+            this.errorMessage = this.missingErrorMessage;
+            return false;
+        }
+
+        this.errorMessage = "";
+        return true;
+    };
+
+    @api
+    checkValidity = () => {
+        return Boolean(this.recaptchaToken);
+    };
+
+    renderedCallback() {
+        if (!this.recaptchaDiv) {
+            this.recaptchaDiv = this.template.querySelector(
+                ".g-recaptcha"
+            ) as HTMLDivElement;
+            if (this.recaptchaApi) {
+                this.renderRecaptcha();
+            }
+        }
+    }
+
+    private renderRecaptcha = () => {
+        const smallMatchMedia = window.matchMedia(
+            "screen and (max-width: 768px)"
+        );
+
+        // render recaptcha, referencing this component's callbacks for handling events
+        this.recaptchaApi?.render(this.recaptchaDiv, {
+            sitekey: this.recaptchaSiteKey,
+            callback: this.recaptchaCallback,
+            "expired-callback": this.recaptchaExpiredCallback,
+            "error-callback": this.recaptchaErrorCallback,
+            size: smallMatchMedia.matches ? "compact" : "normal"
+        });
+    };
+
+    private recaptchaCallback = (token: string) => {
+        this.recaptchaToken = token;
+        this.errorMessage = "";
+    };
+
+    private recaptchaExpiredCallback = () => {
+        this.recaptchaToken = ""; // note: recaptcha element itself handles showing an "expired" message
+    };
+
+    private recaptchaErrorCallback = () => {
+        this.resetRecaptcha();
+        this.errorMessage = ""; // this error message is only set to a value when the form is submitted or `reportValidity` is called explicitly
+    };
+
+    private resetRecaptcha = () => {
+        this.recaptchaToken = "";
+        this.recaptchaApi?.reset();
+    };
+}