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

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