login validate
This commit is contained in:
Muhammad Fajar
@@ -1,19 +1,15 @@
|
||||
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';
|
||||
import { Box, Card, Divider, Grid, Link, Stack, Typography } from '@mui/material';
|
||||
// components
|
||||
import Page from '../../components/Page';
|
||||
import Logo from '../../components/Logo';
|
||||
import Image from '../../components/Image';
|
||||
import Logo from '../../components/Logo';
|
||||
// react
|
||||
import { useEffect, useState } from 'react';
|
||||
// sections
|
||||
import { LoginForm } from '../../sections/auth/login';
|
||||
import { LoginEmailForm, LoginPhoneForm } from '../../sections/auth/login';
|
||||
import { useLocation } from 'react-router';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
@@ -21,117 +17,88 @@ 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),
|
||||
alignItems: 'center',
|
||||
}));
|
||||
|
||||
const ContentStyle = styled(Card)(({ theme }) => ({
|
||||
[theme.breakpoints.up('md')]: {
|
||||
maxHeight: '600px',
|
||||
maxWidth: '1000px',
|
||||
},
|
||||
}));
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function Login() {
|
||||
const { method } = useAuth();
|
||||
const { state } = useLocation();
|
||||
const [formPhone, setFormPhone] = useState(false);
|
||||
|
||||
const smUp = useResponsive('up', 'sm');
|
||||
const handlerChange = (event: any, setForm: boolean) => {
|
||||
event.preventDefault();
|
||||
setFormPhone(setForm);
|
||||
};
|
||||
|
||||
const mdUp = useResponsive('up', 'md');
|
||||
useEffect(() => {
|
||||
// if (state !== null) {
|
||||
// setFormPhone(state.formPhone);
|
||||
// }
|
||||
// console.log(state);
|
||||
}, [state]);
|
||||
|
||||
return (
|
||||
<Page title="Login">
|
||||
<RootStyle>
|
||||
<HeaderStyle>
|
||||
<Logo sx={{ width: 150, height: 150 }} />
|
||||
{smUp && (
|
||||
<Typography variant="body2" sx={{ mt: { md: -2 } }}>
|
||||
Has problem with your account? {''}
|
||||
<Link variant="subtitle2" component={RouterLink} to="#" onClick={(e) => {
|
||||
window.location.href = "mailto:admin@linksehat.com";
|
||||
e.preventDefault();
|
||||
}}>
|
||||
Contact Us
|
||||
</Link>
|
||||
</Typography>
|
||||
)}
|
||||
</HeaderStyle>
|
||||
<ContentStyle>
|
||||
<Grid container>
|
||||
<Grid item xs={6}>
|
||||
<Image visibleByDefault disabledEffect src="/images/login-image.gif" alt="login" />
|
||||
</Grid>
|
||||
<Grid item xs={6} sx={{ padding: 3 }}>
|
||||
<Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
|
||||
<Logo sx={{ width: 90, height: 90 }} />
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Sign in to LinkSehat
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ color: 'text.secondary' }}>
|
||||
Enter your details below.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{/* {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>
|
||||
)} */}
|
||||
{formPhone ? (
|
||||
<LoginPhoneForm formPhone={formPhone} />
|
||||
) : (
|
||||
<LoginEmailForm formPhone={formPhone} />
|
||||
)}
|
||||
|
||||
<Container maxWidth="sm">
|
||||
<ContentStyle>
|
||||
<Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Sign in to LinkSehat
|
||||
</Typography>
|
||||
<Typography sx={{ color: 'text.secondary' }}>Enter your details below.</Typography>
|
||||
</Box>
|
||||
<Divider sx={{ marginTop: 5 }}>Atau</Divider>
|
||||
|
||||
<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 />
|
||||
|
||||
{false && !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>
|
||||
<Stack sx={{ marginTop: 5 }}>
|
||||
{formPhone ? (
|
||||
<Link
|
||||
align="center"
|
||||
underline="hover"
|
||||
onClick={(event) => handlerChange(event, false)}
|
||||
>
|
||||
Masuk menggunakan email
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
align="center"
|
||||
underline="hover"
|
||||
onClick={(event) => handlerChange(event, true)}
|
||||
>
|
||||
Masuk menggunakan nomor handphone
|
||||
</Link>
|
||||
)}
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</ContentStyle>
|
||||
</RootStyle>
|
||||
</Page>
|
||||
);
|
||||
|
||||
@@ -1,148 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,66 +1,109 @@
|
||||
import { Link as RouterLink } from 'react-router-dom';
|
||||
import { Link as RouterLink, useLocation, useNavigate } 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';
|
||||
import { Box, Card, Divider, IconButton, Grid, Link, Stack, Typography } from '@mui/material';
|
||||
// components
|
||||
import Page from '../../components/Page';
|
||||
import Image from '../../components/Image';
|
||||
import Iconify from '../../components/Iconify';
|
||||
// sections
|
||||
import { VerifyCodeForm } from '../../sections/auth/verify-code';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
const RootStyle = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
[theme.breakpoints.up('md')]: {
|
||||
display: 'flex',
|
||||
},
|
||||
minHeight: '100vh',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: theme.spacing(12, 0),
|
||||
}));
|
||||
|
||||
const ContentStyle = styled(Card)(({ theme }) => ({
|
||||
[theme.breakpoints.up('md')]: {
|
||||
maxHeight: '600px',
|
||||
maxWidth: '1000px',
|
||||
},
|
||||
}));
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function VerifyCode() {
|
||||
const { state } = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
if (state === null) {
|
||||
navigate('/auth/login');
|
||||
} else {
|
||||
console.log(state);
|
||||
}
|
||||
}, [state, navigate]);
|
||||
|
||||
return (
|
||||
<Page title="Verify" sx={{ height: 1 }}>
|
||||
<Page title="Login">
|
||||
<RootStyle>
|
||||
<LogoOnlyLayout />
|
||||
<ContentStyle>
|
||||
<Grid container>
|
||||
<Grid item xs={6}>
|
||||
<Image visibleByDefault disabledEffect src="/images/login-image.gif" alt="login" />
|
||||
</Grid>
|
||||
<Grid item xs={6} sx={{ padding: 3 }}>
|
||||
<Stack direction="column" sx={{ mb: 5 }}>
|
||||
<Stack direction="row" alignItems="center">
|
||||
<IconButton
|
||||
onClick={() =>
|
||||
navigate('/auth/login', { state: { formPhone: state.formPhone } })
|
||||
}
|
||||
>
|
||||
<Iconify
|
||||
icon="heroicons-outline:arrow-narrow-left"
|
||||
sx={{ marginRight: '10px' }}
|
||||
/>
|
||||
</IconButton>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Verifikasi OTP
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Typography variant="body1" sx={{ color: 'text.secondary' }}>
|
||||
Masukkan kode OTP anda disini
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<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>
|
||||
<Divider sx={{ marginTop: 5 }}>Atau</Divider>
|
||||
|
||||
<Stack sx={{ marginTop: 5 }}>
|
||||
{state.formPhone === false ? (
|
||||
<Link
|
||||
align="center"
|
||||
underline="hover"
|
||||
onClick={() =>
|
||||
navigate('/auth/login', { state: { formPhone: state.formPhone } })
|
||||
}
|
||||
>
|
||||
Masuk menggunakan nomor handphone
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
align="center"
|
||||
underline="hover"
|
||||
onClick={() =>
|
||||
navigate('/auth/login', { state: { formPhone: state.formPhone } })
|
||||
}
|
||||
>
|
||||
Masuk menggunakan email
|
||||
</Link>
|
||||
)}
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</ContentStyle>
|
||||
</RootStyle>
|
||||
</Page>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user