134 lines
4.1 KiB
TypeScript
134 lines
4.1 KiB
TypeScript
import {
|
|
Box,
|
|
Center,
|
|
HStack,
|
|
Image,
|
|
Input,
|
|
Stack,
|
|
Text,
|
|
VStack,
|
|
} from "@chakra-ui/react";
|
|
import axios from "axios";
|
|
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import logo from "../assets/logo.svg";
|
|
import { Button } from "../components/ui/button";
|
|
import { toaster, Toaster } from "../components/ui/toaster";
|
|
|
|
const SetNewPassword = () => {
|
|
const [password, setPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const navigate = useNavigate();
|
|
|
|
const handlePasswordSubmit = async () => {
|
|
// Validation
|
|
if (password.length < 8) {
|
|
toaster.create({
|
|
title: "Password must be at least 8 characters long",
|
|
type: "error",
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (password !== confirmPassword) {
|
|
toaster.create({
|
|
title: "Passwords do not match",
|
|
type: "error",
|
|
});
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
const res = await axios.post(`${import.meta.env.VITE_API_URL}/reset-password`, {
|
|
password: password,
|
|
confirm_password: confirmPassword,
|
|
// id: id
|
|
});
|
|
|
|
if (res.status === 200) {
|
|
toaster.create({
|
|
title: "Password updated successfully",
|
|
type: "success",
|
|
});
|
|
navigate("/login"); // Redirect to login page
|
|
} else {
|
|
toaster.create({
|
|
title: res.data.message || "Failed to update password",
|
|
type: "error",
|
|
});
|
|
}
|
|
} catch (error: any) {
|
|
toaster.create({
|
|
title: error.response?.data?.message || "Something went wrong",
|
|
type: "error",
|
|
});
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<VStack 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>
|
|
|
|
<Center w="100%" h="93%" p={8}>
|
|
<Box p={8} borderWidth={1} borderRadius="lg" boxShadow="lg">
|
|
<Text fontSize="24px" fontWeight="bold" color="#313039" textAlign="center">
|
|
Create a Password
|
|
</Text>
|
|
|
|
<Stack p={2}>
|
|
<Text color="black" pt={1} fontSize="12px">New password</Text>
|
|
<Input
|
|
color="black"
|
|
pl={1}
|
|
fontSize="12px"
|
|
type="password"
|
|
border="1px solid grey"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
|
|
<Text color="black" pt={1} fontSize="12px">Confirm password</Text>
|
|
<Input
|
|
color="black"
|
|
pl={1}
|
|
fontSize="12px"
|
|
type="password"
|
|
border="1px solid grey"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
/>
|
|
</Stack>
|
|
|
|
<Button
|
|
loading={isLoading}
|
|
mt={6}
|
|
w="100%"
|
|
bg="#02A0A0"
|
|
color="white"
|
|
onClick={handlePasswordSubmit}
|
|
>
|
|
Confirm Password
|
|
</Button>
|
|
</Box>
|
|
</Center>
|
|
|
|
<Toaster />
|
|
</VStack>
|
|
);
|
|
};
|
|
|
|
export default SetNewPassword;
|