Separate Client Portal & Dashboard
This commit is contained in:
135
frontend/dashboard/src/pages/auth/Login.tsx
Normal file
135
frontend/dashboard/src/pages/auth/Login.tsx
Normal 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
148
frontend/dashboard/src/pages/auth/Register.tsx
Normal 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
|
||||
<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
98
frontend/dashboard/src/pages/auth/ResetPassword.tsx
Normal 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
|
||||
<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
67
frontend/dashboard/src/pages/auth/VerifyCode.tsx
Normal 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?
|
||||
<Link variant="subtitle2" underline="none" onClick={() => {}}>
|
||||
Resend code
|
||||
</Link>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Container>
|
||||
</RootStyle>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user