172 lines
6.0 KiB
TypeScript
172 lines
6.0 KiB
TypeScript
import {
|
|
Box,
|
|
Center,
|
|
HStack,
|
|
Image,
|
|
Input,
|
|
Text,
|
|
VStack,
|
|
} from "@chakra-ui/react";
|
|
import axios from "axios";
|
|
import { useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
// import { useDispatch } from "react-redux";
|
|
import logo from "../assets/logo.svg";
|
|
import { Button } from "../components/ui/button";
|
|
import { Field } from "../components/ui/field";
|
|
import { toaster, Toaster } from "../components/ui/toaster";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
interface FormValues {
|
|
mobileNumber: number;
|
|
}
|
|
|
|
const ForgotPassword = () => {
|
|
const navigate = useNavigate();
|
|
const [isLoading, setIsLoading] = useState<boolean>(false);
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<FormValues>();
|
|
|
|
const onSubmit = handleSubmit(async (data) => {
|
|
const username = import.meta.env.VITE_USER_NAME || ""; // Replace with actual username
|
|
const password = import.meta.env.VITE_PASSWORD || ""; // Replace with actual password
|
|
const basicAuth = `${username}:${password}`; // Encode to Base64
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
const res = await axios.post(
|
|
`${import.meta.env.VITE_API_URL}/send-otp`,
|
|
{
|
|
mobile_number: Number(data.mobileNumber),
|
|
},
|
|
{
|
|
headers: {
|
|
Authorization: `Basic ${basicAuth}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
}
|
|
);
|
|
|
|
if (res.status === 200) {
|
|
navigate(`/forgot-password/verify?phone=${data.mobileNumber}`)
|
|
} else {
|
|
// alert(res.data.message || "Something went wrong");
|
|
toaster.create({
|
|
// title: error?.response?.data?.message,
|
|
title: res.data.message || "Something went wrong",
|
|
type: "error",
|
|
})
|
|
setIsLoading(false);
|
|
}
|
|
console.log("============", res);
|
|
|
|
} catch (error) {
|
|
console.log('error', error);
|
|
|
|
if (error) {
|
|
toaster.create({
|
|
// title: error?.response?.data?.message,
|
|
title: "Something Went Wrong",
|
|
type: "info",
|
|
})
|
|
// console.log("Login failed", error?.response?.data?.message);
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
|
|
<VStack appearance={'light'} w={"100%"} h={"100vh"} bg={"#ffffff"}>
|
|
<HStack
|
|
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
|
|
w={"100%"}
|
|
ps={8}
|
|
h={"7%"}
|
|
justifyContent={"flex-start"}
|
|
>
|
|
<Image w={50} src={logo} />
|
|
</HStack>
|
|
|
|
<HStack w={"100%"} h={"93%"} p={8} gap={8}>
|
|
<Center
|
|
display={{ base: "none", md: "flex" }}
|
|
bg={"#02A0A033"}
|
|
w={"50%"}
|
|
h={"100%"}
|
|
rounded={"3xl"}
|
|
>
|
|
<Image w={250} src={logo} />
|
|
</Center>
|
|
|
|
<Box
|
|
as={"form"}
|
|
onSubmit={onSubmit}
|
|
p={{ base: 4, md: 16 }}
|
|
w={{ base: "100%", md: "50%" }}
|
|
h={"100%"}
|
|
>
|
|
<VStack gap={2} w={"100%"}>
|
|
<Text
|
|
w={"100%"}
|
|
textAlign={"center"}
|
|
fontSize={"24px"}
|
|
fontWeight={"normal"}
|
|
color={"#313039"}
|
|
>
|
|
Forgot Password
|
|
</Text>
|
|
|
|
<Box mt={6} gap={4} w={"full"}>
|
|
<Field
|
|
color={"#313039"}
|
|
label={"Enter Mobile Number"}
|
|
w={"100%"}
|
|
invalid={!!errors.mobileNumber}
|
|
errorText={errors.mobileNumber?.message}
|
|
mb={4}
|
|
>
|
|
<Input
|
|
type="number"
|
|
ps={3}
|
|
maxLength={10}
|
|
{...register("mobileNumber", {
|
|
required: "Please enter a 10 digit mobile number",
|
|
pattern: {
|
|
value: /^[0-9]{10}$/,
|
|
message: "Mobile number must be exactly 10 digits"
|
|
}
|
|
})}
|
|
placeholder="Enter Mobile Number"
|
|
onInput={(e) => {
|
|
const target = e.target as HTMLInputElement;
|
|
target.value = target.value.replace(/\D/g, "").slice(0, 10);
|
|
}}
|
|
/>
|
|
</Field>
|
|
<Button
|
|
loading={isLoading}
|
|
mt={4}
|
|
size={"sm"}
|
|
bg={"#02A0A0"}
|
|
rounded={"md"}
|
|
w={"100%"}
|
|
color={"#ffffff"}
|
|
type="submit"
|
|
>
|
|
Send OTP
|
|
</Button>
|
|
</Box>
|
|
</VStack>
|
|
</Box>
|
|
<Toaster />
|
|
</HStack>
|
|
</VStack>
|
|
);
|
|
};
|
|
|
|
export default ForgotPassword;
|