@saasquatch/mint-components 1.6.3-9 → 1.6.3

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.
Files changed (32) hide show
  1. package/dist/cjs/{sqm-portal-email-verification-view-bb8f5aa0.js → sqm-portal-email-verification-view-155695c8.js} +24 -3
  2. package/dist/cjs/sqm-portal-email-verification.cjs.entry.js +10 -6
  3. package/dist/cjs/sqm-stencilbook.cjs.entry.js +44 -49
  4. package/dist/collection/components/sqm-portal-email-verification/PortalEmailVerification.stories.js +40 -46
  5. package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification-view.js +24 -3
  6. package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification.js +4 -4
  7. package/dist/collection/components/sqm-portal-email-verification/usePortalEmailVerification.js +7 -3
  8. package/dist/esm/{sqm-portal-email-verification-view-0170c6d1.js → sqm-portal-email-verification-view-99ca4596.js} +24 -3
  9. package/dist/esm/sqm-portal-email-verification.entry.js +10 -6
  10. package/dist/esm/sqm-stencilbook.entry.js +44 -49
  11. package/dist/esm-es5/sqm-portal-email-verification-view-99ca4596.js +1 -0
  12. package/dist/esm-es5/sqm-portal-email-verification.entry.js +1 -1
  13. package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
  14. package/dist/mint-components/mint-components.esm.js +1 -1
  15. package/dist/mint-components/p-2e308c1b.system.js +1 -1
  16. package/dist/mint-components/p-91f457ae.js +1 -0
  17. package/dist/mint-components/p-a47719a1.entry.js +1 -0
  18. package/dist/mint-components/p-be206a97.system.js +1 -0
  19. package/dist/mint-components/p-c4c53efb.entry.js +9 -0
  20. package/dist/mint-components/p-e344d860.system.entry.js +1 -0
  21. package/dist/mint-components/p-ef696d05.system.entry.js +1 -0
  22. package/dist/types/components/sqm-portal-email-verification/PortalEmailVerification.stories.d.ts +1 -0
  23. package/docs/docs.docx +0 -0
  24. package/docs/raisins.json +1 -1
  25. package/package.json +1 -1
  26. package/dist/esm-es5/sqm-portal-email-verification-view-0170c6d1.js +0 -1
  27. package/dist/mint-components/p-07c6faa1.system.js +0 -1
  28. package/dist/mint-components/p-5d68ca8f.system.entry.js +0 -1
  29. package/dist/mint-components/p-62ed88a1.js +0 -1
  30. package/dist/mint-components/p-7ebfa407.entry.js +0 -1
  31. package/dist/mint-components/p-a6045f99.system.entry.js +0 -1
  32. package/dist/mint-components/p-e7d750b5.entry.js +0 -9
package/dist/cjs/{sqm-portal-email-verification-view-bb8f5aa0.js → sqm-portal-email-verification-view-155695c8.js} RENAMED
@@ -9,6 +9,25 @@ const sqmTextSpanView = require('./sqm-text-span-view-aea267ba.js');
9
9
  const style = {
10
10
  Wrapper: mixins.AuthWrapper,
11
11
  Column: { ...mixins.AuthColumn },
12
+ ButtonLink: {
13
+ fontSize: "14px",
14
+ color: "var(--sl-color-primary-500)",
15
+ display: "inline-block !important",
16
+ "&:hover": {
17
+ cursor: "pointer",
18
+ textDecoration: "underline",
19
+ },
20
+ },
21
+ ButtonLinkLoading: {
22
+ fontSize: "14px",
23
+ color: "var(--sl-color-gray-500)",
24
+ opacity: "0.6",
25
+ display: "inline-block !important",
26
+ textDecoration: "underline",
27
+ "&:hover": {
28
+ cursor: "not-allowed",
29
+ },
30
+ },
12
31
  };
13
32
  const vanillaStyle = `
14
33
  :host {
@@ -38,15 +57,17 @@ function PortalEmailVerificationView(props) {
38
57
  }, {
39
58
  email: (index.h("span", { style: { fontWeight: "var(--sl-font-weight-semibold)" } }, email)),
40
59
  })),
41
- index.h("sl-button", { variant: "default", submit: true, loading: states.loading }, resendEmailButtonText),
42
- index.h("p", { style: { color: "#BBBBBB" } }, global.intl.formatMessage({
60
+ index.h("p", { style: { color: "var(--sl-color-gray-500)", fontSize: "14px" } }, global.intl.formatMessage({
43
61
  id: `verificationStatus`,
44
62
  defaultMessage: states.loadingVerification
45
63
  ? verificationLoadingMessage + " {countdown}"
46
64
  : verificationStatusMessage,
47
65
  }, {
48
66
  countdown: states.loadingVerification ? (index.h("sl-spinner", null)) : (states.countdown),
49
- })))));
67
+ })),
68
+ index.h("a", { class: states.loading
69
+ ? sheet.classes.ButtonLinkLoading
70
+ : sheet.classes.ButtonLink, onClick: callbacks.submit }, resendEmailButtonText))));
50
71
  }
51
72
 
52
73
  exports.PortalEmailVerificationView = PortalEmailVerificationView;
package/dist/cjs/sqm-portal-email-verification.cjs.entry.js CHANGED
@@ -11,7 +11,7 @@ const cjs = require('./cjs-1066ec21.js');
11
11
  require('./mixins-fe9d4112.js');
12
12
  require('./JSS-8503a151.js');
13
13
  require('./sqm-text-span-view-aea267ba.js');
14
- const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-bb8f5aa0.js');
14
+ const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-155695c8.js');
15
15
 
16
16
  function usePortalEmailVerification(props) {
17
17
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -68,9 +68,11 @@ function usePortalEmailVerification(props) {
68
68
  // Restart the timer if verification has just been checked
69
69
  if (restartCountdown)
70
70
  setCountdown(restartCountdown);
71
+ // Default back to 10 if the countdown got to zero
72
+ let newCountdown = countdown || 10;
71
73
  // Start timers from either the beginning or based on the previous value
72
- countdownRef.current = startCountdown(restartCountdown - 1 || countdown - 1);
73
- timerRef.current = startTimer(restartCountdown * 1000 || countdown * 1000);
74
+ countdownRef.current = startCountdown(restartCountdown - 1 || newCountdown - 1);
75
+ timerRef.current = startTimer(restartCountdown * 1000 || newCountdown * 1000);
74
76
  }
75
77
  const resyncTimersCallback = useCallback.useCallback(() => resyncTimers(), [countdown]);
76
78
  // Refetch validation status timer
@@ -85,8 +87,10 @@ function usePortalEmailVerification(props) {
85
87
  }, []);
86
88
  // Countdown timer
87
89
  stencilHooks_module.useEffect(() => {
88
- if (countdown > 0)
90
+ if (countdown > 0) {
91
+ clearInterval(countdownRef.current);
89
92
  countdownRef.current = startCountdown(countdown - 1);
93
+ }
90
94
  // Re-sync the timers if tab visibility has changed
91
95
  document.addEventListener("visibilitychange", resyncTimersCallback);
92
96
  return () => {
@@ -146,12 +150,12 @@ const PortalEmailVerification = class {
146
150
  * @uiName Email Verification Status Text
147
151
  * @uiWidget textArea
148
152
  */
149
- this.verificationStatusMessage = "Check verification status: in {countdown}";
153
+ this.verificationStatusMessage = "Checking verification status in {countdown}";
150
154
  /**
151
155
  * @uiName Email Verification Checking Text
152
156
  * @uiWidget textArea
153
157
  */
154
- this.verificationLoadingMessage = "Check verification status:";
158
+ this.verificationLoadingMessage = "Checking verification status";
155
159
  stencilHooks_module.h$1(this);
156
160
  }
157
161
  disconnectedCallback() { }
package/dist/cjs/sqm-stencilbook.cjs.entry.js CHANGED
@@ -20,7 +20,7 @@ const sqmHeroView = require('./sqm-hero-view-7bb2383c.js');
20
20
  const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5a3d4a88.js');
21
21
  const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-87756d23.js');
22
22
  const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-bf62d5e2.js');
23
- const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-bb8f5aa0.js');
23
+ const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-155695c8.js');
24
24
  const sqmPortalFooterView = require('./sqm-portal-footer-view-edb2fbe3.js');
25
25
  const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-f5c9b4b3.js');
26
26
  const sqmPortalContainerView = require('./sqm-portal-container-view-b336f655.js');
@@ -4253,7 +4253,7 @@ const PortalForgotPassword = /*#__PURE__*/Object.freeze({
4253
4253
  ForgotPasswordSuccess: ForgotPasswordSuccess
4254
4254
  });
4255
4255
 
4256
- const scenario$7 = "@author:derek\r\n@owner:ian\r\nFeature: Email Verification\r\n\r\n @minutia\r\n Scenario: User's redirected from registration can re-send their verification email\r\n Given a user has registered\r\n And they have been sent a verification email\r\n When they are redirected to the email verification page\r\n Then a message is displayed\r\n And it reflects that a email has been sent to their email\r\n But they can still re-send the email\r\n When they click to \"Resend-Email\"\r\n Then they receive a verification email\r\n\r\n @motivating\r\n Scenario: Users are notified if sending the email verification message fails\r\n Given a user viewing the email verification component\r\n And they have an email stored in session data from registration\r\n When they click to \"Resend-Email\"\r\n Then the button enters a loading state\r\n When an error occurs trying to send the verification email\r\n Then the user does not receive a verification email\r\n And an error banner is shown stating that they should try again\r\n\r\n @motivating\r\n Scenario: Users are notified if sending the email verification message succeeds\r\n Given a user viewing the email verification component\r\n And they have an email stored in session data from registration\r\n When they click to \"Resend-Email\"\r\n Then the button enters a loading state\r\n When the email verification message sends\r\n Then the user receives a verification email\r\n And a success banner is shown stating that their email was resent\r\n\r\n @motivating\r\n Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/verifyEmail\"\r\n Given a user viewing the email verification component\r\n And they have an email stored in session data from registration\r\n And the component <mayHave> \"redirect-path\" with <value>\r\n When they resend their verification email\r\n And they click the link in the email\r\n Then they are redirected to <redirectPath>\r\n Examples:\r\n | mayHave | value | redirectPath |\r\n | doesn't have | N/A | /verifyEmail |\r\n | has | /verifyMyEmail | /verifyMyEmail |\r\n\r\n @motivating\r\n Scenario: Verification status is refetched on refresh\r\n Given a user viewing the email verification component\r\n And they verified their account on another device\r\n And the local storage verification state is outdated\r\n When they refresh the page the component is on\r\n Then their verification status is re-queried\r\n And the local storage managed identity state is updated\r\n And they are redirected to the components \"redirectPath\"\r\n\r\n @motivating\r\n Scenario: Verification status is refetched every 10 seconds\r\n Given a user viewing the email verification component\r\n Then they see text \"Check verification status: in 10\" below the re-send verification button\r\n And the time counts down from 10 to 0\r\n When the counter hits 0\r\n Then their verification status is re-queried\r\n And the text displays a spinner where the \"in {seconds}\" text was\r\n When they verify their account on another device\r\n And the count down hits 0 again from 10\r\n Then their verification status is re-queried\r\n And the local storage managed identity state is updated\r\n And they are redirected to the components \"redirectPath\"\r\n\r\n @minutia\r\n Scenario Outline: Verification refetch text is customizable\r\n Given the email verication has prop \"verification-status-message\" with <verificationPropValue>\r\n And has prop \"verification-loading-message\" with <loadingPropValue>\r\n And a user viewing the component\r\n When it is counting down\r\n Then they see <verificationTextValue>\r\n When it is refetching their verification status\r\n Examples:\r\n | verificationPropValue | verificationTextValue | loadingPropValue | loadingTextValue |\r\n | N/A | Check verification status: in {countdown} | N/A | Check verification status: |\r\n | {countdown} seconds till verification refresh | {countdown} seconds till verification refresh | Checking verification status | Checking verification status |\r\n\r\n\r\n @minutia\r\n Scenario: 10 second countdown pauses when minimizing or moving between tabs\r\n Given a user viewing the email verification component\r\n Then they see text \"Check verification status: in 10\" below the re-send verification button\r\n And the time counts down from 10 to 7\r\n And the user changes to a different tab\r\n When the user goes back to the verification tab\r\n Then the countdown will still be 7\r\n When the counter hits 0\r\n Then their verification status is re-queried\r\n";
4256
+ const scenario$7 = "@author:derek\r\n@owner:ian\r\nFeature: Email Verification\r\n\r\n @minutia\r\n Scenario: User's redirected from registration can re-send their verification email\r\n Given a user has registered\r\n And they have been sent a verification email\r\n When they are redirected to the email verification page\r\n Then a message is displayed\r\n And it reflects that a email has been sent to their email\r\n But they can still re-send the email\r\n When they click to \"Resend-Email\"\r\n Then they receive a verification email\r\n\r\n @motivating\r\n Scenario: Users are notified if sending the email verification message fails\r\n Given a user viewing the email verification component\r\n And they have an email stored in session data from registration\r\n When they click to \"Resend-Email\"\r\n Then the text link is disabled\r\n When an error occurs trying to send the verification email\r\n Then the user does not receive a verification email\r\n And an error banner is shown stating that they should try again\r\n\r\n @motivating\r\n Scenario: Users are notified if sending the email verification message succeeds\r\n Given a user viewing the email verification component\r\n And they have an email stored in session data from registration\r\n When they click to \"Resend-Email\"\r\n Then the text link is disabled\r\n When the email verification message sends\r\n Then the user receives a verification email\r\n And a success banner is shown stating that their email was resent\r\n\r\n @motivating\r\n Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/verifyEmail\"\r\n Given a user viewing the email verification component\r\n And they have an email stored in session data from registration\r\n And the component <mayHave> \"redirect-path\" with <value>\r\n When they resend their verification email\r\n And they click the link in the email\r\n Then they are redirected to <redirectPath>\r\n Examples:\r\n | mayHave | value | redirectPath |\r\n | doesn't have | N/A | /verifyEmail |\r\n | has | /verifyMyEmail | /verifyMyEmail |\r\n\r\n @motivating\r\n Scenario Outline: Verification status is refetched on refresh\r\n Given a user viewing the email verification component\r\n And the component <mayHave> \"redirect-path\" with <value>\r\n And they verified their account on another device\r\n And the local storage verification state is outdated\r\n When they refresh the page the component is on\r\n Then their verification status is re-queried\r\n And the local storage managed identity state is updated\r\n And they are redirected to <redirectPath>\r\n Examples:\r\n | mayHave | value | redirectPath |\r\n | doesn't have | N/A | /verifyEmail |\r\n | has | /verifyMyEmail | /verifyMyEmail |\r\n\r\n @motivating\r\n Scenario Outline: Verification status is refetched every 10 seconds\r\n Given a user viewing the email verification component\r\n And the component <mayHave> \"redirect-path\" with <value>\r\n Then they see text \"Checking verification status in 10\" above the re-send verification text link\r\n And the time counts down from 10 to 0\r\n When the counter hits 0\r\n Then their verification status is re-queried\r\n And the text displays a spinner where the \"in {seconds}\" text was\r\n When they verify their account on another device\r\n And the count down hits 0 again from 10\r\n Then their verification status is re-queried\r\n And the local storage managed identity state is updated\r\n And they are redirected to <redirectPath>\r\n Examples:\r\n | mayHave | value | redirectPath |\r\n | doesn't have | N/A | /verifyEmail |\r\n | has | /verifyMyEmail | /verifyMyEmail |\r\n\r\n @minutia\r\n Scenario Outline: Verification refetch text is customizable\r\n Given the email verication has prop \"verification-status-message\" with <verificationPropValue>\r\n And has prop \"verification-loading-message\" with <loadingPropValue>\r\n And a user viewing the component\r\n When it is counting down\r\n Then they see <verificationTextValue>\r\n When it is refetching their verification status\r\n Examples:\r\n | verificationPropValue | verificationTextValue | loadingPropValue | loadingTextValue |\r\n | N/A | Checking verification status in {countdown} | N/A | Checking verification status |\r\n | {countdown} seconds till verification refresh | {countdown} seconds till verification refresh | Checking verification | Checking verification |\r\n\r\n\r\n @minutia\r\n Scenario: 10 second countdown pauses when minimizing or moving between tabs\r\n Given a user viewing the email verification component\r\n Then they see text \"Checking verification status in 10\" above the re-send verification text link\r\n And the time counts down from 10 to 7\r\n And the user changes to a different tab\r\n When the user goes back to the verification tab\r\n Then the countdown will still be 7\r\n When the counter hits 0\r\n Then their verification status is re-queried\r\n";
4257
4257
 
4258
4258
  const PortalEmailVerification_stories = {
4259
4259
  title: "Components/Portal Email Verification",
@@ -4261,73 +4261,67 @@ const PortalEmailVerification_stories = {
4261
4261
  scenario: scenario$7,
4262
4262
  },
4263
4263
  };
4264
+ const defaultCallbacks = {
4265
+ submit: async (e) => await e,
4266
+ };
4267
+ const defaultContent = {
4268
+ email: "email@example.com",
4269
+ verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
4270
+ emailVerificationHeader: "Verify your email",
4271
+ resendEmailButtonText: "Re-send Email",
4272
+ verificationStatusMessage: "Checking verification status in {countdown}",
4273
+ verificationLoadingMessage: "Checking verification status",
4274
+ };
4275
+ const defaultStates = {
4276
+ error: "",
4277
+ loading: false,
4278
+ success: false,
4279
+ isVerified: false,
4280
+ loadingVerification: false,
4281
+ countdown: 10,
4282
+ };
4264
4283
  const defaultProps$5 = {
4265
- states: {
4266
- error: "",
4267
- loading: false,
4268
- success: false,
4269
- },
4270
- callbacks: {
4271
- submit: async (e) => await e,
4272
- },
4273
- content: {
4274
- email: "email@example.com",
4275
- verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
4276
- emailVerificationHeader: "Verify your email",
4277
- resendEmailButtonText: "Re-send Email",
4278
- },
4284
+ states: defaultStates,
4285
+ callbacks: defaultCallbacks,
4286
+ content: defaultContent,
4279
4287
  };
4280
4288
  const errorProps$3 = {
4281
4289
  states: {
4290
+ ...defaultStates,
4282
4291
  error: "Something went wrong. Please try again.",
4283
- loading: false,
4284
- success: false,
4285
- },
4286
- callbacks: {
4287
- submit: async (e) => await e,
4288
- },
4289
- content: {
4290
- email: "email@example.com",
4291
- verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
4292
- emailVerificationHeader: "Verify your email",
4293
- resendEmailButtonText: "Re-send Email",
4294
4292
  },
4293
+ callbacks: defaultCallbacks,
4294
+ content: defaultContent,
4295
4295
  };
4296
4296
  const loadingProps$3 = {
4297
4297
  states: {
4298
- error: "",
4298
+ ...defaultStates,
4299
4299
  loading: true,
4300
- success: false,
4301
- },
4302
- callbacks: {
4303
- submit: async (e) => await e,
4304
- },
4305
- content: {
4306
- email: "email@example.com",
4307
- verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
4308
- emailVerificationHeader: "Verify your email",
4309
- resendEmailButtonText: "Re-send Email",
4310
4300
  },
4301
+ callbacks: defaultCallbacks,
4302
+ content: defaultContent,
4311
4303
  };
4312
4304
  const successProps$1 = {
4313
4305
  states: {
4314
- error: "",
4315
- loading: false,
4306
+ ...defaultStates,
4316
4307
  success: true,
4308
+ isVerified: true,
4317
4309
  },
4318
- callbacks: {
4319
- submit: async (e) => await e,
4320
- },
4321
- content: {
4322
- email: "email@example.com",
4323
- verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
4324
- emailVerificationHeader: "Verify your email",
4325
- resendEmailButtonText: "Re-send Email",
4310
+ callbacks: defaultCallbacks,
4311
+ content: defaultContent,
4312
+ };
4313
+ const loadingVerificationProps = {
4314
+ states: {
4315
+ ...defaultStates,
4316
+ loadingVerification: true,
4326
4317
  },
4318
+ callbacks: defaultCallbacks,
4319
+ content: defaultContent,
4327
4320
  };
4328
4321
  const Default$5 = () => index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, defaultProps$5));
4329
4322
  const EmailVerificationWithError = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, errorProps$3)));
4330
4323
  const EmailVerificationLoading = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, loadingProps$3)));
4324
+ const EmailVerificationCheckingVerification = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, loadingVerificationProps)));
4331
4325
  const EmailVerificationSuccess = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, successProps$1)));
4332
4326
 
4333
4327
  const PortalEmailVerification = /*#__PURE__*/Object.freeze({
@@ -4336,6 +4330,7 @@ const PortalEmailVerification = /*#__PURE__*/Object.freeze({
4336
4330
  Default: Default$5,
4337
4331
  EmailVerificationWithError: EmailVerificationWithError,
4338
4332
  EmailVerificationLoading: EmailVerificationLoading,
4333
+ EmailVerificationCheckingVerification: EmailVerificationCheckingVerification,
4339
4334
  EmailVerificationSuccess: EmailVerificationSuccess
4340
4335
  });
4341
4336
 
@@ -9600,7 +9595,7 @@ const EditProfileReadme = "# sqm-portal-profile\r\n\r\n\r\n\r\n<!-- Auto Generat
9600
9595
 
9601
9596
  const ResetPasswordReadme = "# sqm-portal-reset-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| --------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |\r\n| `confirmPassword` | `confirm-password` | | `boolean` | `false` |\r\n| `confirmPasswordFieldLabel` | `confirm-password-field-label` | | `string` | `\"Confirm Password\"` |\r\n| `continueButtonText` | `continue-button-text` | Button text displayed after a successful password reset. | `string` | `\"Continue\"` |\r\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; passwordFieldLabel: string; }; }; }` | `undefined` |\r\n| `failedPage` | `failed-page` | Redirect participants to this page if password reset fails due to an outdated reset attempt. | `string` | `\"/\"` |\r\n| `nextPage` | `next-page` | Redirect participants to this page when they successfully reset their password. | `string` | `\"/\"` |\r\n| `passwordFieldLabel` | `password-field-label` | | `string` | `\"New Password\"` |\r\n| `passwordResetHeader` | `password-reset-header` | Displayed after a successful password reset. | `string` | `\"Password reset\"` |\r\n| `resetPasswordButtonText` | `reset-password-button-text` | | `string` | `\"Reset Password\"` |\r\n| `resetPasswordHeader` | `reset-password-header` | | `string` | `\"Reset your password\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-reset-password --> sqm-form-message\r\n sqm-portal-reset-password --> sqm-password-field\r\n style sqm-portal-reset-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
9602
9597
 
9603
- const EmailVerificationReadme = "# sqm-portal-email-verification\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| ---------------------------- | ------------------------------ | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\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; }; }` | `undefined` |\r\n| `emailVerificationHeader` | `email-verification-header` | | `string` | `\"Verify your email\"` |\r\n| `redirectPath` | `redirect-path` | Redirect participants to this page from their verification email. | `string` | `\"/verifyEmail\"` |\r\n| `resendEmailButtonText` | `resend-email-button-text` | | `string` | `\"Re-send Email\"` |\r\n| `verificationLoadingMessage` | `verification-loading-message` | | `string` | `\"Check verification status:\"` |\r\n| `verificationStatusMessage` | `verification-status-message` | | `string` | `\"Check verification status: in {countdown}\"` |\r\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.\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-email-verification --> sqm-form-message\r\n style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
9598
+ const EmailVerificationReadme = "# sqm-portal-email-verification\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| ---------------------------- | ------------------------------ | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\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; }; }` | `undefined` |\r\n| `emailVerificationHeader` | `email-verification-header` | | `string` | `\"Verify your email\"` |\r\n| `redirectPath` | `redirect-path` | Redirect participants to this page from their verification email. | `string` | `\"/verifyEmail\"` |\r\n| `resendEmailButtonText` | `resend-email-button-text` | | `string` | `\"Re-send Email\"` |\r\n| `verificationLoadingMessage` | `verification-loading-message` | | `string` | `\"Checking verification status\"` |\r\n| `verificationStatusMessage` | `verification-status-message` | | `string` | `\"Checking verification status in {countdown}\"` |\r\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.\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-email-verification --> sqm-form-message\r\n style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
9604
9599
 
9605
9600
  const EmailVerifiedReadme = "# sqm-portal-verify-email\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| ------------ | ------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |\r\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\r\n| `failedPage` | `failed-page` | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string` | `\"/\"` |\r\n| `nextPage` | `next-page` | Redirect participants to this page when they successfully verify their email. | `string` | `\"/\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-verify-email --> sqm-form-message\r\n style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
9606
9601
 
package/dist/collection/components/sqm-portal-email-verification/PortalEmailVerification.stories.js CHANGED
@@ -7,71 +7,65 @@ export default {
7
7
  scenario,
8
8
  },
9
9
  };
10
+ const defaultCallbacks = {
11
+ submit: async (e) => await e,
12
+ };
13
+ const defaultContent = {
14
+ email: "email@example.com",
15
+ verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
16
+ emailVerificationHeader: "Verify your email",
17
+ resendEmailButtonText: "Re-send Email",
18
+ verificationStatusMessage: "Checking verification status in {countdown}",
19
+ verificationLoadingMessage: "Checking verification status",
20
+ };
21
+ const defaultStates = {
22
+ error: "",
23
+ loading: false,
24
+ success: false,
25
+ isVerified: false,
26
+ loadingVerification: false,
27
+ countdown: 10,
28
+ };
10
29
  const defaultProps = {
11
- states: {
12
- error: "",
13
- loading: false,
14
- success: false,
15
- },
16
- callbacks: {
17
- submit: async (e) => await e,
18
- },
19
- content: {
20
- email: "email@example.com",
21
- verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
22
- emailVerificationHeader: "Verify your email",
23
- resendEmailButtonText: "Re-send Email",
24
- },
30
+ states: defaultStates,
31
+ callbacks: defaultCallbacks,
32
+ content: defaultContent,
25
33
  };
26
34
  const errorProps = {
27
35
  states: {
36
+ ...defaultStates,
28
37
  error: "Something went wrong. Please try again.",
29
- loading: false,
30
- success: false,
31
- },
32
- callbacks: {
33
- submit: async (e) => await e,
34
- },
35
- content: {
36
- email: "email@example.com",
37
- verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
38
- emailVerificationHeader: "Verify your email",
39
- resendEmailButtonText: "Re-send Email",
40
38
  },
39
+ callbacks: defaultCallbacks,
40
+ content: defaultContent,
41
41
  };
42
42
  const loadingProps = {
43
43
  states: {
44
- error: "",
44
+ ...defaultStates,
45
45
  loading: true,
46
- success: false,
47
- },
48
- callbacks: {
49
- submit: async (e) => await e,
50
- },
51
- content: {
52
- email: "email@example.com",
53
- verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
54
- emailVerificationHeader: "Verify your email",
55
- resendEmailButtonText: "Re-send Email",
56
46
  },
47
+ callbacks: defaultCallbacks,
48
+ content: defaultContent,
57
49
  };
58
50
  const successProps = {
59
51
  states: {
60
- error: "",
61
- loading: false,
52
+ ...defaultStates,
62
53
  success: true,
54
+ isVerified: true,
63
55
  },
64
- callbacks: {
65
- submit: async (e) => await e,
66
- },
67
- content: {
68
- email: "email@example.com",
69
- verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
70
- emailVerificationHeader: "Verify your email",
71
- resendEmailButtonText: "Re-send Email",
56
+ callbacks: defaultCallbacks,
57
+ content: defaultContent,
58
+ };
59
+ const loadingVerificationProps = {
60
+ states: {
61
+ ...defaultStates,
62
+ loadingVerification: true,
72
63
  },
64
+ callbacks: defaultCallbacks,
65
+ content: defaultContent,
73
66
  };
74
67
  export const Default = () => h(PortalEmailVerificationView, Object.assign({}, defaultProps));
75
68
  export const EmailVerificationWithError = () => (h(PortalEmailVerificationView, Object.assign({}, errorProps)));
76
69
  export const EmailVerificationLoading = () => (h(PortalEmailVerificationView, Object.assign({}, loadingProps)));
70
+ export const EmailVerificationCheckingVerification = () => (h(PortalEmailVerificationView, Object.assign({}, loadingVerificationProps)));
77
71
  export const EmailVerificationSuccess = () => (h(PortalEmailVerificationView, Object.assign({}, successProps)));
package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification-view.js CHANGED
@@ -6,6 +6,25 @@ import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
6
6
  const style = {
7
7
  Wrapper: AuthWrapper,
8
8
  Column: { ...AuthColumn },
9
+ ButtonLink: {
10
+ fontSize: "14px",
11
+ color: "var(--sl-color-primary-500)",
12
+ display: "inline-block !important",
13
+ "&:hover": {
14
+ cursor: "pointer",
15
+ textDecoration: "underline",
16
+ },
17
+ },
18
+ ButtonLinkLoading: {
19
+ fontSize: "14px",
20
+ color: "var(--sl-color-gray-500)",
21
+ opacity: "0.6",
22
+ display: "inline-block !important",
23
+ textDecoration: "underline",
24
+ "&:hover": {
25
+ cursor: "not-allowed",
26
+ },
27
+ },
9
28
  };
10
29
  const vanillaStyle = `
11
30
  :host {
@@ -35,13 +54,15 @@ export function PortalEmailVerificationView(props) {
35
54
  }, {
36
55
  email: (h("span", { style: { fontWeight: "var(--sl-font-weight-semibold)" } }, email)),
37
56
  })),
38
- h("sl-button", { variant: "default", submit: true, loading: states.loading }, resendEmailButtonText),
39
- h("p", { style: { color: "#BBBBBB" } }, intl.formatMessage({
57
+ h("p", { style: { color: "var(--sl-color-gray-500)", fontSize: "14px" } }, intl.formatMessage({
40
58
  id: `verificationStatus`,
41
59
  defaultMessage: states.loadingVerification
42
60
  ? verificationLoadingMessage + " {countdown}"
43
61
  : verificationStatusMessage,
44
62
  }, {
45
63
  countdown: states.loadingVerification ? (h("sl-spinner", null)) : (states.countdown),
46
- })))));
64
+ })),
65
+ h("a", { class: states.loading
66
+ ? sheet.classes.ButtonLinkLoading
67
+ : sheet.classes.ButtonLink, onClick: callbacks.submit }, resendEmailButtonText))));
47
68
  }
package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification.js CHANGED
@@ -34,12 +34,12 @@ export class PortalEmailVerification {
34
34
  * @uiName Email Verification Status Text
35
35
  * @uiWidget textArea
36
36
  */
37
- this.verificationStatusMessage = "Check verification status: in {countdown}";
37
+ this.verificationStatusMessage = "Checking verification status in {countdown}";
38
38
  /**
39
39
  * @uiName Email Verification Checking Text
40
40
  * @uiWidget textArea
41
41
  */
42
- this.verificationLoadingMessage = "Check verification status:";
42
+ this.verificationLoadingMessage = "Checking verification status";
43
43
  withHooks(this);
44
44
  }
45
45
  disconnectedCallback() { }
@@ -164,7 +164,7 @@ export class PortalEmailVerification {
164
164
  },
165
165
  "attribute": "verification-status-message",
166
166
  "reflect": false,
167
- "defaultValue": "\"Check verification status: in {countdown}\""
167
+ "defaultValue": "\"Checking verification status in {countdown}\""
168
168
  },
169
169
  "verificationLoadingMessage": {
170
170
  "type": "string",
@@ -188,7 +188,7 @@ export class PortalEmailVerification {
188
188
  },
189
189
  "attribute": "verification-loading-message",
190
190
  "reflect": false,
191
- "defaultValue": "\"Check verification status:\""
191
+ "defaultValue": "\"Checking verification status\""
192
192
  },
193
193
  "demoData": {
194
194
  "type": "unknown",
package/dist/collection/components/sqm-portal-email-verification/usePortalEmailVerification.js CHANGED
@@ -55,9 +55,11 @@ export function usePortalEmailVerification(props) {
55
55
  // Restart the timer if verification has just been checked
56
56
  if (restartCountdown)
57
57
  setCountdown(restartCountdown);
58
+ // Default back to 10 if the countdown got to zero
59
+ let newCountdown = countdown || 10;
58
60
  // Start timers from either the beginning or based on the previous value
59
- countdownRef.current = startCountdown(restartCountdown - 1 || countdown - 1);
60
- timerRef.current = startTimer(restartCountdown * 1000 || countdown * 1000);
61
+ countdownRef.current = startCountdown(restartCountdown - 1 || newCountdown - 1);
62
+ timerRef.current = startTimer(restartCountdown * 1000 || newCountdown * 1000);
61
63
  }
62
64
  const resyncTimersCallback = useCallback(() => resyncTimers(), [countdown]);
63
65
  // Refetch validation status timer
@@ -72,8 +74,10 @@ export function usePortalEmailVerification(props) {
72
74
  }, []);
73
75
  // Countdown timer
74
76
  useEffect(() => {
75
- if (countdown > 0)
77
+ if (countdown > 0) {
78
+ clearInterval(countdownRef.current);
76
79
  countdownRef.current = startCountdown(countdown - 1);
80
+ }
77
81
  // Re-sync the timers if tab visibility has changed
78
82
  document.addEventListener("visibilitychange", resyncTimersCallback);
79
83
  return () => {
package/dist/esm/{sqm-portal-email-verification-view-0170c6d1.js → sqm-portal-email-verification-view-99ca4596.js} RENAMED
@@ -7,6 +7,25 @@ import { T as TextSpanView } from './sqm-text-span-view-2567b6c0.js';
7
7
  const style = {
8
8
  Wrapper: AuthWrapper,
9
9
  Column: { ...AuthColumn },
10
+ ButtonLink: {
11
+ fontSize: "14px",
12
+ color: "var(--sl-color-primary-500)",
13
+ display: "inline-block !important",
14
+ "&:hover": {
15
+ cursor: "pointer",
16
+ textDecoration: "underline",
17
+ },
18
+ },
19
+ ButtonLinkLoading: {
20
+ fontSize: "14px",
21
+ color: "var(--sl-color-gray-500)",
22
+ opacity: "0.6",
23
+ display: "inline-block !important",
24
+ textDecoration: "underline",
25
+ "&:hover": {
26
+ cursor: "not-allowed",
27
+ },
28
+ },
10
29
  };
11
30
  const vanillaStyle = `
12
31
  :host {
@@ -36,15 +55,17 @@ function PortalEmailVerificationView(props) {
36
55
  }, {
37
56
  email: (h("span", { style: { fontWeight: "var(--sl-font-weight-semibold)" } }, email)),
38
57
  })),
39
- h("sl-button", { variant: "default", submit: true, loading: states.loading }, resendEmailButtonText),
40
- h("p", { style: { color: "#BBBBBB" } }, intl.formatMessage({
58
+ h("p", { style: { color: "var(--sl-color-gray-500)", fontSize: "14px" } }, intl.formatMessage({
41
59
  id: `verificationStatus`,
42
60
  defaultMessage: states.loadingVerification
43
61
  ? verificationLoadingMessage + " {countdown}"
44
62
  : verificationStatusMessage,
45
63
  }, {
46
64
  countdown: states.loadingVerification ? (h("sl-spinner", null)) : (states.countdown),
47
- })))));
65
+ })),
66
+ h("a", { class: states.loading
67
+ ? sheet.classes.ButtonLinkLoading
68
+ : sheet.classes.ButtonLink, onClick: callbacks.submit }, resendEmailButtonText))));
48
69
  }
49
70
 
50
71
  export { PortalEmailVerificationView as P };
package/dist/esm/sqm-portal-email-verification.entry.js CHANGED
@@ -7,7 +7,7 @@ import { c as cjs } from './cjs-bdfb4486.js';
7
7
  import './mixins-f60a614c.js';
8
8
  import './JSS-67b5cff8.js';
9
9
  import './sqm-text-span-view-2567b6c0.js';
10
- import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-0170c6d1.js';
10
+ import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-99ca4596.js';
11
11
 
12
12
  function usePortalEmailVerification(props) {
13
13
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -64,9 +64,11 @@ function usePortalEmailVerification(props) {
64
64
  // Restart the timer if verification has just been checked
65
65
  if (restartCountdown)
66
66
  setCountdown(restartCountdown);
67
+ // Default back to 10 if the countdown got to zero
68
+ let newCountdown = countdown || 10;
67
69
  // Start timers from either the beginning or based on the previous value
68
- countdownRef.current = startCountdown(restartCountdown - 1 || countdown - 1);
69
- timerRef.current = startTimer(restartCountdown * 1000 || countdown * 1000);
70
+ countdownRef.current = startCountdown(restartCountdown - 1 || newCountdown - 1);
71
+ timerRef.current = startTimer(restartCountdown * 1000 || newCountdown * 1000);
70
72
  }
71
73
  const resyncTimersCallback = useCallback(() => resyncTimers(), [countdown]);
72
74
  // Refetch validation status timer
@@ -81,8 +83,10 @@ function usePortalEmailVerification(props) {
81
83
  }, []);
82
84
  // Countdown timer
83
85
  useEffect(() => {
84
- if (countdown > 0)
86
+ if (countdown > 0) {
87
+ clearInterval(countdownRef.current);
85
88
  countdownRef.current = startCountdown(countdown - 1);
89
+ }
86
90
  // Re-sync the timers if tab visibility has changed
87
91
  document.addEventListener("visibilitychange", resyncTimersCallback);
88
92
  return () => {
@@ -142,12 +146,12 @@ const PortalEmailVerification = class {
142
146
  * @uiName Email Verification Status Text
143
147
  * @uiWidget textArea
144
148
  */
145
- this.verificationStatusMessage = "Check verification status: in {countdown}";
149
+ this.verificationStatusMessage = "Checking verification status in {countdown}";
146
150
  /**
147
151
  * @uiName Email Verification Checking Text
148
152
  * @uiWidget textArea
149
153
  */
150
- this.verificationLoadingMessage = "Check verification status:";
154
+ this.verificationLoadingMessage = "Checking verification status";
151
155
  h(this);
152
156
  }
153
157
  disconnectedCallback() { }