beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

update two-factor modal design

Browse source
This commit is contained in:
Abhinav 2022-05-02 15:57:11 +05:30
parent c5090410ef
commit 9df1584572
3 changed files with 212 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
src/components/TwoFactor/Modal/Manage.tsx Normal file
View file

@ -0,0 +1,115 @@
import React, { useContext } from 'react';
import constants from 'utils/strings/constants';
import { AppContext, FLASH_MESSAGE_TYPE } from 'pages/_app';
import { PAGES } from 'constants/pages';
import router from 'next/router';
import { disableTwoFactor } from 'services/userService';
import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
import { Button, Grid } from '@mui/material';
interface Iprops {
close: () => void;
}
export default function TwoFactorModalManageSection(props: Iprops) {
const { close } = props;
const { setDialogMessage, setDisappearingFlashMessage } =
useContext(AppContext);
const warnTwoFactorDisable = async () => {
setDialogMessage({
title: constants.DISABLE_TWO_FACTOR,
staticBackdrop: true,
content: constants.DISABLE_TWO_FACTOR_MESSAGE,
close: { text: constants.CANCEL },
proceed: {
variant: 'danger',
text: constants.DISABLE,
action: twoFactorDisable,
},
});
};
const twoFactorDisable = async () => {
try {
await disableTwoFactor();
setData(LS_KEYS.USER, {
...getData(LS_KEYS.USER),
isTwoFactorEnabled: false,
});
close();
setDisappearingFlashMessage({
message: constants.TWO_FACTOR_DISABLE_SUCCESS,
type: FLASH_MESSAGE_TYPE.INFO,
});
} catch (e) {
setDisappearingFlashMessage({
message: constants.TWO_FACTOR_DISABLE_FAILED,
type: FLASH_MESSAGE_TYPE.DANGER,
});
}
};
const warnTwoFactorReconfigure = async () => {
setDialogMessage({
title: constants.UPDATE_TWO_FACTOR,
staticBackdrop: true,
content: constants.UPDATE_TWO_FACTOR_MESSAGE,
close: { text: constants.CANCEL },
proceed: {
variant: 'success',
text: constants.UPDATE,
action: reconfigureTwoFactor,
},
});
};
const reconfigureTwoFactor = async () => {
router.push(PAGES.TWO_FACTOR_SETUP);
};
return (
<>
<Grid
mb={2}
container
rowSpacing={1}
alignItems="center"
justifyContent="center"
textAlign={'center'}>
<Grid item sm={9} xs={12}>
{constants.UPDATE_TWO_FACTOR_HINT}
</Grid>
<Grid item sm={3} xs={12}>
<Button
variant="contained"
color={'success'}
onClick={warnTwoFactorReconfigure}
style={{ width: '100%' }}>
{constants.RECONFIGURE}
</Button>
</Grid>
</Grid>
<Grid
container
rowSpacing={1}
alignItems="center"
justifyContent="center"
textAlign={'center'}>
<Grid item sm={9} xs={12}>
{constants.DISABLE_TWO_FACTOR_HINT}{' '}
</Grid>
<Grid item sm={3} xs={12}>
<Button
variant="contained"
color={'danger'}
onClick={warnTwoFactorDisable}
style={{ width: '100%' }}>
{constants.DISABLE}
</Button>
</Grid>
</Grid>
</>
);
}

32
src/components/TwoFactor/Modal/Setup.tsx Normal file
View file

@ -0,0 +1,32 @@
import React from 'react';
import LockIcon from '@mui/icons-material/Lock';
import { PAGES } from 'constants/pages';
import { useRouter } from 'next/router';
import constants from 'utils/strings/constants';
import Container from 'components/Container';
import { Button, Typography } from '@mui/material';
interface Iprops {
closeSidebar: () => void;
}
export default function TwoFactorModalSetupSection({ closeSidebar }: Iprops) {
const router = useRouter();
const redirectToTwoFactorSetup = () => {
closeSidebar();
router.push(PAGES.TWO_FACTOR_SETUP);
};
return (
<Container disableGutters sx={{ mb: 2 }}>
<LockIcon sx={{ fontSize: (theme) => theme.spacing(5), mb: 2 }} />
<Typography mb={2}>{constants.TWO_FACTOR_INFO}</Typography>
<Button
variant="contained"
color="success"
onClick={redirectToTwoFactorSetup}>
{constants.ENABLE_TWO_FACTOR}
</Button>
</Container>
);
}

65
src/components/TwoFactor/Modal/index.tsx Normal file
View file

@ -0,0 +1,65 @@
import React, { useEffect, useState } from 'react';
import { getTwoFactorStatus } from 'services/userService';
import { SetLoading } from 'types/gallery';
import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
import constants from 'utils/strings/constants';
import MessageDialog, { SetDialogMessage } from '../../MessageDialog';
import TwoFactorModalSetupSection from './Setup';
import TwoFactorModalManageSection from './Manage';
interface Props {
show: boolean;
onHide: () => void;
setDialogMessage: SetDialogMessage;
setLoading: SetLoading;
closeSidebar: () => void;
}
function TwoFactorModal(props: Props) {
const [isTwoFactorEnabled, setTwoFactorStatus] = useState(false);
useEffect(() => {
if (!props.show) {
return;
}
const isTwoFactorEnabled =
getData(LS_KEYS.USER).isTwoFactorEnabled ?? false;
setTwoFactorStatus(isTwoFactorEnabled);
const main = async () => {
const isTwoFactorEnabled = await getTwoFactorStatus();
setTwoFactorStatus(isTwoFactorEnabled);
setData(LS_KEYS.USER, {
...getData(LS_KEYS.USER),
isTwoFactorEnabled: false,
});
};
main();
}, [props.show]);
const close = () => {
props.onHide();
props.closeSidebar();
};
return (
<MessageDialog
size="xs"
show={props.show}
onHide={props.onHide}
attributes={{
title: constants.TWO_FACTOR_AUTHENTICATION,
staticBackdrop: true,
}}>
<>
{isTwoFactorEnabled ? (
<TwoFactorModalManageSection close={close} />
) : (
<TwoFactorModalSetupSection
closeSidebar={props.closeSidebar}
/>
)}
</>
</MessageDialog>
);
}
export default TwoFactorModal;