@connectid-tools/idp-selector-react 6.10.0 → 6.11.0-alpha.1
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/Benefits.d.ts +2 -2
- package/Benefits.js +14 -14
- package/CidButton.d.ts +3 -3
- package/CidButton.js +58 -48
- package/CidButtonHowItWorks.js +9 -9
- package/CidButtonInfo.js +4 -4
- package/FullProcess.js +4 -4
- package/IdpLogoList.d.ts +2 -2
- package/IdpLogoList.js +6 -6
- package/IntroText.d.ts +2 -2
- package/IntroText.js +11 -11
- package/LearnMore.js +9 -9
- package/NoIdpError.js +3 -3
- package/Popup.d.ts +3 -3
- package/Popup.js +53 -43
- package/Process.js +7 -7
- package/README.md +4 -0
- package/ThemeContext.d.ts +1 -1
- package/analytics.d.ts +1 -1
- package/certification.d.ts +1 -1
- package/certification.js +15 -15
- package/certification.test.js +225 -225
- package/compatibility.d.ts +1 -1
- package/compatibility.test.js +25 -25
- package/index.d.ts +1 -1
- package/index.js +1 -1
- package/package.json +3 -2
- package/userAgent.d.ts +1 -1
- package/validator.d.ts +1 -1
- package/validator.test.js +20 -20
package/Benefits.d.ts
CHANGED
package/Benefits.js
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useContext } from
|
|
3
|
-
import
|
|
4
|
-
import { ThemeContext } from
|
|
2
|
+
import { useContext } from "react";
|
|
3
|
+
import "./Benefits.css";
|
|
4
|
+
import { ThemeContext } from "./ThemeContext.js";
|
|
5
5
|
export const Benefits = ({ full, introTextType }) => {
|
|
6
6
|
const theme = useContext(ThemeContext);
|
|
7
7
|
const defaultBenefits = [
|
|
8
8
|
"Reduce the data you share online by only sharing what's required",
|
|
9
|
-
|
|
9
|
+
"ConnectID does not see or store your personal information",
|
|
10
10
|
];
|
|
11
11
|
const fullBenefits = [
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
"No banking information is shared",
|
|
13
|
+
"No document uploads",
|
|
14
|
+
"Details are only shared with your review and consent",
|
|
15
|
+
"Accredited by the Australian government as an identity exchange",
|
|
16
16
|
];
|
|
17
17
|
const fullBenefitsBankDetails = [
|
|
18
18
|
"ConnectID doesn't see or store your information",
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
"No document uploads",
|
|
20
|
+
"Details are only shared with your review and consent",
|
|
21
|
+
"Accredited by the Australian government as an identity exchange",
|
|
22
22
|
];
|
|
23
|
-
const bankDetailsIntroTextTypes = [
|
|
23
|
+
const bankDetailsIntroTextTypes = ["bank-details-plus-personal-info", "bank-details-only"];
|
|
24
24
|
const adjustedFullBenefits = bankDetailsIntroTextTypes.includes(introTextType) ? fullBenefitsBankDetails : fullBenefits;
|
|
25
|
-
const listItemClasses = `cid-idp-selector-benefit ${theme ===
|
|
25
|
+
const listItemClasses = `cid-idp-selector-benefit ${theme === "light" ? "cid-idp-selector-benefit--light" : ""}`;
|
|
26
26
|
const benefits = full ? adjustedFullBenefits : defaultBenefits;
|
|
27
|
-
return (_jsx("ul", { className: `cid-idp-selector-benefits ${full ?
|
|
27
|
+
return (_jsx("ul", { className: `cid-idp-selector-benefits ${full ? "cid-idp-selector-benefits--box" : ""} ${theme === "light" ? "cid-idp-selector-benefits--light" : ""}`, "data-testid": "benefits", children: benefits.map((benefit) => (_jsxs("li", { className: listItemClasses, "data-testid": "benefit-item", children: [_jsx("svg", { className: "cid-idp-selector-benefit-icon", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.28025 8.71975L14.25 1.75L15.3105 2.8105L7.28025 10.8407L3 6.5605L4.0605 5.5L7.28025 8.71975Z" }) }), benefit] }, benefit))) }));
|
|
28
28
|
};
|
package/CidButton.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { Browser, CertificationStatus, CidButtonLabel, CidButtonSize, CidButtonTheme, CidButtonType, Claim, CompatibilityWarnings, IntroTextType, LogoMode, RequiredCertification } from
|
|
1
|
+
import "./CidButton.css";
|
|
2
|
+
import "./global.css";
|
|
3
|
+
import { Browser, CertificationStatus, CidButtonLabel, CidButtonSize, CidButtonTheme, CidButtonType, Claim, CompatibilityWarnings, IntroTextType, LogoMode, RequiredCertification } from "./types.js";
|
|
4
4
|
type CidButtonProps = {
|
|
5
5
|
onProceed: (authorisationServerId: string, compatibilityWarnings: CompatibilityWarnings) => void;
|
|
6
6
|
claims: Claim[];
|
package/CidButton.js
CHANGED
|
@@ -1,36 +1,46 @@
|
|
|
1
1
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
2
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
3
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try {
|
|
5
|
-
|
|
4
|
+
function fulfilled(value) { try {
|
|
5
|
+
step(generator.next(value));
|
|
6
|
+
}
|
|
7
|
+
catch (e) {
|
|
8
|
+
reject(e);
|
|
9
|
+
} }
|
|
10
|
+
function rejected(value) { try {
|
|
11
|
+
step(generator["throw"](value));
|
|
12
|
+
}
|
|
13
|
+
catch (e) {
|
|
14
|
+
reject(e);
|
|
15
|
+
} }
|
|
6
16
|
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
17
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
18
|
});
|
|
9
19
|
};
|
|
10
20
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
-
import { useEffect, useState } from
|
|
12
|
-
import useSWR from
|
|
13
|
-
import { Benefits } from
|
|
14
|
-
import
|
|
15
|
-
import { CidButtonHowItWorks } from
|
|
16
|
-
import { CidButtonInfo } from
|
|
17
|
-
import { FullProcess } from
|
|
18
|
-
import { IdpLogoList } from
|
|
19
|
-
import { IntroText } from
|
|
20
|
-
import { LearnMore } from
|
|
21
|
-
import { Overlay } from
|
|
22
|
-
import { Popup } from
|
|
23
|
-
import { Process } from
|
|
24
|
-
import { ThemeContext } from
|
|
25
|
-
import { initialiseAnalytics } from
|
|
26
|
-
import
|
|
27
|
-
import { getCurrentUrlOrigin } from
|
|
28
|
-
import { isIntroTextTypeValid, isRequiredClaimsValid } from
|
|
29
|
-
import detectIncognito from
|
|
30
|
-
import { getBrowserName, getDeviceType, isAndroid, isIos } from
|
|
31
|
-
import { hasCertification } from
|
|
32
|
-
import { getCompatibility } from
|
|
33
|
-
export const CidButton = ({ onProceed, claims, requiredClaims, rpLogoUrl, requiredCertifications, label =
|
|
21
|
+
import { useEffect, useState } from "react";
|
|
22
|
+
import useSWR from "swr";
|
|
23
|
+
import { Benefits } from "./Benefits.js";
|
|
24
|
+
import "./CidButton.css";
|
|
25
|
+
import { CidButtonHowItWorks } from "./CidButtonHowItWorks.js";
|
|
26
|
+
import { CidButtonInfo } from "./CidButtonInfo.js";
|
|
27
|
+
import { FullProcess } from "./FullProcess.js";
|
|
28
|
+
import { IdpLogoList } from "./IdpLogoList.js";
|
|
29
|
+
import { IntroText } from "./IntroText.js";
|
|
30
|
+
import { LearnMore } from "./LearnMore.js";
|
|
31
|
+
import { Overlay } from "./Overlay.js";
|
|
32
|
+
import { Popup } from "./Popup.js";
|
|
33
|
+
import { Process } from "./Process.js";
|
|
34
|
+
import { ThemeContext } from "./ThemeContext.js";
|
|
35
|
+
import { initialiseAnalytics } from "./analytics.js";
|
|
36
|
+
import "./global.css";
|
|
37
|
+
import { getCurrentUrlOrigin } from "./navigator.js";
|
|
38
|
+
import { isIntroTextTypeValid, isRequiredClaimsValid } from "./validator.js";
|
|
39
|
+
import detectIncognito from "./incognito.js";
|
|
40
|
+
import { getBrowserName, getDeviceType, isAndroid, isIos } from "./userAgent.js";
|
|
41
|
+
import { hasCertification } from "./certification.js";
|
|
42
|
+
import { getCompatibility } from "./compatibility.js";
|
|
43
|
+
export const CidButton = ({ onProceed, claims, requiredClaims, rpLogoUrl, requiredCertifications, label = "Verify", size = "regular", type, introTextType, fullProcessCollapsible = false, participantsUri = "https://data.directory.connectid.com.au/participants", certificationStatus = "Active", rpDataSharingDescription = "Your details will be shared with the current website.", enableManualVerification = false, showAllParticipants = false, theme = "dark", logoLockupStyle = "light", showInfoContent = false, onError = () => { }, showCompatibilityWarnings = false, supportIncognito = false, disableAnalytics = false, forceMobile = false, // only for testing purposes
|
|
34
44
|
forceIos = false, // only for testing purposes
|
|
35
45
|
forceAndroid = false, // only for testing purposes
|
|
36
46
|
forceIncognito = false, // only for testing purposes
|
|
@@ -71,7 +81,7 @@ forceBrowser = undefined, // only for testing purposes
|
|
|
71
81
|
hasHowItWorks: true,
|
|
72
82
|
hasLearnMore: false,
|
|
73
83
|
},
|
|
74
|
-
|
|
84
|
+
"medium benefits": {
|
|
75
85
|
hasIntro: true,
|
|
76
86
|
hasBenefits: true,
|
|
77
87
|
hasProcess: false,
|
|
@@ -79,7 +89,7 @@ forceBrowser = undefined, // only for testing purposes
|
|
|
79
89
|
hasHowItWorks: true,
|
|
80
90
|
hasLearnMore: false,
|
|
81
91
|
},
|
|
82
|
-
|
|
92
|
+
"medium process": {
|
|
83
93
|
hasIntro: true,
|
|
84
94
|
hasBenefits: false,
|
|
85
95
|
hasProcess: true,
|
|
@@ -87,7 +97,7 @@ forceBrowser = undefined, // only for testing purposes
|
|
|
87
97
|
hasHowItWorks: false,
|
|
88
98
|
hasLearnMore: true,
|
|
89
99
|
},
|
|
90
|
-
|
|
100
|
+
"full benefits": {
|
|
91
101
|
hasIntro: true,
|
|
92
102
|
hasBenefits: true,
|
|
93
103
|
hasProcess: false,
|
|
@@ -95,7 +105,7 @@ forceBrowser = undefined, // only for testing purposes
|
|
|
95
105
|
hasHowItWorks: true,
|
|
96
106
|
hasLearnMore: false,
|
|
97
107
|
},
|
|
98
|
-
|
|
108
|
+
"full process": {
|
|
99
109
|
hasIntro: true,
|
|
100
110
|
hasBenefits: false,
|
|
101
111
|
hasProcess: true,
|
|
@@ -117,8 +127,8 @@ forceBrowser = undefined, // only for testing purposes
|
|
|
117
127
|
incognito = undefined;
|
|
118
128
|
}
|
|
119
129
|
initialiseAnalytics((analytics) => {
|
|
120
|
-
if (typeof analytics !==
|
|
121
|
-
analytics.track(
|
|
130
|
+
if (typeof analytics !== "undefined") {
|
|
131
|
+
analytics.track("ConnectID Button Displayed", Object.assign(Object.assign({}, analyticsData), { incognito }));
|
|
122
132
|
}
|
|
123
133
|
});
|
|
124
134
|
});
|
|
@@ -127,18 +137,18 @@ forceBrowser = undefined, // only for testing purposes
|
|
|
127
137
|
track();
|
|
128
138
|
}, []);
|
|
129
139
|
const getCompatibilityPopupText = (compatibilityWarnings) => {
|
|
130
|
-
if (compatibilityWarnings.mobileOs ===
|
|
140
|
+
if (compatibilityWarnings.mobileOs === "android" && compatibilityWarnings.browser === "samsung") {
|
|
131
141
|
return "We couldn't open your identity provider's app. Samsung Internet doesn't support this step. To continue verifying your identity, please switch to a different browser.";
|
|
132
142
|
}
|
|
133
143
|
return "Looks like you're in incognito mode.\nWe can't complete verification using this identity provider while private browsing is on. To continue, please open a regular browser window and try again.";
|
|
134
144
|
};
|
|
135
145
|
const handleOnProceed = (authorisationServerId, authorisationServerName, authorisationServerCertifications) => {
|
|
136
|
-
if (typeof analytics !==
|
|
137
|
-
analytics.track(
|
|
146
|
+
if (typeof analytics !== "undefined") {
|
|
147
|
+
analytics.track("IDP Selected", Object.assign(Object.assign({}, analyticsData), { authorisationServerId, idp_name: authorisationServerName, incognito: isIncognito }));
|
|
138
148
|
}
|
|
139
149
|
setShowPopup(false);
|
|
140
|
-
const isMobile = forceMobile || getDeviceType() ===
|
|
141
|
-
const idpHasAppCertification = hasCertification(authorisationServerCertifications,
|
|
150
|
+
const isMobile = forceMobile || getDeviceType() === "mobile";
|
|
151
|
+
const idpHasAppCertification = hasCertification(authorisationServerCertifications, "Channel", "app");
|
|
142
152
|
const compatibility = getCompatibility({
|
|
143
153
|
supportIncognito,
|
|
144
154
|
idpHasAppCertification,
|
|
@@ -160,36 +170,36 @@ forceBrowser = undefined, // only for testing purposes
|
|
|
160
170
|
};
|
|
161
171
|
const handleButtonClick = () => {
|
|
162
172
|
setShowPopup(true);
|
|
163
|
-
if (typeof analytics !==
|
|
164
|
-
analytics.track(
|
|
173
|
+
if (typeof analytics !== "undefined") {
|
|
174
|
+
analytics.track("ConnectID Button Clicked", Object.assign(Object.assign({}, analyticsData), { incognito: isIncognito }));
|
|
165
175
|
}
|
|
166
176
|
};
|
|
167
177
|
const handleClosePopup = () => {
|
|
168
178
|
setShowPopup(false);
|
|
169
|
-
if (typeof analytics !==
|
|
170
|
-
analytics.track(
|
|
179
|
+
if (typeof analytics !== "undefined") {
|
|
180
|
+
analytics.track("IDP Selector Popup Close Button Clicked", Object.assign(Object.assign({}, analyticsData), { incognito: isIncognito }));
|
|
171
181
|
}
|
|
172
182
|
};
|
|
173
183
|
if (!isRequiredClaimsValid(claims, requiredClaims)) {
|
|
174
|
-
const errorMessage = `requiredClaims needs to be a subset of claims. claims: ${claims.join(
|
|
184
|
+
const errorMessage = `requiredClaims needs to be a subset of claims. claims: ${claims.join(", ")}; requiredClaims: ${requiredClaims === null || requiredClaims === void 0 ? void 0 : requiredClaims.join(", ")}.`;
|
|
175
185
|
console.log(errorMessage);
|
|
176
186
|
onError(errorMessage);
|
|
177
187
|
return null;
|
|
178
188
|
}
|
|
179
189
|
if (!isIntroTextTypeValid(type, introTextType)) {
|
|
180
|
-
const errorMessage =
|
|
190
|
+
const errorMessage = "introTextType is required when type is defined.";
|
|
181
191
|
console.log(errorMessage);
|
|
182
192
|
onError(errorMessage);
|
|
183
193
|
return null;
|
|
184
194
|
}
|
|
185
195
|
const ctaText = `${label} with ConnectID`;
|
|
186
196
|
const connectIdButtonTypeConfig = type ? typeConfigMap[type] : undefined;
|
|
187
|
-
return (_jsxs(ThemeContext.Provider, { value: theme, children: [showPopup && (_jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: handleClosePopup }), _jsx(Popup, { onProceed: handleOnProceed, onCancel: handleClosePopup, onError: onError, certificationStatus: certificationStatus, popupTitle: ctaText, requiredCertifications: requiredCertifications, rpLogoUrl: rpLogoUrl, rpDataSharingDescription: rpDataSharingDescription, claims: claims, requiredClaims: requiredClaims, enableManualVerification: enableManualVerification, showAllParticipants: showAllParticipants, participants: participants, error: error, isLoading: isLoading })] })), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasIntro) && introTextType && _jsx(IntroText, { type: introTextType }), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasBenefits) && (_jsx(Benefits, { full: type ===
|
|
188
|
-
(type ===
|
|
197
|
+
return (_jsxs(ThemeContext.Provider, { value: theme, children: [showPopup && (_jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: handleClosePopup }), _jsx(Popup, { onProceed: handleOnProceed, onCancel: handleClosePopup, onError: onError, certificationStatus: certificationStatus, popupTitle: ctaText, requiredCertifications: requiredCertifications, rpLogoUrl: rpLogoUrl, rpDataSharingDescription: rpDataSharingDescription, claims: claims, requiredClaims: requiredClaims, enableManualVerification: enableManualVerification, showAllParticipants: showAllParticipants, participants: participants, error: error, isLoading: isLoading })] })), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasIntro) && introTextType && _jsx(IntroText, { type: introTextType }), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasBenefits) && (_jsx(Benefits, { full: type === "full benefits", introTextType: introTextType || "verify-trust" })), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasProcess) &&
|
|
198
|
+
(type === "full process" ? _jsx(FullProcess, { collapsible: fullProcessCollapsible }) : _jsx(Process, {})), _jsxs("button", { className: `
|
|
189
199
|
cid-idp-selector-button cid-idp-selector-button--${theme}
|
|
190
|
-
${size ===
|
|
191
|
-
${type || showInfoContent ?
|
|
200
|
+
${size === "large" ? "cid-idp-selector-button--large" : ""}
|
|
201
|
+
${type || showInfoContent ? "cid-idp-selector-button--type" : ""}
|
|
192
202
|
`, onClick: handleButtonClick, type: "button", "data-testid": "cid-idp-selector-button", children: [_jsx("svg", { className: "cid-idp-selector-button-icon", viewBox: "0 0 132.37 157.84", children: _jsx("path", { d: "M102.22,91.65c0,19.9-16.13,36.03-36.03,36.03s-36.03-16.13-36.03-36.03,16.13-36.03,36.03-36.03c9.95,0,18.96,4.03,25.48,10.55l40.71-40.71c-6.52-6.52-10.55-15.52-10.55-25.46h-30.14c0,13.45,4.02,25.95,10.92,36.39-10.45-6.9-22.96-10.93-36.42-10.93C29.63,25.47,0,55.1,0,91.65s29.63,66.19,66.19,66.19,66.19-29.63,66.19-66.19h-30.16Z" }) }), ctaText] }), showInfoContent && (_jsxs("div", { className: "cid-show-info-content", "data-testid": "cid-show-info-content", children: [!error && _jsx(IdpLogoList, { loading: isLoading, logoLockupStyle: logoLockupStyle }), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasInfo) &&
|
|
193
|
-
introTextType !==
|
|
194
|
-
introTextType !==
|
|
203
|
+
introTextType !== "bank-details-plus-personal-info" &&
|
|
204
|
+
introTextType !== "bank-details-only" && _jsx(CidButtonInfo, {}), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasHowItWorks) && _jsx(CidButtonHowItWorks, {}), (connectIdButtonTypeConfig === null || connectIdButtonTypeConfig === void 0 ? void 0 : connectIdButtonTypeConfig.hasLearnMore) && _jsx(LearnMore, {})] }))] }));
|
|
195
205
|
};
|
package/CidButtonHowItWorks.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { getCurrentUrlOrigin } from
|
|
3
|
-
import
|
|
4
|
-
import { ThemeContext } from
|
|
5
|
-
import { useContext } from
|
|
2
|
+
import { getCurrentUrlOrigin } from "./navigator.js";
|
|
3
|
+
import "./CidButtonHowItWorks.css";
|
|
4
|
+
import { ThemeContext } from "./ThemeContext.js";
|
|
5
|
+
import { useContext } from "react";
|
|
6
6
|
export const CidButtonHowItWorks = () => {
|
|
7
7
|
const theme = useContext(ThemeContext);
|
|
8
8
|
const handleClick = () => {
|
|
9
|
-
if (typeof analytics !==
|
|
10
|
-
analytics.track(
|
|
11
|
-
source:
|
|
12
|
-
link_url:
|
|
9
|
+
if (typeof analytics !== "undefined") {
|
|
10
|
+
analytics.track("Link to External Page Clicked", {
|
|
11
|
+
source: "how_does_it_work",
|
|
12
|
+
link_url: "https://connectid.com.au/#use-cases",
|
|
13
13
|
rp_sub_brand: getCurrentUrlOrigin(),
|
|
14
14
|
});
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
|
-
return (_jsx("a", { href: "https://connectid.com.au/#use-cases", onClick: handleClick, target: "_blank", tabIndex: 0, className: `cid-idp-selector-how-it-works ${theme ===
|
|
17
|
+
return (_jsx("a", { href: "https://connectid.com.au/#use-cases", onClick: handleClick, target: "_blank", tabIndex: 0, className: `cid-idp-selector-how-it-works ${theme === "light" ? "cid-idp-selector-how-it-works--light" : ""}`, "data-testid": "how-it-works", children: "How does it work?" }));
|
|
18
18
|
};
|
package/CidButtonInfo.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { ThemeContext } from
|
|
4
|
-
import { useContext } from
|
|
2
|
+
import "./CidButtonInfo.css";
|
|
3
|
+
import { ThemeContext } from "./ThemeContext.js";
|
|
4
|
+
import { useContext } from "react";
|
|
5
5
|
export const CidButtonInfo = () => {
|
|
6
6
|
const theme = useContext(ThemeContext);
|
|
7
|
-
return (_jsxs("div", { className: `cid-idp-selector-button-info ${theme ===
|
|
7
|
+
return (_jsxs("div", { className: `cid-idp-selector-button-info ${theme === "light" ? "cid-idp-selector-button-info--light" : ""}`, "data-testid": "button-info", children: [_jsxs("svg", { className: "cid-idp-selector-button-info-icon", width: "13", height: "13", viewBox: "0 0 13 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M6.53509 12.3572C9.59207 12.3572 12.0702 9.81483 12.0702 6.67859C12.0702 3.54239 9.59207 1 6.53509 1C3.47814 1 1 3.54239 1 6.67859C1 9.81483 3.47814 12.3572 6.53509 12.3572Z", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.25781 9.29883H7.81247", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.53515 4.49472C6.7703 4.49472 6.96093 4.29915 6.96093 4.05791C6.96093 3.81666 6.7703 3.62109 6.53515 3.62109C6.3 3.62109 6.10938 3.81666 6.10938 4.05791C6.10938 4.29915 6.3 4.49472 6.53515 4.49472Z", fill: "#262626", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.53515 9.29989V6.24219H5.68359", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" })] }), "No banking or financial information is shared"] }));
|
|
8
8
|
};
|
package/FullProcess.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useContext, useState } from
|
|
3
|
-
import { ThemeContext } from
|
|
4
|
-
import
|
|
2
|
+
import { useContext, useState } from "react";
|
|
3
|
+
import { ThemeContext } from "./ThemeContext.js";
|
|
4
|
+
import "./FullProcess.css";
|
|
5
5
|
// on a wide screen the layout is like this
|
|
6
6
|
// .----------.----------.
|
|
7
7
|
// text text text
|
|
@@ -31,5 +31,5 @@ export const FullProcess = ({ collapsible = false }) => {
|
|
|
31
31
|
return true;
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
|
-
return (_jsxs("div", { className: `cid-idp-selector-full-process ${theme ===
|
|
34
|
+
return (_jsxs("div", { className: `cid-idp-selector-full-process ${theme === "light" ? "cid-idp-selector-full-process--light" : ""} ${open ? "cid-idp-selector-full-process--open" : ""} ${colorChanged() ? "open" : "close"} ${theme === "light" ? "light" : ""}`, "data-testid": "full-process", children: [_jsxs("h3", { className: "cid-idp-selector-full-process-title", children: ["How it works", collapsible && (_jsx("svg", { className: "cid-idp-selector-full-process-toggle", width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", onClick: handleToggle, "data-testid": "full-process-toggle", children: _jsx("path", { d: "M13.1684 5.3125L13.8125 5.9998L8.5 11.6875L3.1875 5.9998L3.82832 5.3125L8.5 10.3096L13.1684 5.3125Z" }) }))] }), _jsxs("div", { className: "cid-idp-selector-full-process-grid", "data-testid": "full-process-grid", children: [_jsxs("div", { className: "cid-idp-selector-full-process-step", children: [_jsx("div", { className: "cid-idp-selector-full-process-dot-wrapper", children: _jsx("div", { className: "cid-idp-selector-full-process-dot" }) }), _jsx("div", { className: "cid-idp-selector-full-process-line" })] }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle", children: "Select your trusted organisation" }), _jsxs("div", { className: "cid-idp-selector-full-process-step", children: [_jsx("div", { className: "cid-idp-selector-full-process-dot-wrapper", children: _jsx("div", { className: "cid-idp-selector-full-process-dot" }) }), _jsx("div", { className: "cid-idp-selector-full-process-line" })] }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle", children: "Log in to your existing account" }), _jsx("div", { className: "cid-idp-selector-full-process-step", children: _jsx("div", { className: "cid-idp-selector-full-process-dot-wrapper", children: _jsx("div", { className: "cid-idp-selector-full-process-dot" }) }) }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle", children: "Review your details and provide consent" }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle cid-idp-selector-full-process-subtitle--wide", children: "Select your trusted organisation" }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle cid-idp-selector-full-process-subtitle--wide", children: "Log in to your existing account" }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle cid-idp-selector-full-process-subtitle--wide", children: "Review your details and provide consent" })] })] }));
|
|
35
35
|
};
|
package/IdpLogoList.d.ts
CHANGED
package/IdpLogoList.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { Skeleton } from
|
|
2
|
+
import "./IdpLogoList.css";
|
|
3
|
+
import { Skeleton } from "./Skeleton.js";
|
|
4
4
|
export const IdpLogoList = ({ loading, logoLockupStyle }) => {
|
|
5
5
|
if (loading) {
|
|
6
6
|
return (_jsx("div", { className: "cid-idp-selector-idp-logo-list-skeleton-wrapper", children: _jsx(Skeleton, { height: "25px", width: "203px", dataTestId: "idp-logo-list-loading" }) }));
|
|
7
7
|
}
|
|
8
|
-
const isDarkMode = logoLockupStyle ===
|
|
9
|
-
const imgSrc = `https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-${isDarkMode ?
|
|
10
|
-
const dataTestId = `idp-logo-lockup-${isDarkMode ?
|
|
11
|
-
return (_jsxs("div", { className: "cid-idp-selector-idp-logo-list-wrapper", "data-testid": "idp-logo-list-wrapper", children: [_jsx("span", { className: `cid-idp-selector-idp-logo-list-label ${isDarkMode ?
|
|
8
|
+
const isDarkMode = logoLockupStyle === "dark";
|
|
9
|
+
const imgSrc = `https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-${isDarkMode ? "dark" : "light"}2.svg`;
|
|
10
|
+
const dataTestId = `idp-logo-lockup-${isDarkMode ? "dark" : "light"}`;
|
|
11
|
+
return (_jsxs("div", { className: "cid-idp-selector-idp-logo-list-wrapper", "data-testid": "idp-logo-list-wrapper", children: [_jsx("span", { className: `cid-idp-selector-idp-logo-list-label ${isDarkMode ? "cid-idp-selector-idp-logo-list-label--dark" : ""}`, "data-testid": "idp-logo-list-label", children: "Available on" }), _jsx("img", { "data-testid": dataTestId, className: "cid-idp-selector-idp-logo-list-logo", src: imgSrc, alt: "CommBank, NAB, ANZ Plus and Westpac" })] }));
|
|
12
12
|
};
|
package/IntroText.d.ts
CHANGED
package/IntroText.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { useContext } from
|
|
4
|
-
import { ThemeContext } from
|
|
2
|
+
import "./IntroText.css";
|
|
3
|
+
import { useContext } from "react";
|
|
4
|
+
import { ThemeContext } from "./ThemeContext.js";
|
|
5
5
|
const introTextContent = {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
power:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
"verify-trust": "ConnectID lets you verify your identity through details stored with an organisation you already trust, like your bank.",
|
|
7
|
+
"verify-account": "Verify your identity through an organisation you already have an account with, like your bank.",
|
|
8
|
+
power: "ConnectID gives you the power to choose how you share your details, using organisations you already trust.",
|
|
9
|
+
"sign-up": "ConnectID lets you sign up using details stored with an organisation you already trust, like your bank.",
|
|
10
|
+
"bank-details-plus-personal-info": "Provide your preferred bank account and personal details in a secure and simple way, without oversharing information.",
|
|
11
|
+
"bank-details-only": "Provide your preferred bank account details in a secure and simple way, without oversharing information.",
|
|
12
|
+
"verify-age": "Verify your age through an organisation you already have an account with, like your bank.",
|
|
13
13
|
};
|
|
14
14
|
export const IntroText = ({ type }) => {
|
|
15
15
|
const theme = useContext(ThemeContext);
|
|
16
|
-
return (_jsx("div", { className: `cid-idp-selector-intro-text ${theme ===
|
|
16
|
+
return (_jsx("div", { className: `cid-idp-selector-intro-text ${theme === "light" ? "cid-idp-selector-intro-text--light" : ""}`, "data-testid": "intro-text", children: introTextContent[type] }));
|
|
17
17
|
};
|
package/LearnMore.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useContext } from
|
|
3
|
-
import
|
|
4
|
-
import { ThemeContext } from
|
|
5
|
-
import { getCurrentUrlOrigin } from
|
|
2
|
+
import { useContext } from "react";
|
|
3
|
+
import "./LearnMore.css";
|
|
4
|
+
import { ThemeContext } from "./ThemeContext.js";
|
|
5
|
+
import { getCurrentUrlOrigin } from "./navigator.js";
|
|
6
6
|
export const LearnMore = () => {
|
|
7
7
|
const theme = useContext(ThemeContext);
|
|
8
8
|
const handleClick = () => {
|
|
9
|
-
if (typeof analytics !==
|
|
10
|
-
analytics.track(
|
|
11
|
-
source:
|
|
12
|
-
link_url:
|
|
9
|
+
if (typeof analytics !== "undefined") {
|
|
10
|
+
analytics.track("Link to External Page Clicked", {
|
|
11
|
+
source: "learn_more",
|
|
12
|
+
link_url: "https://www.connectid.com.au",
|
|
13
13
|
rp_sub_brand: getCurrentUrlOrigin(),
|
|
14
14
|
});
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
|
-
return (_jsxs("div", { className: `cid-idp-selector-learn-more ${theme ===
|
|
17
|
+
return (_jsxs("div", { className: `cid-idp-selector-learn-more ${theme === "light" ? "cid-idp-selector-learn-more--light" : ""}`, children: ["Visit", " ", _jsx("a", { href: "https://www.connectid.com.au", onClick: handleClick, target: "_blank", tabIndex: 0, "data-testid": "learn-more", children: "connectid.com.au" }), " ", "to learn more."] }));
|
|
18
18
|
};
|
package/NoIdpError.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useState } from
|
|
3
|
-
import { InfoBox } from
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
|
+
import { InfoBox } from "./InfoBox.js";
|
|
4
4
|
export const NoIdpError = ({ hasManualIdp, dataTestId }) => {
|
|
5
5
|
// This is only to trigger the alert on screen readers
|
|
6
6
|
// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
|
|
@@ -8,5 +8,5 @@ export const NoIdpError = ({ hasManualIdp, dataTestId }) => {
|
|
|
8
8
|
useEffect(() => {
|
|
9
9
|
setDisplayed(true);
|
|
10
10
|
}, []);
|
|
11
|
-
return (_jsx(InfoBox, { type: "warning", dataTestId: dataTestId, role: "alert", children: isDisplayed && (_jsxs(_Fragment, { children: [_jsx("h4", { className: "cid-idp-selector-popup-info-box-title", children: "We weren't able to load Identity Providers." }), _jsxs("p", { className: "cid-idp-selector-popup-info-box-text", children: ["Come back to us later", hasManualIdp &&
|
|
11
|
+
return (_jsx(InfoBox, { type: "warning", dataTestId: dataTestId, role: "alert", children: isDisplayed && (_jsxs(_Fragment, { children: [_jsx("h4", { className: "cid-idp-selector-popup-info-box-title", children: "We weren't able to load Identity Providers." }), _jsxs("p", { className: "cid-idp-selector-popup-info-box-text", children: ["Come back to us later", hasManualIdp && " or enter details manually instead", "."] })] })) }));
|
|
12
12
|
};
|
package/Popup.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { AuthorisationServerCertification, CertificationStatus, Claim, Participant, RequiredCertification } from
|
|
1
|
+
import "./global.css";
|
|
2
|
+
import "./Popup.css";
|
|
3
|
+
import { AuthorisationServerCertification, CertificationStatus, Claim, Participant, RequiredCertification } from "./types.js";
|
|
4
4
|
type PopupProps = {
|
|
5
5
|
onProceed: (authorisationServerId: string, authorisationServerName: string, authorisationServerCertifications: AuthorisationServerCertification[]) => void;
|
|
6
6
|
onCancel: () => void;
|