125 lines
3.6 KiB
JavaScript
125 lines
3.6 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
TextField,
|
|
Button,
|
|
Typography,
|
|
Box,
|
|
Link as MuiLink,
|
|
} from "@mui/material";
|
|
import { useNavigate, Link } from "react-router-dom";
|
|
import toast from "react-hot-toast";
|
|
import axiosInstance from "../../api/axiosInstance";
|
|
|
|
const ForgotPasswordForm = () => {
|
|
const navigate = useNavigate();
|
|
const [mobile, setMobile] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
const handleChange = (e) => {
|
|
const value = e.target.value;
|
|
// Allow only numbers
|
|
if (/^\d*$/.test(value)) {
|
|
setMobile(value);
|
|
if (error) setError("");
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!mobile) {
|
|
setError("Mobile number is required");
|
|
return;
|
|
}
|
|
if (mobile.length !== 10) {
|
|
setError("Enter a valid 10-digit mobile number");
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
// API call with query parameter as requested
|
|
const response = await axiosInstance.post(`/forgot_password_send_otp?mobile=${mobile}`);
|
|
|
|
const successMessage = response.data?.message || "OTP sent successfully!";
|
|
toast.success(successMessage);
|
|
|
|
// Optional: Navigate to verify OTP page if needed
|
|
// navigate('/verify-otp', { state: { mobile } });
|
|
|
|
} catch (err) {
|
|
console.error("Forgot password error:", err);
|
|
const errorMessage = err.response?.data?.message ||
|
|
err.response?.data?.error ||
|
|
"Failed to send OTP. Please try again.";
|
|
toast.error(errorMessage);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white p-8 rounded-lg shadow-sm h-full flex flex-col justify-center border border-gray-100">
|
|
<Typography variant="h4" fontWeight="700" color="primary" gutterBottom align="center">
|
|
Forgot Password
|
|
</Typography>
|
|
<Typography variant="body1" color="text.secondary" mb={4} align="center">
|
|
Enter your mobile number to receive an OTP
|
|
</Typography>
|
|
|
|
<form onSubmit={handleSubmit} autoComplete="off">
|
|
<Box display="flex" flexDirection="column" gap={3}>
|
|
<TextField
|
|
fullWidth
|
|
label="Mobile Number"
|
|
name="mobile"
|
|
value={mobile}
|
|
onChange={handleChange}
|
|
error={Boolean(error)}
|
|
helperText={error}
|
|
variant="outlined"
|
|
placeholder="Enter 10-digit mobile number"
|
|
inputProps={{ maxLength: 10, inputMode: "numeric" }}
|
|
disabled={loading}
|
|
/>
|
|
|
|
<Button
|
|
type="submit"
|
|
variant="contained"
|
|
color="primary"
|
|
size="large"
|
|
fullWidth
|
|
disabled={loading}
|
|
sx={{
|
|
py: 1.5,
|
|
fontSize: "1rem",
|
|
fontWeight: "bold",
|
|
textTransform: "none",
|
|
borderRadius: 2,
|
|
}}
|
|
>
|
|
{loading ? "Sending..." : "Send OTP"}
|
|
</Button>
|
|
|
|
<Box mt={2} textAlign="center">
|
|
<Typography variant="body2" color="text.secondary">
|
|
Remember your password?{" "}
|
|
<MuiLink
|
|
component={Link}
|
|
to="/login"
|
|
underline="hover"
|
|
fontWeight="bold"
|
|
color="primary"
|
|
>
|
|
Login
|
|
</MuiLink>
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ForgotPasswordForm; |