Update Add user hospital portal

2024-05-21 10:36:39 +07:00
parent 0cd2cf71fc
commit f50a4f6409
14 changed files with 366 additions and 114 deletions
--- a/frontend/hospital-portal/src/sections/auth/forget-password/ForgetPasswordForm.tsx
+++ b/frontend/hospital-portal/src/sections/auth/forget-password/ForgetPasswordForm.tsx
@@ -2,8 +2,8 @@ import * as Yup from 'yup';
 // form
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Link as RouterLink, useNavigate } from 'react-router-dom';
+import { useCallback, useEffect, useContext, useMemo, useRef, useState } from 'react';
+import { Link as RouterLink, useNavigate, useLocation } from 'react-router-dom';

 // @mui
 import { Alert, IconButton, InputAdornment, Stack, Typography } from '@mui/material';
@@ -14,6 +14,9 @@ import useIsMountedRef from '@/hooks/useIsMountedRef';
 import { FormProvider, RHFTextField } from '@/components/hook-form';
 import axios from '@/utils/axios';
 import Iconify from '@/components/Iconify';
+import { LanguageContext } from '@/contexts/LanguageContext';
+
+import { useSnackbar } from 'notistack';

 // ----------------------------------------------------------------------

@@ -26,9 +29,19 @@ type Props = {
  token: string;
 };

+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+  }
+
 export default function ForgetPasswordForm({ token }: Props) {
+    const { localeData } = useContext(LanguageContext);
  const isMountedRef = useIsMountedRef();
  const navigate = useNavigate();
+  const query = useQuery();
+  const email = query.get('email');
+
+  const token_ = query.get('token');
+  const { enqueueSnackbar } = useSnackbar();

  const [showPasswordNew, setShowPasswordNew] = useState(false);
  const [showPasswordConfirmNew, setShowPasswordConfirmNew] = useState(false);
@@ -47,19 +60,19 @@ export default function ForgetPasswordForm({ token }: Props) {

  const onSubmit = async (data: FormValuesProps) => {
    try {
-      await axios.post('/forget-password', { ...data, token });
-      console.log(data);
+      await axios.post('/forget-password', { ...data, email:email, token:token_ });
+

      // await new Promise((resolve) => setTimeout(resolve, 500));
      await new Promise((resolve) => setTimeout(resolve, 500));

      if (isMountedRef.current) {
+        enqueueSnackbar('Password reset was successful', { variant: 'success' });
        navigate('/auth/login', { replace: true });
      }
    } catch (error) {
-      console.log(error.response.data);
      if (isMountedRef.current) {
-        setError('afterSubmit', { ...error, message: error.response.data.message });
+        setError('afterSubmit', { ...error, message: error.response.data.meta.message });
      }
    }
  };
@@ -68,10 +81,10 @@ export default function ForgetPasswordForm({ token }: Props) {
    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
      <Stack spacing={3}>
        {!!errors.afterSubmit && <Alert severity="error">{errors.afterSubmit.message}</Alert>}
-        <Typography>Kata Sandi Baru</Typography>
+        <Typography>{localeData.txtNewPassword}</Typography>
        <RHFTextField
          name="new_password"
-          label="Kata Sandi Baru"
+          label={localeData.txtNewPassword}
          type={showPasswordNew ? 'text' : 'password'}
          InputProps={{
            endAdornment: (
@@ -83,10 +96,10 @@ export default function ForgetPasswordForm({ token }: Props) {
            ),
          }}
        />
-        <Typography>Konfirmasi Kata Sandi </Typography>
+        <Typography>{localeData.txtConfPassword}</Typography>
        <RHFTextField
          name="confirm_new_password"
-          label="Konfirmasi Kata Sandi"
+          label={localeData.txtConfPassword}
          type={showPasswordConfirmNew ? 'text' : 'password'}
          InputProps={{
            endAdornment: (
--- a/frontend/hospital-portal/src/sections/auth/login/LoginForm.tsx
+++ b/frontend/hospital-portal/src/sections/auth/login/LoginForm.tsx
@@ -100,9 +100,9 @@ export default function LoginForm() {
      </Stack>

      <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ my: 2 }}>
-        <RHFCheckbox name="remember" label="Remember me"/>
+        <RHFCheckbox name="remember" label={localeData.txtIngatkanSaya}/>
        <Link component={RouterLink} variant="subtitle2" to={PATH_AUTH.resetPassword}>
-          Forgot password?
+          {localeData.txtLupaSandi}
        </Link>
      </Stack>

@@ -114,7 +114,7 @@ export default function LoginForm() {
        loading={isSubmitting}
        sx={{ marginTop: 2 }}
      >
-        Login
+        {localeData.txtLogin}
      </LoadingButton>
    </FormProvider>
  );
--- a/frontend/hospital-portal/src/sections/auth/reset-password/ResetPasswordForm.tsx
+++ b/frontend/hospital-portal/src/sections/auth/reset-password/ResetPasswordForm.tsx
@@ -10,6 +10,7 @@ import useIsMountedRef from '@/hooks/useIsMountedRef';
 // components
 import { FormProvider, RHFTextField } from '@/components/hook-form';
 import axios from '@/utils/axios';
+import { useNavigate } from 'react-router-dom';

 // ----------------------------------------------------------------------

@@ -26,6 +27,8 @@ type Props = {
 export default function ResetPasswordForm({ onSent, onGetEmail }: Props) {
  const isMountedRef = useIsMountedRef();

+  const navigate = useNavigate();
+
  const ResetPasswordSchema = Yup.object().shape({
    email: Yup.string().email('Email must be a valid email address').required('Email is required'),
  });
@@ -43,19 +46,22 @@ export default function ResetPasswordForm({ onSent, onGetEmail }: Props) {

  const onSubmit = async (data: FormValuesProps) => {
    try {
-      await axios.post('/verify-email', data);
-      console.log(data);
+      const response = await axios.post('/verify-email', data);
+      if(response.data.data.email)
+      {

+        onGetEmail(response.data.data.email);
+        navigate(`/auth/verify?email=${response.data.data.email}`);
+      }
      // await new Promise((resolve) => setTimeout(resolve, 500));
      await new Promise((resolve) => setTimeout(resolve, 500));
      if (isMountedRef.current) {
        onSent();
-        onGetEmail(data.email);
+        onGetEmail(response.data.data.email);
      }
    } catch (error) {
-      console.log(error.response.data);
      if (isMountedRef.current) {
-        setError('afterSubmit', { ...error, message: error.response.data.message });
+        setError('afterSubmit', { ...error, message: error.response.data.meta.message });
      }
    }
  };
--- a/frontend/hospital-portal/src/sections/auth/verify-code/VerifyCodeForm.tsx
+++ b/frontend/hospital-portal/src/sections/auth/verify-code/VerifyCodeForm.tsx
@@ -6,9 +6,12 @@ import { useEffect } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 // @mui
-import { OutlinedInput, Stack } from '@mui/material';
+import { OutlinedInput, Alert, Stack } from '@mui/material';
+import useIsMountedRef from '@/hooks/useIsMountedRef';
 import { LoadingButton } from '@mui/lab';
+import { FormProvider, RHFTextField } from '@/components/hook-form';
 // routes
+import axios from '@/utils/axios';
 // import { PATH_DASHBOARD } from '@/routes/paths';

 // ----------------------------------------------------------------------
@@ -23,8 +26,11 @@ type FormValuesProps = {
 };

 type ValueNames = 'code1' | 'code2' | 'code3' | 'code4' | 'code5' | 'code6';
-
-export default function VerifyCodeForm() {
+type Props = {
+    onGetEmail: (value: string) => void;
+  };
+export default function VerifyCodeForm({ onGetEmail }: Props) {
+    const isMountedRef = useIsMountedRef();
  const navigate = useNavigate();

  const { enqueueSnackbar } = useSnackbar();
@@ -51,8 +57,9 @@ export default function VerifyCodeForm() {
    watch,
    control,
    setValue,
+    setError,
    handleSubmit,
-    formState: { isSubmitting, isValid },
+    formState: { isSubmitting, isValid , errors},
  } = useForm({
    mode: 'onBlur',
    resolver: yupResolver(VerifyCodeSchema),
@@ -67,16 +74,36 @@ export default function VerifyCodeForm() {
  }, []);

  const onSubmit = async (data: FormValuesProps) => {
+    // try {
+    //   await new Promise((resolve) => setTimeout(resolve, 500));
+    //   console.log('code:', Object.values(data).join(''));
+
+    //   enqueueSnackbar('Verify success!', { variant: 'success' });
+
+    //   navigate('/dashboard', { replace: true });
+    // } catch (error) {
+    //   console.error(error);
+    // }
+
    try {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-      console.log('code:', Object.values(data).join(''));
-
-      enqueueSnackbar('Verify success!', { variant: 'success' });
-
-      navigate('/dashboard', { replace: true });
-    } catch (error) {
-      console.error(error);
-    }
+        const response =  await axios.post('/verify-code', {email: onGetEmail, token: Object.values(data).join('')});
+        // await new Promise((resolve) => setTimeout(resolve, 500));
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        if(response.data.meta.code === 200)
+        {
+            navigate(`/auth/forget-password?email=${response.data.data.email}&token=${response.data.data.token}`);
+        }
+        if (isMountedRef.current) {
+          if(response.data.meta.code === 404)
+          {
+            setError('afterSubmit', { ...response, message: response.data.meta.message });
+          }
+        }
+      } catch (error) {
+        if (isMountedRef.current) {
+          setError('afterSubmit', { ...error, message: error.response.data.meta.message });
+        }
+      }
  };

  const handlePasteClipboard = (event: ClipboardEvent) => {
@@ -115,35 +142,38 @@ export default function VerifyCodeForm() {

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
-      <Stack direction="row" spacing={2} justifyContent="center">
-        {Object.keys(values).map((name, index) => (
-          <Controller
-            key={name}
-            name={`code${index + 1}` as ValueNames}
-            control={control}
-            render={({ field }) => (
-              <OutlinedInput
-                {...field}
-                id="field-code"
-                autoFocus={index === 0}
-                placeholder="-"
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                  handleChangeWithNextField(event, field.onChange)
-                }
-                inputProps={{
-                  maxLength: 1,
-                  sx: {
-                    p: 0,
-                    textAlign: 'center',
-                    width: { xs: 36, sm: 56 },
-                    height: { xs: 36, sm: 56 },
-                  },
-                }}
-              />
-            )}
-          />
-        ))}
-      </Stack>
+        <Stack spacing={3}>
+            {!!errors.afterSubmit && <Alert severity="error">{errors.afterSubmit.message}</Alert>}
+            <Stack direction="row" spacing={2} justifyContent="center">
+                {Object.keys(values).map((name, index) => (
+                <Controller
+                    key={name}
+                    name={`code${index + 1}` as ValueNames}
+                    control={control}
+                    render={({ field }) => (
+                    <OutlinedInput
+                        {...field}
+                        id="field-code"
+                        autoFocus={index === 0}
+                        placeholder="-"
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                        handleChangeWithNextField(event, field.onChange)
+                        }
+                        inputProps={{
+                        maxLength: 1,
+                        sx: {
+                            p: 0,
+                            textAlign: 'center',
+                            width: { xs: 36, sm: 56 },
+                            height: { xs: 36, sm: 56 },
+                        },
+                        }}
+                    />
+                    )}
+                />
+                ))}
+            </Stack>
+        </Stack>

      <LoadingButton
        fullWidth