@saasquatch/mint-components 1.12.1-5 → 1.13.0-0

package/dist/esm/sqm-portal-forgot-password.entry.js

@@ -1,19 +1,19 @@
-import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { k as useState, n as h } from './stencil-hooks.module-ac12ca1c.js';
-import { e as un, $ as $n, i as isDemo } from './index.module-def4aec5.js';
+import { r as registerInstance, h as h$1 } from './index-60f16d0a.js';
+import { k as useState, n as h } from './stencil-hooks.module-e20edc0b.js';
+import { v as vn, c as xn, i as isDemo } from './index.module-f3d96fbb.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import './mixins-f60a614c.js';
 import './JSS-67b5cff8.js';
-import './sqm-text-span-view-8d140661.js';
-import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-c2ed8fed.js';
+import './mixins-83f90fa1.js';
+import './sqm-text-span-view-d1b54710.js';
+import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-4f6c89a7.js';
 
 function usePortalForgotPassword(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState("");
-  const [request, { loading, data, errors }] = un();
-  const urlParams = new URLSearchParams($n.location.search);
+  const [request, { loading, data, errors }] = vn();
+  const urlParams = new URLSearchParams(xn.location.search);
   const nextPage = urlParams.get("nextPage");
   const submit = async (event) => {
     var _a;
@@ -102,7 +102,7 @@ const PortalForgotPassword = class {
       ? usePortalForgotPasswordDemo(this)
       : usePortalForgotPassword(this);
     const content = {
-      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => $n.push(states.loginPath) }, this.loginText))),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => xn.push(states.loginPath) }, this.loginText))),
       messageSlot: h$1("slot", { name: "messageSlot" }, this.headerText),
       emailLabel: this.emailLabel,
       submitLabel: this.submitLabel,

package/dist/esm/sqm-portal-google-registration-form.entry.js

@@ -0,0 +1,302 @@
+import { r as registerInstance, h as h$1 } from './index-60f16d0a.js';
+import { k as useState, n as h } from './stencil-hooks.module-e20edc0b.js';
+import { o, i as isDemo, c as xn } from './index.module-f3d96fbb.js';
+import { j as jsonpointer } from './jsonpointer-388a7082.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import './mixins-83f90fa1.js';
+import './sqm-text-span-view-d1b54710.js';
+import { u as useRegistrationFormState } from './useRegistrationFormState-33f9cb24.js';
+import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-dd481f19.js';
+import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-20b9c9bc.js';
+import './AsYouType-46f67d0d.js';
+import { u as usePortalRegistrationForm } from './usePortalRegistrationForm-e8ec6d4e.js';
+
+function usePortalGoogleRegistrationForm(props) {
+  const [emailValidationError, setEmailValidationError] = useState(null);
+  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState();
+  const [showRegistrationForm, setShowRegistrationForm] = useState({
+    mode: "base",
+  });
+  const handleEmailSubmit = async (event) => {
+    const formControls = event.target.getFormControls();
+    let formData = {};
+    let errorMessage = null;
+    formControls.forEach((control) => {
+      if (!control.name || control.name !== "/email")
+        return;
+      jsonpointer.set(formData, control.name, control.value);
+      if (control.required && !control.value)
+        errorMessage = props.requiredFieldErrorMessage;
+      if (typeof control.validationError === "function") {
+        const validate = control.validationError;
+        const validationError = validate({
+          control,
+          key: "email",
+          value: control.value,
+        });
+        if (validationError)
+          errorMessage = validationError;
+      }
+    });
+    if (errorMessage) {
+      setEmailValidationError(errorMessage);
+      return;
+    }
+    setRegistrationFormState({
+      ...registrationFormState,
+      initialData: {
+        ...registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData,
+        ...formData,
+      },
+    });
+    setShowRegistrationForm({ mode: "manual" });
+  };
+  const handleGoogleInit = (event) => {
+    try {
+      const res = o(event.detail);
+      // TODO: Double check
+      setRegistrationFormState({
+        ...registrationFormState,
+        initialData: {
+          ...registrationFormState.initialData,
+          email: res.payload.email,
+          firstName: res.payload.given_name,
+          lastName: res.payload.family_name,
+        },
+      });
+      setShowRegistrationForm({ mode: "google" });
+    }
+    catch (e) {
+      console.error("Failed to decode Google Sign In credential JWT:", e);
+    }
+  };
+  return {
+    showRegistrationForm,
+    emailValidationError,
+    handleGoogleInit,
+    handleEmailSubmit,
+  };
+}
+
+const PortalGoogleRegistrationForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * Redirect participants to this page after they successfully register.
+     *
+     * @uiName Registration redirect
+     * @uiWidget pageSelect
+     */
+    this.nextPage = "/";
+    /**
+     * Redirect participants to this page from their verification email
+     *
+     * @uiName Email verification redirect
+     * @uiWidget pageSelect
+     */
+    this.redirectPath = "/verifyEmail";
+    /**
+     * @uiName Email field label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName Password field label
+     */
+    this.passwordLabel = "Password";
+    /**
+     * @uiName Submit button text
+     */
+    this.submitLabel = "Register";
+    /**
+     * @uiName Login button text
+     */
+    this.loginLabel = "Sign in";
+    /**
+     * @uiName Confirm password field label
+     */
+    this.confirmPasswordLabel = "Confirm Password";
+    /**
+     * @uiName Show confirm password field
+     */
+    this.confirmPassword = false;
+    /**
+     * @uiName Disable password validation
+     */
+    this.disablePasswordValidation = false;
+    /**
+     * Hides the email and password fields. Note: If you hide default inputs, you must add additional input fields. They must have the input name attributes "email" and "password" for this form to succeed.
+     *
+     * @uiName Hide default fields
+     */
+    this.hideInputs = false;
+    /**
+     * @uiName Header text
+     */
+    this.pageLabel = "Register";
+    /**
+     * Redirect participants to this page after clicking the login button.
+     *
+     * @uiName Login redirect
+     * @uiWidget pageSelect
+     */
+    this.loginPath = "/login";
+    /**
+     * Login Call-to-action
+     *
+     * @uiName Login CTA
+     */
+    this.loginCTA = "Already have an account?";
+    /**
+     * The message to be displayed when a required field is not filled.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     */
+    this.requiredFieldErrorMessage = "Cannot be empty";
+    /**
+     * The message to be displayed when a the form submission fails unexpectedly.
+     *
+     * @uiName Network error message
+     * @uiWidget textArea
+     */
+    this.networkErrorMessage = "Network request failed.";
+    /**
+     * The message to be displayed when password inputs do not match.
+     *
+     * @uiName Password mismatch message
+     * @uiWidget textArea
+     */
+    this.passwordMismatchErrorMessage = "Passwords do not match.";
+    /**
+     * The message to be displayed when the email used is invalid or blocked.
+     *
+     * @uiName Invalid email message
+     * @uiWidget textArea
+     */
+    this.invalidEmailErrorMessage = "Must be a valid email address";
+    /**
+     * The message to be displayed when the registration form is disabled.
+     *
+     * @uiName Form disabled message
+     * @uiWidget textArea
+     */
+    this.formDisabledErrorMessage = "The registration form is currently disabled.";
+    /**
+     * @uiName Password requirement met
+     */
+    this.meetsRequirementsText = "Password has met all requirements";
+    /**
+     * @uiName Password requirement failed
+     */
+    this.doesNotMeetRequirementsText = "Password must meet the following requirements:";
+    /**
+     * @uiName Minimum length text
+     */
+    this.minErrorText = "be a minimum of 8 characters";
+    /**
+     * @uiName Missing uppercase text
+     */
+    this.uppercaseErrorText = "contain at least 1 uppercase character";
+    /**
+     * @uiName Missing lowercase text
+     */
+    this.lowercaseErrorText = "contain at least 1 lowercase character";
+    /**
+     * @uiName Missing number or symbol text
+     */
+    this.hasErrorText = "contain at least 1 number or symbol";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks, refs } = isDemo()
+      ? useRegisterDemo(this)
+      : usePortalRegistrationForm(this);
+    const styles = {
+      LoginButton: {
+        "&::part(label)": {
+          padding: "0",
+        },
+      },
+    };
+    const sheet = createStyleSheet(styles);
+    const styleString = sheet.toString();
+    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, emailValidationError, } = isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
+    const content = {
+      formData: h$1("slot", { name: "formData" }),
+      googleButton: (h$1("sqm-google-sign-in", { onInitComplete: handleGoogleInit })),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("style", null, styleString), h$1("span", null, this.loginCTA, " ", h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => xn.push(states.loginPath), className: sheet.classes.LoginButton }, this.loginLabel), " "))),
+      terms: h$1("slot", { name: "terms" }),
+      emailLabel: this.emailLabel,
+      passwordLabel: this.passwordLabel,
+      submitLabel: this.submitLabel,
+      pageLabel: this.pageLabel,
+      confirmPasswordLabel: this.confirmPasswordLabel,
+      networkErrorMessage: this.networkErrorMessage,
+      passwordMismatchErrorMessage: this.passwordMismatchErrorMessage,
+      invalidEmailErrorMessage: this.invalidEmailErrorMessage,
+      formDisabledErrorMessage: this.formDisabledErrorMessage,
+      requiredFieldErrorMessage: this.requiredFieldErrorMessage,
+      meetsRequirementsText: this.meetsRequirementsText,
+      doesNotMeetRequirementsText: this.doesNotMeetRequirementsText,
+      minErrorText: this.minErrorText,
+      uppercaseErrorText: this.uppercaseErrorText,
+      lowercaseErrorText: this.lowercaseErrorText,
+      hasErrorText: this.hasErrorText,
+    };
+    if (showRegistrationForm.mode === "base") {
+      return (h$1(BaseRegistrationFormView, { states: {
+          error: emailValidationError,
+        }, callbacks: { handleEmailSubmit }, content: content }));
+    }
+    return (h$1(PortalRegistrationFormView, { states: {
+        ...states,
+        hidePasswords: showRegistrationForm.mode === "google",
+      }, callbacks: callbacks, content: {
+        ...content,
+        secondaryButton: h$1("div", { style: { display: "none" } }),
+      }, refs: refs }));
+  }
+};
+function useRegisterDemo(props) {
+  return cjs({
+    states: {
+      error: "",
+      loading: false,
+      confirmPassword: props.confirmPassword,
+      hideInputs: props.hideInputs || false,
+      customPasswordField: false,
+      loginPath: "/login",
+    },
+    callbacks: {
+      handleGoogleInit: () => { },
+      setShowRegistrationForm: () => { },
+      submit: async (_event) => {
+        console.log("submit");
+      },
+      inputFunction: () => { },
+    },
+    content: {
+      pageLabel: "Register",
+      formData: null,
+    },
+    refs: {
+      formRef: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+function useGoogleDemo(props) {
+  const [showRegistrationForm, setShowRegistrationForm] = useState({
+    mode: "base",
+  });
+  return cjs({
+    emailValidationError: true,
+    handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
+    showRegistrationForm,
+    handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),
+  }, props.demoGoogleData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { PortalGoogleRegistrationForm as sqm_portal_google_registration_form };

package/dist/esm/sqm-portal-logout.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance } from './index-17b4da69.js';
-import { n as h } from './stencil-hooks.module-ac12ca1c.js';
-import { b as setUserIdentity, $ as $n, i as isDemo } from './index.module-def4aec5.js';
+import { r as registerInstance } from './index-60f16d0a.js';
+import { n as h } from './stencil-hooks.module-e20edc0b.js';
+import { b as setUserIdentity, c as xn, i as isDemo } from './index.module-f3d96fbb.js';
 
 function usePortalLogout({ nextPage }) {
   setUserIdentity(undefined);
-  $n.push({ pathname: nextPage, search: "" });
+  xn.push({ pathname: nextPage, search: "" });
 }
 
 const PortalLogout = class {

package/dist/esm/{sqm-portal-profile-view-ffe955c8.js → sqm-portal-profile-view-2997f902.js}

@@ -1,7 +1,7 @@
-import { h } from './index-17b4da69.js';
-import { i as intl } from './global-04c7d3b5.js';
+import { h } from './index-60f16d0a.js';
+import { i as intl } from './global-3611a2b7.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { T as TextSpanView } from './sqm-text-span-view-8d140661.js';
+import { T as TextSpanView } from './sqm-text-span-view-d1b54710.js';
 
 function PortalProfileView(props) {
   var _a, _b, _c, _d, _e;

package/dist/esm/sqm-portal-profile.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { k as useState, f as useEffect, n as h } from './stencil-hooks.module-ac12ca1c.js';
-import './global-04c7d3b5.js';
-import { d as dist, Q, y as yn, f as $e, i as isDemo } from './index.module-def4aec5.js';
+import { r as registerInstance, h as h$1 } from './index-60f16d0a.js';
+import { k as useState, f as useEffect, n as h } from './stencil-hooks.module-e20edc0b.js';
+import './global-3611a2b7.js';
+import { d as dist, K, E as En, x as xe, i as isDemo } from './index.module-f3d96fbb.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import './JSS-67b5cff8.js';
 import { g as getProps } from './utils-334c1e34.js';
-import './sqm-text-span-view-8d140661.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-ffe955c8.js';
-import { i as isEmpty } from './utilities-3f5bba22.js';
+import './JSS-67b5cff8.js';
+import './sqm-text-span-view-d1b54710.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-2997f902.js';
+import { i as isEmpty } from './utilities-33996ce7.js';
 
 const GET_USER = dist.gql `
   query {
@@ -53,12 +53,12 @@ const defaultFormState = {
   error: "",
 };
 function usePortalProfile(props) {
-  const userIdent = Q();
+  const userIdent = K();
   const [success, setSuccess] = useState(false);
   const [userData, setUserData] = useState(undefined);
   const [formState, setFormState] = useState(defaultFormState);
-  const userDataResponse = yn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
-  const [upsertUser, upsertUserResponse] = $e(UPSERT_USER);
+  const userDataResponse = En(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
+  const [upsertUser, upsertUserResponse] = xe(UPSERT_USER);
   useEffect(() => {
     if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading)
       return;

package/dist/esm/sqm-portal-protected-route.entry.js

@@ -1,24 +1,24 @@
-import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { f as useEffect, n as h } from './stencil-hooks.module-ac12ca1c.js';
-import { Q, S as Sn, $ as $n, i as isDemo } from './index.module-def4aec5.js';
+import { r as registerInstance, h as h$1, c as Host } from './index-60f16d0a.js';
+import { f as useEffect, n as h } from './stencil-hooks.module-e20edc0b.js';
+import { K, j as jn, c as xn, i as isDemo } from './index.module-f3d96fbb.js';
 
 function usePortalProtectedRoute({ requireEmailVerification, redirectTo, redirectToUnverified, }) {
   var _a;
-  const userIdent = Q();
+  const userIdent = K();
   const authenticated = !!(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt);
   const emailVerified = (_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified;
-  const { pathname, search } = Sn();
+  const { pathname, search } = jn();
   const nextPageParam = new URLSearchParams();
   nextPageParam.append("nextPage", `${pathname}${search}`);
   useEffect(() => {
     if (!authenticated) {
-      return $n.push({
+      return xn.push({
         pathname: redirectTo,
         search: "?" + nextPageParam.toString(),
       });
     }
     if (requireEmailVerification && !emailVerified) {
-      return $n.push({
+      return xn.push({
         pathname: redirectToUnverified || redirectTo,
         search: "?" + nextPageParam.toString(),
       });

package/dist/esm/sqm-portal-registration-form-view-20b9c9bc.js

@@ -0,0 +1,84 @@
+import { h } from './index-60f16d0a.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { A as AuthWrapper, a as AuthColumn, H as HostBlock, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
+import { T as TextSpanView } from './sqm-text-span-view-d1b54710.js';
+
+const style = {
+  Wrapper: { ...AuthWrapper, "max-width": "600px" },
+  Column: AuthColumn,
+  HostBlock: HostBlock,
+  ":host": {
+    margin: "0 auto",
+    width: "100%",
+  },
+  ButtonsContainer: AuthButtonsContainer,
+  ErrorStyle: ErrorStyles,
+};
+const vanillaStyle = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+function PortalRegistrationFormView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+  const { states, refs, callbacks, content } = props;
+  if (states.error) {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  }
+  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h(TextSpanView, { type: "h3" }, content.pageLabel),
+    h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+      ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.disabled) ? (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, states.registrationFormState.disabledMessage))) : (states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, props.states.error)))),
+      content.formData,
+      !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: true, required: true, validationError: ({ value }) => {
+          if (!value) {
+            return content.requiredFieldErrorMessage;
+          }
+          // this matches shoelace validation, but could be better
+          if (!value.includes("@")) {
+            return content.invalidEmailErrorMessage;
+          }
+        } }, (((_c = (_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.initialData) === null || _c === void 0 ? void 0 : _c.email) ? {
+        value: (_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.email,
+      }
+        : {}), (((_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.validationErrors) === null || _g === void 0 ? void 0 : _g.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_j = (_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.validationErrors) === null || _j === void 0 ? void 0 : _j.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : [])))),
+      !(states.hideInputs || states.hidePasswords) && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": !states.enablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText })),
+      content.passwordField,
+      !(states.hideInputs || states.hidePasswords) &&
+        states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.disabled), required: true }, (((_m = (_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.initialData) === null || _m === void 0 ? void 0 : _m.confirmPassword) ? {
+        value: (_p = (_o = states.registrationFormState) === null || _o === void 0 ? void 0 : _o.initialData) === null || _p === void 0 ? void 0 : _p.confirmPassword,
+      }
+        : {}), (((_r = (_q = states.registrationFormState) === null || _q === void 0 ? void 0 : _q.validationErrors) === null || _r === void 0 ? void 0 : _r.confirmPassword) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_t = (_s = states.registrationFormState) === null || _s === void 0 ? void 0 : _s.validationErrors) === null || _t === void 0 ? void 0 : _t.confirmPassword) || content.requiredFieldErrorMessage,
+      }
+        : [])))),
+      content.terms,
+      h("div", { class: sheet.classes.ButtonsContainer },
+        h("sl-button", { submit: true, loading: states.loading, disabled: (_u = states.registrationFormState) === null || _u === void 0 ? void 0 : _u.disabled, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
+        content.secondaryButton))));
+}
+
+export { PortalRegistrationFormView as P };