Skip to content

Commit 30e248e

Browse files
eisbilireisbilir
committed
security section fixes
1 parent 18bf95c commit 30e248e

File tree

5 files changed

+83
-33
lines changed

5 files changed

+83
-33
lines changed

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@ import { useEffect, useCallback } from 'react';
22
import PT from 'prop-types';
33

44
export default function VerificationListener({
5-
event, callback, origin, type,
5+
event, callback, origin, type, onProcessing, startType,
66
}) {
77
const messageHandler = useCallback((e) => {
8-
if (e.origin === origin && e.data && e.data.type && e.data.type === type) {
9-
callback(e.data);
8+
if (e.origin === origin && e.data && e.data.type) {
9+
if (e.data.type === startType) {
10+
onProcessing();
11+
} else if (e.data.type === type) {
12+
callback(e.data);
13+
}
1014
}
11-
}, [origin, type]);
15+
}, [origin, type, startType]);
1216

1317
useEffect(() => {
1418
window.addEventListener(event, messageHandler);
@@ -23,4 +27,6 @@ VerificationListener.propTypes = {
2327
callback: PT.func.isRequired,
2428
origin: PT.string.isRequired,
2529
type: PT.string.isRequired,
30+
onProcessing: PT.func.isRequired,
31+
startType: PT.string.isRequired,
2632
};

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

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -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 [isVerificationProcessing, setIsVerificationProcessing] = useState(false);
2627
const diceVerifyUrl = config.DICE_VERIFY_URL;
2728
const useInterval = (callback, delay) => {
2829
const savedCallback = useRef();
@@ -87,6 +88,7 @@ export default function Security({
8788

8889
const closeSetup = () => {
8990
setSetupStep(-1);
91+
setIsVerificationProcessing(false);
9092
};
9193

9294
const verifyConnection = () => {
@@ -123,8 +125,26 @@ export default function Security({
123125
}
124126
};
125127

128+
const onStartProcessing = () => {
129+
setIsVerificationProcessing(true);
130+
};
131+
126132
useInterval(verifyConnection, setupStep === 1 && isConnVerifyRunning ? 5000 : null);
127133

134+
const getVerificationStepTitle = () => {
135+
if (isVerificationProcessing) {
136+
return 'Processing...';
137+
}
138+
return 'STEP 3 OF 3';
139+
};
140+
141+
const getVerificationStepText = () => {
142+
if (isVerificationProcessing) {
143+
return 'Please wait while your credentials are validated.';
144+
}
145+
return 'Scan the following DICE ID QR Code in your DICE ID mobile application to confirm your credential.';
146+
};
147+
128148
const setupStepNodes = [
129149
<Modal
130150
onCancel={closeSetup}
@@ -143,11 +163,11 @@ export default function Security({
143163
</div>
144164
<div styleName="app-store">
145165
<div styleName="market">
146-
<GooglePlay />
166+
<a href="https://play.google.com/store/apps/details?id=com.diwallet1" target="_blank" rel="noreferrer"><GooglePlay /></a>
147167
<QRCode size={190} value="https://play.google.com/store/apps/details?id=com.diwallet1" />
148168
</div>
149169
<div styleName="market">
150-
<AppleStore />
170+
<a href="https://apps.apple.com/in/app/dice-id/id1624858853" target="_blank" rel="noreferrer"><AppleStore /></a>
151171
<QRCode size={190} value="https://apps.apple.com/in/app/dice-id/id1624858853" />
152172
</div>
153173
</div>
@@ -160,8 +180,8 @@ export default function Security({
160180
</Modal>,
161181
<Modal
162182
onCancel={closeSetup}
163-
leftButtonName="Cancel"
164-
leftButtonClick={closeSetup}
183+
leftButtonName="Back"
184+
leftButtonClick={openSetup}
165185
rightButtonName="Next"
166186
rightButtonClick={goToVerification}
167187
rightButtonDisabled={!getConnectionAccepted()}
@@ -194,19 +214,25 @@ export default function Security({
194214
>
195215
<div styleName="step-body">
196216
<div styleName="step-title">
197-
STEP 3 OF 3
217+
{getVerificationStepTitle()}
198218
</div>
199219
<div styleName="step-content">
200-
Scan the following DICE ID QR Code in your
201-
DICE ID mobile application to confirm your credential.
220+
{getVerificationStepText()}
202221
</div>
203222
<iframe src={`${diceVerifyUrl}/dice-verifier.html`} title="dice verifier" width="100%" height="350px" />
204223
</div>
224+
{isVerificationProcessing && (
225+
<div styleName="step-footer">
226+
Powered by DICE ID
227+
</div>
228+
)}
205229
<VerificationListener
206230
event="message"
207231
callback={verificationCallback}
208232
origin={diceVerifyUrl}
209233
type="DICE_VERIFICATION"
234+
onProcessing={onStartProcessing}
235+
startType="DICE_VERIFICATION_START"
210236
/>
211237
</Modal>,
212238
<Modal
@@ -298,9 +324,9 @@ export default function Security({
298324
checked={mfaChecked}
299325
onChange={onUpdateMfaOption}
300326
className="onoffswitch-checkbox"
301-
disabled={mfaChecked}
327+
disabled={mfaChecked && diceChecked}
302328
/>
303-
<label htmlFor="pre-onoffswitch-mfa" className="onoffswitch-label" styleName={mfaChecked ? 'disabled-toggle' : ''}>
329+
<label htmlFor="pre-onoffswitch-mfa" className="onoffswitch-label" styleName={mfaChecked && diceChecked ? 'disabled-toggle' : ''}>
304330
<span className="onoffswitch-inner" />
305331
<span className="onoffswitch-switch" />
306332
<input type="hidden" />

‎src/shared/components/Settings/Account/Security/styles.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@
118118

119119
.disabled-toggle {
120120
cursor: not-allowed;
121+
background-color: #7fb5a6 !important
121122
}
122123

123124
.button {

‎src/shared/reducers/mfa.js

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
import actions from 'actions/mfa';
66
import { handleActions } from 'redux-actions';
7-
import { logger, errors } from 'topcoder-react-lib';
7+
import { errors } from 'topcoder-react-lib';
88
import _ from 'lodash';
99

1010
/**
@@ -15,8 +15,7 @@ import _ from 'lodash';
1515
*/
1616
function onGetUser2faDone(state, { payload, error }) {
1717
if (error) {
18-
logger.error('Failed to get user 2fa settings', payload);
19-
errors.fireErrorMessage('Failed to get user 2fa settings', payload);
18+
errors.fireErrorMessage('Failed to get user mfa settings', payload.message);
2019
return { ...state };
2120
}
2221

@@ -34,9 +33,8 @@ function onGetUser2faDone(state, { payload, error }) {
3433
*/
3534
function onUpdateUser2faDone(state, { payload, error }) {
3635
if (error) {
37-
logger.error('Failed to update user 2fa settings', payload);
38-
errors.fireErrorMessage('Failed to update user 2fa settings', payload);
39-
return { ...state };
36+
errors.fireErrorMessage('Failed to update user mfa settings', payload.message);
37+
return { ...state, updatingUser2fa: false };
4038
}
4139

4240
return ({
@@ -54,8 +52,7 @@ function onUpdateUser2faDone(state, { payload, error }) {
5452
*/
5553
function onUpdateUserDiceDone(state, { payload, error }) {
5654
if (error) {
57-
logger.error('Failed to update user dice settings', payload);
58-
errors.fireErrorMessage('Failed to update user dice settings', payload);
55+
errors.fireErrorMessage('Failed to update user dice settings', payload.message);
5956
return { ...state };
6057
}
6158

@@ -73,9 +70,8 @@ function onUpdateUserDiceDone(state, { payload, error }) {
7370
*/
7471
function onGetNewDiceConnectionDone(state, { payload, error }) {
7572
if (error) {
76-
logger.error('Failed to get new dice connection', payload);
77-
errors.fireErrorMessage('Failed to get new dice connection', payload);
78-
return { ...state };
73+
errors.fireErrorMessage('Failed to get new dice connection', payload.message);
74+
return { ...state, gettingNewDiceConnection: false };
7975
}
8076

8177
return ({
@@ -94,9 +90,8 @@ function onGetNewDiceConnectionDone(state, { payload, error }) {
9490
*/
9591
function onGetDiceConnectionDone(state, { payload, error }) {
9692
if (error) {
97-
logger.error('Failed to get dice connection', payload);
98-
errors.fireErrorMessage('Failed to get dice connection', payload);
99-
return { ...state, diceConnectionError: true };
93+
errors.fireErrorMessage('Failed to get dice connection', payload.message);
94+
return { ...state, diceConnectionError: true, gettingDiceConnection: false };
10095
}
10196

10297
return ({

‎src/shared/services/mfa.js

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,30 @@
11

2-
import { services, tc } from 'topcoder-react-lib';
2+
import { services } from 'topcoder-react-lib';
33

44
const { getApi } = services.api;
55

6+
/**
7+
* Handles the response from identity service
8+
* @param {Object} res response
9+
* @return {Promise} Resolves to the payload.
10+
*/
11+
async function handleResponse(res) {
12+
const { result } = await res.json();
13+
14+
if (!res.ok) {
15+
throw new Error(result ? result.content : '');
16+
}
17+
18+
if (!result) {
19+
return null;
20+
}
21+
22+
if ((!result.success)) {
23+
throw new Error(result.content);
24+
}
25+
return result.content;
26+
}
27+
628
class MfaService {
729
/**
830
* @param {String} tokenV3 Auth token for Topcoder API v3.
@@ -21,7 +43,7 @@ class MfaService {
2143
*/
2244
async getUser2fa(userId) {
2345
const res = await this.private.api.get(`/users/${userId}/2fa`);
24-
return tc.getApiResponsePayload(res);
46+
return handleResponse(res);
2547
}
2648

2749
/**
@@ -36,7 +58,7 @@ class MfaService {
3658
};
3759

3860
const res = await this.private.api.patchJson(`/users/${userId}/2fa`, { param: settings });
39-
return tc.getApiResponsePayload(res);
61+
return handleResponse(res);
4062
}
4163

4264
/**
@@ -51,7 +73,7 @@ class MfaService {
5173
};
5274

5375
const res = await this.private.api.patchJson(`/users/${userId}/2fa`, { param: settings });
54-
return tc.getApiResponsePayload(res);
76+
return handleResponse(res);
5577
}
5678

5779
/**
@@ -61,7 +83,7 @@ class MfaService {
6183
*/
6284
async getNewDiceConnection(userId) {
6385
const res = await this.private.api.get(`/users/${userId}/diceConnection`);
64-
return tc.getApiResponsePayload(res);
86+
return handleResponse(res);
6587
}
6688

6789
/**
@@ -72,7 +94,7 @@ class MfaService {
7294
*/
7395
async getDiceConnection(userId, connectionId) {
7496
const res = await this.private.api.get(`/users/${userId}/diceConnection/${connectionId}`);
75-
return tc.getApiResponsePayload(res);
97+
return handleResponse(res);
7698
}
7799
}
78100

0 commit comments

Comments
 (0)