2021-06-24 08:31:05 +00:00
|
|
|
import { useRouter } from 'next/router';
|
|
|
|
import { DeadCenter, SetLoading } from 'pages/gallery';
|
2021-08-13 03:57:09 +00:00
|
|
|
import { AppContext, FLASH_MESSAGE_TYPE } from 'pages/_app';
|
2021-06-29 13:45:59 +00:00
|
|
|
import React, { useContext, useEffect, useState } from 'react';
|
2021-07-06 09:18:00 +00:00
|
|
|
import { Button, Row } from 'react-bootstrap';
|
2021-06-29 11:49:34 +00:00
|
|
|
import { disableTwoFactor, getTwoFactorStatus } from 'services/userService';
|
2021-06-24 08:31:05 +00:00
|
|
|
import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
|
|
|
|
import constants from 'utils/strings/constants';
|
2021-07-06 09:18:00 +00:00
|
|
|
import { Label, Value } from './Container';
|
2021-06-24 08:31:05 +00:00
|
|
|
import MessageDialog, { SetDialogMessage } from './MessageDialog';
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
show: boolean;
|
|
|
|
onHide: () => void;
|
|
|
|
setDialogMessage: SetDialogMessage;
|
2021-08-13 02:38:38 +00:00
|
|
|
setLoading: SetLoading;
|
2021-06-29 13:45:59 +00:00
|
|
|
closeSidebar: () => void;
|
2021-06-24 08:31:05 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function TwoFactorModal(props: Props) {
|
|
|
|
const router = useRouter();
|
|
|
|
const [isTwoFactorEnabled, setTwoFactorStatus] = useState(false);
|
2021-06-29 13:45:59 +00:00
|
|
|
const appContext = useContext(AppContext);
|
2021-06-24 08:31:05 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (!props.show) {
|
|
|
|
return;
|
|
|
|
}
|
2021-08-13 02:38:38 +00:00
|
|
|
const isTwoFactorEnabled =
|
|
|
|
getData(LS_KEYS.USER).isTwoFactorEnabled ?? false;
|
2021-06-24 08:31:05 +00:00
|
|
|
setTwoFactorStatus(isTwoFactorEnabled);
|
2021-06-29 11:49:34 +00:00
|
|
|
const main = async () => {
|
|
|
|
const isTwoFactorEnabled = await getTwoFactorStatus();
|
|
|
|
setTwoFactorStatus(isTwoFactorEnabled);
|
2021-08-13 02:38:38 +00:00
|
|
|
setData(LS_KEYS.USER, {
|
|
|
|
...getData(LS_KEYS.USER),
|
|
|
|
isTwoFactorEnabled: false,
|
|
|
|
});
|
2021-06-29 11:49:34 +00:00
|
|
|
};
|
|
|
|
main();
|
2021-06-24 08:31:05 +00:00
|
|
|
}, [props.show]);
|
|
|
|
const warnTwoFactorDisable = async () => {
|
|
|
|
props.setDialogMessage({
|
2021-06-26 04:56:53 +00:00
|
|
|
title: constants.DISABLE_TWO_FACTOR,
|
2021-06-24 08:31:05 +00:00
|
|
|
staticBackdrop: true,
|
2021-06-26 04:56:53 +00:00
|
|
|
content: constants.DISABLE_TWO_FACTOR_MESSAGE,
|
2021-06-24 08:31:05 +00:00
|
|
|
close: { text: constants.CANCEL },
|
|
|
|
proceed: {
|
|
|
|
variant: 'danger',
|
|
|
|
text: constants.DISABLE,
|
|
|
|
action: twoFactorDisable,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
|
|
|
const twoFactorDisable = async () => {
|
2021-06-29 13:45:59 +00:00
|
|
|
try {
|
|
|
|
await disableTwoFactor();
|
2021-08-13 02:38:38 +00:00
|
|
|
setData(LS_KEYS.USER, {
|
|
|
|
...getData(LS_KEYS.USER),
|
|
|
|
isTwoFactorEnabled: false,
|
|
|
|
});
|
2021-06-29 13:45:59 +00:00
|
|
|
props.onHide();
|
|
|
|
props.closeSidebar();
|
2021-08-13 02:38:38 +00:00
|
|
|
appContext.setDisappearingFlashMessage({
|
|
|
|
message: constants.TWO_FACTOR_DISABLE_SUCCESS,
|
2021-08-13 03:57:09 +00:00
|
|
|
type: FLASH_MESSAGE_TYPE.INFO,
|
2021-08-13 02:38:38 +00:00
|
|
|
});
|
2021-06-29 13:45:59 +00:00
|
|
|
} catch (e) {
|
2021-08-13 02:38:38 +00:00
|
|
|
appContext.setDisappearingFlashMessage({
|
|
|
|
message: constants.TWO_FACTOR_DISABLE_FAILED,
|
2021-08-13 03:57:09 +00:00
|
|
|
type: FLASH_MESSAGE_TYPE.DANGER,
|
2021-08-13 02:38:38 +00:00
|
|
|
});
|
2021-06-29 13:45:59 +00:00
|
|
|
}
|
2021-06-24 08:31:05 +00:00
|
|
|
};
|
|
|
|
const warnTwoFactorReconfigure = async () => {
|
|
|
|
props.setDialogMessage({
|
2021-06-26 04:56:53 +00:00
|
|
|
title: constants.UPDATE_TWO_FACTOR,
|
2021-06-24 08:31:05 +00:00
|
|
|
staticBackdrop: true,
|
2021-06-25 20:34:56 +00:00
|
|
|
content: constants.UPDATE_TWO_FACTOR_MESSAGE,
|
2021-06-24 08:31:05 +00:00
|
|
|
close: { text: constants.CANCEL },
|
|
|
|
proceed: {
|
|
|
|
variant: 'success',
|
|
|
|
text: constants.UPDATE,
|
|
|
|
action: reconfigureTwoFactor,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
|
|
|
const reconfigureTwoFactor = async () => {
|
2021-06-26 04:58:01 +00:00
|
|
|
router.push('/two-factor/setup');
|
2021-06-24 08:31:05 +00:00
|
|
|
};
|
|
|
|
return (
|
|
|
|
<MessageDialog
|
|
|
|
show={props.show}
|
|
|
|
onHide={props.onHide}
|
|
|
|
attributes={{
|
2021-06-25 19:59:38 +00:00
|
|
|
title: constants.TWO_FACTOR_AUTHENTICATION,
|
2021-06-24 08:31:05 +00:00
|
|
|
staticBackdrop: true,
|
2021-08-13 02:38:38 +00:00
|
|
|
}}>
|
|
|
|
<div
|
|
|
|
{...(!isTwoFactorEnabled
|
|
|
|
? { style: { padding: '10px 10px 30px 10px' } }
|
|
|
|
: { style: { padding: '10px' } })}>
|
|
|
|
{isTwoFactorEnabled ? (
|
|
|
|
<>
|
|
|
|
<Row>
|
|
|
|
<Label>{constants.UPDATE_TWO_FACTOR_HINT}</Label>
|
|
|
|
<Value>
|
|
|
|
<Button
|
|
|
|
variant={'outline-success'}
|
|
|
|
onClick={warnTwoFactorReconfigure}>
|
|
|
|
{constants.RECONFIGURE}
|
|
|
|
</Button>
|
|
|
|
</Value>
|
|
|
|
</Row>
|
|
|
|
<Row>
|
|
|
|
<Label>{constants.DISABLE_TWO_FACTOR_HINT} </Label>
|
|
|
|
<Value>
|
|
|
|
<Button
|
|
|
|
variant={'outline-danger'}
|
|
|
|
onClick={warnTwoFactorDisable}>
|
|
|
|
{constants.DISABLE}
|
|
|
|
</Button>
|
|
|
|
</Value>
|
|
|
|
</Row>
|
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<DeadCenter>
|
|
|
|
<svg
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
height="36px"
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
width="36px"
|
|
|
|
fill="#000000">
|
|
|
|
<g fill="none">
|
|
|
|
<path d="M0 0h24v24H0V0z" />
|
|
|
|
<path d="M0 0h24v24H0V0z" opacity=".87" />
|
|
|
|
</g>
|
|
|
|
<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" />
|
|
|
|
</svg>
|
|
|
|
<p />
|
|
|
|
<p>{constants.TWO_FACTOR_INFO}</p>
|
|
|
|
<div style={{ height: '10px' }} />
|
|
|
|
<Button
|
|
|
|
variant="outline-success"
|
|
|
|
onClick={() => router.push('/two-factor/setup')}>
|
|
|
|
{constants.ENABLE_TWO_FACTOR}
|
|
|
|
</Button>
|
|
|
|
</DeadCenter>
|
|
|
|
)}
|
2021-06-24 08:31:05 +00:00
|
|
|
</div>
|
2021-08-13 02:38:38 +00:00
|
|
|
</MessageDialog>
|
2021-06-24 08:31:05 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
export default TwoFactorModal;
|