final touchup two factor component
This commit is contained in:
parent
5ae226cdb1
commit
66a8ca50b3
|
@ -57,7 +57,7 @@ export default function TwoFactorModalManageSection(props: Iprops) {
|
||||||
content: constants.UPDATE_TWO_FACTOR_MESSAGE,
|
content: constants.UPDATE_TWO_FACTOR_MESSAGE,
|
||||||
close: { text: constants.CANCEL },
|
close: { text: constants.CANCEL },
|
||||||
proceed: {
|
proceed: {
|
||||||
variant: 'success',
|
variant: 'accent',
|
||||||
text: constants.UPDATE,
|
text: constants.UPDATE,
|
||||||
action: reconfigureTwoFactor,
|
action: reconfigureTwoFactor,
|
||||||
},
|
},
|
||||||
|
@ -78,12 +78,11 @@ export default function TwoFactorModalManageSection(props: Iprops) {
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
textAlign={'center'}>
|
textAlign={'center'}>
|
||||||
<Grid item sm={9} xs={12}>
|
<Grid item sm={9} xs={12}>
|
||||||
{constants.UPDATE_TWO_FACTOR_HINT}
|
{constants.UPDATE_TWO_FACTOR_LABEL}
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item sm={3} xs={12}>
|
<Grid item sm={3} xs={12}>
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
color={'accent'}
|
||||||
color={'success'}
|
|
||||||
onClick={warnTwoFactorReconfigure}
|
onClick={warnTwoFactorReconfigure}
|
||||||
style={{ width: '100%' }}>
|
style={{ width: '100%' }}>
|
||||||
{constants.RECONFIGURE}
|
{constants.RECONFIGURE}
|
||||||
|
@ -97,12 +96,11 @@ export default function TwoFactorModalManageSection(props: Iprops) {
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
textAlign={'center'}>
|
textAlign={'center'}>
|
||||||
<Grid item sm={9} xs={12}>
|
<Grid item sm={9} xs={12}>
|
||||||
{constants.DISABLE_TWO_FACTOR_HINT}{' '}
|
{constants.DISABLE_TWO_FACTOR_LABEL}{' '}
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
<Grid item sm={3} xs={12}>
|
<Grid item sm={3} xs={12}>
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
|
||||||
color={'danger'}
|
color={'danger'}
|
||||||
onClick={warnTwoFactorDisable}
|
onClick={warnTwoFactorDisable}
|
||||||
style={{ width: '100%' }}>
|
style={{ width: '100%' }}>
|
||||||
|
|
|
@ -7,13 +7,13 @@ import Container from 'components/Container';
|
||||||
import { Button, Typography } from '@mui/material';
|
import { Button, Typography } from '@mui/material';
|
||||||
|
|
||||||
interface Iprops {
|
interface Iprops {
|
||||||
closeSidebar: () => void;
|
close: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function TwoFactorModalSetupSection({ closeSidebar }: Iprops) {
|
export default function TwoFactorModalSetupSection({ close }: Iprops) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const redirectToTwoFactorSetup = () => {
|
const redirectToTwoFactorSetup = () => {
|
||||||
closeSidebar();
|
close();
|
||||||
router.push(PAGES.TWO_FACTOR_SETUP);
|
router.push(PAGES.TWO_FACTOR_SETUP);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -23,7 +23,8 @@ export default function TwoFactorModalSetupSection({ closeSidebar }: Iprops) {
|
||||||
<Typography mb={2}>{constants.TWO_FACTOR_INFO}</Typography>
|
<Typography mb={2}>{constants.TWO_FACTOR_INFO}</Typography>
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
color="success"
|
color="accent"
|
||||||
|
size="large"
|
||||||
onClick={redirectToTwoFactorSetup}>
|
onClick={redirectToTwoFactorSetup}>
|
||||||
{constants.ENABLE_TWO_FACTOR}
|
{constants.ENABLE_TWO_FACTOR}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -44,6 +44,7 @@ function TwoFactorModal(props: Props) {
|
||||||
return (
|
return (
|
||||||
<MessageDialog
|
<MessageDialog
|
||||||
size="xs"
|
size="xs"
|
||||||
|
fullWidth
|
||||||
show={props.show}
|
show={props.show}
|
||||||
onHide={props.onHide}
|
onHide={props.onHide}
|
||||||
attributes={{
|
attributes={{
|
||||||
|
@ -54,9 +55,7 @@ function TwoFactorModal(props: Props) {
|
||||||
{isTwoFactorEnabled ? (
|
{isTwoFactorEnabled ? (
|
||||||
<TwoFactorModalManageSection close={close} />
|
<TwoFactorModalManageSection close={close} />
|
||||||
) : (
|
) : (
|
||||||
<TwoFactorModalSetupSection
|
<TwoFactorModalSetupSection close={close} />
|
||||||
closeSidebar={props.closeSidebar}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
</MessageDialog>
|
</MessageDialog>
|
||||||
|
|
|
@ -56,6 +56,11 @@ const darkThemeOptions = createTheme({
|
||||||
textTransform: 'none',
|
textTransform: 'none',
|
||||||
borderRadius: '8px',
|
borderRadius: '8px',
|
||||||
},
|
},
|
||||||
|
sizeLarge: {
|
||||||
|
fontSize: '18px',
|
||||||
|
lineHeight: '21.78px',
|
||||||
|
padding: '16px',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
MuiDialog: {
|
MuiDialog: {
|
||||||
|
|
|
@ -452,7 +452,7 @@ const englishConstants = {
|
||||||
? `1 file received. uploading in a jiffy`
|
? `1 file received. uploading in a jiffy`
|
||||||
: `${count} files received. uploading in a jiffy`,
|
: `${count} files received. uploading in a jiffy`,
|
||||||
TWO_FACTOR: 'Two-factor',
|
TWO_FACTOR: 'Two-factor',
|
||||||
TWO_FACTOR_AUTHENTICATION: 'two-factor authentication',
|
TWO_FACTOR_AUTHENTICATION: 'Two-factor authentication',
|
||||||
TWO_FACTOR_QR_INSTRUCTION:
|
TWO_FACTOR_QR_INSTRUCTION:
|
||||||
'scan the QR code below with your favorite authenticator app',
|
'scan the QR code below with your favorite authenticator app',
|
||||||
ENTER_CODE_MANUALLY: 'enter the code manually',
|
ENTER_CODE_MANUALLY: 'enter the code manually',
|
||||||
|
@ -461,21 +461,21 @@ const englishConstants = {
|
||||||
SCAN_QR_CODE: 'scan QR code instead',
|
SCAN_QR_CODE: 'scan QR code instead',
|
||||||
CONTINUE: 'continue',
|
CONTINUE: 'continue',
|
||||||
BACK: 'back',
|
BACK: 'back',
|
||||||
ENABLE_TWO_FACTOR: 'enable two-factor',
|
ENABLE_TWO_FACTOR: 'Enable two-factor',
|
||||||
ENABLE: 'enable',
|
ENABLE: 'enable',
|
||||||
LOST_DEVICE: 'lost two-factor device?',
|
LOST_DEVICE: 'lost two-factor device?',
|
||||||
INCORRECT_CODE: 'incorrect code',
|
INCORRECT_CODE: 'incorrect code',
|
||||||
RECOVER_TWO_FACTOR: 'recover two-factor',
|
RECOVER_TWO_FACTOR: 'recover two-factor',
|
||||||
TWO_FACTOR_INFO:
|
TWO_FACTOR_INFO:
|
||||||
'add an additional layer of security by requiring more than your email and password to log in to your account',
|
'Add an additional layer of security by requiring more than your email and password to log in to your account',
|
||||||
DISABLE_TWO_FACTOR_HINT: 'disable two-factor authentication',
|
DISABLE_TWO_FACTOR_LABEL: 'Disable two-factor authentication',
|
||||||
UPDATE_TWO_FACTOR_HINT: 'update your authenticator device',
|
UPDATE_TWO_FACTOR_LABEL: 'Update your authenticator device',
|
||||||
DISABLE: 'disable',
|
DISABLE: 'Disable',
|
||||||
RECONFIGURE: 'reconfigure',
|
RECONFIGURE: 'Reconfigure',
|
||||||
UPDATE_TWO_FACTOR: 'update two-factor',
|
UPDATE_TWO_FACTOR: 'update two-factor',
|
||||||
UPDATE_TWO_FACTOR_MESSAGE:
|
UPDATE_TWO_FACTOR_MESSAGE:
|
||||||
'continuing forward will void any previously configured authenticators',
|
'continuing forward will void any previously configured authenticators',
|
||||||
UPDATE: 'update',
|
UPDATE: 'Update',
|
||||||
DISABLE_TWO_FACTOR: 'disable two-factor',
|
DISABLE_TWO_FACTOR: 'disable two-factor',
|
||||||
DISABLE_TWO_FACTOR_MESSAGE:
|
DISABLE_TWO_FACTOR_MESSAGE:
|
||||||
'are you sure you want to disable your two-factor authentication',
|
'are you sure you want to disable your two-factor authentication',
|
||||||
|
|
Loading…
Reference in a new issue