fix login & verify code
This commit is contained in:
Muhammad Fajar
@@ -1,17 +1,16 @@
|
||||
// @mui
|
||||
/* ---------------------------------- @mui ---------------------------------- */
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { Box, Card, Divider, Grid, Link, Stack, Typography } from '@mui/material';
|
||||
// components
|
||||
import { Box, Card, Divider, Grid, Link, Stack, Typography, IconButton } from '@mui/material';
|
||||
/* ------------------------------- components ------------------------------- */
|
||||
import Page from '../../components/Page';
|
||||
import Image from '../../components/Image';
|
||||
// sections
|
||||
import { LoginEmailForm, LoginPhoneForm } from '../../sections/auth/login';
|
||||
import Logo from '../../components/Logo';
|
||||
// react
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import Iconify from '../../components/Iconify';
|
||||
/* ---------------------------------- hooks --------------------------------- */
|
||||
import useLocalStorage from '../../hooks/useLocalStorage';
|
||||
/* -------------------------------- sections -------------------------------- */
|
||||
import { LoginEmailForm, LoginPhoneForm, VerifyCodeForm } from '../../sections/auth/login';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
/* --------------------------------- styled --------------------------------- */
|
||||
|
||||
const RootStyle = styled('div')(({ theme }) => ({
|
||||
[theme.breakpoints.up('md')]: {
|
||||
@@ -33,20 +32,9 @@ const ContentStyle = styled(Card)(({ theme }) => ({
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function Login() {
|
||||
const { state } = useLocation();
|
||||
const [formPhone, setFormPhone] = useState(false);
|
||||
|
||||
const handlerChange = (event: any, setForm: boolean) => {
|
||||
event.preventDefault();
|
||||
setFormPhone(setForm);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (state !== null) {
|
||||
setFormPhone(state.formPhone);
|
||||
}
|
||||
console.log(state);
|
||||
}, [state]);
|
||||
const [emailOrPhone, setEmailOrPhone] = useLocalStorage('emailOrPhone', '');
|
||||
const [emailOrPhoneForm, setEmailOrPhoneForm] = useLocalStorage('emailOrPhoneForm', false);
|
||||
const [loginOrVerifyCode, setLoginOrVerifyCode] = useLocalStorage('loginOrVerifyCode', false);
|
||||
|
||||
return (
|
||||
<Page title="Login">
|
||||
@@ -66,32 +54,87 @@ export default function Login() {
|
||||
</video>
|
||||
</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>
|
||||
{loginOrVerifyCode && emailOrPhone ? (
|
||||
<>
|
||||
<Stack direction="column" sx={{ mb: 5 }}>
|
||||
<Stack direction="row" alignItems="center">
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
localStorage.removeItem('emailOrPhone');
|
||||
setLoginOrVerifyCode(false);
|
||||
}}
|
||||
>
|
||||
<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', textAlign: 'left' }}
|
||||
>
|
||||
Masukkan kode OTP anda disini
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{formPhone ? (
|
||||
<LoginPhoneForm formPhone={formPhone} />
|
||||
<VerifyCodeForm
|
||||
setEmailOrPhoneForm={setEmailOrPhoneForm}
|
||||
setLoginOrVerifyCode={setLoginOrVerifyCode}
|
||||
emailOrPhone={emailOrPhone}
|
||||
/>
|
||||
|
||||
<Stack sx={{ marginTop: 5 }} spacing={1} alignItems="center">
|
||||
<Typography>Tidak mendapatkan kode?</Typography>
|
||||
<Link sx={{ cursor: 'pointer' }}>Kirim Ulang Kode OTP</Link>
|
||||
</Stack>
|
||||
</>
|
||||
) : (
|
||||
<LoginEmailForm formPhone={formPhone} />
|
||||
<>
|
||||
<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>
|
||||
|
||||
{emailOrPhoneForm ? (
|
||||
<LoginPhoneForm
|
||||
setEmailOrPhone={setEmailOrPhone}
|
||||
setLoginOrVerifyCode={setLoginOrVerifyCode}
|
||||
/>
|
||||
) : (
|
||||
<LoginEmailForm
|
||||
setEmailOrPhone={setEmailOrPhone}
|
||||
setLoginOrVerifyCode={setLoginOrVerifyCode}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<Divider sx={{ marginTop: 5 }}>Atau</Divider>
|
||||
|
||||
<Stack sx={{ marginTop: 5 }}>
|
||||
{formPhone ? (
|
||||
{emailOrPhoneForm ? (
|
||||
<Link
|
||||
align="center"
|
||||
underline="hover"
|
||||
onClick={(event) => handlerChange(event, false)}
|
||||
onClick={() => {
|
||||
setEmailOrPhone('');
|
||||
setLoginOrVerifyCode(false);
|
||||
setEmailOrPhoneForm(false);
|
||||
}}
|
||||
sx={{ cursor: 'pointer' }}
|
||||
>
|
||||
Masuk menggunakan email
|
||||
</Link>
|
||||
@@ -99,7 +142,12 @@ export default function Login() {
|
||||
<Link
|
||||
align="center"
|
||||
underline="hover"
|
||||
onClick={(event) => handlerChange(event, true)}
|
||||
onClick={() => {
|
||||
setEmailOrPhone('');
|
||||
setLoginOrVerifyCode(false);
|
||||
setEmailOrPhoneForm(true);
|
||||
}}
|
||||
sx={{ cursor: 'pointer' }}
|
||||
>
|
||||
Masuk menggunakan nomor handphone
|
||||
</Link>
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
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 }) => ({
|
||||
[theme.breakpoints.up('md')]: {
|
||||
display: 'flex',
|
||||
},
|
||||
minHeight: '100vh',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}));
|
||||
|
||||
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');
|
||||
}
|
||||
}, [state, navigate]);
|
||||
|
||||
return (
|
||||
<Page title="Login">
|
||||
<RootStyle>
|
||||
<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, textAlign: 'center' }}>
|
||||
<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', textAlign: 'left' }}>
|
||||
Masukkan kode OTP anda disini
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<VerifyCodeForm phoneOrEmail={state.phoneOrEmail} />
|
||||
|
||||
<Typography sx={{ marginTop: 5 }}>Tidak mendapatkan kode?</Typography>
|
||||
<Link sx={{ marginTop: 1 }}>Kirim Ulang Kode OTP</Link>
|
||||
|
||||
<Divider sx={{ marginTop: 5 }}>Atau</Divider>
|
||||
|
||||
<Stack sx={{ marginTop: 5 }}>
|
||||
{state.formPhone ? (
|
||||
<Link
|
||||
align="center"
|
||||
underline="hover"
|
||||
onClick={() => navigate('/auth/login', { state: { formPhone: false } })}
|
||||
>
|
||||
Masuk menggunakan email
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
align="center"
|
||||
underline="hover"
|
||||
onClick={() => navigate('/auth/login', { state: { formPhone: true } })}
|
||||
>
|
||||
Masuk menggunakan nomor handphone
|
||||
</Link>
|
||||
)}
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</ContentStyle>
|
||||
</RootStyle>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user