Siddhesh.More/SSA-Admin-Panel
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

Profiule API integrated

Browse Source
This commit is contained in:
rockyeverlast
2025-04-09 16:23:36 +05:30
parent c9bbae35f9
commit 8acc9430b3
11 changed files with 846 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dev-dist/sw.js
View File

@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812"
}, {
"url": "index.html",
"revision": "0.96d38pjn7gg"
"revision": "0.4sre1e6vpfo"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

18
src/Pages/ForgotPassword.tsx
View File

@@ -31,6 +31,10 @@ const ForgotPassword = () => {
} = 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(
@@ -38,12 +42,24 @@ const ForgotPassword = () => {
{
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");
// 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);

268
src/Pages/Profile/ChangePassword.tsx
View File

@@ -1,46 +1,246 @@
import { Field, Input, Stack } from "@chakra-ui/react";
import { DialogCloseTrigger, Field, IconButton, Input, Stack, Text } from "@chakra-ui/react";
import { Button } from "../../components/ui/button";
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog";
import EnterPassword from "./EnterPassword";
function Changepassword() {
// import EnterPassword from "./EnterPassword";
import { useForm } from "react-hook-form";
import { useEffect, useState } from "react";
import { toaster } from "../../components/ui/toaster";
import { useNewPasswordSetMutation } from "../../Redux/Service/profile.password";
import { LuEye, LuEyeOff } from "react-icons/lu";
import { InputGroup } from "../../components/ui/input-group";
type EnterPasswordProps = {
onClose: () => void;
isOpen: boolean;
};
type FormData = {
new_password: string;
confirm_password: string;
};
function Changepassword({ onClose, isOpen }: EnterPasswordProps) {
const [showOldPassword, setShowOldPassword] = useState(false);
const [showNewPassword, setShowNewPassword] = useState(false);
const [newPasswordSet] = useNewPasswordSetMutation()
const [isLoading, setIsLoading] = useState(false);
const {
register,
handleSubmit,
formState: { errors },
setError,
clearErrors,
watch,
reset,
} = useForm<FormData>({
defaultValues: {
new_password: '',
confirm_password: ''
}
});
const newPassword = watch("new_password");
const confirmPassword = watch("confirm_password");
useEffect(() => {
if (newPassword && confirmPassword && newPassword !== confirmPassword) {
setError("confirm_password", {
type: "manual",
message: "Passwords do not match"
});
} else if (confirmPassword) {
clearErrors("confirm_password");
}
}, [newPassword, confirmPassword, setError, clearErrors]);
const onSubmit = async (data: FormData) => {
if (data.new_password === '' || data.confirm_password === '') {
return
}
if (data.new_password !== data.confirm_password) {
setError("confirm_password", {
type: "manual",
message: "Passwords do not match"
});
return;
}
console.log('ERROR', errors)
console.log('Change submitted:', data);
clearErrors("confirm_password");
setIsLoading(true);
const payload = {
new_password: data.new_password,
confirm_password: data.confirm_password
}
try {
const res = await newPasswordSet(payload).unwrap()
if (res.status === 'success') {
toaster.create({
title: "Password changed Successfully",
type: "success",
});
onClose()
} else {
toaster.create({
title: res.data.message || "Invalid password",
type: "error",
});
}
reset()
} catch (error: any) {
toaster.create({
title: error.data.message || "Something went wrong",
type: "error",
});
} finally {
setIsLoading(false);
}
};
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<Button bg="#02A0A0" size={'2xs'} color={"#fff"} px={2} >
Change Password
</Button>
</DialogTrigger>
<DialogContent
bg={"#fff"}
w={{ base: '90%', md: '400px' }}
p={2}
bgSize={'md'}
<>
<DialogRoot
placement="center"
open={isOpen}
onOpenChange={(open) => !open && onClose()}
>
<DialogHeader bg="white" pt={3} pb={2} >
<DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>CHANGE PASSWORD</DialogTitle>
</DialogHeader>
<DialogBody bg="white" pt={5}>
<Stack p={2} >
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">New password</Field.Label>
<Input color="black" pl={1} fontSize="12px" type="password" border="1px solid grey" /></Field.Root>
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">Confirm password</Field.Label>
<Input color="black" pl={1} fontSize="12px" type="password" border="1px solid grey" /></Field.Root>
<DialogTrigger asChild>
<Button bg="#02A0A0" size={'2xs'} color={"#fff"} px={2} >
Change Password
</Button>
</DialogTrigger>
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center" mt={2} p={2}
<DialogContent
bg={"#fff"}
w={{ base: '90%', md: '400px' }}
p={2}
bgSize={'md'}
>
<EnterPassword />
</DialogFooter>
</DialogContent>
</DialogRoot >
<DialogHeader bg="white" pt={3} pb={2} >
<DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>CHANGE PASSWORD</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit(onSubmit)}>
<DialogBody bg="white" pt={5}>
<Stack p={2} >
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">New password</Field.Label>
<InputGroup
width={'100%'}
endElement={
<IconButton
aria-label={showOldPassword ? "Hide password" : "Show password"}
size="sm"
// variant="outline"
onClick={() => setShowOldPassword(!showOldPassword)}
_hover={{ bg: "transparent" }}
height={'fit-content'}
mr={2}
>
{showOldPassword ? <LuEye /> : <LuEyeOff />}
</IconButton>
}>
<Input
color="black"
pl={1}
fontSize="12px"
height="30px"
type={showOldPassword ? "text" : "password"}
border={errors.new_password ? "1px solid red" : "1px solid grey"}
{...register("new_password", {
required: "Password is required",
minLength: {
value: 8,
message: "Password must be at least 8 characters",
},
})}
/>
</InputGroup>
{/* <IconButton
aria-label={showPassword ? "Hide password" : "Show password"}
size="sm"
variant="ghost"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? <LuEye /> : <LuEyeOff />}
</IconButton> */}
{errors.new_password && (
<Text color="red.500" fontSize="xs" mt={1}>
{errors.new_password.message}
</Text>
)}
</Field.Root>
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">Confirm password</Field.Label>
<InputGroup
width={'100%'}
endElement={
<IconButton
aria-label={showNewPassword ? "Hide password" : "Show password"}
size="sm"
// variant="outline"
onClick={() => setShowNewPassword(!showNewPassword)}
_hover={{ bg: "transparent" }}
height={'fit-content'}
mr={2}
>
{showNewPassword ? <LuEye /> : <LuEyeOff />}
</IconButton>
}>
<Input
color="black"
pl={1}
fontSize="12px"
height="30px"
type= {showNewPassword ? "password" : "Text"}
border={errors.confirm_password ? "1px solid red" : "1px solid grey"}
{...register("confirm_password", {
required: "Please confirm your password",
validate: (value) =>
value === newPassword || "Passwords do not match",
})}
/>
</InputGroup>
{errors.confirm_password && (
<Text color="red.500" fontSize="xs" mt={1}>
{errors.confirm_password.message}
</Text>
)}
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center" mt={2} p={2}
>
{/* <EnterPassword /> */}
<Button
loading={isLoading}
mt={6}
w="100%"
bg="#02A0A0"
color="white"
type="submit"
>
Submit
</Button>
</DialogFooter>
</form>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot >
</>
)
}

320
src/Pages/Profile/EnterOTP.tsx
View File

@@ -1,11 +1,87 @@
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle } from "../../components/ui/dialog"
import { Box, Input, Stack, Text } from "@chakra-ui/react"
import { Button } from "../../components/ui/button";
import { useState } from "react";
import { BiSolidEdit } from "react-icons/bi";
import { useEffect, useState } from "react";
// import { BiSolidEdit } from "react-icons/bi";
import { Toaster, toaster } from "../../components/ui/toaster";
import { useGetProfileQuery, useResendOtpMutation, useVerifyOTPMutation } from "../../Redux/Service/profile.password";
import { useForm } from "react-hook-form";
import Changepassword from "./ChangePassword";
function EnterOTP() {
const [otp, setOtp] = useState<string[]>(["", "", "", ""]);
type EnterOTPProps = {
onClose: () => void;
isOpen: boolean;
};
type FormData = {
otp: string[];
};
function EnterOTP({ onClose, isOpen }: EnterOTPProps) {
const [isLoading, setIsLoading] = useState(false);
const [timer, setTimer] = useState(60);
const [isResendDisabled, setIsResendDisabled] = useState(true);
const [verifyOTP] = useVerifyOTPMutation()
const [otpSuccess, setOtpSuccess] = useState(false);
const [resendOtp] = useResendOtpMutation()
const { data } = useGetProfileQuery()
const id = data?.data.id
const {
register,
handleSubmit,
formState: { errors },
reset,
} = useForm<FormData>({
defaultValues: {
otp: ["", "", "", ""] // Initialize with empty strings for each digit
}
});
useEffect(() => {
let interval: NodeJS.Timeout;
if (timer > 0 && isResendDisabled) {
interval = setInterval(() => {
setTimer((prevTimer) => prevTimer - 1);
}, 1000);
} else if (timer === 0) {
setIsResendDisabled(false);
}
return () => clearInterval(interval);
}, [timer, isResendDisabled]);
const handleResendOTP = async () => {
setIsResendDisabled(true);
setTimer(60); // Reset timer to 1 minute
try {
const res = await resendOtp({ mobile_number: Number(id) }).unwrap()
if (res.status === 200) {
toaster.create({
title: "OTP resent successfully",
type: "success",
});
} else {
toaster.create({
title: res.data.message || "Failed to resend OTP",
type: "error",
});
setIsResendDisabled(false); // Enable button if failed
}
} catch (error: any) {
toaster.create({
title: error.response?.data?.message || "Failed to resend OTP",
type: "error",
});
setIsResendDisabled(false); // Enable button if error
}
};
// Handle change for OTP inputs
const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number): void => {
@@ -15,94 +91,174 @@ function EnterOTP() {
if (/[^0-9]/.test(value)) return;
// Update the OTP state with the new value
const newOtp = [...otp];
newOtp[index] = value;
setOtp(newOtp);
// const newOtp = [...otp];
// newOtp[index] = value;
// setOtp(newOtp);
// Move focus to the next input automatically
if (value && index < otp.length - 1) {
if (value && index < 3) {
const nextInput = document.getElementById(`otp-input-${index + 1}`) as HTMLInputElement;
if (nextInput) nextInput.focus();
}
// Move focus to the next input automatically
// if (value && index < otp.length - 1) {
// const nextInput = document.getElementById(`otp-input-${index + 1}`) as HTMLInputElement;
// if (nextInput) nextInput.focus();
// }
if (value === "" && index > 0) {
const prevInput = document.getElementById(`otp-input-${index - 1}`) as HTMLInputElement;
if (prevInput) prevInput.focus();
}
};
const onSubmit = async (data: FormData) => {
console.log('ERROR', errors)
if (data.otp.length !== 4) {
toaster.create({
title: "OTP must be 4 digits",
type: "error",
});
return;
}
const fullOtp = data.otp.join('');
console.log('OTP submitted:', fullOtp);
setIsLoading(true);
try {
const res = await verifyOTP({ otp: fullOtp }).unwrap()
if (res.status === 'success') {
toaster.create({
title: "OTP Verified Successfully",
type: "success",
});
setOtpSuccess(true);
reset();
} else {
toaster.create({
title: res.data.message || "Invalid OTP",
type: "error",
});
}
reset()
} catch (error: any) {
toaster.create({
title: error.data?.message || "Something went wrong",
type: "error",
});
setOtpSuccess(false);
} finally {
setIsLoading(false);
}
};
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<Button w="100%" bg="#02A0A0" color={"#fff"}>
Save
</Button>
</DialogTrigger>
<DialogContent
bg={"#fff"}
// w={{ lg: "60%", md: "230px" }}
w={{ base: '90%', md: '400px' }}
// height={'80vh'}
// overflow={'scroll'}
p={2} // Reduced padding
bgSize={'md'}
>
<DialogHeader bg="white" pt={3}>
<DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER OTP</DialogTitle>
</DialogHeader>
<DialogBody bg="white" pt={2}>
<Text color={"black"} textAlign={"center"}>OTP has been send to your E-mail Address</Text>
<Box display="flex" flexDirection="row" alignItems="center" justifyContent="center" p={3}>
<BiSolidEdit color="black" />
<Text color="black" textAlign="center" ml={2}>9619565889</Text>
</Box>
<Stack direction="row" justify="center" pt={2}>
{/* 4 OTP Inputs */}
{otp.map((digit, index) => (
<Input
key={index}
id={`otp-input-${index}`}
value={digit}
maxW="50px"
color={"black"}
textAlign="center"
fontSize="20px"
placeholder="0"
border="1px solid grey"
onChange={(e) => handleChange(e, index)}
maxLength={1} // Only allows 1 character per input
/>
))}
</Stack>
<Box textAlign="center">
<Text
color="#4746F4"
textDecoration="underline"
fontWeight="bold"
mt={3}
cursor="pointer"
display="inline-block"
px={2} // Adds padding for better appearance
>
Resend OTP
</Text>
</Box>
</DialogBody>
<DialogFooter display="flex" justifyContent="center" mt={2} p={2}
>
<>
<DialogRoot placement="center"
open={isOpen}
onOpenChange={(open) => !open && onClose()}>
{/* <DialogTrigger asChild>
<Button w="100%" bg="#02A0A0" color={"#fff"}>
Save
Submit
</Button>
</DialogFooter>
{/* <DialogCloseTrigger color="black" /> */}
</DialogContent>
</DialogRoot >
</DialogTrigger> */}
<DialogContent
bg={"#fff"}
// w={{ lg: "60%", md: "230px" }}
w={{ base: '90%', md: '400px' }}
// height={'80vh'}
// overflow={'scroll'}
p={2} // Reduced padding
bgSize={'md'}
>
<DialogHeader bg="white" pt={3} alignSelf="center">
<DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER OTP</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit(onSubmit)}>
<DialogBody bg="white" pt={2}>
<Text color={"black"} textAlign={"center"}>OTP has been sent successfully</Text>
{/* <Box display="flex" flexDirection="row" alignItems="center" justifyContent="center" p={3}>
<BiSolidEdit color="black" />
<Text color="black" textAlign="center" ml={2}>9619565889</Text>
</Box> */}
<Stack direction="row" justify="center" pt={2}>
{/* 4 OTP Inputs */}
{Array.from({ length: 4 }).map((_, index) => (
<Input
key={index}
id={`otp-input-${index}`}
maxW="50px"
color="black"
textAlign="center"
fontSize="20px"
placeholder="0"
border={errors.otp?.[index] ? "1px solid red" : "1px solid grey"}
maxLength={1}
{...register(`otp.${index}`, {
required: "Digit required",
pattern: {
value: /^[0-9]$/,
message: "Must be a single digit"
},
onChange: (e) => handleChange(e, index)
})}
/>
))}
</Stack>
<Box textAlign="center" mt={4}>
{isResendDisabled ? (
<Text color="gray.500">
Resend OTP in {timer} seconds
</Text>
) : (
<Text
color="#4746F4"
textDecoration="underline"
fontWeight="bold"
cursor="pointer"
onClick={handleResendOTP}
>
Resend OTP
</Text>
)}
</Box>
</DialogBody>
<DialogFooter display="flex" justifyContent="center" mt={2} p={2}
>
<Button
loading={isLoading}
mt={6}
w="100%"
bg="#02A0A0"
color="white"
type="submit"
>
Verify OTP
</Button>
</DialogFooter>
</form>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot >
{otpSuccess && (<Changepassword
onClose={() => {
setOtpSuccess(false);
onClose()
}}
isOpen={otpSuccess}
/>)}
<Toaster />
</>
)
}

148
src/Pages/Profile/EnterPassword.tsx
View File

@@ -1,53 +1,127 @@
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Field, Input, Stack } from "@chakra-ui/react"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Field, Input, Stack, Text } from "@chakra-ui/react"
import { useForm } from "react-hook-form";
import { Button } from "../../components/ui/button";
import EnterOTP from "./EnterOTP";
import { useProfilePasswordMutation } from "../../Redux/Service/profile.password";
import { useState } from "react";
import { Toaster, toaster } from "../../components/ui/toaster";
type FormData = {
password: string;
};
function EnterPassword() {
const [profilePassword] = useProfilePasswordMutation();
const [isSuccess, setIsSuccess] = useState(false);
const [isDialogOpen, setIsDialogOpen] = useState(false);
const {
register,
handleSubmit,
formState: { errors },
reset,
} = useForm<FormData>();
const onSubmit = async (data: FormData) => {
if (!data.password) {
return
}
try {
await profilePassword({ password: data.password }).unwrap();
setIsSuccess(true);
reset();
setIsDialogOpen(false);
// Handle success (e.g., show a success message or redirect)
} catch (error: any) {
// Handle error (e.g., show an error message)
toaster.create({
title: error?.data.message || "Invalid password",
type: "error",
});
console.error("Password change failed:", error.data.message);
setIsSuccess(false);
}
};
return (
<>
<DialogRoot placement="center">
<DialogTrigger asChild>
<Button w="100%" bg="#02A0A0" color={"#fff"}>
Save
</Button>
</DialogTrigger>
<DialogContent
bg={"#fff"}
// w={{ lg: "60%", md: "230px" }}
w={{ base: '90%', md: '400px' }}
// height={'80vh'}
// overflow={'scroll'}
p={2} // Reduced padding
bgSize={'md'}
<DialogRoot placement="center"
open={isDialogOpen}
onOpenChange={(details) => setIsDialogOpen(details.open)}
>
<DialogHeader bg="white" pt={3} pb={2} >
<DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER PASSWORD</DialogTitle>
</DialogHeader>
<DialogTrigger asChild>
<Button bg="#02A0A0" size={'2xs'} color={"#fff"} px={2} >
Change Password
</Button>
<DialogBody bg="white" pt={5}>
<Stack p={2} >
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">Password</Field.Label>
<Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
</DialogTrigger>
<DialogContent
bg={"#fff"}
// w={{ lg: "60%", md: "230px" }}
w={{ base: '90%', md: '400px' }}
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center" mt={2} p={2}
// height={'80vh'}
// overflow={'scroll'}
p={2} // Reduced padding
bgSize={'md'}
>
{/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
<DialogHeader bg="white" pt={3} pb={2} >
<DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER PASSWORD</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit(onSubmit)}>
<DialogBody bg="white" pt={5}>
<Stack p={2} >
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">Password</Field.Label>
<Input
color="black"
pl={1}
fontSize="12px"
height="30px"
type="password"
border={errors.password ? "1px solid red" : "1px solid grey"}
{...register("password", {
required: "Password is required",
minLength: {
value: 8,
message: "Password must be at least 8 characters",
},
})}
/>
{errors.password && (
<Text color="red.500" fontSize="xs" mt={1}>
{errors.password.message}
</Text>
)}
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center" mt={2} p={2}
>
{/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
Save
</Button> */}
<EnterOTP />
</DialogFooter>
<Button type="submit" w="100%" bg="#02A0A0" color={"#fff"}>
Submit
</Button>
</DialogFooter>
{/* <DialogCloseTrigger color="black" /> */}
</DialogContent>
</DialogRoot >
<DialogCloseTrigger color="black" />
</form>
</DialogContent>
</DialogRoot >
{isSuccess && (<EnterOTP
onClose={() => {
setIsSuccess(false);
setIsDialogOpen(false);
}}
isOpen={isSuccess}
/>)
}
<Toaster />
</>
)
}

81
src/Pages/Profile/Profile.tsx
View File

@@ -3,62 +3,63 @@ import { FaCamera } from "react-icons/fa";
import EditableInput from "../../components/EditableInput";
import MainFrame from "../../components/MainFrame";
import { Field } from "../../components/ui/field";
import Changepassword from "./ChangePassword";
// import Changepassword from "./ChangePassword";
import EnterPassword from "./EnterPassword";
import { useGetProfileQuery } from "../../Redux/Service/profile.password";
const Profile = () => {
const { data } = useGetProfileQuery()
console.log('PROFILE DATA:', data?.data);
return (
<MainFrame >
<HStack alignItems={'flex-start'} justifyContent={'center'} pt={0} h={'89vh'} w={'100%'} >
<HStack alignItems={'flex-start'} justifyContent={'center'} pt={0} h={'89vh'} w={'100%'} >
<VStack w={'50%'} p={3} rounded={'lg'} mb={3}>
<VStack w={'50%'} p={3} rounded={'lg'} mb={3}>
<HStack shadow={'md'} rounded={'lg'} justifyContent={'space-between'} alignItems={'flex-end'} w={'100%'} px={3} py={3} >
<VStack w={'100%'} alignItems={'flex-start'} gap={0}>
<Box mb={2} position="relative" width="fit-content"
cursor="pointer" onClick={() => alert("Avatar clicked!")}>
<Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
<Avatar.Fallback />
<Avatar.Image src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
</Avatar.Root>
<Box
position="absolute"
bottom="-2px"
left={"39px"}
p="2px"
>
<FaCamera color="#ccc" size={16} />
</Box>
</Box>
<Text color={"black"} as={'span'} fontSize={'sm'} fontWeight={"bold"}>Ritesh Pandey</Text>
<Text color="black" as={'span'} fontSize={'xs'}>
Employee ID: <span>#1245679</span>
</Text>
</VStack>
<HStack shadow={'md'} rounded={'lg'} justifyContent={'space-between'} alignItems={'flex-end'} w={'100%'} px={3} py={3} >
<VStack w={'100%'} alignItems={'flex-start'} gap={0}>
<Box mb={2} position="relative" width="fit-content"
cursor="pointer" onClick={() => alert("Avatar clicked!")}>
<Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
<Avatar.Fallback />
<Avatar.Image src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
</Avatar.Root>
<Box
position="absolute"
bottom="-2px"
left={"39px"}
p="2px"
>
<FaCamera color="#ccc" size={16} />
</Box>
</Box>
<Text color={"black"} as={'span'} fontSize={'sm'} fontWeight={"bold"}>{`${data?.data?.first_name.charAt(0).toUpperCase()}${data?.data.first_name.slice(1)}`}
</Text>
{/* <Text color="black" as={'span'} fontSize={'xs'}>
Employee ID: <span>#1245679</span>
</Text> */}
</VStack>
<Changepassword />
</HStack>
<EnterPassword />
{/* <Changepassword /> */}
</HStack>
<VStack w={"100%"} >
<Field mt={4} label="First Name" fontSize="xs" required>
<EditableInput defaultValue="Ritesh" placeholder="Enter first name" />
<VStack w={"100%"} >
<Field mt={4} label="First Name" fontSize="xs" required>
<EditableInput value={`${data?.data.first_name}`} placeholder="Enter first name" isDisabled />
</Field>
<Field mt={4} label="Last Name" fontSize="xs" required>
<EditableInput defaultValue="Pandey" placeholder="Enter last name" />
<EditableInput value={`${data?.data.last_name}`} placeholder="Enter last name" isDisabled />
</Field>
<Field mt={4} label="Mobile Number" fontSize="xs" required>
<EditableInput defaultValue={"98234567892"} placeholder="Mobile Number" type='number' />
<EditableInput value={`${data?.data.phone_number}`} placeholder="Mobile Number" type='number' isDisabled />
</Field>
</VStack>
</VStack>
</VStack>
</HStack>

81
src/Pages/SetNewPassword.tsx
View File

@@ -2,6 +2,7 @@ import {
Box,
Center,
HStack,
IconButton,
Image,
Input,
Stack,
@@ -14,12 +15,18 @@ 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";
import { InputGroup } from "../components/ui/input-group";
import { LuEye, LuEyeOff } from "react-icons/lu";
const SetNewPassword = () => {
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const queryParams = new URLSearchParams(window.location.search);
const id = queryParams.get("id");
const [showOldPassword, setShowOldPassword] = useState(false);
const [showNewPassword, setShowNewPassword] = useState(false);
const handlePasswordSubmit = async () => {
// Validation
@@ -42,13 +49,13 @@ const SetNewPassword = () => {
setIsLoading(true);
try {
const res = await axios.post(`${import.meta.env.VITE_API_URL}/reset-password`, {
const res = await axios.post(`${import.meta.env.VITE_API_URL}/update-password`, {
password: password,
confirm_password: confirmPassword,
// id: id
id: Number(id)
});
if (res.status === 200) {
if (res.data.status === 'success') {
toaster.create({
title: "Password updated successfully",
type: "success",
@@ -90,26 +97,58 @@ const SetNewPassword = () => {
<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)}
/>
<InputGroup
width={'100%'}
endElement={
<IconButton
aria-label={showOldPassword ? "Hide password" : "Show password"}
size="sm"
// variant="outline"
onClick={() => setShowOldPassword(!showOldPassword)}
_hover={{ bg: "transparent" }}
height={'fit-content'}
mr={2}
>
{showOldPassword ? <LuEye /> : <LuEyeOff />}
</IconButton>
}>
<Input
color="black"
pl={1}
fontSize="12px"
type={showOldPassword ? "password" : "text"}
border="1px solid grey"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</InputGroup>
<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)}
/>
<InputGroup
width={'100%'}
endElement={
<IconButton
aria-label={showNewPassword ? "Hide password" : "Show password"}
size="sm"
// variant="outline"
onClick={() => setShowNewPassword(!showNewPassword)}
_hover={{ bg: "transparent" }}
height={'fit-content'}
mr={2}
>
{showNewPassword ? <LuEye /> : <LuEyeOff />}
</IconButton>
}>
<Input
color="black"
pl={1}
fontSize="12px"
type={showNewPassword ? "password" : "text"}
border="1px solid grey"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
</InputGroup>
</Stack>
<Button

74
src/Pages/VerifyEnterOTP.tsx
View File

@@ -8,7 +8,7 @@ import {
VStack,
} from "@chakra-ui/react";
import axios from "axios";
import { useState } from "react";
import { useEffect, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import logo from "../assets/logo.svg";
import { Button } from "../components/ui/button";
@@ -16,13 +16,58 @@ import { toaster, Toaster } from "../components/ui/toaster";
const VerifyOTP = () => {
const [otp, setOtp] = useState<string[]>(["", "", "", ""]);
const [isLoading, setIsLoading] = useState(false);
const [timer, setTimer] = useState(60);
const [isResendDisabled, setIsResendDisabled] = useState(true);
const navigate = useNavigate();
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const phoneNumber = queryParams.get("phone");
useEffect(() => {
let interval: NodeJS.Timeout;
const [isLoading, setIsLoading] = useState(false);
if (timer > 0 && isResendDisabled) {
interval = setInterval(() => {
setTimer((prevTimer) => prevTimer - 1);
}, 1000);
} else if (timer === 0) {
setIsResendDisabled(false);
}
return () => clearInterval(interval);
}, [timer, isResendDisabled]);
const handleResendOTP = async () => {
setIsResendDisabled(true);
setTimer(60); // Reset timer to 1 minute
try {
const res = await axios.post(`${import.meta.env.VITE_API_URL}/send-otp`, {
mobile_number: phoneNumber,
});
if (res.status === 200) {
toaster.create({
title: "OTP resent successfully",
type: "success",
});
} else {
toaster.create({
title: res.data.message || "Failed to resend OTP",
type: "error",
});
setIsResendDisabled(false); // Enable button if failed
}
} catch (error: any) {
toaster.create({
title: error.response?.data?.message || "Failed to resend OTP",
type: "error",
});
setIsResendDisabled(false); // Enable button if error
}
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number): void => {
const value = e.target.value;
@@ -51,11 +96,13 @@ const VerifyOTP = () => {
return;
}
const fullOtp = otp.join('');
setIsLoading(true);
try {
const res = await axios.post(`${import.meta.env.VITE_API_URL}/verify-otp`, {
mobile_number: phoneNumber,
otp: otp,
otp: fullOtp,
});
if (res.status === 200) {
@@ -63,8 +110,8 @@ const VerifyOTP = () => {
title: "OTP Verified Successfully",
type: "success",
});
navigate("/forgot-password/reset-password"); // Navigate to reset password page
const userid = res.data.data.id;
navigate(`/forgot-password/reset-password?id=${userid}`);
} else {
toaster.create({
title: res.data.message || "Invalid OTP",
@@ -133,6 +180,23 @@ const VerifyOTP = () => {
Resend OTP
</Text>
</Box> */}
<Box textAlign="center" mt={4}>
{isResendDisabled ? (
<Text color="gray.500">
Resend OTP in {timer} seconds
</Text>
) : (
<Text
color="#4746F4"
textDecoration="underline"
fontWeight="bold"
cursor="pointer"
onClick={handleResendOTP}
>
Resend OTP
</Text>
)}
</Box>
<Button
loading={isLoading}

69
src/Redux/Service/profile.password.ts Normal file
View File

@@ -0,0 +1,69 @@
import { createApi } from "@reduxjs/toolkit/query/react";
import { baseQueryWithReauth } from "./apiSlice";
interface profileGet {
data: {
id: number,
first_name: string,
last_name: string,
phone_number: string,
profile_photo: string,
}
}
export type ProfilePass = {
password: string;
};
export const profile = createApi({
reducerPath: "profile",
baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
endpoints: (builder) => ({
profilePassword: builder.mutation<ProfilePass, Partial<ProfilePass>>({
query: (data) => ({
url: "/profile-password",
method: "POST",
body: data,
}),
}),
// 🔹 GET: Fetch all posts
getProfile: builder.query<profileGet, void>({
query: () => "/profile-view",
}),
verifyOTP: builder.mutation({
query: (updatedData) => ({
url: "/profile-otp",
method: "POST",
body: updatedData,
}),
}),
newPasswordSet: builder.mutation({
query: (updatedData) => ({
url: "/profile-change-password",
method: "POST",
body: updatedData,
}),
}),
resendOtp: builder.mutation({
query: ({ data }) => ({
url: `/profile-resend-otp`,
method: "POST",
body: data,
}),
}),
}),
});
export const {
useGetProfileQuery,
useProfilePasswordMutation,
useVerifyOTPMutation,
useNewPasswordSetMutation,
useResendOtpMutation
} = profile;

3
src/Redux/Store.tsx
View File

@@ -18,6 +18,7 @@ import { termsAndCondition } from "./Service/terms.and.condition.service";
import { templateMaster } from "./Service/template.master.service";
import { jobType } from "./Service/job.type.service";
import { industryMaster } from "./Service/industry.master.service";
import { profile } from "./Service/profile.password";
export const store = configureStore({
reducer: {
@@ -39,6 +40,7 @@ export const store = configureStore({
[templateMaster.reducerPath]: templateMaster.reducer,
[jobType.reducerPath]: jobType.reducer,
[industryMaster.reducerPath]: industryMaster.reducer,
[profile.reducerPath]: profile.reducer,
auth: authReducer,
},
middleware: (getDefaultMiddleware) =>
@@ -60,6 +62,7 @@ export const store = configureStore({
templateMaster.middleware,
jobType.middleware,
industryMaster.middleware,
profile.middleware,
),
});

3
src/components/EditableInput.tsx
View File

@@ -8,6 +8,7 @@ interface InputProps {
placeholder?: string;
props?: any;
type?:string
isDisabled?: boolean;
}
const EditableInput: FC<InputProps> = ({
value,
@@ -15,6 +16,7 @@ const EditableInput: FC<InputProps> = ({
defaultValue,
placeholder,
type,
isDisabled,
...props
}) => {
return (
@@ -45,6 +47,7 @@ const EditableInput: FC<InputProps> = ({
outline={"#007F33"}
bgSize={"xs"}
ps={3}
disabled={isDisabled}
/>
</Editable.Root>
);