diff --git a/client/src/app/routes/index.tsx b/client/src/app/routes/index.tsx index 1e4be13e..3b3de222 100644 --- a/client/src/app/routes/index.tsx +++ b/client/src/app/routes/index.tsx @@ -1,12 +1,25 @@ -import { Suspense } from 'react'; +import { Suspense, lazy } from 'react'; import { Route, Routes } from 'react-router-dom'; import Loader from '../../shared/components/molecules/loader'; import { LOADING } from './constants'; import { LoginLazyComponent } from '../components'; +// Add lazy loading for ResetPassword component +const ResetPasswordLazyComponent = lazy( + () => import('../../modules/auth/v1/reset-password') +); + export function AppUnProtectedRoutes() { return ( + }> + + + } + /> ({ paddingTop: theme.spacing(4), @@ -44,6 +45,7 @@ const StyledFooter = styled('p')(({ theme }) => ({ const UserAuthForm = () => { const [formType, setFormType] = useState('login'); const { loading, handleSubmit } = useUserAuthForm({ type: formType }); + const navigate = useNavigate(); return ( @@ -90,6 +92,28 @@ const UserAuthForm = () => { icon={} /> + {/* Forgot Password Link - Only shown on login */} + {formType === 'login' && ( + + navigate('/reset-password'), + sx: { + fontSize: '0.9rem', + textDecoration: 'underline', + color: 'text.secondary', + cursor: 'pointer', + '&:hover': { + opacity: 0.8, + }, + }, + }} + /> + + )} + ({ + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(4), + paddingLeft: '5vw', + paddingRight: '5vw', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + minHeight: '100vh', +})); + +const StyledForm = styled('form')(() => ({ + width: '80%', + maxWidth: 400, +})); + +const StyledTitle = styled(Typography)(({ theme }) => ({ + fontSize: '2.5rem', + fontFamily: 'Gelasio, serif', + textTransform: 'capitalize', + textAlign: 'center', + marginBottom: theme.spacing(6), +})); + +const StyledFooter = styled('p')(({ theme }) => ({ + marginTop: theme.spacing(6), + color: theme.palette.text.secondary, + fontSize: '1.125rem', + textAlign: 'center', +})); + +const ResetPassword = () => { + const [loading, setLoading] = useState(false); + const navigate = useNavigate(); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setLoading(true); + + const formData = new FormData(e.currentTarget); + const email = formData.get('email'); + + // TODO: Implement password reset API call here + console.log('Reset password for:', email); + + // Simulate API call + setTimeout(() => { + setLoading(false); + alert('Password reset link sent to your email!'); + }, 2000); + }; + + return ( + + + Reset Password + + + + Enter your email address and we'll send you a link to reset your + password. + + + } + /> + + + Send Reset Link + + + + + Remember your password?{' '} + navigate('/'), + sx: { + fontSize: '1.125rem', + marginLeft: 1, + textDecoration: 'underline', + color: 'inherit', + cursor: 'pointer', + '&:hover': { + opacity: 0.8, + }, + }, + }} + /> + + + + ); +}; + +export default ResetPassword; \ No newline at end of file