login validate
This commit is contained in:
Muhammad Fajar
34
frontend/client-portal/src/pages/AlarmCenter/Index.tsx
Executable file
34
frontend/client-portal/src/pages/AlarmCenter/Index.tsx
Executable 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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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