feat : api integrated change login password and change transaction password
This commit is contained in:
@@ -1,24 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { TextInput, PasswordInput, Button, Title, Paper, Group, Box } from "@mantine/core";
|
||||
import { TextInput, PasswordInput, Button, Title, Paper, Group, Box, Text } from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { IconLock } from "@tabler/icons-react";
|
||||
import { generateCaptcha } from "@/app/captcha";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function ChangePassword() {
|
||||
const router = useRouter();
|
||||
const [oldPassword, setOldPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [captcha, setCaptcha] = useState("");
|
||||
const [captchaInput, setCaptchaInput] = useState("");
|
||||
const [otp, setOtp] = useState("");
|
||||
const [generatedOtp, setGeneratedOtp] = useState('');
|
||||
const [otpValidated, setOtpValidated] = useState(false);
|
||||
|
||||
const [step, setStep] = useState<"form" | "otp" | "final">("form"); // ✅ steps control
|
||||
const [passwordHistory] = useState(["Pass@1234", "OldPass@123", "MyPass#2023"]);
|
||||
const [step, setStep] = useState<"form" | "otp" | "final">("form");
|
||||
const icon = <IconLock size={18} stroke={1.5} />;
|
||||
|
||||
const handleGenerateOtp = async () => {
|
||||
const value = "123456"; // Or generate a random OTP
|
||||
setGeneratedOtp(value);
|
||||
return value;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
regenerateCaptcha();
|
||||
}, []);
|
||||
@@ -33,7 +40,7 @@ export default function ChangePassword() {
|
||||
return /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/.test(password);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
const handleSubmit = async () => {
|
||||
// Step 1 → validate form
|
||||
if (step === "form") {
|
||||
if (!oldPassword || !newPassword || !confirmPassword || !captchaInput) {
|
||||
@@ -44,36 +51,14 @@ export default function ChangePassword() {
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const actualOldPassword = "Pass@123";
|
||||
if (oldPassword !== actualOldPassword) {
|
||||
notifications.show({
|
||||
title: "Old Password Incorrect",
|
||||
message: "Entered old password does not match.",
|
||||
color: "red",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validatePasswordPolicy(newPassword)) {
|
||||
notifications.show({
|
||||
title: "Invalid Password",
|
||||
message:
|
||||
"Password must be at least 8 characters and contain alphanumeric and special characters.",
|
||||
message: "Password must contain at least one capital letter(A-Z), one digit(0-9), one special symbol(e.g.,@,#,$), and be 8-15 characters long.",
|
||||
color: "red",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (passwordHistory.includes(newPassword)) {
|
||||
notifications.show({
|
||||
title: "Password Reused",
|
||||
message: "New password must be different from the last 3 passwords.",
|
||||
color: "red",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
notifications.show({
|
||||
title: "Password Mismatch",
|
||||
@@ -82,7 +67,6 @@ export default function ChangePassword() {
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (captchaInput !== captcha) {
|
||||
notifications.show({
|
||||
title: "Invalid Captcha",
|
||||
@@ -93,7 +77,8 @@ export default function ChangePassword() {
|
||||
return;
|
||||
}
|
||||
|
||||
// ✅ Passed → move to OTP
|
||||
// Passed → move to OTP
|
||||
await handleGenerateOtp();
|
||||
setStep("otp");
|
||||
notifications.show({
|
||||
title: "OTP Sent",
|
||||
@@ -105,7 +90,7 @@ export default function ChangePassword() {
|
||||
|
||||
// Step 2 → validate OTP
|
||||
if (step === "otp") {
|
||||
if (otp !== "123456") {
|
||||
if (otp !== generatedOtp) {
|
||||
notifications.show({
|
||||
title: "Invalid OTP",
|
||||
message: "Please enter the correct OTP.",
|
||||
@@ -126,12 +111,55 @@ export default function ChangePassword() {
|
||||
|
||||
// Step 3 → Final Change Password
|
||||
if (step === "final") {
|
||||
notifications.show({
|
||||
title: "Password Changed",
|
||||
message: "Your password has been successfully updated.",
|
||||
color: "green",
|
||||
});
|
||||
resetForm();
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (!token) {
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch("/api/auth/change/login_password", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
OldLPsw: oldPassword,
|
||||
newLPsw: newPassword,
|
||||
confirmLPsw: confirmPassword
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.status === 401) {
|
||||
localStorage.removeItem("access_token");
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
const result = await response.json();
|
||||
console.log(result);
|
||||
if (!response.ok) {
|
||||
notifications.show({
|
||||
title: "Failed",
|
||||
message: result.error || "Failed to set login password",
|
||||
color: "Red",
|
||||
autoClose: false,
|
||||
});
|
||||
}
|
||||
if (response.ok) {
|
||||
notifications.show({
|
||||
title: "Success",
|
||||
message: "Login password Change successfully.",
|
||||
color: "green",
|
||||
});
|
||||
}
|
||||
resetForm();
|
||||
} catch (err: any) {
|
||||
notifications.show({
|
||||
title: "Error",
|
||||
message: err.message || "Server error, please try again later",
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -148,28 +176,29 @@ export default function ChangePassword() {
|
||||
|
||||
return (
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={400}>
|
||||
<Title order={3} style={{color:"red"}}>More Updates comming soon .....</Title>
|
||||
<Title order={3} mb="sm">
|
||||
Change Login Password
|
||||
</Title>
|
||||
{/* Scrollable form area */}
|
||||
<div style={{ overflowY: "auto", maxHeight: "280px", paddingRight: 8 }}>
|
||||
<PasswordInput
|
||||
label="Old Password"
|
||||
placeholder="Enter old password"
|
||||
value={oldPassword}
|
||||
onChange={(e) => setOldPassword(e.currentTarget.value)}
|
||||
withAsterisk
|
||||
mb="xs"
|
||||
readOnly={step !== "form"}
|
||||
/>
|
||||
<div style={{ overflowY: "auto", maxHeight: "280px" }}>
|
||||
<Group grow>
|
||||
<PasswordInput
|
||||
label="Old Password"
|
||||
placeholder="Enter old password"
|
||||
value={oldPassword}
|
||||
onChange={(e) => setOldPassword(e.currentTarget.value)}
|
||||
withAsterisk
|
||||
mb="xs"
|
||||
readOnly={step !== "form"}
|
||||
/>
|
||||
<PasswordInput
|
||||
label="New Password"
|
||||
placeholder="Enter new password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.currentTarget.value)}
|
||||
withAsterisk
|
||||
minLength={8}
|
||||
maxLength={15}
|
||||
mb="xs"
|
||||
readOnly={step !== "form"}
|
||||
/>
|
||||
@@ -187,11 +216,8 @@ export default function ChangePassword() {
|
||||
onPaste={(e) => e.preventDefault()}
|
||||
onCut={(e) => e.preventDefault()}
|
||||
/>
|
||||
|
||||
</Group>
|
||||
|
||||
{/* CAPTCHA */}
|
||||
|
||||
<div style={{ marginTop: 5 }}>
|
||||
<label style={{ display: "block", marginBottom: 4, fontSize: "14px" }}>
|
||||
|
||||
@@ -246,20 +272,20 @@ export default function ChangePassword() {
|
||||
readOnly={otpValidated}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Group mt="md" gap="sm">
|
||||
<Button onClick={handleSubmit}>
|
||||
{step === "form" && "Submit"}
|
||||
{step === "otp" && "Validate OTP"}
|
||||
{step === "final" && "Change Password"}
|
||||
</Button>
|
||||
<Button variant="outline" color="gray" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
</Group>
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<Group mt="md" gap="sm">
|
||||
<Button onClick={handleSubmit}>
|
||||
{step === "form" && "Submit"}
|
||||
{step === "otp" && "Validate OTP"}
|
||||
{step === "final" && "Change Password"}
|
||||
</Button>
|
||||
<Button variant="outline" color="gray" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
</Group>
|
||||
<Text size="sm" c="dimmed" style={{ marginTop: "40px" }}>
|
||||
Note: Your new password must be 8–15 characters long and contain at least one number and one special character.
|
||||
</Text>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user