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

validate otp

Browse Source
This commit is contained in:
Muhammad Fajar
2022-11-11 15:38:07 +07:00
parent 3e30ce6e90
commit 91e44fcb41
14 changed files with 157 additions and 529 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/client-portal/src/sections/auth/login/LoginPhoneForm.tsx
View File

@@ -44,8 +44,7 @@ export default function LoginPhoneForm() {
const onSubmit = async (data: FormValuesProps) => {
try {
await axios.post('/otp-request', { phone_or_email: 0 + data.phone });
// console.log(response);
// navigate('/dashboard');
navigate('/auth/otp-validation', { state: { phone_or_email: 0 + data.phone } });
} catch (error: any) {
reset();
setError('afterSubmit', { ...error, message: error.response.data.message });

110
frontend/client-portal/src/sections/auth/register/RegisterForm.tsx
View File

@@ -1,110 +0,0 @@
import * as Yup from 'yup';
import { useState } from 'react';
// form
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
// @mui
import { Stack, IconButton, InputAdornment, Alert } from '@mui/material';
import { LoadingButton } from '@mui/lab';
// hooks
import useAuth from '../../../hooks/useAuth';
import useIsMountedRef from '../../../hooks/useIsMountedRef';
// components
import Iconify from '../../../components/Iconify';
import { FormProvider, RHFTextField } from '../../../components/hook-form';
// ----------------------------------------------------------------------
type FormValuesProps = {
email: string;
password: string;
firstName: string;
lastName: string;
afterSubmit?: string;
};
export default function RegisterForm() {
const { register } = useAuth();
const isMountedRef = useIsMountedRef();
const [showPassword, setShowPassword] = useState(false);
const RegisterSchema = Yup.object().shape({
firstName: Yup.string().required('First name required'),
lastName: Yup.string().required('Last name required'),
email: Yup.string().email('Email must be a valid email address').required('Email is required'),
password: Yup.string().required('Password is required'),
});
const defaultValues = {
firstName: '',
lastName: '',
email: '',
password: '',
};
const methods = useForm<FormValuesProps>({
resolver: yupResolver(RegisterSchema),
defaultValues,
});
const {
reset,
setError,
handleSubmit,
formState: { errors, isSubmitting },
} = methods;
const onSubmit = async (data: FormValuesProps) => {
try {
await register(data.email, data.password, data.firstName, data.lastName);
} catch (error) {
console.error(error);
reset();
if (isMountedRef.current) {
setError('afterSubmit', { ...error, message: error.message });
}
}
};
return (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
{!!errors.afterSubmit && <Alert severity="error">{errors.afterSubmit.message}</Alert>}
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
<RHFTextField name="firstName" label="First name" />
<RHFTextField name="lastName" label="Last name" />
</Stack>
<RHFTextField name="email" label="Email address" />
<RHFTextField
name="password"
label="Password"
type={showPassword ? 'text' : 'password'}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton edge="end" onClick={() => setShowPassword(!showPassword)}>
<Iconify icon={showPassword ? 'eva:eye-fill' : 'eva:eye-off-fill'} />
</IconButton>
</InputAdornment>
),
}}
/>
<LoadingButton
fullWidth
size="large"
type="submit"
variant="contained"
loading={isSubmitting}
>
Register
</LoadingButton>
</Stack>
</FormProvider>
);
}

1
frontend/client-portal/src/sections/auth/register/index.ts
View File

@@ -1 +0,0 @@
export { default as RegisterForm } from './RegisterForm';

70
frontend/client-portal/src/sections/auth/reset-password/ResetPasswordForm.tsx
View File

@@ -1,70 +0,0 @@
import * as Yup from 'yup';
// form
import { yupResolver } from '@hookform/resolvers/yup';
import { useForm } from 'react-hook-form';
// @mui
import { Stack } from '@mui/material';
import { LoadingButton } from '@mui/lab';
// hooks
import useIsMountedRef from '../../../hooks/useIsMountedRef';
// components
import { FormProvider, RHFTextField } from '../../../components/hook-form';
// ----------------------------------------------------------------------
type FormValuesProps = {
email: string;
};
type Props = {
onSent: VoidFunction;
onGetEmail: (value: string) => void;
};
export default function ResetPasswordForm({ onSent, onGetEmail }: Props) {
const isMountedRef = useIsMountedRef();
const ResetPasswordSchema = Yup.object().shape({
email: Yup.string().email('Email must be a valid email address').required('Email is required'),
});
const methods = useForm<FormValuesProps>({
resolver: yupResolver(ResetPasswordSchema),
defaultValues: { email: 'demo@minimals.cc' },
});
const {
handleSubmit,
formState: { isSubmitting },
} = methods;
const onSubmit = async (data: FormValuesProps) => {
try {
await new Promise((resolve) => setTimeout(resolve, 500));
if (isMountedRef.current) {
onSent();
onGetEmail(data.email);
}
} catch (error) {
console.error(error);
}
};
return (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<RHFTextField name="email" label="Email address" />
<LoadingButton
fullWidth
size="large"
type="submit"
variant="contained"
loading={isSubmitting}
>
Reset Password
</LoadingButton>
</Stack>
</FormProvider>
);
}

1
frontend/client-portal/src/sections/auth/reset-password/index.ts
View File

@@ -1 +0,0 @@
export { default as ResetPasswordForm } from './ResetPasswordForm';

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

@@ -1,13 +1,12 @@
import * as Yup from 'yup';
import { useSnackbar } from 'notistack';
import { useNavigate } from 'react-router-dom';
import { useNavigate, useLocation } from 'react-router-dom';
import { useEffect } from 'react';
// form
import { useForm, Controller } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
// @mui
import { OutlinedInput, Stack } from '@mui/material';
import { LoadingButton } from '@mui/lab';
// routes
// import { PATH_DASHBOARD } from '../../../routes/paths';
@@ -18,24 +17,22 @@ 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() {
const navigate = useNavigate();
const location = useLocation();
const { enqueueSnackbar } = useSnackbar();
const { phone_or_email } = location.state;
const VerifyCodeSchema = Yup.object().shape({
code1: Yup.string().required('Code is required'),
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 +40,6 @@ export default function VerifyCodeForm() {
code2: '',
code3: '',
code4: '',
code5: '',
code6: '',
};
const {
@@ -62,6 +57,7 @@ export default function VerifyCodeForm() {
const values = watch();
useEffect(() => {
console.log('phone number : ' + phone_or_email);
document.addEventListener('paste', handlePasteClipboard);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -73,7 +69,7 @@ export default function VerifyCodeForm() {
enqueueSnackbar('Verify success!');
navigate('/dashboard', { replace: true });
// navigate('/dashboard', { replace: true });
} catch (error) {
console.error(error);
}
@@ -114,7 +110,7 @@ export default function VerifyCodeForm() {
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<form onChange={handleSubmit(onSubmit)}>
<Stack direction="row" spacing={2} justifyContent="center">
{Object.keys(values).map((name, index) => (
<Controller
@@ -144,18 +140,6 @@ export default function VerifyCodeForm() {
/>
))}
</Stack>
<LoadingButton
fullWidth
size="large"
type="submit"
variant="contained"
loading={isSubmitting}
disabled={!isValid}
sx={{ mt: 3 }}
>
Verify
</LoadingButton>
</form>
);
}