Skip to content

Commit dab4353

Browse files
committed
add new verifier page
1 parent f010990 commit dab4353

File tree

7 files changed

+82
-118
lines changed

7 files changed

+82
-118
lines changed

config/default.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -457,5 +457,5 @@ module.exports = {
457457
ENABLE_BADGE_UI: true,
458458
},
459459
PLATFORMUI_SITE_URL: 'https://platform-ui.topcoder-dev.com',
460-
DICE_VERIFIER_URL: 'https://tc-vcauth-uat.diceid.com',
460+
DICE_VERIFY_URL: 'https://accounts-auth0.topcoder-dev.com',
461461
};

config/production.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -227,5 +227,5 @@ module.exports = {
227227
ENABLE_RECOMMENDER: true,
228228
PLATFORM_SITE_URL: 'https://platform.topcoder.com',
229229
PLATFORMUI_SITE_URL: 'https://platform-ui.topcoder.com',
230-
DICE_VERIFIER_URL: 'https://tc-vcauth.diceid.com',
230+
DICE_VERIFY_URL: 'https://accounts-auth0.topcoder.com',
231231
};

src/server/index.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -313,8 +313,6 @@ async function onExpressJsSetup(server) {
313313
* page would do on signing / rejecting a document. */
314314
server.use('/community-app-assets/api/mock/docu-sign', (req, res) => setTimeout(() => res.send(mockDocuSignFactory(req.query.returnUrl)), 3000));
315315

316-
server.use('/community-app-assets/dice-signin-callback.html', (req, res) => res.sendFile(path.resolve(__dirname, './static/dice-signin-callback.html')));
317-
318316
/* TODO:
319317
* This is a temporary fallback route: some of the assets in the app are not
320318
* properly packed with Webpack, and they rely on just being copied into some

src/server/static/dice-signin-callback.html

Lines changed: 0 additions & 21 deletions
This file was deleted.

src/shared/components/Settings/Account/Security/Modal/index.jsx

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import CloseButton from 'assets/images/account/security/green-close.svg';
66
import './style.scss';
77

88
export default function DiceModal({
9-
children, onCancel, leftButtonName, leftButtonDisabled, leftButtonClick,
9+
showTools, children, onCancel, leftButtonName, leftButtonDisabled, leftButtonClick,
1010
rightButtonName, rightButtonDisabled, rightButtonClick,
1111
}) {
1212
useEffect(() => {
@@ -21,37 +21,37 @@ export default function DiceModal({
2121
styleName="container"
2222
onWheel={event => event.stopPropagation()}
2323
>
24-
<div styleName="header">
25-
<div styleName="icon-wrapper">
26-
<img src={DiceImage} alt="diceid" />
27-
</div>
28-
<div styleName="title">DICE ID authenticator setup </div>
29-
<CloseButton onClick={onCancel} styleName="close-button" />
30-
</div>
31-
<div styleName="divider" />
32-
<div styleName="body">
24+
{showTools ? (
25+
<><div styleName="header">
26+
<div styleName="icon-wrapper">
27+
<img src={DiceImage} alt="diceid" />
28+
</div>
29+
<div styleName="title">DICE ID authenticator setup </div>
30+
<CloseButton onClick={onCancel} styleName="close-button" />
31+
</div><div styleName="divider" /><div styleName="body">
32+
{children}
33+
</div><div styleName="divider" /><div styleName="footer">
34+
<div
35+
styleName={`left-button ${leftButtonDisabled ? 'disabled' : ''}`}
36+
onClick={leftButtonClick}
37+
role="button"
38+
tabIndex={0}
39+
onKeyDown={leftButtonClick}
40+
>{leftButtonName}
41+
</div>
42+
<div
43+
styleName={`right-button ${rightButtonDisabled ? 'disabled' : ''}`}
44+
onClick={rightButtonClick}
45+
role="button"
46+
tabIndex={0}
47+
onKeyDown={rightButtonClick}
48+
>{rightButtonName}
49+
</div>
50+
</div></>
51+
)
52+
: (
3353
{children}
34-
</div>
35-
36-
<div styleName="divider" />
37-
<div styleName="footer">
38-
<div
39-
styleName={`left-button ${leftButtonDisabled ? 'disabled' : ''}`}
40-
onClick={leftButtonClick}
41-
role="button"
42-
tabIndex={0}
43-
onKeyDown={leftButtonClick}
44-
>{leftButtonName}
45-
</div>
46-
<div
47-
styleName={`right-button ${rightButtonDisabled ? 'disabled' : ''}`}
48-
onClick={rightButtonClick}
49-
role="button"
50-
tabIndex={0}
51-
onKeyDown={rightButtonClick}
52-
>{rightButtonName}
53-
</div>
54-
</div>
54+
)}
5555
</div>
5656
<div
5757
styleName="overlay"
@@ -61,12 +61,14 @@ export default function DiceModal({
6161
);
6262
}
6363
DiceModal.defaultProps = {
64+
showTools: true,
6465
children: null,
6566
leftButtonDisabled: false,
6667
rightButtonDisabled: false,
6768

6869
};
6970
DiceModal.propTypes = {
71+
showTools: PT.bool,
7072
children: PT.node,
7173
onCancel: PT.func.isRequired,
7274
leftButtonName: PT.string.isRequired,
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { useEffect, useCallback } from 'react';
2+
import PT from 'prop-types';
3+
4+
export default function VerificationListener({ event, callback, source }) {
5+
const messageHandler = useCallback((e) => {
6+
if (e.source.indexOf(source) !== -1) {
7+
callback(e.data);
8+
}
9+
}, [source])
10+
11+
useEffect(() => {
12+
window.addEventListener(event, messageHandler);
13+
return () => window.removeEventListener(event, messageHandler);
14+
}, [event, messageHandler]);
15+
16+
return false;
17+
}
18+
19+
DiceModal.propTypes = {
20+
event: PT.string.isRequired,
21+
callback: PT.func.isRequired,
22+
source: PT.string.isRequired,
23+
};

src/shared/components/Settings/Account/Security/index.jsx

Lines changed: 24 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import PT from 'prop-types';
33
import _ from 'lodash';
44
import { config } from 'topcoder-react-utils';
55
import QRCode from 'react-qr-code';
6-
import { UserManager } from 'oidc-client';
76
import { SettingBannerV2 as Collapse } from 'components/Settings/SettingsBanner';
87
import MfaImage from 'assets/images/account/security/mfa.svg';
98
import DiceLogo from 'assets/images/account/security/dicelogo.png';
@@ -12,6 +11,7 @@ import GooglePlay from 'assets/images/account/security/google-play.svg';
1211
import AppleStore from 'assets/images/account/security/apple-store.svg';
1312
import UnsuccessfulIcon from 'assets/images/account/security/unsuccessful.svg';
1413
import Modal from './Modal';
14+
import VerificationListener from './VerificationListener';
1515

1616

1717
import './styles.scss';
@@ -23,6 +23,7 @@ export default function Security({
2323
const [setupStep, setSetupStep] = useState(-1);
2424
const [isConnVerifyRunning, setIsConnVerifyRunning] = useState(false);
2525
const [connVerifyCounter, setConnVerifyCounter] = useState(0);
26+
const diceVerifyUrl = config.DICE_VERIFY_URL;
2627
const useInterval = (callback, delay) => {
2728
const savedCallback = useRef();
2829

@@ -101,54 +102,23 @@ export default function Security({
101102
}
102103
};
103104

104-
const verificationPopup = () => {
105-
const diceUrl = config.DICE_VERIFIER_URL;
106-
let baseRedirectUrl = config.URL.BASE;
107-
if (baseRedirectUrl.indexOf('-dev') !== -1) {
108-
baseRedirectUrl = window.location.origin;
109-
}
110-
const manager = new UserManager({
111-
authority: diceUrl,
112-
client_id: 'topcoder',
113-
response_type: 'code',
114-
scope: 'openid profile vc_authn',
115-
popup_redirect_uri: `${baseRedirectUrl}/community-app-assets/dice-signin-callback.html`,
116-
response_mode: 'query',
117-
loadUserInfo: false,
118-
popupWindowFeatures: 'location=no,toolbar=no,menubar=no,width=1000,height=611,left=100,top=100',
119-
});
120-
manager.settings.metadata = {
121-
issuer: diceUrl,
122-
jwks_uri: `${diceUrl}/.well-known/openid-configuration/jwks`,
123-
authorization_endpoint: `${diceUrl}/vc/connect/authorize?pres_req_conf_id=Topcoder_2FA_Validate_Cred`,
124-
token_endpoint: `${diceUrl}/vc/connect/token`,
125-
userinfo_endpoint: `${diceUrl}/connect/userinfo`,
126-
check_session_iframe: `${diceUrl}/vc/connect/checksession`,
127-
revocation_endpoint: `${diceUrl}/vc/connect/revocation`,
128-
};
129-
130-
manager.signinPopup().then(
131-
(user) => {
132-
const userEmail = _.get(user, 'profile.Email');
133-
if (!_.isUndefined(userEmail) && _.lowerCase(userEmail) === _.lowerCase(emailAddress)) {
134-
updateUserDice(userId, true, tokenV3);
135-
setSetupStep(3);
136-
} else {
137-
setSetupStep(4);
138-
}
139-
},
140-
() => { setSetupStep(4); },
141-
);
142-
};
143-
144105
const goToVerification = () => {
145106
if (!getConnectionAccepted()) {
146107
return;
147108
}
148109
setSetupStep(2);
149-
verificationPopup();
150110
};
151111

112+
const verificationCallback = (data) => {
113+
const userEmail = _.get(data, 'profile.Email');
114+
if (!_.isUndefined(userEmail) && _.lowerCase(userEmail) === _.lowerCase(emailAddress)) {
115+
updateUserDice(userId, true, tokenV3);
116+
setSetupStep(3);
117+
} else {
118+
setSetupStep(4);
119+
}
120+
}
121+
152122
const finishSetup = () => {
153123
getUser2fa(userId, tokenV3);
154124
closeSetup();
@@ -216,27 +186,19 @@ export default function Security({
216186
</div>
217187
</Modal>,
218188
<Modal
219-
onCancel={closeSetup}
220-
leftButtonName="Cancel"
221-
leftButtonClick={closeSetup}
222-
rightButtonName="Finish"
223-
rightButtonClick={() => {}}
224-
rightButtonDisabled
189+
showTools={false}
190+
onCancel={()=>{}}
191+
leftButtonName=""
192+
leftButtonClick={()=>{}}
193+
rightButtonName=""
194+
rightButtonClick={()=>{}}
225195
>
226-
<div styleName="step-body">
227-
<div styleName="step-title">
228-
Processing...
229-
</div>
230-
<div styleName="step-content">
231-
Please wait while your credentials are validated.
232-
</div>
233-
<div styleName="body-logo">
234-
<img src={DiceLogoBig} alt="diceid" />
235-
</div>
236-
</div>
237-
<div styleName="step-footer">
238-
Powered by DICE ID
239-
</div>
196+
<iframe src={`${diceVerifyUrl}/dice-verifier.html`} />
197+
<VerificationListener
198+
event="message"
199+
callback={verificationCallback}
200+
source={`${diceVerifyUrl}/dice-verify-callback.html`}
201+
/>
240202
</Modal>,
241203
<Modal
242204
onCancel={closeSetup}

0 commit comments

Comments
 (0)