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

fix merge

Browse Source
This commit is contained in:
Muhammad Fajar
2022-11-17 16:22:20 +07:00
parent 176b5d5f2c
commit 9a0032ae17
3 changed files with 108 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Modules/Client/Http/Controllers/Api/AuthController.php
View File

@@ -12,7 +12,7 @@ use Symfony\Component\HttpFoundation\Response;
class AuthController extends Controller
{
public function requestOtp(Request $request)
public function login(Request $request)
{
$request->validate([
'phoneOrEmail' => 'required'

134
frontend/client-portal/src/pages/auth/OtpValidation.tsx
View File

@@ -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
View 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>
);
}