tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Separate Client Portal & Dashboard

Browse Source
This commit is contained in:
Dell
2022-05-23 10:38:16 +07:00
parent f2e84e6244
commit 89bb57f357
569 changed files with 60252 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/dashboard/src/pages/Medicines/Create.tsx Normal file
View File

@@ -0,0 +1,32 @@
// @mui
import { Button, Container, Typography } from '@mui/material';
// hooks
import useSettings from '../../hooks/useSettings';
// components
import Page from '../../components/Page';
import axios from '../../utils/axios';
import useAuth from '../../hooks/useAuth';
import { Link } from 'react-router-dom';
// ----------------------------------------------------------------------
export default function PageOne() {
const { themeStretch } = useSettings();
const { logout } = useAuth();
const loadSomething = () => {
console.log('Loading Something')
}
return (
<Page title="Create Obat">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Typography variant="h3" component="h1" paragraph>
Create Obat
</Typography>
<Typography>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</Typography>
</Container>
</Page>
);
}

34
frontend/dashboard/src/pages/Medicines/Index.tsx Normal file
View File

@@ -0,0 +1,34 @@
// @mui
import { Button, Container, Typography } from '@mui/material';
// hooks
import useSettings from '../../hooks/useSettings';
// components
import Page from '../../components/Page';
import axios from '../../utils/axios';
import useAuth from '../../hooks/useAuth';
import { Link } from 'react-router-dom';
// ----------------------------------------------------------------------
export default function PageOne() {
const { themeStretch } = useSettings();
const { logout } = useAuth();
const loadSomething = () => {
console.log('Loading Something')
}
return (
<Page title="Obat">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Typography variant="h3" component="h1" paragraph>
Daftar Obat
</Typography>
<Typography>askdnkasndka jsndkajsndkajsdnkajsndk jansdkasjdnkjansd</Typography>
<Button onClick={loadSomething}>Something</Button>
<Link to='/medicines/create'>asdasdasd</Link>
</Container>
</Page>
);
}

52
frontend/dashboard/src/pages/Page404.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { m } from 'framer-motion';
import { Link as RouterLink } from 'react-router-dom';
// @mui
import { styled } from '@mui/material/styles';
import { Box, Button, Typography, Container } from '@mui/material';
// components
import Page from '../components/Page';
import { MotionContainer, varBounce } from '../components/animate';
// assets
import { PageNotFoundIllustration } from '../assets';
// ----------------------------------------------------------------------
const RootStyle = styled('div')(({ theme }) => ({
display: 'flex',
minHeight: '100%',
alignItems: 'center',
paddingTop: theme.spacing(15),
paddingBottom: theme.spacing(10),
}));
// ----------------------------------------------------------------------
export default function Page404() {
return (
<Page title="404 Page Not Found" sx={{ height: 1 }}>
<RootStyle>
<Container component={MotionContainer}>
<Box sx={{ maxWidth: 480, margin: 'auto', textAlign: 'center' }}>
<m.div variants={varBounce().in}>
<Typography variant="h3" paragraph>
Sorry, page not found!
</Typography>
</m.div>
<Typography sx={{ color: 'text.secondary' }}>
Sorry, we couldn’t find the page you’re looking for. Perhaps you’ve mistyped the URL?
Be sure to check your spelling.
</Typography>
<m.div variants={varBounce().in}>
<PageNotFoundIllustration sx={{ height: 260, my: { xs: 5, sm: 10 } }} />
</m.div>
<Button to="/" size="large" variant="contained" component={RouterLink}>
Go to Home
</Button>
</Box>
</Container>
</RootStyle>
</Page>
);
}

38
frontend/dashboard/src/pages/PageFive.tsx Normal file
View File

@@ -0,0 +1,38 @@
// @mui
import { Container, Typography } from '@mui/material';
// hooks
import useSettings from '../hooks/useSettings';
// components
import Page from '../components/Page';
// ----------------------------------------------------------------------
export default function PageFive() {
const { themeStretch } = useSettings();
return (
<Page title="Page Five">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Typography variant="h3" component="h1" paragraph>
Page Five
</Typography>
<Typography gutterBottom>
Curabitur turpis. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc,
vitae euismod ligula urna in dolor. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
id, lorem. Phasellus blandit leo ut odio. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Fusce id purus. Aliquam lorem ante, dapibus in,
viverra quis, feugiat a, tellus. In consectetuer turpis ut velit. Aenean posuere, tortor
sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.
Vestibulum suscipit nulla quis orci. Nam commodo suscipit quam. Sed a libero.
</Typography>
<Typography>
Praesent ac sem eget est egestas volutpat. Phasellus viverra nulla ut metus varius
laoreet. Curabitur ullamcorper ultricies nisi. Ut non enim eleifend felis pretium feugiat.
Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Fusce vel dui. Quisque
libero metus, condimentum nec, tempor a, commodo mollis, magna. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Cras dapibus.
</Typography>
</Container>
</Page>
);
}

37
frontend/dashboard/src/pages/PageFour.tsx Normal file
View File

@@ -0,0 +1,37 @@
// @mui
import { Container, Typography } from '@mui/material';
// hooks
import useSettings from '../hooks/useSettings';
// components
import Page from '../components/Page';
// ----------------------------------------------------------------------
export default function PageFour() {
const { themeStretch } = useSettings();
return (
<Page title="Page Four">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Typography variant="h3" component="h1" paragraph>
Page Four
</Typography>
<Typography gutterBottom>
Curabitur turpis. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc,
vitae euismod ligula urna in dolor. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
id, lorem. Phasellus blandit leo ut odio. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Fusce id purus. Aliquam lorem ante, dapibus in,
viverra quis, feugiat a, tellus. In consectetuer turpis ut velit. Aenean posuere, tortor
sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.
Vestibulum suscipit nulla quis orci. Nam commodo suscipit quam. Sed a libero.
</Typography>
<Typography>
Praesent ac sem eget est egestas volutpat. Phasellus viverra nulla ut metus varius
laoreet. Curabitur ullamcorper ultricies nisi. Ut non enim eleifend felis pretium feugiat.
Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Fusce vel dui. Quisque
libero metus, condimentum nec, tempor a, commodo mollis, magna. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Cras dapibus.
</Typography>
</Container>
</Page>
);
}

48
frontend/dashboard/src/pages/PageOne.tsx Normal file
View File

@@ -0,0 +1,48 @@
// @mui
import { Button, Container, Typography } from '@mui/material';
// hooks
import useSettings from '../hooks/useSettings';
// components
import Page from '../components/Page';
import axios from '../utils/axios';
import useAuth from '../hooks/useAuth';
// ----------------------------------------------------------------------
export default function PageOne() {
const { themeStretch } = useSettings();
const { logout } = useAuth();
const loadSomething = () => {
axios.get('/user')
};
return (
<Page title="Page One">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Typography variant="h3" component="h1" paragraph>
Page One
</Typography>
<Typography gutterBottom>
Curabitur turpis. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc,
vitae euismod ligula urna in dolor. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
id, lorem. Phasellus blandit leo ut odio. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Fusce id purus. Aliquam lorem ante, dapibus in,
viverra quis, feugiat a, tellus. In consectetuer turpis ut velit. Aenean posuere, tortor
sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.
Vestibulum suscipit nulla quis orci. Nam commodo suscipit quam. Sed a libero.
</Typography>
<Typography>
Praesent ac sem eget est egestas volutpat. Phasellus viverra nulla ut metus varius
laoreet. Curabitur ullamcorper ultricies nisi. Ut non enim eleifend felis pretium feugiat.
Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Fusce vel dui. Quisque
libero metus, condimentum nec, tempor a, commodo mollis, magna. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Cras dapibus.
</Typography>
<Button onClick={loadSomething}>Something</Button>
<Button onClick={logout}>Logout</Button>
</Container>
</Page>
);
}

38
frontend/dashboard/src/pages/PageSix.tsx Normal file
View File

@@ -0,0 +1,38 @@
// @mui
import { Container, Typography } from '@mui/material';
// hooks
import useSettings from '../hooks/useSettings';
// components
import Page from '../components/Page';
// ----------------------------------------------------------------------
export default function PageSix() {
const { themeStretch } = useSettings();
return (
<Page title="Page Six">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Typography variant="h3" component="h1" paragraph>
Page Six
</Typography>
<Typography gutterBottom>
Curabitur turpis. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc,
vitae euismod ligula urna in dolor. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
id, lorem. Phasellus blandit leo ut odio. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Fusce id purus. Aliquam lorem ante, dapibus in,
viverra quis, feugiat a, tellus. In consectetuer turpis ut velit. Aenean posuere, tortor
sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.
Vestibulum suscipit nulla quis orci. Nam commodo suscipit quam. Sed a libero.
</Typography>
<Typography>
Praesent ac sem eget est egestas volutpat. Phasellus viverra nulla ut metus varius
laoreet. Curabitur ullamcorper ultricies nisi. Ut non enim eleifend felis pretium feugiat.
Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Fusce vel dui. Quisque
libero metus, condimentum nec, tempor a, commodo mollis, magna. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Cras dapibus.
</Typography>
</Container>
</Page>
);
}

38
frontend/dashboard/src/pages/PageThree.tsx Normal file
View File

@@ -0,0 +1,38 @@
// @mui
import { Container, Typography } from '@mui/material';
// hooks
import useSettings from '../hooks/useSettings';
// components
import Page from '../components/Page';
// ----------------------------------------------------------------------
export default function PageThree() {
const { themeStretch } = useSettings();
return (
<Page title="Page Three">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Typography variant="h3" component="h1" paragraph>
Page Three
</Typography>
<Typography gutterBottom>
Curabitur turpis. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc,
vitae euismod ligula urna in dolor. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
id, lorem. Phasellus blandit leo ut odio. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Fusce id purus. Aliquam lorem ante, dapibus in,
viverra quis, feugiat a, tellus. In consectetuer turpis ut velit. Aenean posuere, tortor
sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.
Vestibulum suscipit nulla quis orci. Nam commodo suscipit quam. Sed a libero.
</Typography>
<Typography>
Praesent ac sem eget est egestas volutpat. Phasellus viverra nulla ut metus varius
laoreet. Curabitur ullamcorper ultricies nisi. Ut non enim eleifend felis pretium feugiat.
Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Fusce vel dui. Quisque
libero metus, condimentum nec, tempor a, commodo mollis, magna. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Cras dapibus.
</Typography>
</Container>
</Page>
);
}

38
frontend/dashboard/src/pages/PageTwo.tsx Normal file
View File

@@ -0,0 +1,38 @@
// @mui
import { Container, Typography } from '@mui/material';
// hooks
import useSettings from '../hooks/useSettings';
// components
import Page from '../components/Page';
// ----------------------------------------------------------------------
export default function PageTwo() {
const { themeStretch } = useSettings();
return (
<Page title="Page Two">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Typography variant="h3" component="h1" paragraph>
Page Two
</Typography>
<Typography gutterBottom>
Curabitur turpis. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc,
vitae euismod ligula urna in dolor. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
id, lorem. Phasellus blandit leo ut odio. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Fusce id purus. Aliquam lorem ante, dapibus in,
viverra quis, feugiat a, tellus. In consectetuer turpis ut velit. Aenean posuere, tortor
sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.
Vestibulum suscipit nulla quis orci. Nam commodo suscipit quam. Sed a libero.
</Typography>
<Typography>
Praesent ac sem eget est egestas volutpat. Phasellus viverra nulla ut metus varius
laoreet. Curabitur ullamcorper ultricies nisi. Ut non enim eleifend felis pretium feugiat.
Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Fusce vel dui. Quisque
libero metus, condimentum nec, tempor a, commodo mollis, magna. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Cras dapibus.
</Typography>
</Container>
</Page>
);
}

135
frontend/dashboard/src/pages/auth/Login.tsx Normal file
View File

@@ -0,0 +1,135 @@
import { capitalCase } from 'change-case';
import { Link as RouterLink } from 'react-router-dom';
// @mui
import { styled } from '@mui/material/styles';
import { Box, Card, Stack, Link, Alert, Tooltip, Container, Typography } from '@mui/material';
// routes
import { PATH_AUTH } from '../../routes/paths';
// hooks
import useAuth from '../../hooks/useAuth';
import useResponsive from '../../hooks/useResponsive';
// components
import Page from '../../components/Page';
import Logo from '../../components/Logo';
import Image from '../../components/Image';
// sections
import { LoginForm } from '../../sections/auth/login';
// ----------------------------------------------------------------------
const RootStyle = styled('div')(({ theme }) => ({
[theme.breakpoints.up('md')]: {
display: 'flex',
},
}));
const HeaderStyle = styled('header')(({ theme }) => ({
top: 0,
zIndex: 9,
lineHeight: 0,
width: '100%',
display: 'flex',
alignItems: 'center',
position: 'absolute',
padding: theme.spacing(3),
justifyContent: 'space-between',
[theme.breakpoints.up('md')]: {
alignItems: 'flex-start',
padding: theme.spacing(7, 5, 0, 7),
},
}));
const SectionStyle = styled(Card)(({ theme }) => ({
width: '100%',
maxWidth: 464,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
margin: theme.spacing(2, 0, 2, 2),
}));
const ContentStyle = styled('div')(({ theme }) => ({
maxWidth: 480,
margin: 'auto',
display: 'flex',
minHeight: '100vh',
flexDirection: 'column',
justifyContent: 'center',
padding: theme.spacing(12, 0),
}));
// ----------------------------------------------------------------------
export default function Login() {
const { method } = useAuth();
const smUp = useResponsive('up', 'sm');
const mdUp = useResponsive('up', 'md');
return (
<Page title="Login">
<RootStyle>
<HeaderStyle>
<Logo />
{smUp && (
<Typography variant="body2" sx={{ mt: { md: -2 } }}>
Don’t have an account? {''}
<Link variant="subtitle2" component={RouterLink} to={PATH_AUTH.register}>
Get started
</Link>
</Typography>
)}
</HeaderStyle>
{mdUp && (
<SectionStyle>
<Typography variant="h3" sx={{ px: 5, mt: 10, mb: 5 }}>
Hi, Welcome Back
</Typography>
<Image
visibleByDefault
disabledEffect
src="https://minimal-assets-api.vercel.app/assets/illustrations/illustration_login.png"
alt="login"
/>
</SectionStyle>
)}
<Container maxWidth="sm">
<ContentStyle>
<Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
<Box sx={{ flexGrow: 1 }}>
<Typography variant="h4" gutterBottom>
Sign in to Minimal
</Typography>
<Typography sx={{ color: 'text.secondary' }}>Enter your details below.</Typography>
</Box>
<Tooltip title={capitalCase(method)} placement="right">
<>
<Image
disabledEffect
src={`https://minimal-assets-api.vercel.app/assets/icons/auth/ic_${method}.png`}
sx={{ width: 32, height: 32 }}
/>
</>
</Tooltip>
</Stack>
<LoginForm />
{!smUp && (
<Typography variant="body2" align="center" sx={{ mt: 3 }}>
Don’t have an account?{' '}
<Link variant="subtitle2" component={RouterLink} to={PATH_AUTH.register}>
Get started
</Link>
</Typography>
)}
</ContentStyle>
</Container>
</RootStyle>
</Page>
);
}

148
frontend/dashboard/src/pages/auth/Register.tsx Normal file
View File

@@ -0,0 +1,148 @@
import { capitalCase } from 'change-case';
import { Link as RouterLink } from 'react-router-dom';
// @mui
import { styled } from '@mui/material/styles';
import { Box, Card, Link, Container, Typography, Tooltip } from '@mui/material';
// hooks
import useAuth from '../../hooks/useAuth';
import useResponsive from '../../hooks/useResponsive';
// routes
import { PATH_AUTH } from '../../routes/paths';
// components
import Page from '../../components/Page';
import Logo from '../../components/Logo';
import Image from '../../components/Image';
// sections
import { RegisterForm } from '../../sections/auth/register';
// ----------------------------------------------------------------------
const RootStyle = styled('div')(({ theme }) => ({
[theme.breakpoints.up('md')]: {
display: 'flex',
},
}));
const HeaderStyle = styled('header')(({ theme }) => ({
top: 0,
zIndex: 9,
lineHeight: 0,
width: '100%',
display: 'flex',
alignItems: 'center',
position: 'absolute',
padding: theme.spacing(3),
justifyContent: 'space-between',
[theme.breakpoints.up('md')]: {
alignItems: 'flex-start',
padding: theme.spacing(7, 5, 0, 7),
},
}));
const SectionStyle = styled(Card)(({ theme }) => ({
width: '100%',
maxWidth: 464,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
margin: theme.spacing(2, 0, 2, 2),
}));
const ContentStyle = styled('div')(({ theme }) => ({
maxWidth: 480,
margin: 'auto',
display: 'flex',
minHeight: '100vh',
flexDirection: 'column',
justifyContent: 'center',
padding: theme.spacing(12, 0),
}));
// ----------------------------------------------------------------------
export default function Register() {
const { method } = useAuth();
const smUp = useResponsive('up', 'sm');
const mdUp = useResponsive('up', 'md');
return (
<Page title="Register">
<RootStyle>
<HeaderStyle>
<Logo />
{smUp && (
<Typography variant="body2" sx={{ mt: { md: -2 } }}>
Already have an account? {''}
<Link variant="subtitle2" component={RouterLink} to={PATH_AUTH.login}>
Login
</Link>
</Typography>
)}
</HeaderStyle>
{mdUp && (
<SectionStyle>
<Typography variant="h3" sx={{ px: 5, mt: 10, mb: 5 }}>
Manage the job more effectively with Minimal
</Typography>
<Image
visibleByDefault
disabledEffect
alt="register"
src="https://minimal-assets-api.vercel.app/assets/illustrations/illustration_register.png"
/>
</SectionStyle>
)}
<Container>
<ContentStyle>
<Box sx={{ mb: 5, display: 'flex', alignItems: 'center' }}>
<Box sx={{ flexGrow: 1 }}>
<Typography variant="h4" gutterBottom>
Get started absolutely free.
</Typography>
<Typography sx={{ color: 'text.secondary' }}>
Free forever. No credit card needed.
</Typography>
</Box>
<Tooltip title={capitalCase(method)}>
<>
<Image
disabledEffect
src={`https://minimal-assets-api.vercel.app/assets/icons/auth/ic_${method}.png`}
sx={{ width: 32, height: 32 }}
/>
</>
</Tooltip>
</Box>
<RegisterForm />
<Typography variant="body2" align="center" sx={{ color: 'text.secondary', mt: 3 }}>
By registering, I agree to Minimal&nbsp;
<Link underline="always" color="text.primary" href="#">
Terms of Service
</Link>
{''}and{''}
<Link underline="always" color="text.primary" href="#">
Privacy Policy
</Link>
.
</Typography>
{!smUp && (
<Typography variant="body2" sx={{ mt: 3, textAlign: 'center' }}>
Already have an account?{' '}
<Link variant="subtitle2" to={PATH_AUTH.login} component={RouterLink}>
Login
</Link>
</Typography>
)}
</ContentStyle>
</Container>
</RootStyle>
</Page>
);
}

98
frontend/dashboard/src/pages/auth/ResetPassword.tsx Normal file
View File

@@ -0,0 +1,98 @@
import { useState } from 'react';
import { Link as RouterLink } from 'react-router-dom';
// @mui
import { styled } from '@mui/material/styles';
import { Box, Button, Container, Typography } from '@mui/material';
// layouts
import LogoOnlyLayout from '../../layouts/LogoOnlyLayout';
// routes
import { PATH_AUTH } from '../../routes/paths';
// components
import Page from '../../components/Page';
// sections
import { ResetPasswordForm } from '../../sections/auth/reset-password';
// assets
import { SentIcon } from '../../assets';
// ----------------------------------------------------------------------
const RootStyle = styled('div')(({ theme }) => ({
display: 'flex',
minHeight: '100%',
alignItems: 'center',
justifyContent: 'center',
padding: theme.spacing(12, 0),
}));
// ----------------------------------------------------------------------
export default function ResetPassword() {
const [email, setEmail] = useState('');
const [sent, setSent] = useState(false);
return (
<Page title="Reset Password" sx={{ height: 1 }}>
<RootStyle>
<LogoOnlyLayout />
<Container>
<Box sx={{ maxWidth: 480, mx: 'auto' }}>
{!sent ? (
<>
<Typography variant="h3" paragraph>
Forgot your password?
</Typography>
<Typography sx={{ color: 'text.secondary', mb: 5 }}>
Please enter the email address associated with your account and We will email you
a link to reset your password.
</Typography>
<ResetPasswordForm
onSent={() => setSent(true)}
onGetEmail={(value) => setEmail(value)}
/>
<Button
fullWidth
size="large"
component={RouterLink}
to={PATH_AUTH.login}
sx={{ mt: 1 }}
>
Back
</Button>
</>
) : (
<Box sx={{ textAlign: 'center' }}>
<SentIcon sx={{ mb: 5, mx: 'auto', height: 160 }} />
<Typography variant="h3" gutterBottom>
Request sent successfully
</Typography>
<Typography>
We have sent a confirmation email to &nbsp;
<strong>{email}</strong>
<br />
Please check your email.
</Typography>
<Button
size="large"
variant="contained"
component={RouterLink}
to={PATH_AUTH.login}
sx={{ mt: 5 }}
>
Back
</Button>
</Box>
)}
</Box>
</Container>
</RootStyle>
</Page>
);
}

67
frontend/dashboard/src/pages/auth/VerifyCode.tsx Normal file
View File

@@ -0,0 +1,67 @@
import { Link as RouterLink } from 'react-router-dom';
// @mui
import { styled } from '@mui/material/styles';
import { Box, Button, Link, Container, Typography } from '@mui/material';
// layouts
import LogoOnlyLayout from '../../layouts/LogoOnlyLayout';
// routes
import { PATH_AUTH } from '../../routes/paths';
// components
import Page from '../../components/Page';
import Iconify from '../../components/Iconify';
// sections
import { VerifyCodeForm } from '../../sections/auth/verify-code';
// ----------------------------------------------------------------------
const RootStyle = styled('div')(({ theme }) => ({
display: 'flex',
height: '100%',
alignItems: 'center',
padding: theme.spacing(12, 0),
}));
// ----------------------------------------------------------------------
export default function VerifyCode() {
return (
<Page title="Verify" sx={{ height: 1 }}>
<RootStyle>
<LogoOnlyLayout />
<Container>
<Box sx={{ maxWidth: 480, mx: 'auto' }}>
<Button
size="small"
component={RouterLink}
to={PATH_AUTH.login}
startIcon={<Iconify icon={'eva:arrow-ios-back-fill'} width={20} height={20} />}
sx={{ mb: 3 }}
>
Back
</Button>
<Typography variant="h3" paragraph>
Please check your email!
</Typography>
<Typography sx={{ color: 'text.secondary' }}>
We have emailed a 6-digit confirmation code to acb@domain, please enter the code in
below box to verify your email.
</Typography>
<Box sx={{ mt: 5, mb: 3 }}>
<VerifyCodeForm />
</Box>
<Typography variant="body2" align="center">
Don’t have a code? &nbsp;
<Link variant="subtitle2" underline="none" onClick={() => {}}>
Resend code
</Link>
</Typography>
</Box>
</Container>
</RootStyle>
</Page>
);
}