@connectid-tools/idp-selector-react 6.10.0-alpha.0 → 6.10.0-alpha.10
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/CidButton.d.ts +6 -2
- package/CidButton.js +41 -13
- package/CidButtonHowItWorks.js +7 -9
- package/FullProcess.js +1 -1
- package/IdpLogoList.js +1 -1
- package/LearnMore.js +7 -9
- package/Popup.js +10 -10
- package/Process.css +5 -2
- package/Process.js +1 -1
- package/README.md +73 -25
- package/analytics.d.ts +2 -1
- package/analytics.js +8 -2
- package/compatibility.d.ts +3 -0
- package/compatibility.js +35 -0
- package/{compability.test.js → compatibility.test.js} +47 -23
- package/package.json +6 -6
- package/types.d.ts +6 -5
- package/userAgent.d.ts +0 -2
- package/userAgent.js +0 -2
- package/compability.d.ts +0 -3
- package/compability.js +0 -36
- /package/{compability.test.d.ts → compatibility.test.d.ts} +0 -0
package/CidButton.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import './CidButton.css';
|
|
2
2
|
import './global.css';
|
|
3
|
-
import { CertificationStatus, CidButtonLabel, CidButtonSize, CidButtonTheme, CidButtonType, Claim,
|
|
3
|
+
import { Browser, CertificationStatus, CidButtonLabel, CidButtonSize, CidButtonTheme, CidButtonType, Claim, CompatibilityWarnings, IntroTextType, LogoMode, RequiredCertification } from './types';
|
|
4
4
|
type CidButtonProps = {
|
|
5
|
-
onProceed: (authorisationServerId: string,
|
|
5
|
+
onProceed: (authorisationServerId: string, compatibilityWarnings: CompatibilityWarnings) => void;
|
|
6
6
|
claims: Claim[];
|
|
7
7
|
requiredClaims?: Claim[];
|
|
8
8
|
rpLogoUrl?: string;
|
|
@@ -21,10 +21,14 @@ type CidButtonProps = {
|
|
|
21
21
|
logoLockupStyle?: LogoMode;
|
|
22
22
|
showInfoContent?: boolean;
|
|
23
23
|
onError?: (error: string) => void;
|
|
24
|
+
showCompatibilityWarnings?: boolean;
|
|
25
|
+
supportIncognito?: boolean;
|
|
26
|
+
disableAnalytics?: boolean;
|
|
24
27
|
forceMobile?: boolean;
|
|
25
28
|
forceIos?: boolean;
|
|
26
29
|
forceAndroid?: boolean;
|
|
27
30
|
forceIncognito?: boolean;
|
|
31
|
+
forceBrowser?: Browser;
|
|
28
32
|
};
|
|
29
33
|
export declare const CidButton: React.FC<CidButtonProps>;
|
|
30
34
|
export {};
|
package/CidButton.js
CHANGED
|
@@ -22,18 +22,19 @@ import { Overlay } from './Overlay';
|
|
|
22
22
|
import { Popup } from './Popup';
|
|
23
23
|
import { Process } from './Process';
|
|
24
24
|
import { ThemeContext } from './ThemeContext';
|
|
25
|
-
import {
|
|
25
|
+
import { initialiseAnalytics } from './analytics';
|
|
26
26
|
import './global.css';
|
|
27
27
|
import { getCurrentUrlOrigin } from './navigator';
|
|
28
28
|
import { isIntroTextTypeValid, isRequiredClaimsValid } from './validator';
|
|
29
29
|
import detectIncognito from './incognito';
|
|
30
|
-
import { getDeviceType, isAndroid,
|
|
30
|
+
import { getBrowserName, getDeviceType, isAndroid, isIos } from './userAgent';
|
|
31
31
|
import { hasCertification } from './certification';
|
|
32
|
-
import {
|
|
33
|
-
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 = () => { }, forceMobile = false, // only for testing purposes
|
|
32
|
+
import { getCompatibility } from './compatibility';
|
|
33
|
+
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
34
|
forceIos = false, // only for testing purposes
|
|
35
35
|
forceAndroid = false, // only for testing purposes
|
|
36
36
|
forceIncognito = false, // only for testing purposes
|
|
37
|
+
forceBrowser = undefined, // only for testing purposes
|
|
37
38
|
}) => {
|
|
38
39
|
const { data: participants, error, isLoading, } = useSWR(participantsUri, () => __awaiter(void 0, void 0, void 0, function* () {
|
|
39
40
|
const response = yield fetch(participantsUri);
|
|
@@ -41,7 +42,6 @@ forceIncognito = false, // only for testing purposes
|
|
|
41
42
|
throw new Error(response.statusText);
|
|
42
43
|
return response.json();
|
|
43
44
|
}));
|
|
44
|
-
useAnalytics();
|
|
45
45
|
const [showPopup, setShowPopup] = useState(false);
|
|
46
46
|
const [isIncognito, setIsIncognito] = useState();
|
|
47
47
|
const analyticsData = {
|
|
@@ -115,33 +115,61 @@ forceIncognito = false, // only for testing purposes
|
|
|
115
115
|
setIsIncognito(undefined);
|
|
116
116
|
incognito = undefined;
|
|
117
117
|
}
|
|
118
|
-
|
|
118
|
+
initialiseAnalytics((analytics) => {
|
|
119
|
+
if (typeof analytics !== 'undefined') {
|
|
120
|
+
analytics.track('ConnectID Button Displayed', Object.assign(Object.assign({}, analyticsData), { incognito }));
|
|
121
|
+
}
|
|
122
|
+
});
|
|
119
123
|
});
|
|
124
|
+
if (disableAnalytics)
|
|
125
|
+
return;
|
|
120
126
|
track();
|
|
121
127
|
}, []);
|
|
128
|
+
const getCompatibilityConfirmText = (compatibilityWarnings) => {
|
|
129
|
+
if (compatibilityWarnings.mobileOs === 'android' && compatibilityWarnings.browser === 'samsung') {
|
|
130
|
+
return 'It looks like you are using Samsung Browser. This generally will not work - we suggest using Chrome and trying again.\nClick on "Cancel" to abort or "OK" to proceed.';
|
|
131
|
+
}
|
|
132
|
+
return 'It looks like you are in incognito mode. This generally will not work - we suggest switching out of incognito mode and trying again.\nClick on "Cancel" to abort or "OK" to proceed.';
|
|
133
|
+
};
|
|
122
134
|
const handleOnProceed = (authorisationServerId, authorisationServerName, authorisationServerCertifications) => {
|
|
123
|
-
|
|
135
|
+
if (typeof analytics !== 'undefined') {
|
|
136
|
+
analytics.track('IDP Selected', Object.assign(Object.assign({}, analyticsData), { authorisationServerId, idp_name: authorisationServerName, incognito: isIncognito }));
|
|
137
|
+
}
|
|
124
138
|
setShowPopup(false);
|
|
125
139
|
const isMobile = forceMobile || getDeviceType() === 'mobile';
|
|
126
140
|
const idpHasAppCertification = hasCertification(authorisationServerCertifications, 'Channel', 'app');
|
|
127
|
-
const
|
|
141
|
+
const compatibility = getCompatibility({
|
|
142
|
+
supportIncognito,
|
|
128
143
|
idpHasAppCertification,
|
|
129
144
|
isMobile,
|
|
130
145
|
isIncognito: forceIncognito || !!isIncognito,
|
|
131
146
|
isAndroid: forceAndroid || isAndroid(),
|
|
132
147
|
isIos: forceIos || isIos(),
|
|
133
|
-
|
|
134
|
-
isChromeBrowser: isChromeBrowser(),
|
|
148
|
+
browser: forceBrowser || getBrowserName(),
|
|
135
149
|
});
|
|
136
|
-
|
|
150
|
+
if (showCompatibilityWarnings && compatibility.mightFail) {
|
|
151
|
+
const confirmText = getCompatibilityConfirmText(compatibility);
|
|
152
|
+
if (confirm(confirmText)) {
|
|
153
|
+
onProceed(authorisationServerId, compatibility);
|
|
154
|
+
}
|
|
155
|
+
else {
|
|
156
|
+
setShowPopup(true);
|
|
157
|
+
}
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
onProceed(authorisationServerId, compatibility);
|
|
137
161
|
};
|
|
138
162
|
const handleButtonClick = () => {
|
|
139
163
|
setShowPopup(true);
|
|
140
|
-
|
|
164
|
+
if (typeof analytics !== 'undefined') {
|
|
165
|
+
analytics.track('ConnectID Button Clicked', Object.assign(Object.assign({}, analyticsData), { incognito: isIncognito }));
|
|
166
|
+
}
|
|
141
167
|
};
|
|
142
168
|
const handleClosePopup = () => {
|
|
143
169
|
setShowPopup(false);
|
|
144
|
-
|
|
170
|
+
if (typeof analytics !== 'undefined') {
|
|
171
|
+
analytics.track('IDP Selector Popup Close Button Clicked', Object.assign(Object.assign({}, analyticsData), { incognito: isIncognito }));
|
|
172
|
+
}
|
|
145
173
|
};
|
|
146
174
|
if (!isRequiredClaimsValid(claims, requiredClaims)) {
|
|
147
175
|
const errorMessage = `requiredClaims needs to be a subset of claims. claims: ${claims.join(', ')}; requiredClaims: ${requiredClaims === null || requiredClaims === void 0 ? void 0 : requiredClaims.join(', ')}.`;
|
package/CidButtonHowItWorks.js
CHANGED
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useAnalytics } from './analytics';
|
|
3
2
|
import { getCurrentUrlOrigin } from './navigator';
|
|
4
3
|
import './CidButtonHowItWorks.css';
|
|
5
4
|
import { ThemeContext } from './ThemeContext';
|
|
6
5
|
import { useContext } from 'react';
|
|
7
6
|
export const CidButtonHowItWorks = () => {
|
|
8
|
-
useAnalytics();
|
|
9
7
|
const theme = useContext(ThemeContext);
|
|
10
8
|
const handleClick = () => {
|
|
11
|
-
if (
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
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
|
+
rp_sub_brand: getCurrentUrlOrigin(),
|
|
14
|
+
});
|
|
15
|
+
}
|
|
18
16
|
};
|
|
19
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?" }));
|
|
20
18
|
};
|
package/FullProcess.js
CHANGED
|
@@ -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 === '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("
|
|
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.js
CHANGED
|
@@ -12,5 +12,5 @@ export const IdpLogoList = ({ loading, logoLockupStyle }) => {
|
|
|
12
12
|
const isDarkMode = logoLockupStyle === 'dark';
|
|
13
13
|
const imgSrc = isDarkMode ? logoLockupUrl.dark : logoLockupUrl.light;
|
|
14
14
|
const dataTestId = isDarkMode ? 'logo-lockup-dark' : 'logo-lockup-light';
|
|
15
|
-
return (_jsx("div", { className: "cid-idp-selector-idp-logo-list-wrapper", "data-testid": "idp-logo-list-wrapper", children: _jsx("img", { "data-testid": dataTestId, className: "cid-logo-lockup", src: imgSrc, alt: "
|
|
15
|
+
return (_jsx("div", { className: "cid-idp-selector-idp-logo-list-wrapper", "data-testid": "idp-logo-list-wrapper", children: _jsx("img", { "data-testid": dataTestId, className: "cid-logo-lockup", src: imgSrc, alt: "Available on: CommBank, NAB, ANZ Plus and Westpac" }) }));
|
|
16
16
|
};
|
package/LearnMore.js
CHANGED
|
@@ -2,19 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useContext } from 'react';
|
|
3
3
|
import './LearnMore.css';
|
|
4
4
|
import { ThemeContext } from './ThemeContext';
|
|
5
|
-
import { useAnalytics } from './analytics';
|
|
6
5
|
import { getCurrentUrlOrigin } from './navigator';
|
|
7
6
|
export const LearnMore = () => {
|
|
8
|
-
useAnalytics();
|
|
9
7
|
const theme = useContext(ThemeContext);
|
|
10
8
|
const handleClick = () => {
|
|
11
|
-
if (
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
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
|
+
rp_sub_brand: getCurrentUrlOrigin(),
|
|
14
|
+
});
|
|
15
|
+
}
|
|
18
16
|
};
|
|
19
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."] }));
|
|
20
18
|
};
|
package/Popup.js
CHANGED
|
@@ -11,7 +11,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
11
11
|
import { useEffect, useRef, useState } from 'react';
|
|
12
12
|
import ReactDOM from 'react-dom';
|
|
13
13
|
import { useMediaQuery } from 'react-responsive';
|
|
14
|
-
import { useAnalytics } from './analytics';
|
|
15
14
|
import { filterAuthorisationServers, getManualAuthorisationServer } from './certification';
|
|
16
15
|
import './global.css';
|
|
17
16
|
import { InfoBox } from './InfoBox';
|
|
@@ -25,7 +24,6 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
|
|
|
25
24
|
const [isIncognito, setIsIncognito] = useState();
|
|
26
25
|
const [showClaims, setShowClaims] = useState(false); // mobile only
|
|
27
26
|
const popupRef = useRef(null);
|
|
28
|
-
useAnalytics();
|
|
29
27
|
const isMobile = useMediaQuery({ query: '(max-width: 482px)' });
|
|
30
28
|
const infoboxLinkRef = useRef(null);
|
|
31
29
|
const closeButtonRef = useRef(null);
|
|
@@ -101,12 +99,14 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
|
|
|
101
99
|
}
|
|
102
100
|
};
|
|
103
101
|
const handleConnectIdLinkClicked = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
102
|
+
if (typeof analytics !== 'undefined') {
|
|
103
|
+
analytics.track('Link to External Page Clicked', {
|
|
104
|
+
source: 'what_is_connectid',
|
|
105
|
+
link_url: 'https://www.connectid.com.au',
|
|
106
|
+
rp_sub_brand: getCurrentUrlOrigin(),
|
|
107
|
+
incognito: isIncognito,
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
110
|
});
|
|
111
111
|
const renderClaimList = () => {
|
|
112
112
|
return (_jsx("ul", { id: "cid-idp-selector-popup-claims", className: `cid-idp-selector-popup-claims ${showClaims ? 'cid-idp-selector-popup-claims--visible' : ''}`, "data-testid": "claims", children: sortClaims(claims).map((claim) => (_jsxs("li", { className: "cid-idp-selector-popup-claim", "data-testid": `claim-${claim}`, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z", fill: "#BEEDD2" }), _jsx("path", { d: "M4.81445 8.14121L6.95437 10.2811L11.472 5.76465", stroke: "#262626", strokeWidth: "1.7", strokeLinecap: "round" })] }), claimsDescription[claim]] }, claim))) }));
|
|
@@ -145,7 +145,7 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
|
|
|
145
145
|
});
|
|
146
146
|
const missingAuthorisationServerWithProfileRedirectFapi2 = authorisationServerWithProfileRedirectFapi2.length !== filteredAuthorisationServers.length;
|
|
147
147
|
const hasManualIdp = enableManualVerification && !!manualAuthorisationServer;
|
|
148
|
-
return (_jsxs(_Fragment, { children: [filteredAuthorisationServers.length > 0 ? (_jsxs("div", { className: "cid-idp-selector-popup-provider-wrapper", children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Choose a provider" }), _jsx("ul", { className: "cid-idp-selector-popup-participants", "data-testid": "participants", children: filteredAuthorisationServers.map(({ AuthorisationServerId, CustomerFriendlyName, CustomerFriendlyLogoUri, AuthorisationServerCertifications }) => (_jsxs("li", { "data-testid": "participant", className: "cid-idp-selector-popup-participant", tabIndex: 0, onClick: () => onProceed(AuthorisationServerId, CustomerFriendlyName, AuthorisationServerCertifications), children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon", src: CustomerFriendlyLogoUri, alt:
|
|
148
|
+
return (_jsxs(_Fragment, { children: [filteredAuthorisationServers.length > 0 ? (_jsxs("div", { className: "cid-idp-selector-popup-provider-wrapper", children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Choose a provider" }), _jsx("ul", { className: "cid-idp-selector-popup-participants", "data-testid": "participants", children: filteredAuthorisationServers.map(({ AuthorisationServerId, CustomerFriendlyName, CustomerFriendlyLogoUri, AuthorisationServerCertifications }) => (_jsxs("li", { "data-testid": "participant", className: "cid-idp-selector-popup-participant", tabIndex: 0, onClick: () => onProceed(AuthorisationServerId, CustomerFriendlyName, AuthorisationServerCertifications), children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon", src: CustomerFriendlyLogoUri, alt: "" }), _jsx("div", { className: "cid-idp-selector-popup-participant-name", title: CustomerFriendlyName, "data-testid": "participant-name", children: CustomerFriendlyName })] }, AuthorisationServerId))) }), missingAuthorisationServerWithProfileRedirectFapi2 && (_jsxs("div", { className: "cid-idp-selector-popup-missing", "data-testid": "missing-auth-server", children: [_jsx("h4", { className: "cid-idp-selector-popup-missing-title", children: "Can't find your provider?" }), _jsx("p", { className: "cid-idp-selector-popup-missing-text", children: "Not all of our identity providers are available for this verification." })] }))] })) : (_jsx("div", { className: "cid-idp-selector-popup-info-box-error-wrapper", "data-testid": "popup-error-info-box", children: _jsx(NoIdpError, { hasManualIdp: hasManualIdp }) })), enableManualVerification && manualAuthorisationServer && (_jsx(_Fragment, { children: _jsxs("p", { className: "cid-idp-selector-popup-manual", children: [_jsx("span", { className: "cid-idp-selector-popup-manual-title", "data-testid": "manual-verification-text", children: "Use a document to verify your identity" }), _jsx("span", { className: "cid-idp-selector-popup-manual-action", tabIndex: 0, onClick: () => onProceed(manualAuthorisationServer.AuthorisationServerId, manualAuthorisationServer.CustomerFriendlyName, manualAuthorisationServer.AuthorisationServerCertifications), "data-testid": "manual-verification-action", role: "link", children: "Verify with a document" }), _jsx("span", { className: "cid-idp-selector-popup-manual-description", children: "ConnectID does not collect, hold or store your personal information at any time." })] }) }))] }));
|
|
149
149
|
};
|
|
150
|
-
return ReactDOM.createPortal(_jsxs("div", { className: "cid-idp-selector-popup", tabIndex: 0, ref: popupRef, onKeyDown: handleEnterEsc, children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-container", children: [_jsxs("div", { className: "cid-idp-selector-popup-logos", children: [_jsxs("svg", { role: "img", focusable: "false", className: "cid-idp-selector-popup-logo", viewBox: "0 0 132.37 157.84", "data-testid": "cid-logo", children: [_jsx("title", { children: "ConnectID logo" }), _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" })] }), rpLogoUrl && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-dots", children: [_jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" })] }), _jsx("img", { className: "cid-idp-selector-popup-logo-rp", src: rpLogoUrl, alt: "RP logo", "data-testid": "rp-logo" })] }))] }), _jsxs("button", { "aria-label": "Close popup", "data-testid": "popup-close", className: "cid-idp-selector-popup-close", onClick: onCancel, tabIndex: 0, ref: closeButtonRef, children: [_jsx("span", { className: "cid-idp-selector-popup-close-label", children: "Close" }), _jsx("svg", { clipRule: "evenodd", fillRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z" }) })] })] }), _jsxs("div", { className: "cid-idp-selector-popup-title-description-container", children: [_jsx("h2", { className: "cid-idp-selector-popup-title", children: popupTitle }), _jsx("p", { className: "cid-idp-selector-popup-description", children: rpDataSharingDescription })] }), renderClaims(), renderAuthorisationServers(), _jsx("div", { className: "cid-idp-selector-popup-info-box-wrapper", children: _jsxs(InfoBox, { children: [_jsx("
|
|
150
|
+
return ReactDOM.createPortal(_jsxs("div", { className: "cid-idp-selector-popup", tabIndex: 0, ref: popupRef, onKeyDown: handleEnterEsc, children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-container", children: [_jsxs("div", { className: "cid-idp-selector-popup-logos", children: [_jsxs("svg", { role: "img", focusable: "false", className: "cid-idp-selector-popup-logo", viewBox: "0 0 132.37 157.84", "data-testid": "cid-logo", children: [_jsx("title", { children: "ConnectID logo" }), _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" })] }), rpLogoUrl && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-dots", children: [_jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" })] }), _jsx("img", { className: "cid-idp-selector-popup-logo-rp", src: rpLogoUrl, alt: "RP logo", "data-testid": "rp-logo" })] }))] }), _jsxs("button", { "aria-label": "Close popup", "data-testid": "popup-close", className: "cid-idp-selector-popup-close", onClick: onCancel, tabIndex: 0, ref: closeButtonRef, children: [_jsx("span", { className: "cid-idp-selector-popup-close-label", children: "Close" }), _jsx("svg", { clipRule: "evenodd", fillRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z" }) })] })] }), _jsxs("div", { className: "cid-idp-selector-popup-title-description-container", children: [_jsx("h2", { className: "cid-idp-selector-popup-title", children: popupTitle }), _jsx("p", { className: "cid-idp-selector-popup-description", children: rpDataSharingDescription })] }), renderClaims(), renderAuthorisationServers(), _jsx("div", { className: "cid-idp-selector-popup-info-box-wrapper", children: _jsxs(InfoBox, { children: [_jsx("h2", { className: "cid-idp-selector-popup-info-box-title", children: "What is ConnectID?" }), _jsxs("p", { className: "cid-idp-selector-popup-info-box-text", "data-testid": "whats-cid-text", children: ["ConnectID is an Australian-owned digital identity solution which allows you to securely prove who you are. ConnectID does not see or store your personal data. Visit", ' ', _jsx("a", { className: "cid-idp-selector-popup-info-box-link", href: "https://www.connectid.com.au", onClick: handleConnectIdLinkClicked, target: "_blank", tabIndex: 0, "data-testid": "info-box-link", ref: infoboxLinkRef, children: "connectid.com.au" }), ' ', "to find out more."] })] }) })] }), document.querySelector('body'));
|
|
151
151
|
};
|
package/Process.css
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
.cid-idp-selector-process {
|
|
2
|
+
padding: 0;
|
|
3
|
+
margin-top: -12px;
|
|
4
|
+
margin-bottom: 9px;
|
|
5
|
+
}
|
|
6
|
+
.cid-idp-selector-process-item {
|
|
2
7
|
display: grid;
|
|
3
8
|
grid-template-columns: 6px 1fr;
|
|
4
9
|
column-gap: 8px;
|
|
5
|
-
margin-top: -12px;
|
|
6
|
-
margin-bottom: 9px;
|
|
7
10
|
}
|
|
8
11
|
.cid-idp-selector-process-dot {
|
|
9
12
|
width: 7px;
|
package/Process.js
CHANGED
|
@@ -8,5 +8,5 @@ export const Process = () => {
|
|
|
8
8
|
const lineClasses = `cid-idp-selector-process-line ${theme === 'light' ? 'cid-idp-selector-process-line--grey' : ''}`;
|
|
9
9
|
const lastLineClass = `cid-idp-selector-process-line-last ${theme === 'light' ? 'cid-idp-selector-process-line-last--grey' : ''}`;
|
|
10
10
|
const stepClasses = `cid-idp-selector-process-step ${theme === 'light' ? 'cid-idp-selector-process-step--light' : ''}`;
|
|
11
|
-
return (_jsxs("
|
|
11
|
+
return (_jsxs("ol", { className: "cid-idp-selector-process", "data-testid": "process", children: [_jsxs("li", { className: "cid-idp-selector-process-item", children: [_jsxs("div", { children: [_jsx("div", { className: "cid-idp-selector-process-filler" }), _jsx("div", { className: dotClasses, "data-testid": "process-dot" }), _jsx("div", { className: lineClasses, "data-testid": "process-line" })] }), _jsx("div", { className: stepClasses, "data-testid": "process-step", children: "Select your bank" })] }), _jsxs("li", { className: "cid-idp-selector-process-item", children: [_jsxs("div", { children: [_jsx("div", { className: lineClasses }), _jsx("div", { className: dotClasses }), _jsx("div", { className: lineClasses })] }), _jsx("div", { className: stepClasses, children: "Log in to your account" })] }), _jsxs("li", { className: "cid-idp-selector-process-item", children: [_jsxs("div", { children: [_jsx("div", { className: lastLineClass }), _jsx("div", { className: dotClasses }), _jsx("div", { className: "cid-idp-selector-process-filler" })] }), _jsx("div", { className: stepClasses, children: "Review your details and provide consent" })] })] }));
|
|
12
12
|
};
|
package/README.md
CHANGED
|
@@ -14,7 +14,7 @@ Place the `<CidButton>` component where you want to render the ConnectID button
|
|
|
14
14
|
import { CidButton } from '@connectid-tools/idp-selector-react'
|
|
15
15
|
|
|
16
16
|
<CidButton
|
|
17
|
-
onProceed={(authorisationServerClicked: string,
|
|
17
|
+
onProceed={(authorisationServerClicked: string, compatibilityWarnings: CompatibilityWarnings) => {
|
|
18
18
|
/* do something here */
|
|
19
19
|
}}
|
|
20
20
|
claims={['email']}
|
|
@@ -29,32 +29,34 @@ Your page should render a widget similar to this 👇 And when the button is cli
|
|
|
29
29
|
|
|
30
30
|
## ⭐ CidButton Options
|
|
31
31
|
|
|
32
|
-
|
|
|
33
|
-
|
|
34
|
-
| onProceed
|
|
35
|
-
| claims
|
|
36
|
-
| requiredClaims
|
|
37
|
-
| label
|
|
38
|
-
| size
|
|
39
|
-
| participantsUri
|
|
40
|
-
| certificationStatus
|
|
41
|
-
| requiredCertifications
|
|
42
|
-
| rpLogoUrl
|
|
43
|
-
| rpDataSharingDescription |
|
|
44
|
-
| enableManualVerification |
|
|
45
|
-
| type
|
|
46
|
-
| introTextType
|
|
47
|
-
| fullProcessCollapsible
|
|
48
|
-
| showAllParticipants
|
|
49
|
-
| theme
|
|
50
|
-
| logoLockupStyle
|
|
51
|
-
| showInfoContent
|
|
52
|
-
| onError
|
|
53
|
-
|
|
54
|
-
|
|
32
|
+
| option | description | type | required | default |
|
|
33
|
+
|-----|-------------|------|----------|---------|
|
|
34
|
+
| onProceed | Callback when Proceed button is clicked | (id: string, warnings: CompatibilityWarnings) => void | yes | - |
|
|
35
|
+
| claims | Claims to display and request from IDP | Claim[] | yes | - |
|
|
36
|
+
| requiredClaims | Subset of `claims` that must be supported | Claim[] | no (`claims` used if not set) | - |
|
|
37
|
+
| label | Button label (avoid 'Sign Up') | 'Verify'\|'Login'\|'Sign Up'\|'Age check'\|'Sign up'\|'Authenticate'\|'Checkout' | no | 'Verify' |
|
|
38
|
+
| size | Button size | 'regular'\|'large' | no | 'regular' |
|
|
39
|
+
| participantsUri | API URI for IDPs | string | no | 'https://data.directory.connectid.com.au/participants' |
|
|
40
|
+
| certificationStatus | Filter IDPs by certification | 'Active'\|'All' | no | 'Active' |
|
|
41
|
+
| requiredCertifications | Filter by certifications | RequiredCertification[] | no | All certifications |
|
|
42
|
+
| rpLogoUrl | RP logo URL (40x40) | URL | no | No logo |
|
|
43
|
+
| rpDataSharingDescription | Explains how data is used | string | no | 'Your details will be shared with the current website.' |
|
|
44
|
+
| enableManualVerification | Show manual verification option | boolean | no | false |
|
|
45
|
+
| type | Widget type [More](#type) | 'tiny'\|'medium benefits'\|'medium process'\|'full benefits'\|'full process' | no | undefined |
|
|
46
|
+
| introTextType | Text above button [More](#introTextType) | 'verify-trust'\|'verify-account'\|'power'\|'sign-up'\|'bank-details-plus-personal-info'\|'bank-details-only'\|'verify-age' | yes if `type` is set | - |
|
|
47
|
+
| fullProcessCollapsible | Collapse process items (for `full process`) | boolean | no | false |
|
|
48
|
+
| showAllParticipants | Show all IDPs (testing) | boolean | no | false |
|
|
49
|
+
| theme | Button theme | 'dark'\|'light' | no | 'dark' |
|
|
50
|
+
| logoLockupStyle | Logo theme | 'dark'\|'light' | no | 'light' |
|
|
51
|
+
| showInfoContent | Show text below button [More](#infoContent) | boolean | no | false |
|
|
52
|
+
| onError | Called on error | () => void | no | () => {} |
|
|
53
|
+
| showCompatibilityWarnings | Show compatibility popup [More](#showCompatibilityWarnings) | boolean | no | false |
|
|
54
|
+
| supportIncognito | Whether RP supports incognito mode or not (to be able to support incognito mode RP website cannot use browser storage like `cookies`, `sessionStorage`, `localStorage`, etc). | boolean | no | false |
|
|
55
|
+
|
|
56
|
+
#### CompatibilityWarnings type
|
|
55
57
|
|
|
56
58
|
```typescript
|
|
57
|
-
export type
|
|
59
|
+
export type CompatibilityWarnings = {
|
|
58
60
|
mightFail: boolean
|
|
59
61
|
isMobile: boolean
|
|
60
62
|
isIncognito: boolean
|
|
@@ -69,6 +71,12 @@ It returns information about the compatibility of the user's browser and device
|
|
|
69
71
|
- `mobileOs`: The operating system of the mobile device, if applicable.
|
|
70
72
|
- `browser`: The browser being used by the user.
|
|
71
73
|
|
|
74
|
+
Here are the possible reasons why the flow might fail:
|
|
75
|
+
| Scenario | Why it might fail | Suggested message | Incognito support |
|
|
76
|
+
|---|---|---|---|
|
|
77
|
+
| Mobile incognito (`isMobile: true`, `isIncognito: true`) | When a user is returned from the IDP app to the your RP site, the user will be returned in a new incognito tab. If your app relies on `cookies`, `sessionStorage` or `localStorage` it will not have access to any of the these values from the user's original tab. If your flow relies on them it will not be able to continue. | "You are using incognito mode – this may not work properly. Please switch to normal mode." | If `supportIncognito` is set to `true`, this flow will not fail. |
|
|
78
|
+
| Android Samsung browser (`isMobile: true`, `mobileOs: 'android'`, `browser: 'samsung'`) | The Samsung browser default settings prevent the opening of App Links, meaning the IDP app may not open when the user is redirected. User may need to use an alternate browser on the mobile device, or a desktop device. | "It looks like you are using the Samsung browser which may not work properly with this provider. We suggest trying an alternate browser on your mobile, or using a desktop device." | Regardless of `supportIncognito` value, this flow might fail. |
|
|
79
|
+
|
|
72
80
|
#### certificationStatus values
|
|
73
81
|
|
|
74
82
|
- `Active`: only IDPs with active certification
|
|
@@ -219,6 +227,16 @@ This is an optional field in addition with the widgets below the ConnectID butto
|
|
|
219
227
|
|
|
220
228
|
</details>
|
|
221
229
|
|
|
230
|
+
### <a name="showCompatibilityWarnings"></a>showCompatibilityWarnings option
|
|
231
|
+
|
|
232
|
+
If set to `true`, a popup with compatibility warnings will be displayed after an IDP is selected, if the conditions are met. The popup will show information about the compatibility of the user's browser, device, incognito/private mode with the ConnectID flow and the user can decide whether they want to proceed or not.
|
|
233
|
+
|
|
234
|
+
<details>
|
|
235
|
+
<summary>Show compatibility warnings</summary>
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
</details>
|
|
239
|
+
|
|
222
240
|
|
|
223
241
|
### <a name="logoLockupStyle"></a>logoLockup option
|
|
224
242
|
|
|
@@ -241,6 +259,36 @@ The SVG image below the ConnectID button has either option dark or light mode. B
|
|
|
241
259
|
|
|
242
260
|
## 🚀 Release Notes
|
|
243
261
|
|
|
262
|
+
### 6.10.0-alpha.10 (Jul 15, 2025)
|
|
263
|
+
- `medium process` as list.
|
|
264
|
+
|
|
265
|
+
### 6.10.0-alpha.9 (Jul 14, 2025)
|
|
266
|
+
- Fix headings.
|
|
267
|
+
|
|
268
|
+
### 6.10.0-alpha.8 (Jun 27, 2025)
|
|
269
|
+
- Set empty `alt` attribute for IDP logos.
|
|
270
|
+
|
|
271
|
+
### 6.10.0-alpha.7 (Jun 27, 2025)
|
|
272
|
+
- Fix bank logos `alt` attribute.
|
|
273
|
+
|
|
274
|
+
### 6.10.0-alpha.6 (Jun 26, 2025)
|
|
275
|
+
- Add `disableAnalytics` option.
|
|
276
|
+
|
|
277
|
+
### 6.10.0-alpha.5 (Jun 25, 2025)
|
|
278
|
+
- Fix analytics double loading.
|
|
279
|
+
|
|
280
|
+
### 6.10.0-alpha.4 (Jun 20, 2025)
|
|
281
|
+
- Add test support for Samsung and Chrome browsers.
|
|
282
|
+
|
|
283
|
+
### 6.10.0-alpha.3 (Jun 20, 2025)
|
|
284
|
+
- Add `supportIncognito` option.
|
|
285
|
+
|
|
286
|
+
### 6.10.0-alpha.2 (Jun 17, 2025)
|
|
287
|
+
- Add `showCompatibilityWarnings` option.
|
|
288
|
+
|
|
289
|
+
### 6.10.0-alpha.1 (Jun 12, 2025)
|
|
290
|
+
- Rename `compabilityWarnings` to `compatibilityWarnings`.
|
|
291
|
+
|
|
244
292
|
### 6.10.0-alpha.0 (Jun 10, 2025)
|
|
245
293
|
- Add `compabilityWarnings` to `onProceed` callback.
|
|
246
294
|
|
package/analytics.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import { Analytics } from "./types";
|
|
2
|
+
export declare const initialiseAnalytics: (onLoad: (analytics: Analytics) => void) => void;
|
package/analytics.js
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
const PROD_WRITE_KEY = 'LrD9CEGUEy1O3s73nGbaGcyTqELujozJ';
|
|
2
2
|
const DEV_WRITE_KEY = 'PWlESErGso9uTimwmGB7SsnxCpKF8pRl';
|
|
3
3
|
const WRITE_KEY = 'production' === 'production' ? PROD_WRITE_KEY : DEV_WRITE_KEY;
|
|
4
|
-
export const
|
|
5
|
-
//
|
|
4
|
+
export const initialiseAnalytics = (onLoad) => {
|
|
5
|
+
// adapted from https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/
|
|
6
|
+
// to handle RSC
|
|
7
|
+
if (typeof window === 'undefined')
|
|
8
|
+
return;
|
|
6
9
|
// @ts-ignore
|
|
7
10
|
// Create a queue, but don't obliterate an existing one!
|
|
8
11
|
var analytics = (window.analytics = window.analytics || []);
|
|
@@ -74,6 +77,9 @@ export const useAnalytics = () => {
|
|
|
74
77
|
// @ts-ignore
|
|
75
78
|
first.parentNode.insertBefore(script, first);
|
|
76
79
|
analytics._loadOptions = options;
|
|
80
|
+
script.onload = function () {
|
|
81
|
+
onLoad(analytics);
|
|
82
|
+
};
|
|
77
83
|
};
|
|
78
84
|
analytics._writeKey = WRITE_KEY;
|
|
79
85
|
// Add a version to keep track of what's in the wild.
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { CompatibilityEnvironment, CompatibilityWarnings } from './types';
|
|
2
|
+
export declare const getCompatibility: (env: CompatibilityEnvironment) => CompatibilityWarnings;
|
|
3
|
+
export declare const getMightFail: (env: Pick<CompatibilityEnvironment, "supportIncognito" | "idpHasAppCertification" | "isMobile" | "isIncognito" | "isAndroid" | "isIos" | "browser">) => boolean;
|
package/compatibility.js
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
export const getCompatibility = (env) => {
|
|
2
|
+
const { supportIncognito, idpHasAppCertification, isAndroid, isIncognito, isMobile, isIos, browser } = env;
|
|
3
|
+
const mightFail = getMightFail({
|
|
4
|
+
supportIncognito,
|
|
5
|
+
idpHasAppCertification,
|
|
6
|
+
isMobile,
|
|
7
|
+
isIncognito,
|
|
8
|
+
isAndroid,
|
|
9
|
+
isIos,
|
|
10
|
+
browser
|
|
11
|
+
});
|
|
12
|
+
return {
|
|
13
|
+
isMobile,
|
|
14
|
+
isIncognito,
|
|
15
|
+
mobileOs: isAndroid ? 'android' : isIos ? 'ios' : 'other',
|
|
16
|
+
browser,
|
|
17
|
+
mightFail,
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
export const getMightFail = (env) => {
|
|
21
|
+
const { supportIncognito, idpHasAppCertification, isMobile, isIncognito, isAndroid, isIos, browser } = env;
|
|
22
|
+
if (!idpHasAppCertification || !isMobile) {
|
|
23
|
+
return false;
|
|
24
|
+
}
|
|
25
|
+
if (!supportIncognito && isIncognito && isAndroid && browser === 'chrome') {
|
|
26
|
+
return true;
|
|
27
|
+
}
|
|
28
|
+
if (isAndroid && browser === 'samsung') {
|
|
29
|
+
return true;
|
|
30
|
+
}
|
|
31
|
+
if (!supportIncognito && isIncognito && isIos) {
|
|
32
|
+
return true;
|
|
33
|
+
}
|
|
34
|
+
return false;
|
|
35
|
+
};
|
|
@@ -1,96 +1,120 @@
|
|
|
1
1
|
import { describe, it } from 'node:test';
|
|
2
2
|
import assert from 'node:assert';
|
|
3
|
-
import {
|
|
4
|
-
describe('
|
|
5
|
-
it('should return
|
|
6
|
-
const
|
|
3
|
+
import { getCompatibility, getMightFail } from './compatibility';
|
|
4
|
+
describe('getCompatibility', () => {
|
|
5
|
+
it('should return compatibility warnings', () => {
|
|
6
|
+
const compatibility = getCompatibility({
|
|
7
|
+
supportIncognito: false,
|
|
7
8
|
idpHasAppCertification: true,
|
|
8
9
|
isMobile: true,
|
|
9
10
|
isIncognito: false,
|
|
10
11
|
isAndroid: false,
|
|
11
12
|
isIos: false,
|
|
12
|
-
|
|
13
|
-
isChromeBrowser: false,
|
|
13
|
+
browser: 'other',
|
|
14
14
|
});
|
|
15
|
-
assert.deepStrictEqual(
|
|
15
|
+
assert.deepStrictEqual(compatibility, {
|
|
16
16
|
isMobile: true,
|
|
17
17
|
isIncognito: false,
|
|
18
18
|
mobileOs: 'other',
|
|
19
19
|
browser: 'other',
|
|
20
|
-
mightFail: false
|
|
20
|
+
mightFail: false,
|
|
21
21
|
});
|
|
22
22
|
});
|
|
23
23
|
});
|
|
24
24
|
describe('getMightFail', () => {
|
|
25
25
|
it('should return false when idpHasAppCertification is false', () => {
|
|
26
26
|
const mightFail = getMightFail({
|
|
27
|
+
supportIncognito: false,
|
|
27
28
|
idpHasAppCertification: false,
|
|
28
29
|
isMobile: true,
|
|
29
30
|
isIncognito: false,
|
|
30
31
|
isAndroid: false,
|
|
31
32
|
isIos: false,
|
|
32
|
-
|
|
33
|
-
isChromeBrowser: false,
|
|
33
|
+
browser: 'other',
|
|
34
34
|
});
|
|
35
35
|
assert.ok(mightFail === false);
|
|
36
36
|
});
|
|
37
37
|
it('should return false when isMobile is false', () => {
|
|
38
38
|
const mightFail = getMightFail({
|
|
39
|
+
supportIncognito: false,
|
|
39
40
|
idpHasAppCertification: true,
|
|
40
41
|
isMobile: false,
|
|
41
42
|
isIncognito: false,
|
|
42
43
|
isAndroid: false,
|
|
43
44
|
isIos: false,
|
|
44
|
-
|
|
45
|
-
isChromeBrowser: false,
|
|
45
|
+
browser: 'other',
|
|
46
46
|
});
|
|
47
47
|
assert.ok(mightFail === false);
|
|
48
48
|
});
|
|
49
|
-
it('should return true when
|
|
49
|
+
it('should return true when does not support incognito and settings are incognito/android/chrome', () => {
|
|
50
50
|
const mightFail = getMightFail({
|
|
51
|
+
supportIncognito: false,
|
|
51
52
|
idpHasAppCertification: true,
|
|
52
53
|
isMobile: true,
|
|
53
54
|
isIncognito: true,
|
|
54
55
|
isAndroid: true,
|
|
55
56
|
isIos: false,
|
|
56
|
-
|
|
57
|
-
isChromeBrowser: true,
|
|
57
|
+
browser: 'chrome',
|
|
58
58
|
});
|
|
59
59
|
assert.ok(mightFail === true);
|
|
60
60
|
});
|
|
61
|
-
it('should return
|
|
61
|
+
it('should return false when supports incognito and settings are incognito/android/chrome', () => {
|
|
62
|
+
const mightFail = getMightFail({
|
|
63
|
+
supportIncognito: true,
|
|
64
|
+
idpHasAppCertification: true,
|
|
65
|
+
isMobile: true,
|
|
66
|
+
isIncognito: true,
|
|
67
|
+
isAndroid: true,
|
|
68
|
+
isIos: false,
|
|
69
|
+
browser: 'chrome',
|
|
70
|
+
});
|
|
71
|
+
assert.ok(mightFail === false);
|
|
72
|
+
});
|
|
73
|
+
it('should return true when android/samsung', () => {
|
|
62
74
|
const mightFail = getMightFail({
|
|
75
|
+
supportIncognito: false,
|
|
63
76
|
idpHasAppCertification: true,
|
|
64
77
|
isMobile: true,
|
|
65
78
|
isIncognito: false,
|
|
66
79
|
isAndroid: true,
|
|
67
80
|
isIos: false,
|
|
68
|
-
|
|
69
|
-
isChromeBrowser: false,
|
|
81
|
+
browser: 'samsung',
|
|
70
82
|
});
|
|
71
83
|
assert.ok(mightFail === true);
|
|
72
84
|
});
|
|
73
|
-
it('should return true when
|
|
85
|
+
it('should return true when does not support incognito and settings are incognito/ios', () => {
|
|
74
86
|
const mightFail = getMightFail({
|
|
87
|
+
supportIncognito: false,
|
|
75
88
|
idpHasAppCertification: true,
|
|
76
89
|
isMobile: true,
|
|
77
90
|
isIncognito: true,
|
|
78
91
|
isAndroid: false,
|
|
79
92
|
isIos: true,
|
|
80
|
-
|
|
81
|
-
isChromeBrowser: false,
|
|
93
|
+
browser: 'safari',
|
|
82
94
|
});
|
|
83
95
|
assert.ok(mightFail === true);
|
|
84
96
|
});
|
|
97
|
+
it('should return false when supports incognito and settings are incognito/ios', () => {
|
|
98
|
+
const mightFail = getMightFail({
|
|
99
|
+
supportIncognito: true,
|
|
100
|
+
idpHasAppCertification: true,
|
|
101
|
+
isMobile: true,
|
|
102
|
+
isIncognito: true,
|
|
103
|
+
isAndroid: false,
|
|
104
|
+
isIos: true,
|
|
105
|
+
browser: 'safari',
|
|
106
|
+
});
|
|
107
|
+
assert.ok(mightFail === false);
|
|
108
|
+
});
|
|
85
109
|
it('should return false when none of the conditions are met', () => {
|
|
86
110
|
const mightFail = getMightFail({
|
|
111
|
+
supportIncognito: false,
|
|
87
112
|
idpHasAppCertification: true,
|
|
88
113
|
isMobile: true,
|
|
89
114
|
isIncognito: false,
|
|
90
115
|
isAndroid: false,
|
|
91
116
|
isIos: false,
|
|
92
|
-
|
|
93
|
-
isChromeBrowser: false,
|
|
117
|
+
browser: 'other',
|
|
94
118
|
});
|
|
95
119
|
assert.ok(mightFail === false);
|
|
96
120
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@connectid-tools/idp-selector-react",
|
|
3
|
-
"version": "6.10.0-alpha.
|
|
3
|
+
"version": "6.10.0-alpha.10",
|
|
4
4
|
"description": "React component for IDP Selector.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -26,21 +26,21 @@
|
|
|
26
26
|
"homepage": "https://github.com/connectid-tools/idp-selector-react",
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@babel/preset-typescript": "^7.27.1",
|
|
29
|
-
"@types/node": "^22.
|
|
29
|
+
"@types/node": "^22.16.4",
|
|
30
30
|
"@types/react": "^18.3.23",
|
|
31
31
|
"@types/react-dom": "^18.3.7",
|
|
32
|
-
"cypress": "^14.
|
|
32
|
+
"cypress": "^14.5.1",
|
|
33
33
|
"jest-environment-jsdom": "^29.7.0",
|
|
34
|
-
"prettier": "^3.
|
|
34
|
+
"prettier": "^3.6.2",
|
|
35
35
|
"react": "^18.3.1",
|
|
36
36
|
"react-dom": "^18.3.1",
|
|
37
37
|
"replace-in-file": "^8.3.0",
|
|
38
|
-
"tsx": "^4.
|
|
38
|
+
"tsx": "^4.20.3",
|
|
39
39
|
"typescript": "^5.8.3"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"react-responsive": "^10.0.1",
|
|
43
|
-
"swr": "^2.3.
|
|
43
|
+
"swr": "^2.3.4",
|
|
44
44
|
"vite": "^6.3.5"
|
|
45
45
|
}
|
|
46
46
|
}
|
package/types.d.ts
CHANGED
|
@@ -38,19 +38,20 @@ export type CidButtonTypeConfig = {
|
|
|
38
38
|
hasHowItWorks: boolean;
|
|
39
39
|
hasLearnMore: boolean;
|
|
40
40
|
};
|
|
41
|
-
export type
|
|
41
|
+
export type Browser = 'chrome' | 'samsung' | 'safari' | 'firefox' | 'other';
|
|
42
|
+
export type CompatibilityEnvironment = {
|
|
43
|
+
supportIncognito: boolean;
|
|
42
44
|
isMobile: boolean;
|
|
43
45
|
isIncognito: boolean;
|
|
44
46
|
idpHasAppCertification: boolean;
|
|
45
47
|
isAndroid: boolean;
|
|
46
48
|
isIos: boolean;
|
|
47
|
-
|
|
48
|
-
isChromeBrowser: boolean;
|
|
49
|
+
browser: Browser;
|
|
49
50
|
};
|
|
50
|
-
export type
|
|
51
|
+
export type CompatibilityWarnings = {
|
|
51
52
|
mightFail: boolean;
|
|
52
53
|
isMobile: boolean;
|
|
53
54
|
isIncognito: boolean;
|
|
54
55
|
mobileOs: 'android' | 'ios' | 'other';
|
|
55
|
-
browser:
|
|
56
|
+
browser: Browser;
|
|
56
57
|
};
|
package/userAgent.d.ts
CHANGED
|
@@ -2,6 +2,4 @@ import { Device } from './types';
|
|
|
2
2
|
export declare const getDeviceType: () => Device;
|
|
3
3
|
export declare const isAndroid: () => boolean;
|
|
4
4
|
export declare const isIos: () => boolean;
|
|
5
|
-
export declare const isChromeBrowser: () => boolean;
|
|
6
|
-
export declare const isSamsungBrowser: () => boolean;
|
|
7
5
|
export declare const getBrowserName: () => "other" | "chrome" | "samsung" | "safari" | "firefox";
|
package/userAgent.js
CHANGED
|
@@ -10,8 +10,6 @@ export const getDeviceType = () => {
|
|
|
10
10
|
};
|
|
11
11
|
export const isAndroid = () => /Android/i.test(navigator.userAgent);
|
|
12
12
|
export const isIos = () => /iPhone|iPad|iPod/i.test(navigator.userAgent);
|
|
13
|
-
export const isChromeBrowser = () => /Chrome/.test(navigator.userAgent) && !/Edg|OPR|Brave/.test(navigator.userAgent);
|
|
14
|
-
export const isSamsungBrowser = () => /SamsungBrowser/.test(navigator.userAgent);
|
|
15
13
|
export const getBrowserName = () => {
|
|
16
14
|
const ua = navigator.userAgent.toLowerCase();
|
|
17
15
|
if (ua.includes('samsungbrowser')) {
|
package/compability.d.ts
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { CompabilityEnvironment, CompabilityWarnings } from './types';
|
|
2
|
-
export declare const getCompability: (env: CompabilityEnvironment) => CompabilityWarnings;
|
|
3
|
-
export declare const getMightFail: (env: Pick<CompabilityEnvironment, "idpHasAppCertification" | "isMobile" | "isIncognito" | "isAndroid" | "isIos" | "isSamsungBrowser" | "isChromeBrowser">) => boolean;
|
package/compability.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { getBrowserName } from './userAgent';
|
|
2
|
-
export const getCompability = (env) => {
|
|
3
|
-
const { idpHasAppCertification, isAndroid, isChromeBrowser, isIncognito, isMobile, isSamsungBrowser, isIos } = env;
|
|
4
|
-
const mightFail = getMightFail({
|
|
5
|
-
idpHasAppCertification,
|
|
6
|
-
isMobile,
|
|
7
|
-
isIncognito,
|
|
8
|
-
isAndroid,
|
|
9
|
-
isIos,
|
|
10
|
-
isSamsungBrowser,
|
|
11
|
-
isChromeBrowser,
|
|
12
|
-
});
|
|
13
|
-
return {
|
|
14
|
-
isMobile,
|
|
15
|
-
isIncognito,
|
|
16
|
-
mobileOs: isAndroid ? 'android' : isIos ? 'ios' : 'other',
|
|
17
|
-
browser: getBrowserName(),
|
|
18
|
-
mightFail,
|
|
19
|
-
};
|
|
20
|
-
};
|
|
21
|
-
export const getMightFail = (env) => {
|
|
22
|
-
const { idpHasAppCertification, isMobile, isIncognito, isAndroid, isChromeBrowser, isSamsungBrowser, isIos } = env;
|
|
23
|
-
if (!idpHasAppCertification || !isMobile) {
|
|
24
|
-
return false;
|
|
25
|
-
}
|
|
26
|
-
if (isIncognito && isAndroid && isChromeBrowser) {
|
|
27
|
-
return true;
|
|
28
|
-
}
|
|
29
|
-
if (isAndroid && isSamsungBrowser) {
|
|
30
|
-
return true;
|
|
31
|
-
}
|
|
32
|
-
if (isIncognito && isIos) {
|
|
33
|
-
return true;
|
|
34
|
-
}
|
|
35
|
-
return false;
|
|
36
|
-
};
|
|
File without changes
|