louiscklaw/lettersoup-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build ok,

Browse Source
This commit is contained in:
louiscklaw
2025-04-14 09:26:24 +08:00
commit 6c931c1fe8
770 changed files with 63959 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
002_source/cms/src/components/dashboard/settings/multi-factor.tsx Normal file
View File

@@ -0,0 +1,104 @@
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>
);
}