105 lines
4.0 KiB
TypeScript
105 lines
4.0 KiB
TypeScript
import * as React from 'react';
|
|
import Alert from '@mui/material/Alert';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import Card from '@mui/material/Card';
|
|
import CardContent from '@mui/material/CardContent';
|
|
import CardHeader from '@mui/material/CardHeader';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
import Grid from '@mui/material/Unstable_Grid2';
|
|
import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/dist/ssr/ArrowRight';
|
|
import { Key as KeyIcon } from '@phosphor-icons/react/dist/ssr/Key';
|
|
|
|
export function MultiFactor(): React.JSX.Element {
|
|
return (
|
|
<Card>
|
|
<CardHeader
|
|
avatar={
|
|
<Avatar>
|
|
<KeyIcon fontSize="var(--Icon-fontSize)" />
|
|
</Avatar>
|
|
}
|
|
title="Multi factor authentication"
|
|
/>
|
|
<CardContent>
|
|
<Stack spacing={3}>
|
|
<Grid container spacing={3}>
|
|
<Grid xl={6} xs={12}>
|
|
<Card sx={{ height: '100%' }} variant="outlined">
|
|
<CardContent>
|
|
<Stack spacing={4}>
|
|
<Stack spacing={1}>
|
|
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
|
|
<Box
|
|
sx={{
|
|
bgcolor: 'var(--mui-palette-error-main)',
|
|
borderRadius: '50%',
|
|
display: 'block',
|
|
height: '8px',
|
|
width: '8px',
|
|
}}
|
|
/>
|
|
<Typography color="error" variant="body2">
|
|
Off
|
|
</Typography>
|
|
</Stack>
|
|
<Typography variant="subtitle2">Authenticator app</Typography>
|
|
<Typography color="text.secondary" variant="body2">
|
|
Use an authenticator app to generate one time security codes.
|
|
</Typography>
|
|
</Stack>
|
|
<div>
|
|
<Button endIcon={<ArrowRightIcon />} variant="contained">
|
|
Set up authenticator
|
|
</Button>
|
|
</div>
|
|
</Stack>
|
|
</CardContent>
|
|
</Card>
|
|
</Grid>
|
|
<Grid xl={6} xs={12}>
|
|
<Card sx={{ height: '100%' }} variant="outlined">
|
|
<CardContent>
|
|
<Stack spacing={4}>
|
|
<Stack spacing={1}>
|
|
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
|
|
<Box
|
|
sx={{
|
|
bgcolor: 'var(--mui-palette-error-main)',
|
|
borderRadius: '50%',
|
|
display: 'block',
|
|
height: '8px',
|
|
width: '8px',
|
|
}}
|
|
/>
|
|
<Typography color="error" variant="body2">
|
|
Off
|
|
</Typography>
|
|
</Stack>
|
|
<Typography variant="subtitle2">Text message</Typography>
|
|
<Typography color="text.secondary" variant="body2">
|
|
Use your mobile phone to receive security codes via SMS.
|
|
</Typography>
|
|
</Stack>
|
|
<div>
|
|
<Button endIcon={<ArrowRightIcon />} variant="contained">
|
|
Set up phone
|
|
</Button>
|
|
</div>
|
|
</Stack>
|
|
</CardContent>
|
|
</Card>
|
|
</Grid>
|
|
</Grid>
|
|
<Alert color="success">
|
|
87% of the technology industry has already implemented MFA and it is the top sector with the highest MFA
|
|
adoption rate.
|
|
</Alert>
|
|
</Stack>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|