fix merge
This commit is contained in:
Muhammad Fajar
@@ -12,7 +12,7 @@ use Symfony\Component\HttpFoundation\Response;
|
|||||||
|
|
||||||
class AuthController extends Controller
|
class AuthController extends Controller
|
||||||
{
|
{
|
||||||
public function requestOtp(Request $request)
|
public function login(Request $request)
|
||||||
{
|
{
|
||||||
$request->validate([
|
$request->validate([
|
||||||
'phoneOrEmail' => 'required'
|
'phoneOrEmail' => 'required'
|
||||||
|
|||||||
@@ -1,134 +0,0 @@
|
|||||||
import { capitalCase } from 'change-case';
|
|
||||||
// @mui
|
|
||||||
import { styled } from '@mui/material/styles';
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
Card,
|
|
||||||
Divider,
|
|
||||||
Grid,
|
|
||||||
Link,
|
|
||||||
Stack,
|
|
||||||
IconButton,
|
|
||||||
Typography,
|
|
||||||
} from '@mui/material';
|
|
||||||
// hooks
|
|
||||||
import useAuth from '../../hooks/useAuth';
|
|
||||||
// components
|
|
||||||
import Page from '../../components/Page';
|
|
||||||
import Image from '../../components/Image';
|
|
||||||
import Iconify from '../../components/Iconify';
|
|
||||||
// sections
|
|
||||||
import { VerifyCodeForm } from '../../sections/auth/verify-code';
|
|
||||||
// react
|
|
||||||
import { useState } from 'react';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------
|
|
||||||
|
|
||||||
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 OtpValidation() {
|
|
||||||
const { method } = useAuth();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const formPhone = false;
|
|
||||||
|
|
||||||
const handlerChange = (event: any, setForm: boolean) => {
|
|
||||||
event.preventDefault();
|
|
||||||
// setFormPhone(setForm);
|
|
||||||
navigate('/auth/login', { state: { setForm: setForm } });
|
|
||||||
};
|
|
||||||
|
|
||||||
const otpRequestHandler = (event: any) => {
|
|
||||||
event.preventDefault();
|
|
||||||
alert('otp sudah dikirim ulang!');
|
|
||||||
};
|
|
||||||
|
|
||||||
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 }}>
|
|
||||||
<Stack direction="column" justifyContent="flex-start" sx={{ mb: 5 }}>
|
|
||||||
<Stack direction="row" alignItems="center">
|
|
||||||
<IconButton sx={{ marginRight: '10px' }}>
|
|
||||||
<Iconify icon="heroicons-outline:arrow-narrow-left" sx={{ color: '#424242' }} />
|
|
||||||
</IconButton>
|
|
||||||
<Typography variant="h5">Verifikasi OTP</Typography>
|
|
||||||
</Stack>
|
|
||||||
|
|
||||||
{/* <Box sx={{ flexGrow: 1 }}> */}
|
|
||||||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
|
||||||
Masukkan kode OTP anda disini
|
|
||||||
</Typography>
|
|
||||||
{/* </Box> */}
|
|
||||||
</Stack>
|
|
||||||
|
|
||||||
<VerifyCodeForm />
|
|
||||||
|
|
||||||
<Stack alignItems="center" sx={{ marginTop: 5 }}>
|
|
||||||
<Typography variant="caption" sx={{ color: 'text.secondary' }} gutterBottom>
|
|
||||||
Tidak Mendapatkan Kode?
|
|
||||||
</Typography>
|
|
||||||
<Link
|
|
||||||
variant="subtitle2"
|
|
||||||
href=""
|
|
||||||
align="center"
|
|
||||||
underline="hover"
|
|
||||||
onClick={(event) => otpRequestHandler(event)}
|
|
||||||
>
|
|
||||||
Kirim Ulang Kode OTP
|
|
||||||
</Link>
|
|
||||||
</Stack>
|
|
||||||
|
|
||||||
<Divider sx={{ marginTop: 5 }}>Atau</Divider>
|
|
||||||
|
|
||||||
<Stack sx={{ marginTop: 5 }}>
|
|
||||||
{formPhone === false ? (
|
|
||||||
<Link
|
|
||||||
href=""
|
|
||||||
align="center"
|
|
||||||
underline="hover"
|
|
||||||
onClick={(event) => handlerChange(event, true)}
|
|
||||||
>
|
|
||||||
Masuk menggunakan nomor handphone
|
|
||||||
</Link>
|
|
||||||
) : (
|
|
||||||
<Link
|
|
||||||
href=""
|
|
||||||
align="center"
|
|
||||||
underline="hover"
|
|
||||||
onClick={(event) => handlerChange(event, false)}
|
|
||||||
>
|
|
||||||
Masuk menggunakan email
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</ContentStyle>
|
|
||||||
</RootStyle>
|
|
||||||
</Page>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
107
frontend/client-portal/src/pages/auth/VerifyCode.tsx
Executable file
107
frontend/client-portal/src/pages/auth/VerifyCode.tsx
Executable file
@@ -0,0 +1,107 @@
|
|||||||
|
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