@saasquatch/mint-components 1.5.1-3 → 1.5.2

package/CHANGELOG.md

@@ -7,14 +7,38 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [1.5.1] - 2022-02-28
+## [1.5.2] - 2022-03-08
+
+### Changed
+
+- Changed Components:
+  - \<sqm-portal-login>
+    - Enforce that nextPage redirects are relative
+  - \<sqm-portal-reset-password>
+    - Enforce that nextPage redirects are relative
+  - \<sqm-portal-verify-email>
+    - Enforce that nextPage redirects are relative
+
+## [1.5.1] - 2022-03-03
 
 ### Added
 
 - Checkbox and dropdown components added for use in \<sqm-portal-register>
-  New components:
+
+- Added Components:
+
   - \<sqm-checkbox-field>
+    - Required by default but can be optional
+    - Allows for a link in checkbox text to support behaviour like linking out to terms and conditions
+    - All text is configurable by prop
+    - Best used in the register components `terms` or `formData` slots
+    - Form field name can be customized with the `checkbox-name` prop
   - \<sqm-dropdown-field>
+    - Required by default but can be optional
+    - Dropdown options are \<sl-menu-items>
+    - All text is configurable by prop
+    - Best used in the register components `formData` slot
+    - Form field name can be customized with the `dropdown-name` prop
 
 ## [1.5.0] - 2022-02-23
 
@@ -361,9 +385,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - \<sqm-popup-container>
   - \<sqm-stencilbook>
 
-[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.5.1...HEAD
+[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.5.2...HEAD
+[1.5.2]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.5.2
 [1.5.1]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.5.1
-[unreleased]: https://github.com/saasquatch/program-tools/compare/mint-components@1.5.0...HEAD
 [1.5.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.5.0
 [1.4.2]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.4.2
 [1.4.1]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%401.4.1

package/dist/cjs/{ShadowViewAddon-8151e5d3.js → ShadowViewAddon-9b256c28.js}

@@ -8,7 +8,7 @@ const cjs = require('./cjs-1066ec21.js');
 const mixins = require('./mixins-338ca5f1.js');
 const JSS = require('./JSS-a75f3a9a.js');
 const luxon = require('./luxon-59ca7d19.js');
-const utils = require('./utils-01dbfd4a.js');
+const utils = require('./utils-8ef4fe4a.js');
 const sqmTextSpanView = require('./sqm-text-span-view-ab4ad6ef.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-2d11ed71.js');
 const sqmPortalSectionView = require('./sqm-portal-section-view-765aae4d.js');

package/dist/cjs/sqm-big-stat_34.cjs.entry.js

@@ -15,10 +15,10 @@ const JSS = require('./JSS-a75f3a9a.js');
 const reRender = require('./re-render-f41e352c.js');
 const useChildElements = require('./useChildElements-097c3dc9.js');
 require('./luxon-59ca7d19.js');
-const utils = require('./utils-01dbfd4a.js');
+const utils = require('./utils-8ef4fe4a.js');
 require('./sqm-text-span-view-ab4ad6ef.js');
 require('./sqm-portal-container-view-2d11ed71.js');
-const ShadowViewAddon = require('./ShadowViewAddon-8151e5d3.js');
+const ShadowViewAddon = require('./ShadowViewAddon-9b256c28.js');
 require('./sqm-portal-section-view-765aae4d.js');
 
 const BigStat = class {
@@ -123,9 +123,15 @@ const CardFeed = class {
   }
 };
 
-const CONTEXT_NAME = "sq:validation-state";
+const FORM_VALIDATION_CONTEXT = "sq:validation-state";
+function useValidationState(formState) {
+  const host = index_module.P();
+  const [validationState, setValidationState] = stencilHooks_module.y(host, FORM_VALIDATION_CONTEXT, formState);
+  return { validationState, setValidationState };
+}
+
 function useCheckboxField() {
-  const validationState = stencilHooks_module.d(CONTEXT_NAME);
+  const validationState = stencilHooks_module.d(FORM_VALIDATION_CONTEXT);
   const [checked, setChecked] = stencilHooks_module.useState(false);
   return {
     states: {
@@ -255,9 +261,8 @@ const DividedLayout = class {
   }
 };
 
-const CONTEXT_NAME$1 = "sq:validation-state";
 function useDropdownField() {
-  const validationState = stencilHooks_module.d(CONTEXT_NAME$1);
+  const validationState = stencilHooks_module.d(FORM_VALIDATION_CONTEXT);
   return {
     states: {
       validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
@@ -938,9 +943,8 @@ function useLeaderboardDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const CONTEXT_NAME$2 = "sq:validation-state";
 function useNameFields(props) {
-  const validationState = stencilHooks_module.d(CONTEXT_NAME$2);
+  const validationState = stencilHooks_module.d(FORM_VALIDATION_CONTEXT);
   return {
     states: {
       validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
@@ -1247,10 +1251,8 @@ function usePortalLogin(props) {
     var _a;
     if ((_a = data === null || data === void 0 ? void 0 : data.authenticateManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
       urlParams.delete("nextPage");
-      index_module.dn.push({
-        pathname: nextPageOverride || props.nextPage,
-        search: urlParams.toString() && "?" + urlParams.toString(),
-      });
+      const url = utils.sanitizeUrlPath(nextPageOverride || props.nextPage);
+      index_module.dn.push(url.href);
     }
   }, [(_a = data === null || data === void 0 ? void 0 : data.authenticateManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token]);
   stencilHooks_module.useEffect(() => {
@@ -1265,7 +1267,7 @@ function usePortalLogin(props) {
       loading,
       error: errorMessage,
       registerPath: props.registerPath,
-      forgotPasswordPath: props.forgotPasswordPath
+      forgotPasswordPath: props.forgotPasswordPath,
     },
     callbacks: {
       submit,
@@ -1347,13 +1349,6 @@ function useLoginDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const CONTEXT_NAME$3 = "sq:validation-state";
-function useValidationState(formState) {
-  const host = index_module.P();
-  const [validationState, setValidationState] = stencilHooks_module.y(host, CONTEXT_NAME$3, formState);
-  return { validationState, setValidationState };
-}
-
 // This file is a workaround for a bug in web browsers' "native"
 // ES6 importing system which is uncapable of importing "*.json" files.
 // https://github.com/catamphetamine/libphonenumber-js/issues/239

package/dist/cjs/sqm-empty_5.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 require('./extends-08099afd.js');
 const JSS = require('./JSS-a75f3a9a.js');
-const utils = require('./utils-01dbfd4a.js');
+const utils = require('./utils-8ef4fe4a.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-2d11ed71.js');
 const sqmPortalSectionView = require('./sqm-portal-section-view-765aae4d.js');
 

package/dist/cjs/sqm-hero.cjs.entry.js

@@ -7,7 +7,7 @@ const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 require('./use-callback-e754042f.js');
 require('./extends-08099afd.js');
 require('./JSS-a75f3a9a.js');
-const utils = require('./utils-01dbfd4a.js');
+const utils = require('./utils-8ef4fe4a.js');
 const sqmHeroView = require('./sqm-hero-view-d5d46a36.js');
 
 const Hero = class {

package/dist/cjs/sqm-navigation-sidebar-item.cjs.entry.js

@@ -10,7 +10,7 @@ require('./extends-08099afd.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-338ca5f1.js');
 require('./JSS-a75f3a9a.js');
-const utils = require('./utils-01dbfd4a.js');
+const utils = require('./utils-8ef4fe4a.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-bd8b4dfd.js');
 
 function useNavigationSidebarItem(props) {

package/dist/cjs/sqm-popup-container.cjs.entry.js

@@ -7,7 +7,7 @@ const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 require('./use-callback-e754042f.js');
 const index_module = require('./index.module-fb61a163.js');
 require('./extends-08099afd.js');
-const utils = require('./utils-01dbfd4a.js');
+const utils = require('./utils-8ef4fe4a.js');
 
 const PopupContainerView = (props) => {
   const { states, callbacks } = props;

package/dist/cjs/sqm-portal-footer.cjs.entry.js

@@ -9,7 +9,7 @@ require('./use-callback-e754042f.js');
 require('./index.module-fb61a163.js');
 require('./extends-08099afd.js');
 require('./JSS-a75f3a9a.js');
-const utils = require('./utils-01dbfd4a.js');
+const utils = require('./utils-8ef4fe4a.js');
 const sqmPortalFooterView = require('./sqm-portal-footer-view-8442fd90.js');
 
 const PortalFooter = class {

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

@@ -10,7 +10,7 @@ const index_module = require('./index.module-fb61a163.js');
 require('./extends-08099afd.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./JSS-a75f3a9a.js');
-const utils = require('./utils-01dbfd4a.js');
+const utils = require('./utils-8ef4fe4a.js');
 require('./sqm-text-span-view-ab4ad6ef.js');
 require('./sqm-portal-container-view-2d11ed71.js');
 const sqmPortalProfileView = require('./sqm-portal-profile-view-b77382f6.js');

package/dist/cjs/sqm-portal-reset-password.cjs.entry.js

@@ -11,6 +11,7 @@ const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-338ca5f1.js');
 require('./JSS-a75f3a9a.js');
+const utils = require('./utils-8ef4fe4a.js');
 require('./sqm-text-span-view-ab4ad6ef.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-042073ca.js');
 
@@ -39,10 +40,8 @@ function usePortalResetPassword(props) {
   };
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
-    index_module.dn.push({
-      pathname: nextPageOverride || props.nextPage,
-      search: urlParams.toString() && "?" + urlParams.toString(),
-    });
+    const url = utils.sanitizeUrlPath(nextPageOverride || props.nextPage);
+    index_module.dn.push(url.href);
   };
   const failed = () => {
     index_module.dn.push({

package/dist/cjs/sqm-portal-verify-email.cjs.entry.js

@@ -10,6 +10,7 @@ require('./extends-08099afd.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-338ca5f1.js');
 require('./JSS-a75f3a9a.js');
+const utils = require('./utils-8ef4fe4a.js');
 require('./sqm-text-span-view-ab4ad6ef.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-cb3c9c2f.js');
 
@@ -32,10 +33,8 @@ function usePortalVerifyEmail({ nextPage, failedPage }) {
   };
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
-    return index_module.dn.push({
-      pathname: nextPageOverride || nextPage,
-      search: urlParams.toString() && "?" + urlParams.toString(),
-    });
+    const url = utils.sanitizeUrlPath(nextPageOverride || nextPage);
+    index_module.dn.push(url.href);
   };
   const submit = async () => {
     if (oobCode) {

package/dist/cjs/sqm-referral-table_11.cjs.entry.js

@@ -16,7 +16,7 @@ const reRender = require('./re-render-f41e352c.js');
 const useChildElements = require('./useChildElements-097c3dc9.js');
 const luxon = require('./luxon-59ca7d19.js');
 const useReferralTable = require('./useReferralTable-a7fc07c6.js');
-const utils = require('./utils-01dbfd4a.js');
+const utils = require('./utils-8ef4fe4a.js');
 const sqmTextSpanView = require('./sqm-text-span-view-ab4ad6ef.js');
 
 const mockReferralData = (count = 4) => {

package/dist/cjs/sqm-rewards-table_9.cjs.entry.js

@@ -16,7 +16,7 @@ const reRender = require('./re-render-f41e352c.js');
 const useChildElements = require('./useChildElements-097c3dc9.js');
 const luxon = require('./luxon-59ca7d19.js');
 const useReferralTable = require('./useReferralTable-a7fc07c6.js');
-const utils = require('./utils-01dbfd4a.js');
+const utils = require('./utils-8ef4fe4a.js');
 
 const mockRewardData = (count = 4) => {
   const data = [...Array(count)].map(() => getMockData());

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -13,7 +13,7 @@ require('./mixins-338ca5f1.js');
 const JSS = require('./JSS-a75f3a9a.js');
 const GenericTableView = require('./GenericTableView-c2a781ea.js');
 const luxon = require('./luxon-59ca7d19.js');
-require('./utils-01dbfd4a.js');
+require('./utils-8ef4fe4a.js');
 require('./sqm-text-span-view-ab4ad6ef.js');
 const sqmAssetCardView = require('./sqm-asset-card-view-07420209.js');
 const sqmHeroView = require('./sqm-hero-view-d5d46a36.js');
@@ -27,7 +27,7 @@ const sqmPortalContainerView = require('./sqm-portal-container-view-2d11ed71.js'
 const sqmPortalProfileView = require('./sqm-portal-profile-view-b77382f6.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-042073ca.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-cb3c9c2f.js');
-const ShadowViewAddon = require('./ShadowViewAddon-8151e5d3.js');
+const ShadowViewAddon = require('./ShadowViewAddon-9b256c28.js');
 const sqmPortalSectionView = require('./sqm-portal-section-view-765aae4d.js');
 
 /**
@@ -4132,7 +4132,7 @@ const PortalEmailVerification = /*#__PURE__*/Object.freeze({
   EmailVerificationSuccess: EmailVerificationSuccess
 });
 
-const scenario$7 = "@author:derek\r\n@owner:ian\r\nFeature: Reset Password\r\n\r\n    Background: A user in on the password reset page\r\n        Given a user who has been redirected to the password reset page\r\n\r\n    @motivating\r\n    Scenario: Users can reset their password\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they enter their password twice\r\n        And they click \"Update\"\r\n        Then their password is updated\r\n        And a banner with a success message is displayed\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot reset their password with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        And the component <mayHave> \"failed-page\" with <value>\r\n        Then they see an error message saying that their password reset code is invalid/expired\r\n        When they click \"Continue\"\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | oobCode               | mayHave      | value  | redirectPath |\r\n            | invalid oob code      | doesn't have | N/A    | /            |\r\n            | non existant oob code | doesn't have | N/A    | /            |\r\n            | invalid oob code      | has          | /login | /login       |\r\n            | non existant oob code | has          | /login | /login       |\r\n\r\n    @motivating\r\n    Scenario: Users must enter the same password twice to successfully reset their password\r\n        Given a user has been redirected to the password reset page\r\n        And they have a valid oob code as a url query parameter\r\n        When they enter two different passwords into the password reset form\r\n        And they click \"Update\"\r\n        Then their password is not be reset\r\n        And an error banner stating the input passwords must match appears\r\n        And their password is not be reset\r\n        When they enter the same password twice\r\n        And they click \"Update\"\r\n        Then a banner appears with a success message\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/activity\"";
+const scenario$7 = "@author:derek\r\n@owner:ian\r\nFeature: Reset Password\r\n\r\n    Background: A user in on the password reset page\r\n        Given a user who has been redirected to the password reset page\r\n\r\n    @motivating\r\n    Scenario: Users can reset their password\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they enter their password twice\r\n        And they click \"Update\"\r\n        Then their password is updated\r\n        And a banner with a success message is displayed\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot reset their password with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        And the component <mayHave> \"failed-page\" with <value>\r\n        Then they see an error message saying that their password reset code is invalid/expired\r\n        When they click \"Continue\"\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | oobCode               | mayHave      | value  | redirectPath |\r\n            | invalid oob code      | doesn't have | N/A    | /            |\r\n            | non existant oob code | doesn't have | N/A    | /            |\r\n            | invalid oob code      | has          | /login | /login       |\r\n            | non existant oob code | has          | /login | /login       |\r\n\r\n    @motivating\r\n    Scenario: Users must enter the same password twice to successfully reset their password\r\n        Given a user has been redirected to the password reset page\r\n        And they have a valid oob code as a url query parameter\r\n        When they enter two different passwords into the password reset form\r\n        And they click \"Update\"\r\n        Then their password is not be reset\r\n        And an error banner stating the input passwords must match appears\r\n        And their password is not be reset\r\n        When they enter the same password twice\r\n        And they click \"Update\"\r\n        Then a banner appears with a success message\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/activity\"\r\n\r\n    @motivating\r\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter as if it were a relative path\r\n        Given the component is loaded at <currentUrl>\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to <url>\r\n        Examples:\r\n            | currentUrl                                                                 | url                                           |\r\n            | https://www.example.com?nextPage=./activity                                | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=activity                                  | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=/activity                                 | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=www.google.com                            | https://www.example.com/www.google.com        |\r\n            | https://www.example.com?nextPage=//foo.com                                 | https://www.example.com/                      |\r\n            | https://www.example.com?nextPage=https://malicious.example.com             | https://www.example.com/                      |\r\n            | http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 | http://www.example.com/activity               |\r\n            | https://www.example.com?nextPage=activity?foo=bar                          | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar                   | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash              | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash            | https://www.example.com/activity?foo=bar#hash |\r\n            | https://www.example.com:1337?nextPage=activity                             | https://www.example.com:1337/activity         |\r\n            | http://1.1.1.1:1111?nextPage=activity                                      | http://1.1.1.1:1111/activity                  |\r\n\r\n    @landmine\r\n    Scenario Outline: Username and password are not persisted on redirects\r\n        Given the component is loaded at <currentUrl>\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to <url>\r\n        Examples:\r\n            | currentUrl                                              | url                                  |\r\n            | https://user:pass@www.example.com:444?nextPage=activity | https://www.example.com:444/activity |";
 
 const PortalResetPassword_stories = {
   title: "Components/Portal Reset Password",
@@ -4296,7 +4296,7 @@ const PortalResetPassword = /*#__PURE__*/Object.freeze({
   CodeValidating: CodeValidating
 });
 
-const scenario$8 = "@author:derek\r\n@owner:ian\r\nFeature: Verify Email\r\n\r\n    Background: A user is on the email verification page\r\n        Given a user who has been redirected to the email verification page\r\n\r\n    @motivating\r\n    Scenario: Verifying your email takes you to the portal login page\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" appears\r\n        When they click \"Continue\"\r\n        Then they are redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are automatically redirected if they dont click \"Continue\"\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" appears\r\n        When they wait 5 seconds\r\n        Then they are redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are notified if verifying their email has failed\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email fails to be validated\r\n        Then an banner is shown stating that an error occured\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot verify their email with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        And the component <mayHave> \"failed-page\" with <value>\r\n        Then they see an error message saying that their verification code is invalid/expired\r\n        When they click \"Continue\"\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | oobCode               | mayHave      | value  | redirectPath |\r\n            | invalid oob code      | doesn't have | N/A    | /            |\r\n            | non existant oob code | doesn't have | N/A    | /            |\r\n            | invalid oob code      | has          | /login | /login       |\r\n            | non existant oob code | has          | /login | /login       |\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to \"/activity\"\r\n\r\n    @motivating\r\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter if it exists\r\n        Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\r\n        And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to <nextPageParamValue>\r\n        Examples:\r\n            | mayHave       | nextPageValue | nextPageParamValue |\r\n            | has           | /dashboard    | /activity          |\r\n            | does not have | N/A           | /activity          |";
+const scenario$8 = "@author:derek\r\n@owner:ian\r\nFeature: Verify Email\r\n\r\n    Background: A user is on the email verification page\r\n        Given a user who has been redirected to the email verification page\r\n\r\n    @motivating\r\n    Scenario: Verifying your email takes you to the portal login page\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" appears\r\n        When they click \"Continue\"\r\n        Then they are redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are automatically redirected if they dont click \"Continue\"\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" appears\r\n        When they wait 5 seconds\r\n        Then they are redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are notified if verifying their email has failed\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email fails to be validated\r\n        Then an banner is shown stating that an error occured\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot verify their email with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        And the component <mayHave> \"failed-page\" with <value>\r\n        Then they see an error message saying that their verification code is invalid/expired\r\n        When they click \"Continue\"\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | oobCode               | mayHave      | value  | redirectPath |\r\n            | invalid oob code      | doesn't have | N/A    | /            |\r\n            | non existant oob code | doesn't have | N/A    | /            |\r\n            | invalid oob code      | has          | /login | /login       |\r\n            | non existant oob code | has          | /login | /login       |\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to \"/activity\"\r\n\r\n    @motivating\r\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter if it exists\r\n        Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\r\n        And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to <nextPageParamValue>\r\n        Examples:\r\n            | mayHave       | nextPageValue | nextPageParamValue |\r\n            | has           | /dashboard    | /activity          |\r\n            | does not have | N/A           | /activity          |\r\n\r\n    @motivating\r\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter as if it were a relative path\r\n        Given the component is loaded at <currentUrl>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        And they are redirected to <url>\r\n        Examples:\r\n            | currentUrl                                                                 | url                                           |\r\n            | https://www.example.com?nextPage=./activity                                | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=activity                                  | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=/activity                                 | https://www.example.com/activity              |\r\n            | https://www.example.com?nextPage=www.google.com                            | https://www.example.com/www.google.com        |\r\n            | https://www.example.com?nextPage=//foo.com                                 | https://www.example.com/                      |\r\n            | https://www.example.com?nextPage=https://malicious.example.com             | https://www.example.com/                      |\r\n            | http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 | http://www.example.com/activity               |\r\n            | https://www.example.com?nextPage=activity?foo=bar                          | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar                   | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash              | https://www.example.com/activity?foo=bar      |\r\n            | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash            | https://www.example.com/activity?foo=bar#hash |\r\n            | https://www.example.com:1337?nextPage=activity                             | https://www.example.com:1337/activity         |\r\n            | http://1.1.1.1:1111?nextPage=activity                                      | http://1.1.1.1:1111/activity                  |\r\n\r\n    @landmine\r\n    Scenario Outline: Username and password are not persisted on redirects\r\n        Given the component is loaded at <currentUrl>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        And they are redirected to <url>\r\n        Examples:\r\n            | currentUrl                                              | url                                  |\r\n            | https://user:pass@www.example.com:444?nextPage=activity | https://www.example.com:444/activity |";
 
 const PortalVerifyEmail_stories = {
   title: "Components/Portal Verify Email",

package/dist/cjs/sqm-tabs.cjs.entry.js

@@ -8,7 +8,7 @@ require('./use-callback-e754042f.js');
 const index_module = require('./index.module-fb61a163.js');
 require('./extends-08099afd.js');
 const useChildElements = require('./useChildElements-097c3dc9.js');
-const utils = require('./utils-01dbfd4a.js');
+const utils = require('./utils-8ef4fe4a.js');
 
 const TabsView = ({ content, placement, }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.

package/dist/cjs/{utils-01dbfd4a.js → utils-8ef4fe4a.js}

@@ -30,8 +30,17 @@ function luxonLocale(locale) {
   const language = splitLocale[0];
   const country = splitLocale[1];
   return `${language}-${country.toUpperCase()}`;
+}
+function sanitizeUrlPath(path) {
+  const url = new URL(path, window.location.origin);
+  const cleanUrl = new URL(window.location.origin);
+  cleanUrl.pathname = url.pathname;
+  cleanUrl.search = url.search;
+  cleanUrl.hash = url.hash;
+  return cleanUrl;
 }
 
 exports.getMissingProps = getMissingProps;
 exports.getProps = getProps;
 exports.luxonLocale = luxonLocale;
+exports.sanitizeUrlPath = sanitizeUrlPath;

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js

@@ -176,7 +176,7 @@ export class CheckboxField {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CheckboxFieldViewProps>",
-        "resolved": "{ states?: { validationErrors?: Record<string, string>; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxRequired?: boolean; errorMessage: string; }; }",
+        "resolved": "{ states?: { validationErrors?: ValidationErrors; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxRequired?: boolean; errorMessage: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-checkbox-field/useCheckboxField.js

@@ -1,8 +1,8 @@
 import { useDomContext } from "@saasquatch/stencil-hooks";
 import { useState } from "@saasquatch/universal-hooks";
-const CONTEXT_NAME = "sq:validation-state";
+import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
 export function useCheckboxField() {
-  const validationState = useDomContext(CONTEXT_NAME);
+  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
   const [checked, setChecked] = useState(false);
   return {
     states: {

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js

@@ -126,7 +126,7 @@ export class DropdownField {
       "mutable": false,
       "complexType": {
         "original": "DemoData<DropdownFieldViewProps>",
-        "resolved": "{ states?: { validationErrors?: Record<string, string>; }; content?: { dropdownName: string; dropdownLabel: string; dropdownRequired?: boolean; errorMessage: string; selectOptions?: VNode | VNode[]; }; }",
+        "resolved": "{ states?: { validationErrors?: ValidationErrors; }; content?: { dropdownName: string; dropdownLabel: string; dropdownRequired?: boolean; errorMessage: string; selectOptions?: VNode | VNode[]; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-dropdown-field/useDropdownField.js

@@ -1,7 +1,7 @@
 import { useDomContext } from "@saasquatch/stencil-hooks";
-const CONTEXT_NAME = "sq:validation-state";
+import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
 export function useDropdownField() {
-  const validationState = useDomContext(CONTEXT_NAME);
+  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
   return {
     states: {
       validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,

package/dist/collection/components/sqm-name-fields/sqm-name-fields.js

@@ -74,7 +74,7 @@ export class NameFields {
       "mutable": false,
       "complexType": {
         "original": "DemoData<NameFieldsViewProps>",
-        "resolved": "{ states?: { validationErrors?: Record<string, string>; content: { firstNameLabel: string; lastNameLabel: string; }; }; }",
+        "resolved": "{ states?: { validationErrors?: ValidationErrors; content: { firstNameLabel: string; lastNameLabel: string; }; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-name-fields/useNameFields.js

@@ -1,7 +1,7 @@
 import { useDomContext } from "@saasquatch/stencil-hooks";
-const CONTEXT_NAME = "sq:validation-state";
+import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
 export function useNameFields(props) {
-  const validationState = useDomContext(CONTEXT_NAME);
+  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
   return {
     states: {
       validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,

package/dist/collection/components/sqm-portal-login/usePortalLogin.js

@@ -1,6 +1,7 @@
 import jsonpointer from "jsonpointer";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { navigation, useAuthenticateWithEmailAndPasswordMutation, } from "@saasquatch/component-boilerplate";
+import { sanitizeUrlPath } from "../../utils/utils";
 export function usePortalLogin(props) {
   var _a, _b, _c, _d;
   const [request, { loading, errors, data }] = useAuthenticateWithEmailAndPasswordMutation();
@@ -20,10 +21,8 @@ export function usePortalLogin(props) {
     var _a;
     if ((_a = data === null || data === void 0 ? void 0 : data.authenticateManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
       urlParams.delete("nextPage");
-      navigation.push({
-        pathname: nextPageOverride || props.nextPage,
-        search: urlParams.toString() && "?" + urlParams.toString(),
-      });
+      const url = sanitizeUrlPath(nextPageOverride || props.nextPage);
+      navigation.push(url.href);
     }
   }, [(_a = data === null || data === void 0 ? void 0 : data.authenticateManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token]);
   useEffect(() => {
@@ -38,7 +37,7 @@ export function usePortalLogin(props) {
       loading,
       error: errorMessage,
       registerPath: props.registerPath,
-      forgotPasswordPath: props.forgotPasswordPath
+      forgotPasswordPath: props.forgotPasswordPath,
     },
     callbacks: {
       submit,

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 const FORM_VALIDATION_CONTEXT = "sq:validation-state";
 export function useValidationState(formState) {
   const host = useHost();
-  const [validationState, setValidationState] = useDomContextState(host, CONTEXT_NAME, formState);
+  const [validationState, setValidationState] = useDomContextState(host, FORM_VALIDATION_CONTEXT, formState);
   return { validationState, setValidationState };
 }

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

@@ -1,6 +1,7 @@
 import jsonpointer from "jsonpointer";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { navigation, useVerifyPasswordResetCodeMutation, useResetPasswordMutation, } from "@saasquatch/component-boilerplate";
+import { sanitizeUrlPath } from "../../utils/utils";
 export function usePortalResetPassword(props) {
   var _a, _b, _c, _d, _e, _f;
   const [reset, setReset] = useState(false);
@@ -26,10 +27,8 @@ export function usePortalResetPassword(props) {
   };
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
-    navigation.push({
-      pathname: nextPageOverride || props.nextPage,
-      search: urlParams.toString() && "?" + urlParams.toString(),
-    });
+    const url = sanitizeUrlPath(nextPageOverride || props.nextPage);
+    navigation.push(url.href);
   };
   const failed = () => {
     navigation.push({

package/dist/collection/components/sqm-portal-verify-email/usePortalVerifyEmail.js

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { navigation, useUserIdentity, useVerifyEmailMutation, } from "@saasquatch/component-boilerplate";
+import { sanitizeUrlPath } from "../../utils/utils";
 export function usePortalVerifyEmail({ nextPage, failedPage }) {
   var _a, _b, _c, _d, _e;
   const [verified, setVerified] = useState(false);
@@ -19,10 +20,8 @@ export function usePortalVerifyEmail({ nextPage, failedPage }) {
   };
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
-    return navigation.push({
-      pathname: nextPageOverride || nextPage,
-      search: urlParams.toString() && "?" + urlParams.toString(),
-    });
+    const url = sanitizeUrlPath(nextPageOverride || nextPage);
+    navigation.push(url.href);
   };
   const submit = async () => {
     if (oobCode) {

package/dist/collection/utils/utils.js

@@ -39,3 +39,11 @@ export function luxonLocale(locale) {
   const country = splitLocale[1];
   return `${language}-${country.toUpperCase()}`;
 }
+export function sanitizeUrlPath(path) {
+  const url = new URL(path, window.location.origin);
+  const cleanUrl = new URL(window.location.origin);
+  cleanUrl.pathname = url.pathname;
+  cleanUrl.search = url.search;
+  cleanUrl.hash = url.hash;
+  return cleanUrl;
+}

package/dist/esm/{ShadowViewAddon-e42c07c6.js → ShadowViewAddon-b98faaf1.js}

@@ -6,7 +6,7 @@ import { c as cjs } from './cjs-bdfb4486.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-59fd94b7.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-418cab16.js';
 import { l as luxon } from './luxon-f44215d9.js';
-import { l as luxonLocale } from './utils-1d345130.js';
+import { l as luxonLocale } from './utils-d7bbb0e2.js';
 import { T as TextSpanView } from './sqm-text-span-view-020db63f.js';
 import { P as PortalContainerView } from './sqm-portal-container-view-34f26e2a.js';
 import { P as PortalSectionView } from './sqm-portal-section-view-c8d1c727.js';