@saasquatch/mint-components 1.6.3-8 → 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.
- package/dist/cjs/{sqm-portal-email-verification-view-bb8f5aa0.js → sqm-portal-email-verification-view-155695c8.js} +24 -3
- package/dist/cjs/sqm-portal-email-verification.cjs.entry.js +29 -15
- package/dist/cjs/sqm-stencilbook.cjs.entry.js +44 -49
- package/dist/collection/components/sqm-portal-email-verification/PortalEmailVerification.stories.js +40 -46
- package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification-view.js +24 -3
- package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification.js +4 -4
- package/dist/collection/components/sqm-portal-email-verification/usePortalEmailVerification.js +26 -12
- package/dist/esm/{sqm-portal-email-verification-view-0170c6d1.js → sqm-portal-email-verification-view-99ca4596.js} +24 -3
- package/dist/esm/sqm-portal-email-verification.entry.js +29 -15
- package/dist/esm/sqm-stencilbook.entry.js +44 -49
- package/dist/esm-es5/sqm-portal-email-verification-view-99ca4596.js +1 -0
- package/dist/esm-es5/sqm-portal-email-verification.entry.js +1 -1
- package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
- package/dist/mint-components/mint-components.esm.js +1 -1
- package/dist/mint-components/p-2e308c1b.system.js +1 -1
- package/dist/mint-components/p-91f457ae.js +1 -0
- package/dist/mint-components/p-a47719a1.entry.js +1 -0
- package/dist/mint-components/p-be206a97.system.js +1 -0
- package/dist/mint-components/p-c4c53efb.entry.js +9 -0
- package/dist/mint-components/p-e344d860.system.entry.js +1 -0
- package/dist/mint-components/p-ef696d05.system.entry.js +1 -0
- package/dist/types/components/sqm-portal-email-verification/PortalEmailVerification.stories.d.ts +1 -0
- package/docs/docs.docx +0 -0
- package/docs/raisins.json +1 -1
- package/package.json +1 -1
- package/dist/esm-es5/sqm-portal-email-verification-view-0170c6d1.js +0 -1
- package/dist/mint-components/p-07c6faa1.system.js +0 -1
- package/dist/mint-components/p-084e1dc5.system.entry.js +0 -1
- package/dist/mint-components/p-5d6cef84.system.entry.js +0 -1
- package/dist/mint-components/p-62ed88a1.js +0 -1
- package/dist/mint-components/p-a2f4ff8d.entry.js +0 -9
- package/dist/mint-components/p-bd77e569.entry.js +0 -1
|
@@ -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("
|
|
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;
|
|
@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-b0129cd6.js');
|
|
6
6
|
const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
|
|
7
7
|
require('./global-a320ad05.js');
|
|
8
|
-
require('./use-callback-5d15897d.js');
|
|
8
|
+
const useCallback = require('./use-callback-5d15897d.js');
|
|
9
9
|
const index_module = require('./index.module-0b9b8891.js');
|
|
10
10
|
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-
|
|
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;
|
|
@@ -54,35 +54,49 @@ function usePortalEmailVerification(props) {
|
|
|
54
54
|
search: urlParams.toString() && "?" + urlParams.toString(),
|
|
55
55
|
});
|
|
56
56
|
}
|
|
57
|
-
resyncTimers();
|
|
57
|
+
resyncTimers(10);
|
|
58
58
|
}
|
|
59
|
-
const startTimer = () => setInterval(checkVerification,
|
|
59
|
+
const startTimer = (countdown = 10000) => setInterval(checkVerification, countdown);
|
|
60
60
|
const startCountdown = (countdown) => setInterval(() => setCountdown(countdown), 1000);
|
|
61
|
-
function resyncTimers() {
|
|
61
|
+
function resyncTimers(restartCountdown) {
|
|
62
|
+
// Clear existing timers
|
|
62
63
|
clearInterval(countdownRef.current);
|
|
63
64
|
clearInterval(timerRef.current);
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
65
|
+
// Do nothing if the tab is currently hidden
|
|
66
|
+
if (document.visibilityState === "hidden")
|
|
67
|
+
return;
|
|
68
|
+
// Restart the timer if verification has just been checked
|
|
69
|
+
if (restartCountdown)
|
|
70
|
+
setCountdown(restartCountdown);
|
|
71
|
+
// Default back to 10 if the countdown got to zero
|
|
72
|
+
let newCountdown = countdown || 10;
|
|
73
|
+
// Start timers from either the beginning or based on the previous value
|
|
74
|
+
countdownRef.current = startCountdown(restartCountdown - 1 || newCountdown - 1);
|
|
75
|
+
timerRef.current = startTimer(restartCountdown * 1000 || newCountdown * 1000);
|
|
67
76
|
}
|
|
77
|
+
const resyncTimersCallback = useCallback.useCallback(() => resyncTimers(), [countdown]);
|
|
68
78
|
// Refetch validation status timer
|
|
69
79
|
stencilHooks_module.useEffect(() => {
|
|
70
80
|
if (!timerRef.current) {
|
|
71
81
|
checkVerification();
|
|
72
82
|
timerRef.current = startTimer();
|
|
73
83
|
}
|
|
74
|
-
// Re-sync the timers if tab visibility has changed
|
|
75
|
-
document.addEventListener("visibilitychange", () => resyncTimers());
|
|
76
84
|
return () => {
|
|
77
85
|
clearInterval(timerRef.current);
|
|
78
|
-
document.removeEventListener("visibilitychange", () => resyncTimers());
|
|
79
86
|
};
|
|
80
87
|
}, []);
|
|
81
88
|
// Countdown timer
|
|
82
89
|
stencilHooks_module.useEffect(() => {
|
|
83
|
-
if (countdown > 0)
|
|
90
|
+
if (countdown > 0) {
|
|
91
|
+
clearInterval(countdownRef.current);
|
|
84
92
|
countdownRef.current = startCountdown(countdown - 1);
|
|
85
|
-
|
|
93
|
+
}
|
|
94
|
+
// Re-sync the timers if tab visibility has changed
|
|
95
|
+
document.addEventListener("visibilitychange", resyncTimersCallback);
|
|
96
|
+
return () => {
|
|
97
|
+
clearInterval(countdownRef.current);
|
|
98
|
+
document.removeEventListener("visibilitychange", resyncTimersCallback);
|
|
99
|
+
};
|
|
86
100
|
}, [countdown]);
|
|
87
101
|
return {
|
|
88
102
|
states: {
|
|
@@ -136,12 +150,12 @@ const PortalEmailVerification = class {
|
|
|
136
150
|
* @uiName Email Verification Status Text
|
|
137
151
|
* @uiWidget textArea
|
|
138
152
|
*/
|
|
139
|
-
this.verificationStatusMessage = "
|
|
153
|
+
this.verificationStatusMessage = "Checking verification status in {countdown}";
|
|
140
154
|
/**
|
|
141
155
|
* @uiName Email Verification Checking Text
|
|
142
156
|
* @uiWidget textArea
|
|
143
157
|
*/
|
|
144
|
-
this.verificationLoadingMessage = "
|
|
158
|
+
this.verificationLoadingMessage = "Checking verification status";
|
|
145
159
|
stencilHooks_module.h$1(this);
|
|
146
160
|
}
|
|
147
161
|
disconnectedCallback() { }
|
|
@@ -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-
|
|
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
|
|
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
|
-
|
|
4267
|
-
|
|
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
|
-
|
|
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
|
-
|
|
4315
|
-
loading: false,
|
|
4306
|
+
...defaultStates,
|
|
4316
4307
|
success: true,
|
|
4308
|
+
isVerified: true,
|
|
4317
4309
|
},
|
|
4318
|
-
callbacks:
|
|
4319
|
-
|
|
4320
|
-
|
|
4321
|
-
|
|
4322
|
-
|
|
4323
|
-
|
|
4324
|
-
|
|
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` | `\"
|
|
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
|
-
|
|
13
|
-
|
|
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
|
-
|
|
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
|
-
|
|
61
|
-
loading: false,
|
|
52
|
+
...defaultStates,
|
|
62
53
|
success: true,
|
|
54
|
+
isVerified: true,
|
|
63
55
|
},
|
|
64
|
-
callbacks:
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
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)));
|
|
@@ -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("
|
|
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 = "
|
|
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 = "
|
|
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": "\"
|
|
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": "\"
|
|
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
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { navigation, useManagedIdentitySessionQuery, useRequestVerificationEmailMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
|
|
2
|
-
import { useEffect, useRef, useState } from "@saasquatch/universal-hooks";
|
|
2
|
+
import { useCallback, useEffect, useRef, useState, } from "@saasquatch/universal-hooks";
|
|
3
3
|
export function usePortalEmailVerification(props) {
|
|
4
4
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
5
5
|
const [request, { loading, data, errors }] = useRequestVerificationEmailMutation();
|
|
@@ -41,35 +41,49 @@ export function usePortalEmailVerification(props) {
|
|
|
41
41
|
search: urlParams.toString() && "?" + urlParams.toString(),
|
|
42
42
|
});
|
|
43
43
|
}
|
|
44
|
-
resyncTimers();
|
|
44
|
+
resyncTimers(10);
|
|
45
45
|
}
|
|
46
|
-
const startTimer = () => setInterval(checkVerification,
|
|
46
|
+
const startTimer = (countdown = 10000) => setInterval(checkVerification, countdown);
|
|
47
47
|
const startCountdown = (countdown) => setInterval(() => setCountdown(countdown), 1000);
|
|
48
|
-
function resyncTimers() {
|
|
48
|
+
function resyncTimers(restartCountdown) {
|
|
49
|
+
// Clear existing timers
|
|
49
50
|
clearInterval(countdownRef.current);
|
|
50
51
|
clearInterval(timerRef.current);
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
// Do nothing if the tab is currently hidden
|
|
53
|
+
if (document.visibilityState === "hidden")
|
|
54
|
+
return;
|
|
55
|
+
// Restart the timer if verification has just been checked
|
|
56
|
+
if (restartCountdown)
|
|
57
|
+
setCountdown(restartCountdown);
|
|
58
|
+
// Default back to 10 if the countdown got to zero
|
|
59
|
+
let newCountdown = countdown || 10;
|
|
60
|
+
// Start timers from either the beginning or based on the previous value
|
|
61
|
+
countdownRef.current = startCountdown(restartCountdown - 1 || newCountdown - 1);
|
|
62
|
+
timerRef.current = startTimer(restartCountdown * 1000 || newCountdown * 1000);
|
|
54
63
|
}
|
|
64
|
+
const resyncTimersCallback = useCallback(() => resyncTimers(), [countdown]);
|
|
55
65
|
// Refetch validation status timer
|
|
56
66
|
useEffect(() => {
|
|
57
67
|
if (!timerRef.current) {
|
|
58
68
|
checkVerification();
|
|
59
69
|
timerRef.current = startTimer();
|
|
60
70
|
}
|
|
61
|
-
// Re-sync the timers if tab visibility has changed
|
|
62
|
-
document.addEventListener("visibilitychange", () => resyncTimers());
|
|
63
71
|
return () => {
|
|
64
72
|
clearInterval(timerRef.current);
|
|
65
|
-
document.removeEventListener("visibilitychange", () => resyncTimers());
|
|
66
73
|
};
|
|
67
74
|
}, []);
|
|
68
75
|
// Countdown timer
|
|
69
76
|
useEffect(() => {
|
|
70
|
-
if (countdown > 0)
|
|
77
|
+
if (countdown > 0) {
|
|
78
|
+
clearInterval(countdownRef.current);
|
|
71
79
|
countdownRef.current = startCountdown(countdown - 1);
|
|
72
|
-
|
|
80
|
+
}
|
|
81
|
+
// Re-sync the timers if tab visibility has changed
|
|
82
|
+
document.addEventListener("visibilitychange", resyncTimersCallback);
|
|
83
|
+
return () => {
|
|
84
|
+
clearInterval(countdownRef.current);
|
|
85
|
+
document.removeEventListener("visibilitychange", resyncTimersCallback);
|
|
86
|
+
};
|
|
73
87
|
}, [countdown]);
|
|
74
88
|
return {
|
|
75
89
|
states: {
|