@saasquatch/mint-components 1.8.5-17 → 1.8.5-19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1508,8 +1508,8 @@ function LinkButtonView(props) {
1508
1508
  index.h("style", { type: "text/css" },
1509
1509
  styleString$1,
1510
1510
  vanillaStyle),
1511
- index.h("sl-button", { type: "primary", exportparts: "base: primarybutton-base" },
1512
- index.h("a", { onClick: onClick, class: sheet$1.classes.Link, part: "sqm-link" }, buttonText))));
1511
+ index.h("sl-button", { onClick: onClick, type: "primary", exportparts: "base: primarybutton-base" },
1512
+ index.h("a", { class: sheet$1.classes.Link, part: "sqm-link" }, buttonText))));
1513
1513
  }
1514
1514
 
1515
1515
  const LinkButton = class {
@@ -20,10 +20,9 @@ function setSubmitted(submitted) {
20
20
  function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyEmailText, verifyInvalidText, networkErrorMessage, continueText, }) {
21
21
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
22
22
  const submitted = window[SUBMITTED_CONTEXT];
23
- const userIdent = index_module.Q();
23
+ // const userIdent = useUserIdentity();
24
24
  const [verificationError, setVerificationError] = stencilHooks_module.useState(null);
25
25
  const [success, setSuccess] = stencilHooks_module.useState(false);
26
- const email = (_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.email;
27
26
  const [request, { loading, data, errors }] = index_module.an();
28
27
  const urlParams = new URLSearchParams(index_module.$n.location.search);
29
28
  const oobCode = urlParams.get("oobCode");
@@ -32,8 +31,18 @@ function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyE
32
31
  // derived from useMutation in component boilerplate initialState
33
32
  const disableContinue = data === undefined && errors === undefined && !!oobCode;
34
33
  // if logged out, userIdent?.managedIdentity?.emailVerified will be falsey, even if verification was successful
35
- const hasContext = localStorage.getItem("sq:user-identity");
34
+ const userIdentContext = localStorage.getItem("sq:user-identity");
35
+ const userIdent = getUserIdent(userIdentContext);
36
+ const email = (_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.email;
36
37
  const verified = !!(((_b = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _b === void 0 ? void 0 : _b.emailVerified) || (data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail.success));
38
+ function getUserIdent(context) {
39
+ try {
40
+ return JSON.parse(context);
41
+ }
42
+ catch {
43
+ return undefined;
44
+ }
45
+ }
37
46
  const failed = () => {
38
47
  return index_module.$n.push({
39
48
  pathname: failedPage,
@@ -54,45 +63,62 @@ function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyE
54
63
  }, 3000);
55
64
  };
56
65
  const submit = async () => {
57
- var _a;
66
+ var _a, _b;
58
67
  setSubmitted(true);
59
68
  const response = await request({ oobCode });
60
69
  if (response instanceof Error ||
61
70
  !((_a = response === null || response === void 0 ? void 0 : response.verifyManagedIdentityEmail) === null || _a === void 0 ? void 0 : _a.success)) {
62
71
  setVerificationError({ message: true });
63
72
  }
73
+ else if ((_b = response === null || response === void 0 ? void 0 : response.verifyManagedIdentityEmail) === null || _b === void 0 ? void 0 : _b.success) {
74
+ setSuccess(true);
75
+ }
76
+ if (email && email !== oobEmail) {
77
+ console.debug("email mismatch");
78
+ logout();
79
+ return;
80
+ }
64
81
  console.debug("SUBMITTED", response);
65
82
  };
66
- console.log({ hasContext, userIdent, data, submitted, verified, errors });
67
- stencilHooks_module.useEffect(() => {
68
- if (errors && !verified)
69
- setVerificationError(errors);
70
- }, [errors, verified]);
71
83
  stencilHooks_module.useEffect(() => {
72
- if (!data && !submitted && oobCode)
73
- submit();
74
- // verification successful but user in context is not verified
75
- // or mismatch between logged in user and user associated with oobCode
76
- if (submitted) {
77
- console.debug("in submit condition");
78
- if (email && email !== oobEmail) {
79
- console.debug("email mismatch");
80
- logout();
81
- return;
82
- // Already verified, begin redirect
83
- }
84
- if (verified) {
85
- if (!verificationError)
86
- setSuccess(true);
87
- console.debug("verified");
88
- setTimeout(() => {
89
- gotoNextPage();
90
- setSubmitted(false);
91
- }, 3000);
92
- return;
93
- }
84
+ if (verified) {
85
+ setSuccess(true);
86
+ setTimeout(() => {
87
+ gotoNextPage();
88
+ index_module.setUserIdentity(undefined);
89
+ setSubmitted(false);
90
+ }, 3000);
94
91
  }
95
- }, [submitted, verificationError, data, email, oobCode, oobEmail, submit]);
92
+ else if (!data && !submitted && oobCode)
93
+ submit();
94
+ }, [verified, submitted, data, userIdent]);
95
+ // console.log({ hasContext, userIdent, data, submitted, verified, errors });
96
+ // useEffect(() => {
97
+ // if (errors && !verified) setVerificationError(errors);
98
+ // }, [errors, verified]);
99
+ // useEffect(() => {
100
+ // if (!data && !submitted && oobCode) submit();
101
+ // // verification successful but user in context is not verified
102
+ // // or mismatch between logged in user and user associated with oobCode
103
+ // if (submitted) {
104
+ // console.debug("in submit condition");
105
+ // if (email && email !== oobEmail) {
106
+ // console.debug("email mismatch");
107
+ // logout();
108
+ // return;
109
+ // // Already verified, begin redirect
110
+ // }
111
+ // if (verified) {
112
+ // if (!verificationError) setSuccess(true);
113
+ // console.debug("verified");
114
+ // setTimeout(() => {
115
+ // gotoNextPage();
116
+ // setSubmitted(false);
117
+ // }, 3000);
118
+ // return;
119
+ // }
120
+ // }
121
+ // }, [submitted, verificationError, data, email, oobCode, oobEmail, submit]);
96
122
  return {
97
123
  states: {
98
124
  loading: loading || disableContinue,
@@ -7605,7 +7605,7 @@ const PortalResetPassword = /*#__PURE__*/Object.freeze({
7605
7605
  CodeValidating: CodeValidating
7606
7606
  });
7607
7607
 
7608
- const scenario$9 = "@author:derek\n@owner:ian\nFeature: Verify Email\n\n Background: A user is on the email verification page\n Given a user who has been redirected to the email verification page\n\n @motivating\n Scenario: Verifying your email takes you to the portal login page\n Given a user has a valid oob code as a url query parameter\n When they click \"Verify Email\"\n Then the button enters a loading state\n When their email is validated\n Then a button that says \"Continue\" appears\n When they click \"Continue\"\n Then they are redirected to login\n\n @motivating\n Scenario: Users are automatically redirected if they dont click \"Continue\"\n Given a user has a valid oob code as a url query parameter\n When they click \"Verify Email\"\n Then the button enters a loading state\n When their email is validated\n Then a button that says \"Continue\" appears\n When they wait 5 seconds\n Then they are redirected to login\n\n @motivating\n Scenario: Users are notified if verifying their email has failed\n Given a user has a valid oob code as a url query parameter\n When they click \"Verify Email\"\n Then the button enters a loading state\n When their email fails to be validated\n Then an banner is shown stating that an error occured\n\n @motivating\n Scenario Outline: Users cannot verify their email with an invalid or missing oob code\n Given a user has a <oobCode> as a url query parameter\n And the component <mayHave> \"failed-page\" with <value>\n Then they see an error message saying that their verification code is invalid/expired\n When they click \"Continue\"\n Then they are redirected to <redirectPath>\n Examples:\n | oobCode | mayHave | value | redirectPath |\n | invalid oob code | doesn't have | N/A | / |\n | non existant oob code | doesn't have | N/A | / |\n | invalid oob code | has | /login | /login |\n | non existant oob code | has | /login | /login |\n\n @motivating\n Scenario: Users are redirected to \"/\" by default\n Given the component does not have prop \"nextPage\"\n And the users url does not contain a \"nextPage\" query parameter\n And a user has verified their email\n When they click \"Continue\"\n Then they are redirected to \"/\"\n\n @motivating\n Scenario: Custom redirection can be configured\n Given the component has prop \"nextPage\" with value \"/activity\"\n And the users url does not contain a \"nextPage\" query parameter\n And a user has verified their email\n When they click \"Continue\"\n Then they are redirected to \"/activity\"\n\n @motivating\n Scenario Outline: Users are redirected to the value of the nextPage url parameter if it exists\n Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\n And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\n And the user has verified their email\n When they click \"Continue\"\n Then they are redirected to <nextPageParamValue>\n Examples:\n | mayHave | nextPageValue | nextPageParamValue |\n | has | /dashboard | /activity |\n | does not have | N/A | /activity |\n\n @motivating\n Scenario Outline: Users are redirected to the value of the nextPage url parameter as if it were a relative path\n Given the component is loaded at <currentUrl>\n And the user has verified their email\n When they click \"Continue\"\n And they are redirected to <url>\n Examples:\n | currentUrl | url |\n | https://www.example.com?nextPage=./activity | https://www.example.com/activity |\n | https://www.example.com?nextPage=activity | https://www.example.com/activity |\n | https://www.example.com?nextPage=/activity | https://www.example.com/activity |\n | https://www.example.com?nextPage=www.google.com | https://www.example.com/www.google.com |\n | https://www.example.com?nextPage=//foo.com | https://www.example.com/ |\n | https://www.example.com?nextPage=https://malicious.example.com | https://www.example.com/ |\n | http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 | http://www.example.com/activity |\n | https://www.example.com?nextPage=activity?foo=bar | https://www.example.com/activity?foo=bar |\n | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar | https://www.example.com/activity?foo=bar |\n | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash | https://www.example.com/activity?foo=bar |\n | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash | https://www.example.com/activity?foo=bar#hash |\n | https://www.example.com:1337?nextPage=activity | https://www.example.com:1337/activity |\n | http://1.1.1.1:1111?nextPage=activity | http://1.1.1.1:1111/activity |\n\n @landmine\n Scenario Outline: Username and password are not persisted on redirects\n Given the component is loaded at <currentUrl>\n And the user has verified their email\n When they click \"Continue\"\n And they are redirected to <url>\n Examples:\n | currentUrl | url |\n | https://user:pass@www.example.com:444?nextPage=activity | https://www.example.com:444/activity |\n\n\n @minutia\n Scenario Outline: Users may be logged in or logged out depending on the verified status and logged in email\n Given an oobCode with email <oobCodeEmail> as a url query parameter\n And the user is logged in as <loggedInEmail>\n And the logged in user <isVerified>\n When the oobCode is submitted\n And the oobCode <isValid>\n Then the <submitState> screen is shown\n And after 3 seconds pass\n Then the user is redirected to <redirect>\n Examples:\n | oobCodeEmail | loggedInEmail | isVerified | isValid | submitState | redirect |\n | user1@example.com | N/A | false | is valid | success | /login |\n | user1@example.com | N/A | false | is not valid | error | /login |\n | user1@example.com | user1@example.com | false | is valid | success | /activity |\n | user1@example.com | user1@example.com | false | is not valid | error | N/A |\n | user1@example.com | user2@example.com | false | is valid | success | /login |\n | user1@example.com | user2@example.com | false | is not valid | error | /login |\n | user1@example.com | user1@example.com | true | is valid | success | /activity |\n | user1@example.com | user1@example.com | true | is not valid | success | /activity |\n | user1@example.com | user2@example.com | true | is not valid | error | /login |\n";
7608
+ const scenario$9 = "@author:derek\n@owner:ian\nFeature: Verify Email\n\n Background: A user is on the email verification page\n Given a user who has been redirected to the email verification page\n\n @motivating\n Scenario: Verifying your email takes you to the portal login page\n Given a user has a valid oob code as a url query parameter\n When they click \"Verify Email\"\n Then the button enters a loading state\n When their email is validated\n Then a button that says \"Continue\" appears\n When they click \"Continue\"\n Then they are redirected to login\n\n @motivating\n Scenario: Users are automatically redirected if they dont click \"Continue\"\n Given a user has a valid oob code as a url query parameter\n When they click \"Verify Email\"\n Then the button enters a loading state\n When their email is validated\n Then a button that says \"Continue\" appears\n When they wait 5 seconds\n Then they are redirected to login\n\n @motivating\n Scenario: Users are notified if verifying their email has failed\n Given a user has a valid oob code as a url query parameter\n When they click \"Verify Email\"\n Then the button enters a loading state\n When their email fails to be validated\n Then an banner is shown stating that an error occured\n\n @motivating\n Scenario Outline: Users cannot verify their email with an invalid or missing oob code\n Given a user has a <oobCode> as a url query parameter\n And the component <mayHave> \"failed-page\" with <value>\n Then they see an error message saying that their verification code is invalid/expired\n When they click \"Continue\"\n Then they are redirected to <redirectPath>\n Examples:\n | oobCode | mayHave | value | redirectPath |\n | invalid oob code | doesn't have | N/A | / |\n | non existant oob code | doesn't have | N/A | / |\n | invalid oob code | has | /login | /login |\n | non existant oob code | has | /login | /login |\n\n @motivating\n Scenario: Users are redirected to \"/\" by default\n Given the component does not have prop \"nextPage\"\n And the users url does not contain a \"nextPage\" query parameter\n And a user has verified their email\n When they click \"Continue\"\n Then they are redirected to \"/\"\n\n @motivating\n Scenario: Custom redirection can be configured\n Given the component has prop \"nextPage\" with value \"/activity\"\n And the users url does not contain a \"nextPage\" query parameter\n And a user has verified their email\n When they click \"Continue\"\n Then they are redirected to \"/activity\"\n\n @motivating\n Scenario Outline: Users are redirected to the value of the nextPage url parameter if it exists\n Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\n And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\n And the user has verified their email\n When they click \"Continue\"\n Then they are redirected to <nextPageParamValue>\n Examples:\n | mayHave | nextPageValue | nextPageParamValue |\n | has | /dashboard | /activity |\n | does not have | N/A | /activity |\n\n @motivating\n Scenario Outline: Users are redirected to the value of the nextPage url parameter as if it were a relative path\n Given the component is loaded at <currentUrl>\n And the user has verified their email\n When they click \"Continue\"\n And they are redirected to <url>\n Examples:\n | currentUrl | url |\n | https://www.example.com?nextPage=./activity | https://www.example.com/activity |\n | https://www.example.com?nextPage=activity | https://www.example.com/activity |\n | https://www.example.com?nextPage=/activity | https://www.example.com/activity |\n | https://www.example.com?nextPage=www.google.com | https://www.example.com/www.google.com |\n | https://www.example.com?nextPage=//foo.com | https://www.example.com/ |\n | https://www.example.com?nextPage=https://malicious.example.com | https://www.example.com/ |\n | http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 | http://www.example.com/activity |\n | https://www.example.com?nextPage=activity?foo=bar | https://www.example.com/activity?foo=bar |\n | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar | https://www.example.com/activity?foo=bar |\n | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash | https://www.example.com/activity?foo=bar |\n | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash | https://www.example.com/activity?foo=bar#hash |\n | https://www.example.com:1337?nextPage=activity | https://www.example.com:1337/activity |\n | http://1.1.1.1:1111?nextPage=activity | http://1.1.1.1:1111/activity |\n\n @landmine\n Scenario Outline: Username and password are not persisted on redirects\n Given the component is loaded at <currentUrl>\n And the user has verified their email\n When they click \"Continue\"\n And they are redirected to <url>\n Examples:\n | currentUrl | url |\n | https://user:pass@www.example.com:444?nextPage=activity | https://www.example.com:444/activity |\n\n\n @minutia\n Scenario Outline: Users may be logged in or logged out depending on the verified status and logged in email\n Given an oobCode with email <oobCodeEmail> as a url query parameter\n And the user is logged in as <loggedInEmail>\n And the logged in user <isVerified>\n When the oobCode is submitted\n And the oobCode <isValid>\n Then the <submitState> screen is shown\n And after 3 seconds pass\n Then the user is redirected to <redirect>\n Examples:\n | oobCodeEmail | loggedInEmail | isVerified | isValid | submitState | redirect |\n | user1@example.com | N/A | false | is valid | success | /login |\n | user1@example.com | N/A | false | is not valid | error | /login |\n | user1@example.com | user1@example.com | false | is valid | success | /activity |\n | user1@example.com | user1@example.com | false | is not valid | error | N/A |\n | user1@example.com | user2@example.com | false | is valid | success | /login |\n | user1@example.com | user2@example.com | false | is not valid | error | /login |\n | user1@example.com | user1@example.com | true | is valid | success | /activity |\n | user1@example.com | user1@example.com | true | is not valid | success | /activity |\n | user1@example.com | user2@example.com | true | is not valid | error | /login |\n | N/A | N/A | false | is not valid | error | N/A |\n";
7609
7609
 
7610
7610
  const PortalVerifyEmail_stories = {
7611
7611
  title: "Components/Microsite Verify Email",
@@ -9957,7 +9957,7 @@ const ResetPasswordReadme = "# sqm-portal-reset-password\n\n\n\n<!-- Auto Genera
9957
9957
 
9958
9958
  const EmailVerificationReadme = "# sqm-portal-email-verification\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ---------------------------- | ------------------------------ | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; isVerified?: boolean; loadingVerification?: boolean; countdown?: number; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; verificationStatusMessage?: string; verificationLoadingMessage?: string; verificationResentMessage?: string; }; }` | `undefined` |\n| `emailVerificationHeader` | `email-verification-header` | | `string` | `\"Verify your email\"` |\n| `networkErrorMessage` | `network-error-message` | | `string` | `\"An error occurred while verifying your password. Please refresh the page.\"` |\n| `redirectPath` | `redirect-path` | Redirect participants to this page from their verification email. | `string` | `\"/verifyEmail\"` |\n| `resendEmailButtonText` | `resend-email-button-text` | | `string` | `\"Re-send Email\"` |\n| `verificationLoadingMessage` | `verification-loading-message` | | `string` | `\"Checking verification status\"` |\n| `verificationResentMessage` | `verification-resent-message` | | `string` | `\"Your verification email has been resent successfully\"` |\n| `verificationStatusMessage` | `verification-status-message` | | `string` | `\"Checking verification status in {countdown}\"` |\n| `verifyMessage` | `verify-message` | | `string` | `\"A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email will invalidate the previous email.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-email-verification --> sqm-form-message\n style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
9959
9959
 
9960
- const EmailVerifiedReadme = "# sqm-portal-verify-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| `continueText` | `continue-text` | | `string` | `\"Continue\"` |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; continueText?: string; }; }` | `undefined` |\n| `failedPage` | `failed-page` | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string` | `\"/\"` |\n| `networkErrorMessage` | `network-error-message` | | `string` | `\"An error occurred while verifying your email. Please refresh the page and try again.\"` |\n| `nextPage` | `next-page` | Redirect participants to this page when they successfully verify their email. | `string` | `\"/\"` |\n| `verifyEmailText` | `verify-email-text` | | `string` | `\"Verify your email\"` |\n| `verifyInvalidText` | `verify-invalid-text` | | `string` | `\"The email verification code is invalid or has expired, please try again.\"` |\n| `verifySuccessText` | `verify-success-text` | | `string` | `\"Your email has been verified and you are being redirected. If you are not redirected, please click Continue.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-verify-email --> sqm-form-message\n style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
9960
+ const EmailVerifiedReadme = "# sqm-portal-verify-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| `continueText` | `continue-text` | | `string` | `\"Continue\"` |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; verified: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; continueText?: string; }; }` | `undefined` |\n| `failedPage` | `failed-page` | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string` | `\"/\"` |\n| `networkErrorMessage` | `network-error-message` | | `string` | `\"An error occurred while verifying your email. Please refresh the page and try again.\"` |\n| `nextPage` | `next-page` | Redirect participants to this page when they successfully verify their email. | `string` | `\"/\"` |\n| `verifyEmailText` | `verify-email-text` | | `string` | `\"Verify your email\"` |\n| `verifyInvalidText` | `verify-invalid-text` | | `string` | `\"The email verification code is invalid or has expired, please try again.\"` |\n| `verifySuccessText` | `verify-success-text` | | `string` | `\"Your email has been verified and you are being redirected. If you are not redirected, please click Continue.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-verify-email --> sqm-form-message\n style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
9961
9961
 
9962
9962
  const PortalTemplates_stories = {
9963
9963
  title: "Templates / Microsite",
@@ -20,6 +20,6 @@ export function LinkButtonView(props) {
20
20
  h("style", { type: "text/css" },
21
21
  styleString,
22
22
  vanillaStyle),
23
- h("sl-button", { type: "primary", exportparts: "base: primarybutton-base" },
24
- h("a", { onClick: onClick, class: sheet.classes.Link, part: "sqm-link" }, buttonText))));
23
+ h("sl-button", { onClick: onClick, type: "primary", exportparts: "base: primarybutton-base" },
24
+ h("a", { class: sheet.classes.Link, part: "sqm-link" }, buttonText))));
25
25
  }
@@ -1,4 +1,4 @@
1
- import { navigation, setUserIdentity, useUserIdentity, useVerifyEmailMutation, } from "@saasquatch/component-boilerplate";
1
+ import { navigation, setUserIdentity, useVerifyEmailMutation, } from "@saasquatch/component-boilerplate";
2
2
  import { useEffect, useState } from "@saasquatch/universal-hooks";
3
3
  import { sanitizeUrlPath } from "../../utils/utils";
4
4
  const SUBMITTED_CONTEXT = "sq:verify-submitted";
@@ -9,10 +9,9 @@ function setSubmitted(submitted) {
9
9
  export function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyEmailText, verifyInvalidText, networkErrorMessage, continueText, }) {
10
10
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
11
11
  const submitted = window[SUBMITTED_CONTEXT];
12
- const userIdent = useUserIdentity();
12
+ // const userIdent = useUserIdentity();
13
13
  const [verificationError, setVerificationError] = useState(null);
14
14
  const [success, setSuccess] = useState(false);
15
- const email = (_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.email;
16
15
  const [request, { loading, data, errors }] = useVerifyEmailMutation();
17
16
  const urlParams = new URLSearchParams(navigation.location.search);
18
17
  const oobCode = urlParams.get("oobCode");
@@ -21,8 +20,18 @@ export function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText,
21
20
  // derived from useMutation in component boilerplate initialState
22
21
  const disableContinue = data === undefined && errors === undefined && !!oobCode;
23
22
  // if logged out, userIdent?.managedIdentity?.emailVerified will be falsey, even if verification was successful
24
- const hasContext = localStorage.getItem("sq:user-identity");
23
+ const userIdentContext = localStorage.getItem("sq:user-identity");
24
+ const userIdent = getUserIdent(userIdentContext);
25
+ const email = (_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.email;
25
26
  const verified = !!(((_b = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _b === void 0 ? void 0 : _b.emailVerified) || (data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail.success));
27
+ function getUserIdent(context) {
28
+ try {
29
+ return JSON.parse(context);
30
+ }
31
+ catch {
32
+ return undefined;
33
+ }
34
+ }
26
35
  const failed = () => {
27
36
  return navigation.push({
28
37
  pathname: failedPage,
@@ -43,45 +52,62 @@ export function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText,
43
52
  }, 3000);
44
53
  };
45
54
  const submit = async () => {
46
- var _a;
55
+ var _a, _b;
47
56
  setSubmitted(true);
48
57
  const response = await request({ oobCode });
49
58
  if (response instanceof Error ||
50
59
  !((_a = response === null || response === void 0 ? void 0 : response.verifyManagedIdentityEmail) === null || _a === void 0 ? void 0 : _a.success)) {
51
60
  setVerificationError({ message: true });
52
61
  }
62
+ else if ((_b = response === null || response === void 0 ? void 0 : response.verifyManagedIdentityEmail) === null || _b === void 0 ? void 0 : _b.success) {
63
+ setSuccess(true);
64
+ }
65
+ if (email && email !== oobEmail) {
66
+ console.debug("email mismatch");
67
+ logout();
68
+ return;
69
+ }
53
70
  console.debug("SUBMITTED", response);
54
71
  };
55
- console.log({ hasContext, userIdent, data, submitted, verified, errors });
56
- useEffect(() => {
57
- if (errors && !verified)
58
- setVerificationError(errors);
59
- }, [errors, verified]);
60
72
  useEffect(() => {
61
- if (!data && !submitted && oobCode)
62
- submit();
63
- // verification successful but user in context is not verified
64
- // or mismatch between logged in user and user associated with oobCode
65
- if (submitted) {
66
- console.debug("in submit condition");
67
- if (email && email !== oobEmail) {
68
- console.debug("email mismatch");
69
- logout();
70
- return;
71
- // Already verified, begin redirect
72
- }
73
- if (verified) {
74
- if (!verificationError)
75
- setSuccess(true);
76
- console.debug("verified");
77
- setTimeout(() => {
78
- gotoNextPage();
79
- setSubmitted(false);
80
- }, 3000);
81
- return;
82
- }
73
+ if (verified) {
74
+ setSuccess(true);
75
+ setTimeout(() => {
76
+ gotoNextPage();
77
+ setUserIdentity(undefined);
78
+ setSubmitted(false);
79
+ }, 3000);
83
80
  }
84
- }, [submitted, verificationError, data, email, oobCode, oobEmail, submit]);
81
+ else if (!data && !submitted && oobCode)
82
+ submit();
83
+ }, [verified, submitted, data, userIdent]);
84
+ // console.log({ hasContext, userIdent, data, submitted, verified, errors });
85
+ // useEffect(() => {
86
+ // if (errors && !verified) setVerificationError(errors);
87
+ // }, [errors, verified]);
88
+ // useEffect(() => {
89
+ // if (!data && !submitted && oobCode) submit();
90
+ // // verification successful but user in context is not verified
91
+ // // or mismatch between logged in user and user associated with oobCode
92
+ // if (submitted) {
93
+ // console.debug("in submit condition");
94
+ // if (email && email !== oobEmail) {
95
+ // console.debug("email mismatch");
96
+ // logout();
97
+ // return;
98
+ // // Already verified, begin redirect
99
+ // }
100
+ // if (verified) {
101
+ // if (!verificationError) setSuccess(true);
102
+ // console.debug("verified");
103
+ // setTimeout(() => {
104
+ // gotoNextPage();
105
+ // setSubmitted(false);
106
+ // }, 3000);
107
+ // return;
108
+ // }
109
+ // }
110
+ // }, [submitted, verificationError, data, email, oobCode, oobEmail, submit]);
85
111
  return {
86
112
  states: {
87
113
  loading: loading || disableContinue,
@@ -1504,8 +1504,8 @@ function LinkButtonView(props) {
1504
1504
  h$1("style", { type: "text/css" },
1505
1505
  styleString$1,
1506
1506
  vanillaStyle),
1507
- h$1("sl-button", { type: "primary", exportparts: "base: primarybutton-base" },
1508
- h$1("a", { onClick: onClick, class: sheet$1.classes.Link, part: "sqm-link" }, buttonText))));
1507
+ h$1("sl-button", { onClick: onClick, type: "primary", exportparts: "base: primarybutton-base" },
1508
+ h$1("a", { class: sheet$1.classes.Link, part: "sqm-link" }, buttonText))));
1509
1509
  }
1510
1510
 
1511
1511
  const LinkButton = class {
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
2
2
  import { k as useState, f as useEffect, n as h } from './stencil-hooks.module-8032b139.js';
3
- import { Q, j as an, $ as $n, b as setUserIdentity, i as isDemo } from './index.module-ba0ed7a8.js';
3
+ import { j as an, $ as $n, b as setUserIdentity, i as isDemo } from './index.module-ba0ed7a8.js';
4
4
  import { c as cjs } from './cjs-bdfb4486.js';
5
5
  import './mixins-f60a614c.js';
6
6
  import './JSS-67b5cff8.js';
@@ -16,10 +16,9 @@ function setSubmitted(submitted) {
16
16
  function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyEmailText, verifyInvalidText, networkErrorMessage, continueText, }) {
17
17
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
18
18
  const submitted = window[SUBMITTED_CONTEXT];
19
- const userIdent = Q();
19
+ // const userIdent = useUserIdentity();
20
20
  const [verificationError, setVerificationError] = useState(null);
21
21
  const [success, setSuccess] = useState(false);
22
- const email = (_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.email;
23
22
  const [request, { loading, data, errors }] = an();
24
23
  const urlParams = new URLSearchParams($n.location.search);
25
24
  const oobCode = urlParams.get("oobCode");
@@ -28,8 +27,18 @@ function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyE
28
27
  // derived from useMutation in component boilerplate initialState
29
28
  const disableContinue = data === undefined && errors === undefined && !!oobCode;
30
29
  // if logged out, userIdent?.managedIdentity?.emailVerified will be falsey, even if verification was successful
31
- const hasContext = localStorage.getItem("sq:user-identity");
30
+ const userIdentContext = localStorage.getItem("sq:user-identity");
31
+ const userIdent = getUserIdent(userIdentContext);
32
+ const email = (_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.email;
32
33
  const verified = !!(((_b = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _b === void 0 ? void 0 : _b.emailVerified) || (data === null || data === void 0 ? void 0 : data.verifyManagedIdentityEmail.success));
34
+ function getUserIdent(context) {
35
+ try {
36
+ return JSON.parse(context);
37
+ }
38
+ catch {
39
+ return undefined;
40
+ }
41
+ }
33
42
  const failed = () => {
34
43
  return $n.push({
35
44
  pathname: failedPage,
@@ -50,45 +59,62 @@ function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyE
50
59
  }, 3000);
51
60
  };
52
61
  const submit = async () => {
53
- var _a;
62
+ var _a, _b;
54
63
  setSubmitted(true);
55
64
  const response = await request({ oobCode });
56
65
  if (response instanceof Error ||
57
66
  !((_a = response === null || response === void 0 ? void 0 : response.verifyManagedIdentityEmail) === null || _a === void 0 ? void 0 : _a.success)) {
58
67
  setVerificationError({ message: true });
59
68
  }
69
+ else if ((_b = response === null || response === void 0 ? void 0 : response.verifyManagedIdentityEmail) === null || _b === void 0 ? void 0 : _b.success) {
70
+ setSuccess(true);
71
+ }
72
+ if (email && email !== oobEmail) {
73
+ console.debug("email mismatch");
74
+ logout();
75
+ return;
76
+ }
60
77
  console.debug("SUBMITTED", response);
61
78
  };
62
- console.log({ hasContext, userIdent, data, submitted, verified, errors });
63
- useEffect(() => {
64
- if (errors && !verified)
65
- setVerificationError(errors);
66
- }, [errors, verified]);
67
79
  useEffect(() => {
68
- if (!data && !submitted && oobCode)
69
- submit();
70
- // verification successful but user in context is not verified
71
- // or mismatch between logged in user and user associated with oobCode
72
- if (submitted) {
73
- console.debug("in submit condition");
74
- if (email && email !== oobEmail) {
75
- console.debug("email mismatch");
76
- logout();
77
- return;
78
- // Already verified, begin redirect
79
- }
80
- if (verified) {
81
- if (!verificationError)
82
- setSuccess(true);
83
- console.debug("verified");
84
- setTimeout(() => {
85
- gotoNextPage();
86
- setSubmitted(false);
87
- }, 3000);
88
- return;
89
- }
80
+ if (verified) {
81
+ setSuccess(true);
82
+ setTimeout(() => {
83
+ gotoNextPage();
84
+ setUserIdentity(undefined);
85
+ setSubmitted(false);
86
+ }, 3000);
90
87
  }
91
- }, [submitted, verificationError, data, email, oobCode, oobEmail, submit]);
88
+ else if (!data && !submitted && oobCode)
89
+ submit();
90
+ }, [verified, submitted, data, userIdent]);
91
+ // console.log({ hasContext, userIdent, data, submitted, verified, errors });
92
+ // useEffect(() => {
93
+ // if (errors && !verified) setVerificationError(errors);
94
+ // }, [errors, verified]);
95
+ // useEffect(() => {
96
+ // if (!data && !submitted && oobCode) submit();
97
+ // // verification successful but user in context is not verified
98
+ // // or mismatch between logged in user and user associated with oobCode
99
+ // if (submitted) {
100
+ // console.debug("in submit condition");
101
+ // if (email && email !== oobEmail) {
102
+ // console.debug("email mismatch");
103
+ // logout();
104
+ // return;
105
+ // // Already verified, begin redirect
106
+ // }
107
+ // if (verified) {
108
+ // if (!verificationError) setSuccess(true);
109
+ // console.debug("verified");
110
+ // setTimeout(() => {
111
+ // gotoNextPage();
112
+ // setSubmitted(false);
113
+ // }, 3000);
114
+ // return;
115
+ // }
116
+ // }
117
+ // }, [submitted, verificationError, data, email, oobCode, oobEmail, submit]);
92
118
  return {
93
119
  states: {
94
120
  loading: loading || disableContinue,
@@ -7601,7 +7601,7 @@ const PortalResetPassword = /*#__PURE__*/Object.freeze({
7601
7601
  CodeValidating: CodeValidating
7602
7602
  });
7603
7603
 
7604
- const scenario$9 = "@author:derek\n@owner:ian\nFeature: Verify Email\n\n Background: A user is on the email verification page\n Given a user who has been redirected to the email verification page\n\n @motivating\n Scenario: Verifying your email takes you to the portal login page\n Given a user has a valid oob code as a url query parameter\n When they click \"Verify Email\"\n Then the button enters a loading state\n When their email is validated\n Then a button that says \"Continue\" appears\n When they click \"Continue\"\n Then they are redirected to login\n\n @motivating\n Scenario: Users are automatically redirected if they dont click \"Continue\"\n Given a user has a valid oob code as a url query parameter\n When they click \"Verify Email\"\n Then the button enters a loading state\n When their email is validated\n Then a button that says \"Continue\" appears\n When they wait 5 seconds\n Then they are redirected to login\n\n @motivating\n Scenario: Users are notified if verifying their email has failed\n Given a user has a valid oob code as a url query parameter\n When they click \"Verify Email\"\n Then the button enters a loading state\n When their email fails to be validated\n Then an banner is shown stating that an error occured\n\n @motivating\n Scenario Outline: Users cannot verify their email with an invalid or missing oob code\n Given a user has a <oobCode> as a url query parameter\n And the component <mayHave> \"failed-page\" with <value>\n Then they see an error message saying that their verification code is invalid/expired\n When they click \"Continue\"\n Then they are redirected to <redirectPath>\n Examples:\n | oobCode | mayHave | value | redirectPath |\n | invalid oob code | doesn't have | N/A | / |\n | non existant oob code | doesn't have | N/A | / |\n | invalid oob code | has | /login | /login |\n | non existant oob code | has | /login | /login |\n\n @motivating\n Scenario: Users are redirected to \"/\" by default\n Given the component does not have prop \"nextPage\"\n And the users url does not contain a \"nextPage\" query parameter\n And a user has verified their email\n When they click \"Continue\"\n Then they are redirected to \"/\"\n\n @motivating\n Scenario: Custom redirection can be configured\n Given the component has prop \"nextPage\" with value \"/activity\"\n And the users url does not contain a \"nextPage\" query parameter\n And a user has verified their email\n When they click \"Continue\"\n Then they are redirected to \"/activity\"\n\n @motivating\n Scenario Outline: Users are redirected to the value of the nextPage url parameter if it exists\n Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\n And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\n And the user has verified their email\n When they click \"Continue\"\n Then they are redirected to <nextPageParamValue>\n Examples:\n | mayHave | nextPageValue | nextPageParamValue |\n | has | /dashboard | /activity |\n | does not have | N/A | /activity |\n\n @motivating\n Scenario Outline: Users are redirected to the value of the nextPage url parameter as if it were a relative path\n Given the component is loaded at <currentUrl>\n And the user has verified their email\n When they click \"Continue\"\n And they are redirected to <url>\n Examples:\n | currentUrl | url |\n | https://www.example.com?nextPage=./activity | https://www.example.com/activity |\n | https://www.example.com?nextPage=activity | https://www.example.com/activity |\n | https://www.example.com?nextPage=/activity | https://www.example.com/activity |\n | https://www.example.com?nextPage=www.google.com | https://www.example.com/www.google.com |\n | https://www.example.com?nextPage=//foo.com | https://www.example.com/ |\n | https://www.example.com?nextPage=https://malicious.example.com | https://www.example.com/ |\n | http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 | http://www.example.com/activity |\n | https://www.example.com?nextPage=activity?foo=bar | https://www.example.com/activity?foo=bar |\n | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar | https://www.example.com/activity?foo=bar |\n | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash | https://www.example.com/activity?foo=bar |\n | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash | https://www.example.com/activity?foo=bar#hash |\n | https://www.example.com:1337?nextPage=activity | https://www.example.com:1337/activity |\n | http://1.1.1.1:1111?nextPage=activity | http://1.1.1.1:1111/activity |\n\n @landmine\n Scenario Outline: Username and password are not persisted on redirects\n Given the component is loaded at <currentUrl>\n And the user has verified their email\n When they click \"Continue\"\n And they are redirected to <url>\n Examples:\n | currentUrl | url |\n | https://user:pass@www.example.com:444?nextPage=activity | https://www.example.com:444/activity |\n\n\n @minutia\n Scenario Outline: Users may be logged in or logged out depending on the verified status and logged in email\n Given an oobCode with email <oobCodeEmail> as a url query parameter\n And the user is logged in as <loggedInEmail>\n And the logged in user <isVerified>\n When the oobCode is submitted\n And the oobCode <isValid>\n Then the <submitState> screen is shown\n And after 3 seconds pass\n Then the user is redirected to <redirect>\n Examples:\n | oobCodeEmail | loggedInEmail | isVerified | isValid | submitState | redirect |\n | user1@example.com | N/A | false | is valid | success | /login |\n | user1@example.com | N/A | false | is not valid | error | /login |\n | user1@example.com | user1@example.com | false | is valid | success | /activity |\n | user1@example.com | user1@example.com | false | is not valid | error | N/A |\n | user1@example.com | user2@example.com | false | is valid | success | /login |\n | user1@example.com | user2@example.com | false | is not valid | error | /login |\n | user1@example.com | user1@example.com | true | is valid | success | /activity |\n | user1@example.com | user1@example.com | true | is not valid | success | /activity |\n | user1@example.com | user2@example.com | true | is not valid | error | /login |\n";
7604
+ const scenario$9 = "@author:derek\n@owner:ian\nFeature: Verify Email\n\n Background: A user is on the email verification page\n Given a user who has been redirected to the email verification page\n\n @motivating\n Scenario: Verifying your email takes you to the portal login page\n Given a user has a valid oob code as a url query parameter\n When they click \"Verify Email\"\n Then the button enters a loading state\n When their email is validated\n Then a button that says \"Continue\" appears\n When they click \"Continue\"\n Then they are redirected to login\n\n @motivating\n Scenario: Users are automatically redirected if they dont click \"Continue\"\n Given a user has a valid oob code as a url query parameter\n When they click \"Verify Email\"\n Then the button enters a loading state\n When their email is validated\n Then a button that says \"Continue\" appears\n When they wait 5 seconds\n Then they are redirected to login\n\n @motivating\n Scenario: Users are notified if verifying their email has failed\n Given a user has a valid oob code as a url query parameter\n When they click \"Verify Email\"\n Then the button enters a loading state\n When their email fails to be validated\n Then an banner is shown stating that an error occured\n\n @motivating\n Scenario Outline: Users cannot verify their email with an invalid or missing oob code\n Given a user has a <oobCode> as a url query parameter\n And the component <mayHave> \"failed-page\" with <value>\n Then they see an error message saying that their verification code is invalid/expired\n When they click \"Continue\"\n Then they are redirected to <redirectPath>\n Examples:\n | oobCode | mayHave | value | redirectPath |\n | invalid oob code | doesn't have | N/A | / |\n | non existant oob code | doesn't have | N/A | / |\n | invalid oob code | has | /login | /login |\n | non existant oob code | has | /login | /login |\n\n @motivating\n Scenario: Users are redirected to \"/\" by default\n Given the component does not have prop \"nextPage\"\n And the users url does not contain a \"nextPage\" query parameter\n And a user has verified their email\n When they click \"Continue\"\n Then they are redirected to \"/\"\n\n @motivating\n Scenario: Custom redirection can be configured\n Given the component has prop \"nextPage\" with value \"/activity\"\n And the users url does not contain a \"nextPage\" query parameter\n And a user has verified their email\n When they click \"Continue\"\n Then they are redirected to \"/activity\"\n\n @motivating\n Scenario Outline: Users are redirected to the value of the nextPage url parameter if it exists\n Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\n And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\n And the user has verified their email\n When they click \"Continue\"\n Then they are redirected to <nextPageParamValue>\n Examples:\n | mayHave | nextPageValue | nextPageParamValue |\n | has | /dashboard | /activity |\n | does not have | N/A | /activity |\n\n @motivating\n Scenario Outline: Users are redirected to the value of the nextPage url parameter as if it were a relative path\n Given the component is loaded at <currentUrl>\n And the user has verified their email\n When they click \"Continue\"\n And they are redirected to <url>\n Examples:\n | currentUrl | url |\n | https://www.example.com?nextPage=./activity | https://www.example.com/activity |\n | https://www.example.com?nextPage=activity | https://www.example.com/activity |\n | https://www.example.com?nextPage=/activity | https://www.example.com/activity |\n | https://www.example.com?nextPage=www.google.com | https://www.example.com/www.google.com |\n | https://www.example.com?nextPage=//foo.com | https://www.example.com/ |\n | https://www.example.com?nextPage=https://malicious.example.com | https://www.example.com/ |\n | http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 | http://www.example.com/activity |\n | https://www.example.com?nextPage=activity?foo=bar | https://www.example.com/activity?foo=bar |\n | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar | https://www.example.com/activity?foo=bar |\n | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash | https://www.example.com/activity?foo=bar |\n | https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash | https://www.example.com/activity?foo=bar#hash |\n | https://www.example.com:1337?nextPage=activity | https://www.example.com:1337/activity |\n | http://1.1.1.1:1111?nextPage=activity | http://1.1.1.1:1111/activity |\n\n @landmine\n Scenario Outline: Username and password are not persisted on redirects\n Given the component is loaded at <currentUrl>\n And the user has verified their email\n When they click \"Continue\"\n And they are redirected to <url>\n Examples:\n | currentUrl | url |\n | https://user:pass@www.example.com:444?nextPage=activity | https://www.example.com:444/activity |\n\n\n @minutia\n Scenario Outline: Users may be logged in or logged out depending on the verified status and logged in email\n Given an oobCode with email <oobCodeEmail> as a url query parameter\n And the user is logged in as <loggedInEmail>\n And the logged in user <isVerified>\n When the oobCode is submitted\n And the oobCode <isValid>\n Then the <submitState> screen is shown\n And after 3 seconds pass\n Then the user is redirected to <redirect>\n Examples:\n | oobCodeEmail | loggedInEmail | isVerified | isValid | submitState | redirect |\n | user1@example.com | N/A | false | is valid | success | /login |\n | user1@example.com | N/A | false | is not valid | error | /login |\n | user1@example.com | user1@example.com | false | is valid | success | /activity |\n | user1@example.com | user1@example.com | false | is not valid | error | N/A |\n | user1@example.com | user2@example.com | false | is valid | success | /login |\n | user1@example.com | user2@example.com | false | is not valid | error | /login |\n | user1@example.com | user1@example.com | true | is valid | success | /activity |\n | user1@example.com | user1@example.com | true | is not valid | success | /activity |\n | user1@example.com | user2@example.com | true | is not valid | error | /login |\n | N/A | N/A | false | is not valid | error | N/A |\n";
7605
7605
 
7606
7606
  const PortalVerifyEmail_stories = {
7607
7607
  title: "Components/Microsite Verify Email",
@@ -9953,7 +9953,7 @@ const ResetPasswordReadme = "# sqm-portal-reset-password\n\n\n\n<!-- Auto Genera
9953
9953
 
9954
9954
  const EmailVerificationReadme = "# sqm-portal-email-verification\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ---------------------------- | ------------------------------ | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; isVerified?: boolean; loadingVerification?: boolean; countdown?: number; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; verificationStatusMessage?: string; verificationLoadingMessage?: string; verificationResentMessage?: string; }; }` | `undefined` |\n| `emailVerificationHeader` | `email-verification-header` | | `string` | `\"Verify your email\"` |\n| `networkErrorMessage` | `network-error-message` | | `string` | `\"An error occurred while verifying your password. Please refresh the page.\"` |\n| `redirectPath` | `redirect-path` | Redirect participants to this page from their verification email. | `string` | `\"/verifyEmail\"` |\n| `resendEmailButtonText` | `resend-email-button-text` | | `string` | `\"Re-send Email\"` |\n| `verificationLoadingMessage` | `verification-loading-message` | | `string` | `\"Checking verification status\"` |\n| `verificationResentMessage` | `verification-resent-message` | | `string` | `\"Your verification email has been resent successfully\"` |\n| `verificationStatusMessage` | `verification-status-message` | | `string` | `\"Checking verification status in {countdown}\"` |\n| `verifyMessage` | `verify-message` | | `string` | `\"A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email will invalidate the previous email.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-email-verification --> sqm-form-message\n style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
9955
9955
 
9956
- const EmailVerifiedReadme = "# sqm-portal-verify-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| `continueText` | `continue-text` | | `string` | `\"Continue\"` |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; continueText?: string; }; }` | `undefined` |\n| `failedPage` | `failed-page` | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string` | `\"/\"` |\n| `networkErrorMessage` | `network-error-message` | | `string` | `\"An error occurred while verifying your email. Please refresh the page and try again.\"` |\n| `nextPage` | `next-page` | Redirect participants to this page when they successfully verify their email. | `string` | `\"/\"` |\n| `verifyEmailText` | `verify-email-text` | | `string` | `\"Verify your email\"` |\n| `verifyInvalidText` | `verify-invalid-text` | | `string` | `\"The email verification code is invalid or has expired, please try again.\"` |\n| `verifySuccessText` | `verify-success-text` | | `string` | `\"Your email has been verified and you are being redirected. If you are not redirected, please click Continue.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-verify-email --> sqm-form-message\n style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
9956
+ const EmailVerifiedReadme = "# sqm-portal-verify-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| `continueText` | `continue-text` | | `string` | `\"Continue\"` |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; verified: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; continueText?: string; }; }` | `undefined` |\n| `failedPage` | `failed-page` | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string` | `\"/\"` |\n| `networkErrorMessage` | `network-error-message` | | `string` | `\"An error occurred while verifying your email. Please refresh the page and try again.\"` |\n| `nextPage` | `next-page` | Redirect participants to this page when they successfully verify their email. | `string` | `\"/\"` |\n| `verifyEmailText` | `verify-email-text` | | `string` | `\"Verify your email\"` |\n| `verifyInvalidText` | `verify-invalid-text` | | `string` | `\"The email verification code is invalid or has expired, please try again.\"` |\n| `verifySuccessText` | `verify-success-text` | | `string` | `\"Your email has been verified and you are being redirected. If you are not redirected, please click Continue.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-verify-email --> sqm-form-message\n style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
9957
9957
 
9958
9958
  const PortalTemplates_stories = {
9959
9959
  title: "Templates / Microsite",