forget password

frontend/dashboard/src/pages/auth/ForgetPassword.tsx

@@ -0,0 +1,61 @@
+import { Link as RouterLink } 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';
+// components
+import Page from '../../components/Page';
+import Iconify from '../../components/Iconify';
+// sections
+import { ForgetPasswordForm } from '../../sections/auth/forget-password';
+import { useSearchParams } from 'react-router-dom';
+
+// ----------------------------------------------------------------------
+
+const RootStyle = styled('div')(({ theme }) => ({
+  display: 'flex',
+  height: '100%',
+  alignItems: 'center',
+  padding: theme.spacing(12, 0),
+}));
+
+// ----------------------------------------------------------------------
+
+export default function ForgetPassword() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const token = searchParams.get('token');
+
+  return (
+    <Page title="Verify" sx={{ height: 1 }}>
+      <RootStyle>
+        <LogoOnlyLayout />
+
+        <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></Typography>
+            <Typography sx={{ color: 'text.secondary' }}>
+              Please enter your new password.
+            </Typography>
+
+            <Box sx={{ mt: 5, mb: 3 }}>
+              <ForgetPasswordForm token={token} />
+            </Box>
+          </Box>
+        </Container>
+      </RootStyle>
+    </Page>
+  );
+}

frontend/dashboard/src/routes/index.tsx

@@ -53,6 +53,7 @@ export default function Router() {
         // { path: 'login-unprotected', element: <Login /> },
         // { path: 'register-unprotected', element: <Register /> },
         { path: 'reset-password', element: <ResetPassword /> },
+        { path: 'forget-password', element: <ForgetPassword /> },
         // { path: 'verify', element: <VerifyCode /> },
       ],
     },
@@ -269,6 +270,7 @@ export default function Router() {
 
 const Login = Loadable(lazy(() => import('../pages/auth/Login')));
 const ResetPassword = Loadable(lazy(() => import('../pages/auth/ResetPassword')));
+const ForgetPassword = Loadable(lazy(() => import('../pages/auth/ForgetPassword')));
 
 // Dashboard
 const Dashboard = Loadable(lazy(() => import('../pages/Dashboard')));

frontend/dashboard/src/sections/auth/forget-password/ForgetPasswordForm.tsx

@@ -0,0 +1,117 @@
+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';
+
+// @mui
+import { Alert, IconButton, InputAdornment, Stack, Typography } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+// hooks
+import useIsMountedRef from '../../../hooks/useIsMountedRef';
+// components
+import { FormProvider, RHFTextField } from '../../../components/hook-form';
+import axios from '../../../utils/axios';
+import Iconify from '../../../components/Iconify';
+
+// ----------------------------------------------------------------------
+
+type FormValuesProps = {
+  email: string;
+  afterSubmit?: string;
+};
+
+type Props = {
+  token: string;
+};
+
+export default function ForgetPasswordForm({ token }: Props) {
+  const isMountedRef = useIsMountedRef();
+  const navigate = useNavigate();
+
+  const [showPasswordNew, setShowPasswordNew] = useState(false);
+  const [showPasswordConfirmNew, setShowPasswordConfirmNew] = useState(false);
+  const ResetPasswordSchema = Yup.object().shape({});
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(ResetPasswordSchema),
+    // defaultValues: { email: 'demo@minimals.cc' },
+  });
+
+  const {
+    handleSubmit,
+    setError,
+    formState: { errors, isSubmitting },
+  } = methods;
+
+  const onSubmit = async (data: FormValuesProps) => {
+    try {
+      await axios.post('/forget-password', { ...data, token });
+      console.log(data);
+
+      // await new Promise((resolve) => setTimeout(resolve, 500));
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      if (isMountedRef.current) {
+        navigate('/auth/login', { replace: true });
+      }
+    } catch (error) {
+      console.log(error.response.data);
+      if (isMountedRef.current) {
+        setError('afterSubmit', { ...error, message: error.response.data.message });
+      }
+    }
+  };
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+      <Stack spacing={3}>
+        {!!errors.afterSubmit && <Alert severity="error">{errors.afterSubmit.message}</Alert>}
+        <Typography>Kata Sandi Baru</Typography>
+        <RHFTextField
+          name="new_password"
+          label="Kata Sandi Baru"
+          type={showPasswordNew ? 'text' : 'password'}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton onClick={() => setShowPasswordNew(!showPasswordNew)} edge="end">
+                  <Iconify icon={showPasswordNew ? 'eva:eye-fill' : 'eva:eye-off-fill'} />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+        />
+        <Typography>Konfirmasi Kata Sandi </Typography>
+        <RHFTextField
+          name="confirm_new_password"
+          label="Konfirmasi Kata Sandi"
+          type={showPasswordConfirmNew ? 'text' : 'password'}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  onClick={() => setShowPasswordConfirmNew(!showPasswordConfirmNew)}
+                  edge="end"
+                >
+                  <Iconify icon={showPasswordConfirmNew ? 'eva:eye-fill' : 'eva:eye-off-fill'} />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+        />
+
+        <LoadingButton
+          fullWidth
+          size="large"
+          type="submit"
+          variant="contained"
+          loading={isSubmitting}
+        >
+          Reset Password
+        </LoadingButton>
+      </Stack>
+    </FormProvider>
+  );
+}

frontend/dashboard/src/sections/auth/forget-password/index.ts

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

frontend/dashboard/src/sections/auth/reset-password/ResetPasswordForm.tsx

@@ -32,7 +32,7 @@ export default function ResetPasswordForm({ onSent, onGetEmail }: Props) {
 
   const methods = useForm<FormValuesProps>({
     resolver: yupResolver(ResetPasswordSchema),
-    defaultValues: { email: 'demo@minimals.cc' },
+    // defaultValues: { email: 'demo@minimals.cc' },
   });
 
   const {