@saasquatch/mint-components 1.3.3-4 → 1.4.0-0

package/dist/collection/components/sqm-portal-register/usePortalRegister.js

@@ -1,115 +1,115 @@
-import jsonpointer from "jsonpointer";
-import { useCallback, useEffect, useRef } from "@saasquatch/universal-hooks";
-import { navigation, useRegisterWithEmailAndPasswordMutation, } from "@saasquatch/component-boilerplate";
-import { useValidationState } from "./useValidationState";
-import { AsYouType } from "libphonenumber-js";
-export function usePortalRegister(props) {
-  var _a, _b, _c, _d, _e, _f;
-  const formRef = useRef(null);
-  const { validationState, setValidationState } = useValidationState({});
-  const [request, { loading, errors, data }] = useRegisterWithEmailAndPasswordMutation();
-  const submit = async (event) => {
-    let formControls = event.target.getFormControls();
-    let formData = {};
-    let validationErrors = {};
-    formControls === null || formControls === void 0 ? void 0 : formControls.forEach((control) => {
-      if (!control.name)
-        return;
-      const key = control.name;
-      const value = control.value;
-      jsonpointer.set(formData, key, value);
-      // required validation
-      if (control.required && !value) {
-        jsonpointer.set(validationErrors, key, "Cannot be empty");
-      }
-      // custom validation
-      if (typeof control.validationError === "function") {
-        const validate = control.validationError;
-        const validationError = validate({ control, key, value });
-        if (validationError)
-          jsonpointer.set(validationErrors, key, validationError);
-      }
-    });
-    if ((props.confirmPassword || formData.confirmPassword) &&
-      formData.password !== formData.confirmPassword) {
-      validationErrors = {
-        ...validationErrors,
-        confirmPassword: "Passwords do not match.",
-      };
-    }
-    setValidationState({ error: "", validationErrors });
-    if (Object.keys(validationErrors).length) {
-      // early return for validation errors
-      return;
-    }
-    const { email, password } = formData;
-    delete formData.email;
-    delete formData.password;
-    delete formData.confirmPassword;
-    formData = { ...formData };
-    const urlParams = { nextPage: props.nextPage };
-    const variables = {
-      email,
-      password,
-      formData,
-      urlParams,
-    };
-    try {
-      await request(variables);
-    }
-    catch (error) {
-      setValidationState({ error: "Network request failed." });
-    }
-  };
-  const inputFunction = useCallback((e) => {
-    var _a, _b;
-    const name = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toLowerCase();
-    if (name !== "tel")
-      return;
-    const asYouType = new AsYouType("US");
-    e.target.value = asYouType.input(e.target.value);
-  }, []);
-  useEffect(() => {
-    var _a;
-    if ((_a = data === null || data === void 0 ? void 0 : data.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
-      navigation.push(props.nextPage);
-    }
-  }, [(_a = data === null || data === void 0 ? void 0 : data.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token]);
-  useEffect(() => {
-    if (!formRef.current)
-      return;
-    const form = formRef.current;
-    form.addEventListener("sl-input", inputFunction);
-    return () => {
-      form.removeEventListener("sl-input", inputFunction);
-    };
-  }, [formRef.current]);
-  let errorMessage = "";
-  if ((_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b["error"]) {
-    errorMessage = "Network request failed";
-  }
-  else if ((errors === null || errors === void 0 ? void 0 : errors.message) && !((_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors.length)) {
-    errorMessage = "Network request failed";
-  }
-  else {
-    errorMessage =
-      ((_f = (_e = (_d = errors === null || errors === void 0 ? void 0 : errors.response) === null || _d === void 0 ? void 0 : _d.errors) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.message) || (validationState === null || validationState === void 0 ? void 0 : validationState.error);
-  }
-  return {
-    states: {
-      loading,
-      error: errorMessage,
-      validationState,
-      confirmPassword: props.confirmPassword,
-      hideInputs: props.hideInputs,
-      loginPath: props.loginPath
-    },
-    callbacks: {
-      submit,
-      inputFunction,
-    },
-    refs: {
-      formRef,
-    },
-  };
-}
+import jsonpointer from "jsonpointer";
+import { useCallback, useEffect, useRef } from "@saasquatch/universal-hooks";
+import { navigation, useRegisterWithEmailAndPasswordMutation, } from "@saasquatch/component-boilerplate";
+import { useValidationState } from "./useValidationState";
+import { AsYouType } from "libphonenumber-js";
+export function usePortalRegister(props) {
+  var _a, _b, _c, _d, _e, _f;
+  const formRef = useRef(null);
+  const { validationState, setValidationState } = useValidationState({});
+  const [request, { loading, errors, data }] = useRegisterWithEmailAndPasswordMutation();
+  const submit = async (event) => {
+    let formControls = event.target.getFormControls();
+    let formData = {};
+    let validationErrors = {};
+    formControls === null || formControls === void 0 ? void 0 : formControls.forEach((control) => {
+      if (!control.name)
+        return;
+      const key = control.name;
+      const value = control.value;
+      jsonpointer.set(formData, key, value);
+      // required validation
+      if (control.required && !value) {
+        jsonpointer.set(validationErrors, key, "Cannot be empty");
+      }
+      // custom validation
+      if (typeof control.validationError === "function") {
+        const validate = control.validationError;
+        const validationError = validate({ control, key, value });
+        if (validationError)
+          jsonpointer.set(validationErrors, key, validationError);
+      }
+    });
+    if ((props.confirmPassword || formData.confirmPassword) &&
+      formData.password !== formData.confirmPassword) {
+      validationErrors = {
+        ...validationErrors,
+        confirmPassword: "Passwords do not match.",
+      };
+    }
+    setValidationState({ error: "", validationErrors });
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      return;
+    }
+    const { email, password } = formData;
+    delete formData.email;
+    delete formData.password;
+    delete formData.confirmPassword;
+    formData = { ...formData };
+    const redirectPath = props.redirectPath;
+    const variables = {
+      email,
+      password,
+      formData,
+      redirectPath,
+    };
+    try {
+      await request(variables);
+    }
+    catch (error) {
+      setValidationState({ error: "Network request failed." });
+    }
+  };
+  const inputFunction = useCallback((e) => {
+    var _a, _b;
+    const name = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    if (name !== "tel")
+      return;
+    const asYouType = new AsYouType("US");
+    e.target.value = asYouType.input(e.target.value);
+  }, []);
+  useEffect(() => {
+    var _a;
+    if ((_a = data === null || data === void 0 ? void 0 : data.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
+      navigation.push(props.nextPage);
+    }
+  }, [(_a = data === null || data === void 0 ? void 0 : data.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token]);
+  useEffect(() => {
+    if (!formRef.current)
+      return;
+    const form = formRef.current;
+    form.addEventListener("sl-input", inputFunction);
+    return () => {
+      form.removeEventListener("sl-input", inputFunction);
+    };
+  }, [formRef.current]);
+  let errorMessage = "";
+  if ((_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b["error"]) {
+    errorMessage = "Network request failed";
+  }
+  else if ((errors === null || errors === void 0 ? void 0 : errors.message) && !((_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors.length)) {
+    errorMessage = "Network request failed";
+  }
+  else {
+    errorMessage =
+      ((_f = (_e = (_d = errors === null || errors === void 0 ? void 0 : errors.response) === null || _d === void 0 ? void 0 : _d.errors) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.message) || (validationState === null || validationState === void 0 ? void 0 : validationState.error);
+  }
+  return {
+    states: {
+      loading,
+      error: errorMessage,
+      validationState,
+      confirmPassword: props.confirmPassword,
+      hideInputs: props.hideInputs,
+      loginPath: props.loginPath,
+    },
+    callbacks: {
+      submit,
+      inputFunction,
+    },
+    refs: {
+      formRef,
+    },
+  };
+}

package/dist/collection/components/sqm-portal-register/useValidationState.js

@@ -1,8 +1,8 @@
-import { useHost } from "@saasquatch/component-boilerplate";
-import { useDomContextState } from "@saasquatch/dom-context-hooks";
-const CONTEXT_NAME = "sq:validation-state";
-export function useValidationState(formState) {
-  const host = useHost();
-  const [validationState, setValidationState] = useDomContextState(host, CONTEXT_NAME, formState);
-  return { validationState, setValidationState };
-}
+import { useHost } from "@saasquatch/component-boilerplate";
+import { useDomContextState } from "@saasquatch/dom-context-hooks";
+const CONTEXT_NAME = "sq:validation-state";
+export function useValidationState(formState) {
+  const host = useHost();
+  const [validationState, setValidationState] = useDomContextState(host, CONTEXT_NAME, formState);
+  return { validationState, setValidationState };
+}

package/dist/collection/components/sqm-portal-reset-password/sqm-portal-reset-password-view.js

@@ -1,78 +1,78 @@
-import { h } from "@stencil/core";
-import { AuthButtonsContainer, AuthColumn, AuthWrapper, } from "../../global/mixins";
-import jss from "jss";
-import preset from "jss-preset-default";
-import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
-const style = {
-  Wrapper: AuthWrapper,
-  Column: AuthColumn,
-  ButtonsContainer: AuthButtonsContainer,
-  Banner: {
-    "&::part(erroralert-base)": {
-      margin: "15px 0px",
-    },
-  },
-  CodeError: {
-    "&::part(erroralert-base)": {
-      "margin-bottom": "15px",
-    },
-  },
-  CodeSuccess: {
-    "&::part(successalert-base)": {
-      "margin-bottom": "15px",
-    },
-  },
-  ContinueButton: {
-    width: "100%",
-  },
-};
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
-`;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
-export function PortalResetPasswordView(props) {
-  const { states, callbacks } = props;
-  if (states.reset) {
-    return (h("div", { class: `${sheet.classes.Wrapper} ${sheet.classes.Column}` },
-      h("style", { type: "text/css" }, styleString),
-      h(TextSpanView, { type: "h3" }, states.content.resetPasswordHeader),
-      h("sqm-form-message", { class: sheet.classes.CodeSuccess, exportparts: "success-icon" },
-        h("div", { part: "successalert-text" }, "Your password has been reset and you are being redirected. If you are not redirected, please click Continue.")),
-      h("div", null,
-        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.gotoNextPage, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, states.content.continueButtonText))));
-  }
-  if (states.oobCodeValidating) {
-    return h("div", null);
-  }
-  if (!states.oobCodeValid) {
-    return (h("div", { class: `${sheet.classes.Wrapper} ${sheet.classes.Column}` },
-      h("style", { type: "text/css" }, styleString),
-      h("sqm-form-message", { class: sheet.classes.CodeError, type: "error", exportparts: "erroralert-icon" },
-        h("div", { part: "erroralert-text" }, "The password reset code is invalid or has expired, please try again.")),
-      h("div", null,
-        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.failed, exportparts: "base: primarybutton-base", type: "primary" }, states.content.continueButtonText))));
-  }
-  return (h("div", { class: sheet.classes.Wrapper },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    h(TextSpanView, { type: "h2" }, states.reset
-      ? states.content.passwordResetHeader
-      : states.content.resetPasswordHeader),
-    h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
-      props.states.error && (h("sqm-form-message", { type: "error", class: sheet.classes.Banner, exportparts: "erroralert-icon" },
-        h("div", { part: "erroralert-text" }, props.states.error))),
-      !states.reset && (h("sqm-password-field", { fieldLabel: states.content.passwordFieldLabel, demoData: states.passwordDemoData })),
-      !states.reset && states.confirmPassword && (h("sl-input", { exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, disabled: states.loading, required: true })),
-      h("div", { class: sheet.classes.ButtonsContainer },
-        h("sl-button", { class: sheet.classes.ContinueButton, submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, states.reset
-          ? states.content.continueButtonText
-          : states.content.resetPasswordButtonText)))));
-}
+import { h } from "@stencil/core";
+import { AuthButtonsContainer, AuthColumn, AuthWrapper, } from "../../global/mixins";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
+const style = {
+  Wrapper: AuthWrapper,
+  Column: AuthColumn,
+  ButtonsContainer: AuthButtonsContainer,
+  Banner: {
+    "&::part(erroralert-base)": {
+      margin: "15px 0px",
+    },
+  },
+  CodeError: {
+    "&::part(erroralert-base)": {
+      "margin-bottom": "15px",
+    },
+  },
+  CodeSuccess: {
+    "&::part(successalert-base)": {
+      "margin-bottom": "15px",
+    },
+  },
+  ContinueButton: {
+    width: "100%",
+  },
+};
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+`;
+jss.setup(preset());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+export function PortalResetPasswordView(props) {
+  const { states, callbacks } = props;
+  if (states.reset) {
+    return (h("div", { class: `${sheet.classes.Wrapper} ${sheet.classes.Column}` },
+      h("style", { type: "text/css" }, styleString),
+      h(TextSpanView, { type: "h3" }, states.content.resetPasswordHeader),
+      h("sqm-form-message", { class: sheet.classes.CodeSuccess, exportparts: "success-icon" },
+        h("div", { part: "successalert-text" }, "Your password has been reset and you are being redirected. If you are not redirected, please click Continue.")),
+      h("div", null,
+        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.gotoNextPage, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, states.content.continueButtonText))));
+  }
+  if (states.oobCodeValidating) {
+    return h("div", null);
+  }
+  if (!states.oobCodeValid) {
+    return (h("div", { class: `${sheet.classes.Wrapper} ${sheet.classes.Column}` },
+      h("style", { type: "text/css" }, styleString),
+      h("sqm-form-message", { class: sheet.classes.CodeError, type: "error", exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, "The password reset code is invalid or has expired, please try again.")),
+      h("div", null,
+        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.failed, exportparts: "base: primarybutton-base", type: "primary" }, states.content.continueButtonText))));
+  }
+  return (h("div", { class: sheet.classes.Wrapper },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h(TextSpanView, { type: "h2" }, states.reset
+      ? states.content.passwordResetHeader
+      : states.content.resetPasswordHeader),
+    h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
+      props.states.error && (h("sqm-form-message", { type: "error", class: sheet.classes.Banner, exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, props.states.error))),
+      !states.reset && (h("sqm-password-field", { fieldLabel: states.content.passwordFieldLabel, demoData: states.passwordDemoData })),
+      !states.reset && states.confirmPassword && (h("sl-input", { exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, disabled: states.loading, required: true })),
+      h("div", { class: sheet.classes.ButtonsContainer },
+        h("sl-button", { class: sheet.classes.ContinueButton, submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, states.reset
+          ? states.content.continueButtonText
+          : states.content.resetPasswordButtonText)))));
+}