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

login validate

Browse Source
This commit is contained in:
Muhammad Fajar
2022-11-14 13:50:10 +07:00
parent 20944e4992
commit 6eb225026a
21 changed files with 633 additions and 714 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,45 +2,97 @@
namespace Modules\Client\Http\Controllers\Api;
use App\Helpers\Helper;
use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Symfony\Component\HttpFoundation\Response;
class AuthController extends Controller
{
public function login(Request $request)
{
$request->validate([
'email' => 'required|email',
'password' => 'required'
'phoneOrEmail' => 'required'
]);
$user = User::query()
->where('email', $request->email)
->first();
->when(filter_var($request->phoneOrEmail, FILTER_VALIDATE_EMAIL), function (Builder $query) use ($request) {
$query->getQuery()->where('email', $request->phoneOrEmail);
}, function (Builder $query) use ($request) {
$query->getQuery()->where('phone', $request->phoneOrEmail);
})
->first();
if (!$user) {
return response(['message' => 'User Tidak Ditemukan'], 404);
$message = filter_var($request->phoneOrEmail, FILTER_VALIDATE_EMAIL) ? "User dengan alamat email " . $request->phoneOrEmail . " tidak ditemukan" : "User dengan nomor telepon " . $request->phoneOrEmail . " tidak ditemukan";
return Helper::responseJson(statusCode: Response::HTTP_NOT_FOUND, message: $message);
}
if (!Hash::check($request->password, $user->password)) {
return response(['message' => 'Password Salah'], 403);
if (filter_var($request->phoneOrEmail, FILTER_VALIDATE_EMAIL)) {
User::query()->find($user->id)->update([
'email' => $request->phoneOrEmail,
'otp' => rand(1000, 9999),
'otp_created_at' => now()
]);
} else {
User::query()->find($user->id)->update([
'phone' => $request->phoneOrEmail,
'otp' => rand(1000, 9999),
'otp_created_at' => now()
]);
}
return response([
'message' => 'Selamat Datang',
'user' => $user,
'token' => $user->createToken('app')->plainTextToken
// TODO Send the OTP
if (filter_var($request->phoneOrEmail, FILTER_VALIDATE_EMAIL)) {
// Send Email
} else {
// Send Whatsapp
}
return Helper::responseJson(message: 'OTP Terkirim');
}
public function validateOtp(Request $request)
{
echo '<pre>';
var_dump($_POST, $_GET);
echo '</pre>';
exit;
$request->validate([
'phoneOrEmail' => 'required',
'otp' => 'required'
]);
$user = User::query()
->when(filter_var($request->phoneOrEmail, FILTER_VALIDATE_EMAIL), function (Builder $query) use ($request) {
$query->getQuery()->where('email', $request->phoneOrEmail);
}, function (Builder $query) use ($request) {
$query->getQuery()->where('phone', $request->phoneOrEmail);
})
->first();
if ($user->otp == $request->otp) {
return Helper::responseJson(
data: [
'token' => $user->createToken('app')->plainTextToken,
'user' => $user,
],
message: 'Selamat Datang'
);
}
return Helper::responseJson(message: 'OTP yang anda masukan salah!');
}
public function logout(Request $request)
{
$token = $request->bearerToken();
Auth::user()->tokens()->where('id', $token)->delete();
$request->user()->currentAccessToken()->delete();
return response(['message' => 'Berhasil Logout.']);
return Helper::responseJson(message: 'Berhasil Logout.');
}
}

13
Modules/Client/Routes/api.php
View File

@@ -18,19 +18,18 @@ use Modules\Client\Http\Controllers\Api\UserController;
*/
Route::prefix('client')->group(function () {
Route::post('login', [AuthController::class, 'login'])->name('login');
Route::post('forget-password', [AuthController::class, 'forgetPassword'])->name('forget-password');
Route::post('verify-email', [AuthController::class, 'verifyEmail'])->name('verify-email');
Route::controller(AuthController::class)->group(function () {
Route::post('login', 'login');
Route::post('verify-code', 'validateOtp');
});
Route::middleware('auth:sanctum')->group(function () {
Route::post('logout', [AuthController::class, 'logout'])->name('logout');
Route::get('/user', [UserController::class, 'index']);
Route::get('dashboard', [DashboardController::class, 'index']);
Route::get('members', [MemberController::class, 'index']);
});
});

BIN
frontend/client-portal/public/images/login-image.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 MiB

24
frontend/client-portal/src/@types/auth.ts
View File

@@ -1,4 +1,4 @@
import { UserCredential } from 'firebase/auth';
// import { UserCredential } from 'firebase/auth';
// ----------------------------------------------------------------------
@@ -26,20 +26,20 @@ export type JWTContextType = {
isInitialized: boolean;
user: AuthUser;
method: 'jwt';
login: (email: string, password: string) => Promise<void>;
register: (email: string, password: string, firstName: string, lastName: string) => Promise<void>;
login: (phoneOrEmail: string) => Promise<void>;
validateOtp: (phoneOrEmail: string, otp: string) => Promise<void>
logout: () => Promise<void>;
};
export type FirebaseContextType = {
isAuthenticated: boolean;
isInitialized: boolean;
user: AuthUser;
method: 'firebase';
login: (email: string, password: string) => Promise<UserCredential>;
register: (email: string, password: string, firstName: string, lastName: string) => Promise<void>;
logout: () => Promise<void>;
};
// export type FirebaseContextType = {
// isAuthenticated: boolean;
// isInitialized: boolean;
// user: AuthUser;
// method: 'firebase';
// login: (email: string, password: string) => Promise<UserCredential>;
// register: (email: string, password: string, firstName: string, lastName: string) => Promise<void>;
// logout: () => Promise<void>;
// };
export type AWSCognitoContextType = {
isAuthenticated: boolean;

2
frontend/client-portal/src/components/nav-section/type.ts
View File

@@ -29,7 +29,7 @@ export type NavItemProps = {
export interface NavSectionProps extends BoxProps {
isCollapse?: boolean;
navConfig: {
subheader: string;
subheader?: string;
items: NavListProps[];
}[];
}

114
frontend/client-portal/src/contexts/LaravelAuthContext.tsx
View File

@@ -1,18 +1,16 @@
import { createContext, ReactNode, useEffect, useReducer } from 'react';
// utils
import axios from '../utils/axios';
// import { isValidToken, setSession } from '../utils/jwt';
import { setSession, getSession, getUser } from '../utils/token';
import { setSession, getSession } from '../utils/token';
// @types
import { ActionMap, AuthState, AuthUser, JWTContextType } from '../@types/auth';
// ----------------------------------------------------------------------
import { Navigate, useLocation } from 'react-router-dom';
enum Types {
Initial = 'INITIALIZE',
Login = 'LOGIN',
ValidateOtp = 'VALIDATE-OTP',
Logout = 'LOGOUT',
Register = 'REGISTER',
}
type JWTAuthPayload = {
@@ -20,13 +18,11 @@ type JWTAuthPayload = {
isAuthenticated: boolean;
user: AuthUser;
};
[Types.Login]: {
[Types.Login]: undefined;
[Types.ValidateOtp]: {
user: AuthUser;
};
[Types.Logout]: undefined;
[Types.Register]: {
user: AuthUser;
};
};
export type JWTActions = ActionMap<JWTAuthPayload>[keyof ActionMap<JWTAuthPayload>];
@@ -46,6 +42,12 @@ const JWTReducer = (state: AuthState, action: JWTActions) => {
user: action.payload.user,
};
case 'LOGIN':
return {
...state,
isAuthenticated: false,
user: null,
};
case 'VALIDATE-OTP':
return {
...state,
isAuthenticated: true,
@@ -57,14 +59,6 @@ const JWTReducer = (state: AuthState, action: JWTActions) => {
isAuthenticated: false,
user: null,
};
case 'REGISTER':
return {
...state,
isAuthenticated: true,
user: action.payload.user,
};
default:
return state;
}
@@ -80,15 +74,15 @@ type AuthProviderProps = {
function AuthProvider({ children }: AuthProviderProps) {
const [state, dispatch] = useReducer(JWTReducer, initialState);
let location = useLocation();
useEffect(() => {
const initialize = async () => {
console.log('initialize', state)
(async () => {
console.log('initialize', state);
try {
const accessToken = getSession();
console.log('')
console.log('');
if (accessToken) {
setSession(accessToken);
@@ -120,61 +114,55 @@ function AuthProvider({ children }: AuthProviderProps) {
},
});
}
};
initialize();
})();
}, []);
const login = async (email: string, password: string) => {
return axios
.post('/login', { email, password })
.then((response) => {
const { user, token } = response.data;
setSession(token);
const login = async (phoneOrEmail: string) =>
axios
.post('/login', { phoneOrEmail })
.then(() => {
dispatch({
type: Types.Login,
});
})
.catch((error) => {
if (error.response.status !== 404) throw error.response;
if (error.response.status !== 422) throw error.response;
});
dispatch({
type: Types.Login,
payload: {
user,
}
});
})
.catch(error => {
if (error.response.status !== 404) throw error.response
if (error.response.status !== 422) throw error.response
})
};
const validateOtp = async (phoneOrEmail: string, otp: string) =>
axios
.post('/verify-code', { otp })
.then((response) => {
const { user, token } = response.data.data;
setSession(token);
const register = async (email: string, password: string, firstName: string, lastName: string) => {
const response = await axios.post('/api/register', {
email,
password,
firstName,
lastName,
});
const { accessToken, user } = response.data;
window.localStorage.setItem('accessToken', accessToken);
dispatch({
type: Types.Register,
payload: {
user,
},
});
};
dispatch({
type: Types.ValidateOtp,
payload: {
user,
},
});
})
.catch((error) => {
if (error.response.status !== 404) throw error.response;
if (error.response.status !== 422) throw error.response;
});
const logout = async () => {
await axios.post('/logout');
setSession(null);
dispatch({ type: Types.Logout });
};
return (<AuthContext.Provider
return (
<AuthContext.Provider
value={{
...state,
method: 'jwt',
login,
validateOtp,
logout,
register,
}}
>
{children}
@@ -182,9 +170,9 @@ function AuthProvider({ children }: AuthProviderProps) {
);
// if (state.isInitialized) {
// return (!state.isAuthenticated && location.pathname !== '/auth/login') ?
// return (!state.isAuthenticated && location.pathname !== '/auth/login') ?
// (<Navigate to="/auth/login" replace={true} />)
// : false && location.pathname == '/auth/login' ?
// : false && location.pathname == '/auth/login' ?
// (<Navigate to="/dashboard" replace={true} />)
// : (
// <AuthContext.Provider

4
frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx
View File

@@ -18,9 +18,7 @@ const navConfig = [
// GENERAL
// ----------------------------------------------------------------------
{
items: [
{ title: 'Dashboard', path: '/dashboard', icon: ICONS.dashboard },
],
items: [{ title: 'Dashboard', path: '/dashboard', icon: ICONS.dashboard }],
},
// Membership

4
frontend/client-portal/src/layouts/dashboard/navbar/NavbarVertical.tsx
View File

@@ -79,8 +79,8 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
<Typography ml={3}>PRIME CENTER</Typography>
</Stack>
<CollapseButton onToggleCollapse={onToggleCollapse} collapseClick={collapseClick} />
</Stack>)
: (
</Stack>
) : (
<Stack direction="row" alignItems="center" justifyContent="space-between">
<Logo />
</Stack>

34
frontend/client-portal/src/pages/AlarmCenter/Index.tsx Executable file
View File

@@ -0,0 +1,34 @@
// mui
import { Container, Grid, Card } from '@mui/material';
// components
import Page from '../../components/Page';
// utils
import useSettings from '../../hooks/useSettings';
// sections
// import ListTable from '../../sections/claimreports/ListTable';
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
import List from '../Members/List';
export default function Drugs() {
const { themeStretch } = useSettings();
// const { corporate_id } = useParams();
return (
<Page title="Claim Reports">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2}>
<Grid item xs={12} lg={12} md={12}>
{/* <ClaimStatusCard /> */}
</Grid>
<Grid item xs={12} lg={12} md={12}>
<Card>
<List />
</Card>
</Grid>
</Grid>
</Container>
</Page>
);
}

29
frontend/client-portal/src/pages/Members/Create.tsx
View File

@@ -1,15 +1,14 @@
import * as Yup from 'yup';
import { yupResolver } from "@hookform/resolvers/yup";
import { Card, Collapse, Divider, Grid, Stack, Typography } from "@mui/material";
import { useForm } from "react-hook-form";
import { useParams } from "react-router-dom";
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from "../../../components/hook-form";
import Page from "../../../components/Page";
import useSettings from "../../../hooks/useSettings";
import { yupResolver } from '@hookform/resolvers/yup';
import { Card, Collapse, Divider, Grid, Stack, Typography } from '@mui/material';
import { useForm } from 'react-hook-form';
import { useParams } from 'react-router-dom';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from '../../components/hook-form';
import Page from '../../components/Page';
import useSettings from '../../hooks/useSettings';
import { useMemo, useState } from 'react';
import Form from "./Form";
import Form from './Form';
export default function Divisions() {
const { themeStretch } = useSettings();
@@ -48,13 +47,12 @@ export default function Divisions() {
} = methods;
const onSubmit = async (data: any) => {
console.log(data)
console.log(data);
};
const pageTitle = 'Create Formularium';
return (
<Page title={pageTitle}>
<HeaderBreadcrumbs
heading={pageTitle}
links={[
@@ -72,12 +70,15 @@ export default function Divisions() {
},
]}
/>
<Grid container spacing={2}>
<Grid item xs={12}>
<Card sx={{ p: 2 }}>
<Form isSubmitting={isSubmitting} isEdit={isEdit} currentFormularium={currentFormularium} />
<Form
isSubmitting={isSubmitting}
isEdit={isEdit}
currentFormularium={currentFormularium}
/>
</Card>
</Grid>
</Grid>

116
frontend/client-portal/src/pages/Members/Form.tsx
View File

@@ -33,10 +33,10 @@ import {
RHFMultiCheckbox,
RHFCheckbox,
RHFCustomMultiCheckbox,
} from '../../../components/hook-form';
import { Corporate } from '../../../@types/corporates';
import axios from '../../../utils/axios';
import { fCurrency } from '../../../utils/formatNumber';
} from '../../components/hook-form';
import { Corporate } from '../../@types/corporates';
import axios from '../../utils/axios';
import { fCurrency } from '../../utils/formatNumber';
const LabelStyle = styled(Typography)(({ theme }) => ({
...theme.typography.subtitle2,
@@ -110,26 +110,31 @@ export default function FormulariumForm({ isEdit, currentFormularium }: Props) {
if (!isEdit) {
const response = await axios.post('/master/formulariums', data);
} else {
const response = await axios.put('/master/formulariums/' + currentFormularium?.id ?? '', data);
const response = await axios.put(
'/master/formulariums/' + currentFormularium?.id ?? '',
data
);
}
reset();
enqueueSnackbar(!isEdit ? 'Formularium Created Successfully!' : 'Formularium Udpated Successfully!', { variant: 'success' });
enqueueSnackbar(
!isEdit ? 'Formularium Created Successfully!' : 'Formularium Udpated Successfully!',
{ variant: 'success' }
);
navigate('/master/formularium');
} catch (error: any) {
if (error && error.response.status === 422) {
for (const [key, value] of Object.entries(error.response.data.errors)) {
for (const [key, value] of Object.entries(error.response.data.errors)) {
setError(key, { message: value[0] });
enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
}
}
else {
} else {
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
}
}
const ascent = document?.querySelector("ascent");
const ascent = document?.querySelector('ascent');
if (ascent != null) {
ascent.innerHTML = "";
ascent.innerHTML = '';
}
};
@@ -151,35 +156,34 @@ export default function FormulariumForm({ isEdit, currentFormularium }: Props) {
setValue('logo', null);
};
const linking_rules_checkbox_name = "linking_rules"
const linking_rules_checkbox_name = 'linking_rules';
const linking_tools = [
{
"value" : "nrik",
"label" : "No. KTP"
value: 'nrik',
label: 'No. KTP',
},
{
"value" : "nik",
"label" : "Nomor Induk Karyawan (NIK)"
value: 'nik',
label: 'Nomor Induk Karyawan (NIK)',
},
{
"value" : "member_id",
"label" : "Member ID"
value: 'member_id',
label: 'Member ID',
},
{
"value" : "phone",
"label" : "Nomor Telepon"
value: 'phone',
label: 'Nomor Telepon',
},
{
"value" : "email",
"label" : "E-Mail"
value: 'email',
label: 'E-Mail',
},
]
];
const importForm = useRef<HTMLInputElement>(null)
const importForm = useRef<HTMLInputElement>(null);
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [currentImportFileName, setCurrentImportFileName] = useState<string|null>(null);
const [currentImportFileName, setCurrentImportFileName] = useState<string | null>(null);
const handleClose = () => {
setAnchorEl(null);
};
@@ -189,51 +193,73 @@ export default function FormulariumForm({ isEdit, currentFormularium }: Props) {
handleClose();
importForm.current ? importForm.current.click() : console.log('No File selected');
} else {
alert('No file selected')
alert('No file selected');
}
}
};
const handleCancelImportButton = () => {
importForm.current.value = "";
importForm.current.dispatchEvent(new Event("change", { bubbles: true }));
}
importForm.current.value = '';
importForm.current.dispatchEvent(new Event('change', { bubbles: true }));
};
const handleImportChange = (event: any) => {
if (event.target.files[0]) {
setCurrentImportFileName(event.target.files[0].name)
setCurrentImportFileName(event.target.files[0].name);
} else {
setCurrentImportFileName(null);
}
}
};
return (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Typography variant="h6">Formularium Detail</Typography>
<div>
<RHFTextField name="code" label="Code" />
{(!(currentFormularium?.id) && <Typography variant="caption">Will be generated if empty</Typography>)}
<RHFTextField name="code" label="Code" />
{!currentFormularium?.id && (
<Typography variant="caption">Will be generated if empty</Typography>
)}
</div>
<RHFTextField name="name" label="Name" />
<Typography variant="h6">Formularium Drug List Import</Typography>
<input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
<input
type="file"
id="file"
ref={importForm}
style={{ display: 'none' }}
onChange={handleImportChange}
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
/>
<ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
<Button onClick={handleImportButton} fullWidth>{currentImportFileName ?? "No File Selected"}</Button>
{(currentImportFileName && <Button onClick={handleCancelImportButton} size="small" fullWidth={false} sx={{ p: 1.8 }}><CancelIcon color="error"/></Button>)}
<Button onClick={handleImportButton} fullWidth>
{currentImportFileName ?? 'No File Selected'}
</Button>
{currentImportFileName && (
<Button
onClick={handleCancelImportButton}
size="small"
fullWidth={false}
sx={{ p: 1.8 }}
>
<CancelIcon color="error" />
</Button>
)}
</ButtonGroup>
<LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
<LoadingButton
type="submit"
variant="contained"
size="large"
fullWidth={true}
loading={isSubmitting}
>
{!isEdit ? 'Save New Corporate' : 'Save Update'}
</LoadingButton>
</Stack>
</FormProvider>
);
};
}

175
frontend/client-portal/src/pages/auth/Login.tsx
View File

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

148
frontend/client-portal/src/pages/auth/Register.tsx
View File

@@ -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&nbsp;
<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/client-portal/src/pages/auth/ResetPassword.tsx
View File

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

125
frontend/client-portal/src/pages/auth/VerifyCode.tsx
View File

@@ -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? &nbsp;
<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>
);

47
frontend/client-portal/src/routes/index.tsx
View File

@@ -6,10 +6,6 @@ import LogoOnlyLayout from '../layouts/LogoOnlyLayout';
// components
import LoadingScreen from '../components/LoadingScreen';
import GuestGuard from '../guards/GuestGuard';
import { RegisterForm } from '../sections/auth/register';
import Register from '../pages/auth/Register';
import ResetPassword from '../pages/auth/ResetPassword';
import VerifyCode from '../pages/auth/VerifyCode';
import { AuthProvider } from '../contexts/LaravelAuthContext';
import AuthGuard from '../guards/AuthGuard';
@@ -42,11 +38,11 @@ export default function Router() {
),
},
{
path: 'register',
path: 'verify-code',
element: (
<AuthProvider>
<GuestGuard>
<RegisterForm />
<VerifyCode />
</GuestGuard>
</AuthProvider>
),
@@ -54,7 +50,6 @@ export default function Router() {
// { path: 'login-unprotected', element: <Login /> },
// { path: 'register-unprotected', element: <Register /> },
// { path: 'reset-password', element: <ResetPassword /> },
// { path: 'verify', element: <VerifyCode /> },
],
},
// {
@@ -68,29 +63,46 @@ export default function Router() {
<AuthGuard>
<DashboardLayout />
</AuthGuard>
</AuthProvider>),
children:[
</AuthProvider>
),
children: [
{ element: <Navigate to="/dashboard" replace />, index: true },
{
path: 'dashboard',
element: <Dashboard />,
},
],
},
{
path: '/members',
element: (
<AuthProvider>
<AuthGuard>
<DashboardLayout />
</AuthGuard>
</AuthProvider>
),
children: [
{
path: 'members',
element: <Members />,
index: true,
},
]
{
path: 'create',
element: <MembersCreate />,
},
],
},
// {
// path: '/dashboard',
// element: <DashboardLayout />,
// children: [
// { element: <Navigate to="/dashboard/one" replace />, index: true },
// { path: 'one', element:
// { path: 'one', element:
// <AuthProvider><PageOne /></AuthProvider> },
// { path: 'two', element:
// { path: 'two', element:
// <AuthProvider><PageTwo /></AuthProvider> },
// { path: 'three', element:
// { path: 'three', element:
// <AuthProvider><PageThree /></AuthProvider> },
// {
// path: 'user',
@@ -114,7 +126,9 @@ export default function Router() {
]);
}
// Auth
const Login = Loadable(lazy(() => import('../pages/auth/Login')));
const VerifyCode = Loadable(lazy(() => import('../pages/auth/VerifyCode')));
// Dashboard
const Dashboard = Loadable(lazy(() => import('../pages/Dashboard')));
@@ -122,4 +136,7 @@ const NotFound = Loadable(lazy(() => import('../pages/Page404')));
// Members
const Members = Loadable(lazy(() => import('../pages/Members/Index')));
const MedicinesCreate = Loadable(lazy(() => import('../pages/Medicines/Create')));
const MembersCreate = Loadable(lazy(() => import('../pages/Members/Create')));
// Alarm Center
// const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));

88
frontend/client-portal/src/sections/auth/login/LoginEmailForm.tsx Executable file
View File

@@ -0,0 +1,88 @@
import * as Yup from 'yup';
import { useNavigate } from 'react-router-dom';
// form
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
// @mui
import { Stack, Alert } from '@mui/material';
import { LoadingButton } from '@mui/lab';
// hooks
import useAuth from '../../../hooks/useAuth';
import useIsMountedRef from '../../../hooks/useIsMountedRef';
// components
import { FormProvider, RHFTextField } from '../../../components/hook-form';
// ----------------------------------------------------------------------
type FormValuesProps = {
email: string;
afterSubmit?: string;
};
interface Props {
formPhone: boolean;
}
// ----------------------------------------------------------------------
export default function LoginForm({ formPhone }: Props) {
const { login } = useAuth();
const navigate = useNavigate();
const isMountedRef = useIsMountedRef();
const LoginSchema = Yup.object().shape({
email: Yup.string().email('Email must be a valid email address').required('Email is required'),
});
const defaultValues = {
email: '',
};
const methods = useForm<FormValuesProps>({
resolver: yupResolver(LoginSchema),
defaultValues,
});
const {
reset,
setError,
handleSubmit,
formState: { errors, isSubmitting },
} = methods;
const onSubmit = async (data: FormValuesProps) => {
try {
await login(data.email);
navigate('/auth/verify-code', { state: { phoneOrEmail: data.email, formPhone } });
} catch (error: any) {
reset();
if (isMountedRef.current) {
setError('afterSubmit', { ...error, message: error.data.message });
}
}
};
return (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Alert severity="info">Masukkan akun yang telah terdaftar</Alert>
{!!errors.afterSubmit && <Alert severity="error">{errors.afterSubmit.message}</Alert>}
<RHFTextField name="email" label="Email address" />
</Stack>
<LoadingButton
fullWidth
size="large"
type="submit"
variant="contained"
loading={isSubmitting}
sx={{ marginTop: 2 }}
>
Login
</LoadingButton>
</FormProvider>
);
}

117
frontend/client-portal/src/sections/auth/login/LoginForm.tsx
View File

@@ -1,117 +0,0 @@
import * as Yup from 'yup';
import { useState } from 'react';
import { Link as RouterLink, useNavigate } from 'react-router-dom';
// form
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
// @mui
import { Link, Stack, Alert, IconButton, InputAdornment } from '@mui/material';
import { LoadingButton } from '@mui/lab';
// routes
import { PATH_AUTH } from '../../../routes/paths';
// hooks
import useAuth from '../../../hooks/useAuth';
import useIsMountedRef from '../../../hooks/useIsMountedRef';
// components
import Iconify from '../../../components/Iconify';
import { FormProvider, RHFTextField, RHFCheckbox } from '../../../components/hook-form';
// ----------------------------------------------------------------------
type FormValuesProps = {
email: string;
password: string;
remember: boolean;
afterSubmit?: string;
};
export default function LoginForm() {
const { login } = useAuth();
const navigate = useNavigate();
const isMountedRef = useIsMountedRef();
const [showPassword, setShowPassword] = useState(false);
const LoginSchema = Yup.object().shape({
email: Yup.string().email('Email must be a valid email address').required('Email is required'),
password: Yup.string().required('Password is required'),
});
const defaultValues = {
email: 'admin@linksehat.dev',
password: 'password',
remember: true,
};
const methods = useForm<FormValuesProps>({
resolver: yupResolver(LoginSchema),
defaultValues,
});
const {
reset,
setError,
handleSubmit,
formState: { errors, isSubmitting },
} = methods;
const onSubmit = async (data: FormValuesProps) => {
try {
const loginResult = await login(data.email, data.password );
navigate('/dashboard');
} catch (error) {
console.error(error);
reset();
if (isMountedRef.current) {
setError('afterSubmit', { ...error, message: error.data.message });
}
}
};
return (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Alert severity='primary'>Email : admin@linksehat.dev & Password : password</Alert>
{!!errors.afterSubmit && <Alert severity="error">{errors.afterSubmit.message}</Alert>}
<RHFTextField name="email" label="Email address" />
<RHFTextField
name="password"
label="Password"
type={showPassword ? 'text' : 'password'}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
<Iconify icon={showPassword ? 'eva:eye-fill' : 'eva:eye-off-fill'} />
</IconButton>
</InputAdornment>
),
}}
/>
</Stack>
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ my: 2 }}>
<RHFCheckbox name="remember" label="Remember me" />
<Link component={RouterLink} variant="subtitle2" to={PATH_AUTH.resetPassword}>
Forgot password?
</Link>
</Stack>
<LoadingButton
fullWidth
size="large"
type="submit"
variant="contained"
loading={isSubmitting}
>
Login
</LoadingButton>
</FormProvider>
);
}

86
frontend/client-portal/src/sections/auth/login/LoginPhoneForm.tsx Executable file
View File

@@ -0,0 +1,86 @@
import * as Yup from 'yup';
import { useNavigate } from 'react-router-dom';
// form
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
// @mui
import { Stack, Alert, InputAdornment } from '@mui/material';
import { LoadingButton } from '@mui/lab';
// components
import { FormProvider, RHFTextField } from '../../../components/hook-form';
import useAuth from '../../../hooks/useAuth';
// ----------------------------------------------------------------------
type FormValuesProps = {
phone: string;
afterSubmit?: string;
};
interface Props {
formPhone: boolean;
}
export default function LoginPhoneForm({ formPhone }: Props) {
const { login } = useAuth();
const navigate = useNavigate();
const LoginSchema = Yup.object().shape({
phone: Yup.string().required('Phone is required'),
});
const defaultValues = {
phone: '',
};
const methods = useForm<FormValuesProps>({
resolver: yupResolver(LoginSchema),
defaultValues,
});
const {
reset,
setError,
handleSubmit,
formState: { errors, isSubmitting },
} = methods;
const onSubmit = async (data: FormValuesProps) => {
try {
await login(0 + data.phone);
navigate('/auth/verify-code', { state: { phoneOrEmail: 0 + data.phone, formPhone } });
} catch (error: any) {
reset();
setError('afterSubmit', { ...error, message: error.response.data.message });
}
};
return (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Alert severity="info">Masukkan akun yang telah terdaftar</Alert>
{!!errors.afterSubmit && <Alert severity="error">{errors.afterSubmit.message}</Alert>}
<RHFTextField
name="phone"
label="Phone Number"
type={'number'}
InputProps={{
startAdornment: <InputAdornment position="start">+62</InputAdornment>,
}}
/>
</Stack>
<LoadingButton
fullWidth
size="large"
type="submit"
variant="contained"
loading={isSubmitting}
sx={{ marginTop: 2 }}
>
Login
</LoadingButton>
</FormProvider>
);
}

3
frontend/client-portal/src/sections/auth/login/index.ts
View File

@@ -1 +1,2 @@
export { default as LoginForm } from './LoginForm';
export { default as LoginEmailForm } from './LoginEmailForm';
export { default as LoginPhoneForm } from './LoginPhoneForm';

38
frontend/client-portal/src/sections/auth/verify-code/VerifyCodeForm.tsx
View File

@@ -8,6 +8,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
// @mui
import { OutlinedInput, Stack } from '@mui/material';
import { LoadingButton } from '@mui/lab';
import useAuth from '../../../hooks/useAuth';
// routes
// import { PATH_DASHBOARD } from '../../../routes/paths';
@@ -18,14 +19,13 @@ type FormValuesProps = {
code2: string;
code3: string;
code4: string;
code5: string;
code6: string;
};
type ValueNames = 'code1' | 'code2' | 'code3' | 'code4' | 'code5' | 'code6';
type ValueNames = 'code1' | 'code2' | 'code3' | 'code4';
export default function VerifyCodeForm() {
export default function VerifyCodeForm({ phoneOrEmail }: any) {
const navigate = useNavigate();
const { validateOtp } = useAuth();
const { enqueueSnackbar } = useSnackbar();
@@ -34,8 +34,6 @@ export default function VerifyCodeForm() {
code2: Yup.string().required('Code is required'),
code3: Yup.string().required('Code is required'),
code4: Yup.string().required('Code is required'),
code5: Yup.string().required('Code is required'),
code6: Yup.string().required('Code is required'),
});
const defaultValues = {
@@ -43,8 +41,6 @@ export default function VerifyCodeForm() {
code2: '',
code3: '',
code4: '',
code5: '',
code6: '',
};
const {
@@ -68,12 +64,10 @@ export default function VerifyCodeForm() {
const onSubmit = async (data: FormValuesProps) => {
try {
await new Promise((resolve) => setTimeout(resolve, 500));
console.log('code:', Object.values(data).join(''));
await new Promise((resolve) => setTimeout(resolve, 750));
await validateOtp(phoneOrEmail, Object.values(data).join(''));
enqueueSnackbar('Verify success!');
navigate('/dashboard', { replace: true });
navigate('/dashboard');
} catch (error) {
console.error(error);
}
@@ -114,8 +108,8 @@ export default function VerifyCodeForm() {
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Stack direction="row" spacing={2} justifyContent="center">
<form onChange={handleSubmit(onSubmit)}>
<Stack direction="row" spacing={2} justifyContent="space-evenly">
{Object.keys(values).map((name, index) => (
<Controller
key={name}
@@ -126,7 +120,7 @@ export default function VerifyCodeForm() {
{...field}
id="field-code"
autoFocus={index === 0}
placeholder="-"
placeholder=""
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
handleChangeWithNextField(event, field.onChange)
}
@@ -144,18 +138,6 @@ export default function VerifyCodeForm() {
/>
))}
</Stack>
<LoadingButton
fullWidth
size="large"
type="submit"
variant="contained"
loading={isSubmitting}
disabled={!isValid}
sx={{ mt: 3 }}
>
Verify
</LoadingButton>
</form>
);
}