feat(settings):add all settings pages
This commit is contained in:
@@ -1,235 +1,265 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import {
|
import { TextInput, PasswordInput, Button, Title, Paper, Group, Box } from "@mantine/core";
|
||||||
TextInput,
|
|
||||||
PasswordInput,
|
|
||||||
Button,
|
|
||||||
Title,
|
|
||||||
Paper,
|
|
||||||
Box,
|
|
||||||
Text,
|
|
||||||
Group,
|
|
||||||
Grid,
|
|
||||||
} from "@mantine/core";
|
|
||||||
import { notifications } from "@mantine/notifications";
|
import { notifications } from "@mantine/notifications";
|
||||||
import { IconEye, IconEyeOff, IconLock } from "@tabler/icons-react";
|
import { IconLock } from "@tabler/icons-react";
|
||||||
// import CaptchaImage from "@/app/SetPassword/CaptchaImage";
|
|
||||||
import { generateCaptcha } from "@/app/captcha";
|
import { generateCaptcha } from "@/app/captcha";
|
||||||
|
|
||||||
const ChangePassword: React.FC = () => {
|
export default function ChangePassword() {
|
||||||
const [oldPassword, setOldPassword] = useState("");
|
const [oldPassword, setOldPassword] = useState("");
|
||||||
const [newPassword, setNewPassword] = useState("");
|
const [newPassword, setNewPassword] = useState("");
|
||||||
const [confirmPassword, setConfirmPassword] = useState("");
|
const [confirmPassword, setConfirmPassword] = useState("");
|
||||||
const [captcha, setCaptcha] = useState("");
|
const [captcha, setCaptcha] = useState("");
|
||||||
const [showOld, setShowOld] = useState(false);
|
const [captchaInput, setCaptchaInput] = useState("");
|
||||||
const [showNew, setShowNew] = useState(false);
|
const [otp, setOtp] = useState("");
|
||||||
const [showConfirm, setShowConfirm] = useState(false);
|
const [otpValidated, setOtpValidated] = useState(false);
|
||||||
// const [captchaCode] = useState("X7pK9");
|
|
||||||
const [inputCaptcha, setInputCaptcha] = useState("");
|
const [step, setStep] = useState<"form" | "otp" | "final">("form"); // ✅ steps control
|
||||||
const [captchaInput, setCaptchaInput] = useState('');
|
|
||||||
const [captchaError, setCaptchaError] = useState('');
|
|
||||||
const [passwordHistory] = useState(["Pass@1234", "OldPass@123", "MyPass#2023"]);
|
const [passwordHistory] = useState(["Pass@1234", "OldPass@123", "MyPass#2023"]);
|
||||||
const icon = <IconLock size={18} stroke={1.5} />;
|
const icon = <IconLock size={18} stroke={1.5} />;
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadCaptcha = async () => {
|
regenerateCaptcha();
|
||||||
const newCaptcha = await generateCaptcha();
|
|
||||||
setCaptcha(newCaptcha);
|
|
||||||
};
|
|
||||||
loadCaptcha();
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const regenerateCaptcha = () => {
|
const regenerateCaptcha = async () => {
|
||||||
// setCaptcha(generateCaptcha());
|
const newCaptcha = await generateCaptcha();
|
||||||
const loadCaptcha = async () => {
|
setCaptcha(newCaptcha);
|
||||||
const newCaptcha = await generateCaptcha();
|
setCaptchaInput("");
|
||||||
setCaptcha(newCaptcha);
|
|
||||||
};
|
|
||||||
loadCaptcha();
|
|
||||||
setInputCaptcha("");
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const validatePasswordPolicy = (password: string) => {
|
const validatePasswordPolicy = (password: string) => {
|
||||||
return /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/.test(password);
|
return /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/.test(password);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = () => {
|
const handleSubmit = () => {
|
||||||
// 1. Check all mandatory fields
|
// Step 1 → validate form
|
||||||
if (!oldPassword || !newPassword || !confirmPassword || !captcha) {
|
if (step === "form") {
|
||||||
|
if (!oldPassword || !newPassword || !confirmPassword || !captchaInput) {
|
||||||
|
notifications.show({
|
||||||
|
title: "Missing Field",
|
||||||
|
message: "Please fill all mandatory fields.",
|
||||||
|
color: "red",
|
||||||
|
});
|
||||||
|
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.",
|
||||||
|
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",
|
||||||
|
message: "Confirm password does not match new password.",
|
||||||
|
color: "red",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (captchaInput !== captcha) {
|
||||||
|
notifications.show({
|
||||||
|
title: "Invalid Captcha",
|
||||||
|
message: "Please enter correct Captcha",
|
||||||
|
color: "red",
|
||||||
|
});
|
||||||
|
regenerateCaptcha();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ Passed → move to OTP
|
||||||
|
setStep("otp");
|
||||||
notifications.show({
|
notifications.show({
|
||||||
title: "Missing Field",
|
title: "OTP Sent",
|
||||||
message: "Please fill all mandatory fields.",
|
message: "An OTP has been sent to your registered mobile.",
|
||||||
color: "red",
|
color: "blue",
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. Validate old password (simulate real check)
|
// Step 2 → validate OTP
|
||||||
const actualOldPassword = "OldPass@123"; // Simulated stored password
|
if (step === "otp") {
|
||||||
if (oldPassword !== actualOldPassword) {
|
if (otp !== "123456") {
|
||||||
|
notifications.show({
|
||||||
|
title: "Invalid OTP",
|
||||||
|
message: "Please enter the correct OTP.",
|
||||||
|
color: "red",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setOtpValidated(true);
|
||||||
|
setStep("final");
|
||||||
notifications.show({
|
notifications.show({
|
||||||
title: "Old Password Incorrect",
|
title: "OTP Verified",
|
||||||
message: "Entered old password does not match.",
|
message: "OTP has been successfully verified.",
|
||||||
color: "red",
|
color: "green",
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. New password validation
|
// Step 3 → Final Change Password
|
||||||
if (!validatePasswordPolicy(newPassword)) {
|
if (step === "final") {
|
||||||
notifications.show({
|
notifications.show({
|
||||||
title: "Invalid Password",
|
title: "Password Changed",
|
||||||
message:
|
message: "Your password has been successfully updated.",
|
||||||
"Password must be at least 8 characters and contain alphanumeric and special characters.",
|
color: "green",
|
||||||
color: "red",
|
|
||||||
});
|
});
|
||||||
return;
|
resetForm();
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
if (passwordHistory.includes(newPassword)) {
|
const resetForm = () => {
|
||||||
notifications.show({
|
setOldPassword("");
|
||||||
title: "Password Reused",
|
setNewPassword("");
|
||||||
message: "New password must be different from the last 3 passwords.",
|
setConfirmPassword("");
|
||||||
color: "red",
|
setCaptchaInput("");
|
||||||
});
|
setOtp("");
|
||||||
return;
|
setOtpValidated(false);
|
||||||
}
|
setStep("form");
|
||||||
|
regenerateCaptcha();
|
||||||
// 4. Confirm password check
|
|
||||||
if (newPassword !== confirmPassword) {
|
|
||||||
notifications.show({
|
|
||||||
title: "Password Mismatch",
|
|
||||||
message: "Confirm password does not match new password.",
|
|
||||||
color: "red",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// else if (captchaInput !== captcha) {
|
|
||||||
// setCaptchaError("Incorrect CAPTCHA.");
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// // Success
|
|
||||||
// notifications.show({
|
|
||||||
// title: "Success",
|
|
||||||
// message: "Your password has been reset successfully.",
|
|
||||||
// color: "green",
|
|
||||||
// });
|
|
||||||
|
|
||||||
if (captchaInput !== captcha) {
|
|
||||||
setCaptchaError("Incorrect CAPTCHA.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ✅ Clear error if CAPTCHA is correct
|
|
||||||
setCaptchaError("");
|
|
||||||
|
|
||||||
// Success
|
|
||||||
notifications.show({
|
|
||||||
title: "Success",
|
|
||||||
message: "Your password has been reset successfully.",
|
|
||||||
color: "green",
|
|
||||||
});
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Paper shadow="sm" radius="md" p="md" withBorder h={400}>
|
<Paper shadow="sm" radius="md" p="md" withBorder>
|
||||||
|
<Title order={3} mb="sm">
|
||||||
<Title order={3} mb="sm" >
|
|
||||||
Change Login Password
|
Change Login Password
|
||||||
</Title>
|
</Title>
|
||||||
|
|
||||||
{/* Scrollable form section */}
|
{/* Scrollable form area */}
|
||||||
<div style={{ overflowY: 'auto', maxHeight: '310px', paddingRight: 8 }}>
|
<div style={{ overflowY: "auto", maxHeight: "280px", paddingRight: 8 }}>
|
||||||
<PasswordInput
|
<PasswordInput
|
||||||
label="Old Password"
|
label="Old Password"
|
||||||
placeholder="Enter old password"
|
placeholder="Enter old password"
|
||||||
value={oldPassword}
|
value={oldPassword}
|
||||||
onChange={(e) => setOldPassword(e.currentTarget.value)}
|
onChange={(e) => setOldPassword(e.currentTarget.value)}
|
||||||
visible={showOld}
|
withAsterisk
|
||||||
onVisibilityChange={setShowOld}
|
|
||||||
required
|
|
||||||
mb="xs"
|
mb="xs"
|
||||||
|
readOnly={step !== "form"}
|
||||||
/>
|
/>
|
||||||
|
<Group grow>
|
||||||
|
<PasswordInput
|
||||||
|
label="New Password"
|
||||||
|
placeholder="Enter new password"
|
||||||
|
value={newPassword}
|
||||||
|
onChange={(e) => setNewPassword(e.currentTarget.value)}
|
||||||
|
withAsterisk
|
||||||
|
mb="xs"
|
||||||
|
readOnly={step !== "form"}
|
||||||
|
/>
|
||||||
|
|
||||||
<PasswordInput
|
<PasswordInput
|
||||||
label="New Password"
|
label="Confirm Password"
|
||||||
placeholder="Enter new password"
|
placeholder="Re-enter new password"
|
||||||
value={newPassword}
|
value={confirmPassword}
|
||||||
onChange={(e) => setNewPassword(e.currentTarget.value)}
|
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
|
||||||
visible={showNew}
|
withAsterisk
|
||||||
onVisibilityChange={setShowNew}
|
rightSection={icon}
|
||||||
required
|
mb="sm"
|
||||||
mb="xs"
|
readOnly={step !== "form"}
|
||||||
/>
|
onCopy={(e) => e.preventDefault()}
|
||||||
|
onPaste={(e) => e.preventDefault()}
|
||||||
|
onCut={(e) => e.preventDefault()}
|
||||||
|
/>
|
||||||
|
|
||||||
<PasswordInput
|
</Group>
|
||||||
label="Confirm Password"
|
|
||||||
placeholder="Re-enter new password"
|
|
||||||
value={confirmPassword}
|
|
||||||
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
|
|
||||||
visible={showConfirm}
|
|
||||||
onVisibilityChange={setShowConfirm}
|
|
||||||
required
|
|
||||||
rightSection={icon}
|
|
||||||
mb="sm"
|
|
||||||
|
|
||||||
onCopy={(e) => e.preventDefault()}
|
|
||||||
onPaste={(e) => e.preventDefault()}
|
|
||||||
onCut={(e) => e.preventDefault()}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* CAPTCHA */}
|
{/* CAPTCHA */}
|
||||||
<div style={{ marginTop: 5 }}>
|
|
||||||
<label style={{ display: 'block', marginBottom: 4, fontSize: '14px' }}>Enter CAPTCHA</label>
|
|
||||||
|
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 5 }}>
|
<div style={{ marginTop: 5 }}>
|
||||||
{/* CAPTCHA Image */}
|
<label style={{ display: "block", marginBottom: 4, fontSize: "14px" }}>
|
||||||
<div style={{ display: 'flex', alignItems: 'center', height: 30 }}>
|
|
||||||
{/* <CaptchaImage text={captcha} /> */}
|
Enter CAPTCHA <span style={{ color: "red" }}>*</span>
|
||||||
|
</label>
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 5 }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
letterSpacing: "3px",
|
||||||
|
background: "#f3f4f6",
|
||||||
|
padding: "6px 12px",
|
||||||
|
borderRadius: "6px",
|
||||||
|
border: "1px solid #d1d5db",
|
||||||
|
userSelect: "none",
|
||||||
|
textDecoration: "line-through",
|
||||||
|
fontFamily: "cursive",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{captcha}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Refresh Button */}
|
|
||||||
<Button
|
<Button
|
||||||
size="xs"
|
size="xs"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={regenerateCaptcha}
|
onClick={regenerateCaptcha}
|
||||||
style={{ height: 30, padding: '0 10px', lineHeight: '1' }}
|
style={{ height: 30, padding: "0 10px", lineHeight: "1" }}
|
||||||
|
disabled={step !== "form"}
|
||||||
>
|
>
|
||||||
Refresh
|
Refresh
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{/* TextInput */}
|
|
||||||
<TextInput
|
<TextInput
|
||||||
placeholder="Enter above text"
|
placeholder="Enter above text"
|
||||||
value={captchaInput}
|
value={captchaInput}
|
||||||
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
|
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
|
||||||
required
|
withAsterisk
|
||||||
style={{ height: 30, flexGrow: 1 }}
|
style={{ flexGrow: 1 }}
|
||||||
|
readOnly={step !== "form"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p style={{ color: captchaError ? 'red' : 'transparent', fontSize: '12px', textAlign: 'center', minHeight: 16 }}>
|
|
||||||
{captchaError || '\u00A0'}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
{step !== "form" && (
|
||||||
|
<PasswordInput
|
||||||
|
label="Enter OTP"
|
||||||
|
placeholder="Enter 6-digit OTP"
|
||||||
|
value={otp}
|
||||||
|
onChange={(e) => setOtp(e.currentTarget.value)}
|
||||||
|
withAsterisk
|
||||||
|
mt="sm"
|
||||||
|
maxLength={6}
|
||||||
|
readOnly={otpValidated}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Fixed Save Button */}
|
{/* Buttons */}
|
||||||
<Button onClick={handleSubmit}>
|
<Group mt="md" gap="sm">
|
||||||
Submit
|
<Button onClick={handleSubmit}>
|
||||||
</Button>
|
{step === "form" && "Submit"}
|
||||||
|
{step === "otp" && "Validate OTP"}
|
||||||
|
{step === "final" && "Change Password"}
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" color="gray" onClick={resetForm}>
|
||||||
|
Reset
|
||||||
|
</Button>
|
||||||
|
</Group>
|
||||||
</Paper>
|
</Paper>
|
||||||
|
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
export default ChangePassword;
|
|
||||||
|
|||||||
263
src/app/(main)/settings/change_txn_password/page.tsx
Normal file
263
src/app/(main)/settings/change_txn_password/page.tsx
Normal file
@@ -0,0 +1,263 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { TextInput, PasswordInput, Button, Title, Paper, Group, Box } from "@mantine/core";
|
||||||
|
import { notifications } from "@mantine/notifications";
|
||||||
|
import { IconLock } from "@tabler/icons-react";
|
||||||
|
import { generateCaptcha } from "@/app/captcha";
|
||||||
|
|
||||||
|
export default function ChangePassword() {
|
||||||
|
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 [otpValidated, setOtpValidated] = useState(false);
|
||||||
|
|
||||||
|
const [step, setStep] = useState<"form" | "otp" | "final">("form"); // ✅ steps control
|
||||||
|
const [passwordHistory] = useState(["Pass@1234", "OldPass@123", "MyPass#2023"]);
|
||||||
|
const icon = <IconLock size={18} stroke={1.5} />;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
regenerateCaptcha();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const regenerateCaptcha = async () => {
|
||||||
|
const newCaptcha = await generateCaptcha();
|
||||||
|
setCaptcha(newCaptcha);
|
||||||
|
setCaptchaInput("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const validatePasswordPolicy = (password: string) => {
|
||||||
|
return /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/.test(password);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
// Step 1 → validate form
|
||||||
|
if (step === "form") {
|
||||||
|
if (!oldPassword || !newPassword || !confirmPassword || !captchaInput) {
|
||||||
|
notifications.show({
|
||||||
|
title: "Missing Field",
|
||||||
|
message: "Please fill all mandatory fields.",
|
||||||
|
color: "red",
|
||||||
|
});
|
||||||
|
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.",
|
||||||
|
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",
|
||||||
|
message: "Confirm password does not match new password.",
|
||||||
|
color: "red",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (captchaInput !== captcha) {
|
||||||
|
notifications.show({
|
||||||
|
title: "Invalid Captcha",
|
||||||
|
message: "Please enter correct Captcha",
|
||||||
|
color: "red",
|
||||||
|
});
|
||||||
|
regenerateCaptcha();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ Passed → move to OTP
|
||||||
|
setStep("otp");
|
||||||
|
notifications.show({
|
||||||
|
title: "OTP Sent",
|
||||||
|
message: "An OTP has been sent to your registered mobile.",
|
||||||
|
color: "blue",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step 2 → validate OTP
|
||||||
|
if (step === "otp") {
|
||||||
|
if (otp !== "123456") {
|
||||||
|
notifications.show({
|
||||||
|
title: "Invalid OTP",
|
||||||
|
message: "Please enter the correct OTP.",
|
||||||
|
color: "red",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setOtpValidated(true);
|
||||||
|
setStep("final");
|
||||||
|
notifications.show({
|
||||||
|
title: "OTP Verified",
|
||||||
|
message: "OTP has been successfully verified.",
|
||||||
|
color: "green",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step 3 → Final Change Password
|
||||||
|
if (step === "final") {
|
||||||
|
notifications.show({
|
||||||
|
title: "Password Changed",
|
||||||
|
message: "Your password has been successfully updated.",
|
||||||
|
color: "green",
|
||||||
|
});
|
||||||
|
resetForm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
setOldPassword("");
|
||||||
|
setNewPassword("");
|
||||||
|
setConfirmPassword("");
|
||||||
|
setCaptchaInput("");
|
||||||
|
setOtp("");
|
||||||
|
setOtpValidated(false);
|
||||||
|
setStep("form");
|
||||||
|
regenerateCaptcha();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Paper shadow="sm" radius="md" p="md" withBorder>
|
||||||
|
<Title order={3} mb="sm">
|
||||||
|
Change Transaction 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"
|
||||||
|
/>
|
||||||
|
<Group grow>
|
||||||
|
<PasswordInput
|
||||||
|
label="New Password"
|
||||||
|
placeholder="Enter new password"
|
||||||
|
value={newPassword}
|
||||||
|
onChange={(e) => setNewPassword(e.currentTarget.value)}
|
||||||
|
withAsterisk
|
||||||
|
mb="xs"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<PasswordInput
|
||||||
|
label="Confirm Transaction Password"
|
||||||
|
placeholder="Re-enter new Transaction password"
|
||||||
|
value={confirmPassword}
|
||||||
|
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
|
||||||
|
withAsterisk
|
||||||
|
rightSection={icon}
|
||||||
|
mb="sm"
|
||||||
|
readOnly={step !== "form"}
|
||||||
|
onCopy={(e) => e.preventDefault()}
|
||||||
|
onPaste={(e) => e.preventDefault()}
|
||||||
|
onCut={(e) => e.preventDefault()}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</Group>
|
||||||
|
|
||||||
|
{/* CAPTCHA */}
|
||||||
|
|
||||||
|
<div style={{ marginTop: 5 }}>
|
||||||
|
<label style={{ display: "block", marginBottom: 4, fontSize: "14px" }}>
|
||||||
|
|
||||||
|
Enter CAPTCHA <span style={{ color: "red" }}>*</span>
|
||||||
|
</label>
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 5 }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
letterSpacing: "3px",
|
||||||
|
background: "#f3f4f6",
|
||||||
|
padding: "6px 12px",
|
||||||
|
borderRadius: "6px",
|
||||||
|
border: "1px solid #d1d5db",
|
||||||
|
userSelect: "none",
|
||||||
|
textDecoration: "line-through",
|
||||||
|
fontFamily: "cursive",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{captcha}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="xs"
|
||||||
|
variant="outline"
|
||||||
|
onClick={regenerateCaptcha}
|
||||||
|
style={{ height: 30, padding: "0 10px", lineHeight: "1" }}
|
||||||
|
disabled={step !== "form"}
|
||||||
|
>
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<TextInput
|
||||||
|
placeholder="Enter above text"
|
||||||
|
value={captchaInput}
|
||||||
|
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
|
||||||
|
withAsterisk
|
||||||
|
style={{ flexGrow: 1 }}
|
||||||
|
readOnly={step !== "form"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{step !== "form" && (
|
||||||
|
<PasswordInput
|
||||||
|
label="Enter OTP"
|
||||||
|
placeholder="Enter 6-digit OTP"
|
||||||
|
value={otp}
|
||||||
|
onChange={(e) => setOtp(e.currentTarget.value)}
|
||||||
|
withAsterisk
|
||||||
|
mt="sm"
|
||||||
|
maxLength={6}
|
||||||
|
readOnly={otpValidated}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</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>
|
||||||
|
</Paper>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -13,8 +13,8 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
|||||||
const links = [
|
const links = [
|
||||||
{ label: "View Profile", href: "/settings" },
|
{ label: "View Profile", href: "/settings" },
|
||||||
{ label: "Change Login Password", href: "/settings/change_login_password" },
|
{ label: "Change Login Password", href: "/settings/change_login_password" },
|
||||||
{ label: "Change transaction Password", href: "/settings/change_transaction_password" },
|
{ label: "Change transaction Password", href: "/settings/change_txn_password" },
|
||||||
{ label: "Set transaction Password", href: "/settings/set_transaction_password" },
|
{ label: "Set transaction Password", href: "/settings/set_txn_password" },
|
||||||
];
|
];
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const token = localStorage.getItem("access_token");
|
const token = localStorage.getItem("access_token");
|
||||||
|
|||||||
@@ -1,11 +1,145 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import { Divider, Stack, Text } from '@mantine/core';
|
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from "react";
|
||||||
|
import {
|
||||||
|
Paper,
|
||||||
|
Title,
|
||||||
|
Grid,
|
||||||
|
Text,
|
||||||
|
Anchor,
|
||||||
|
Divider,
|
||||||
|
Loader,
|
||||||
|
Center,
|
||||||
|
} from "@mantine/core";
|
||||||
|
import { notifications } from "@mantine/notifications";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
export default function settings() {
|
// Response structure from backend
|
||||||
return(
|
interface ProfileData {
|
||||||
<Text>Hii</Text>
|
custname: string;
|
||||||
)
|
cifNumber: string;
|
||||||
|
stBranchNo: string;
|
||||||
|
custdob: string;
|
||||||
|
mobileno: string;
|
||||||
|
id: string;
|
||||||
|
custaddress: string;
|
||||||
|
pincode: string;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default function ViewProfile() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [profileData, setProfileData] = useState<ProfileData | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
// Fetch API with same style as RootLayout
|
||||||
|
async function handleFetchProfile() {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem("access_token");
|
||||||
|
const response = await fetch("/api/customer", {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
notifications.show({
|
||||||
|
withBorder: true,
|
||||||
|
color: "red",
|
||||||
|
title: "Error",
|
||||||
|
message: "Unable to fetch profile details",
|
||||||
|
autoClose: 5000,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
// If backend returns array → take first record
|
||||||
|
if (Array.isArray(data) && data.length > 0) {
|
||||||
|
setProfileData(data[0]);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
notifications.show({
|
||||||
|
withBorder: true,
|
||||||
|
color: "red",
|
||||||
|
title: "Please try again later",
|
||||||
|
message: "Something went wrong while fetching profile",
|
||||||
|
autoClose: 5000,
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
handleFetchProfile();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const Row = ({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
link,
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
link?: string;
|
||||||
|
}) => (
|
||||||
|
<Grid align="flex-start" gutter="xs" mb={6}>
|
||||||
|
<Grid.Col span={3}>
|
||||||
|
<Text c="dimmed" size="sm" fw={500}>
|
||||||
|
{label}
|
||||||
|
</Text>
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={9}>
|
||||||
|
{link ? (
|
||||||
|
<Anchor size="sm" href={link} target="_blank" rel="noopener noreferrer">
|
||||||
|
{value}
|
||||||
|
</Anchor>
|
||||||
|
) : (
|
||||||
|
<Text size="sm">{value}</Text>
|
||||||
|
)}
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Paper shadow="xs" radius="md" p="md" withBorder h={400}>
|
||||||
|
<Title order={4} mb="sm">
|
||||||
|
View Profile
|
||||||
|
</Title>
|
||||||
|
<Divider mb="sm" />
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<Center>
|
||||||
|
<Loader size="sm" />
|
||||||
|
</Center>
|
||||||
|
) : profileData ? (
|
||||||
|
<>
|
||||||
|
<Row label="Customer ID (CIF)" value={profileData.cifNumber} />
|
||||||
|
<Row label="Customer Name" value={profileData.custname} />
|
||||||
|
<Row label="ID" value={profileData.id} />
|
||||||
|
<Row label="Branch No" value={profileData.stBranchNo} />
|
||||||
|
<Row label="Date of Birth" value={profileData.custdob} />
|
||||||
|
<Row label="Mobile Number" value={profileData.mobileno} />
|
||||||
|
|
||||||
|
<Row
|
||||||
|
label="Address"
|
||||||
|
value={profileData.custaddress}
|
||||||
|
// link={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
|
||||||
|
// profileData.custaddress
|
||||||
|
// )}`}
|
||||||
|
/>
|
||||||
|
<Row label="Pincode" value={profileData.pincode} />
|
||||||
|
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Text c="red" size="sm">
|
||||||
|
No profile data found.
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</Paper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
255
src/app/(main)/settings/set_txn_password/page.tsx
Normal file
255
src/app/(main)/settings/set_txn_password/page.tsx
Normal file
@@ -0,0 +1,255 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { TextInput, PasswordInput, Button, Title, Paper, Group, Box } from "@mantine/core";
|
||||||
|
import { notifications } from "@mantine/notifications";
|
||||||
|
import { IconLock } from "@tabler/icons-react";
|
||||||
|
import { generateCaptcha } from "@/app/captcha";
|
||||||
|
|
||||||
|
export default function ChangePassword() {
|
||||||
|
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 [otpValidated, setOtpValidated] = useState(false);
|
||||||
|
|
||||||
|
const [step, setStep] = useState<"form" | "otp" | "final">("form"); // ✅ steps control
|
||||||
|
const [passwordHistory] = useState(["Pass@1234", "OldPass@123", "MyPass#2023"]);
|
||||||
|
const icon = <IconLock size={18} stroke={1.5} />;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
regenerateCaptcha();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const regenerateCaptcha = async () => {
|
||||||
|
const newCaptcha = await generateCaptcha();
|
||||||
|
setCaptcha(newCaptcha);
|
||||||
|
setCaptchaInput("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const validatePasswordPolicy = (password: string) => {
|
||||||
|
return /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/.test(password);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
// Step 1 → validate form
|
||||||
|
if (step === "form") {
|
||||||
|
if (!newPassword || !confirmPassword || !captchaInput) {
|
||||||
|
notifications.show({
|
||||||
|
title: "Missing Field",
|
||||||
|
message: "Please fill all mandatory fields.",
|
||||||
|
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.",
|
||||||
|
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",
|
||||||
|
message: "Confirm password does not match new password.",
|
||||||
|
color: "red",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (captchaInput !== captcha) {
|
||||||
|
notifications.show({
|
||||||
|
title: "Invalid Captcha",
|
||||||
|
message: "Please enter correct Captcha",
|
||||||
|
color: "red",
|
||||||
|
});
|
||||||
|
regenerateCaptcha();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ Passed → move to OTP
|
||||||
|
setStep("otp");
|
||||||
|
notifications.show({
|
||||||
|
title: "OTP Sent",
|
||||||
|
message: "An OTP has been sent to your registered mobile.",
|
||||||
|
color: "blue",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step 2 → validate OTP
|
||||||
|
if (step === "otp") {
|
||||||
|
if (otp !== "123456") {
|
||||||
|
notifications.show({
|
||||||
|
title: "Invalid OTP",
|
||||||
|
message: "Please enter the correct OTP.",
|
||||||
|
color: "red",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setOtpValidated(true);
|
||||||
|
setStep("final");
|
||||||
|
notifications.show({
|
||||||
|
title: "OTP Verified",
|
||||||
|
message: "OTP has been successfully verified.",
|
||||||
|
color: "green",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step 3 → Final Change Password
|
||||||
|
if (step === "final") {
|
||||||
|
notifications.show({
|
||||||
|
title: "Password Changed",
|
||||||
|
message: "Your password has been successfully updated.",
|
||||||
|
color: "green",
|
||||||
|
});
|
||||||
|
resetForm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
setOldPassword("");
|
||||||
|
setNewPassword("");
|
||||||
|
setConfirmPassword("");
|
||||||
|
setCaptchaInput("");
|
||||||
|
setOtp("");
|
||||||
|
setOtpValidated(false);
|
||||||
|
setStep("form");
|
||||||
|
regenerateCaptcha();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Paper shadow="sm" radius="md" p="md" withBorder>
|
||||||
|
<Title order={3} mb="sm">
|
||||||
|
Set Transaction 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"
|
||||||
|
/> */}
|
||||||
|
<Group grow>
|
||||||
|
<PasswordInput
|
||||||
|
label="New Password"
|
||||||
|
placeholder="Enter new password"
|
||||||
|
value={newPassword}
|
||||||
|
onChange={(e) => setNewPassword(e.currentTarget.value)}
|
||||||
|
withAsterisk
|
||||||
|
mb="xs"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<PasswordInput
|
||||||
|
label="Confirm Transaction Password"
|
||||||
|
placeholder="Re-enter new Transaction password"
|
||||||
|
value={confirmPassword}
|
||||||
|
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
|
||||||
|
withAsterisk
|
||||||
|
rightSection={icon}
|
||||||
|
mb="sm"
|
||||||
|
readOnly={step !== "form"}
|
||||||
|
onCopy={(e) => e.preventDefault()}
|
||||||
|
onPaste={(e) => e.preventDefault()}
|
||||||
|
onCut={(e) => e.preventDefault()}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</Group>
|
||||||
|
|
||||||
|
{/* CAPTCHA */}
|
||||||
|
|
||||||
|
<div style={{ marginTop: 5 }}>
|
||||||
|
<label style={{ display: "block", marginBottom: 4, fontSize: "14px" }}>
|
||||||
|
|
||||||
|
Enter CAPTCHA <span style={{ color: "red" }}>*</span>
|
||||||
|
</label>
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 5 }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
letterSpacing: "3px",
|
||||||
|
background: "#f3f4f6",
|
||||||
|
padding: "6px 12px",
|
||||||
|
borderRadius: "6px",
|
||||||
|
border: "1px solid #d1d5db",
|
||||||
|
userSelect: "none",
|
||||||
|
textDecoration: "line-through",
|
||||||
|
fontFamily: "cursive",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{captcha}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="xs"
|
||||||
|
variant="outline"
|
||||||
|
onClick={regenerateCaptcha}
|
||||||
|
style={{ height: 30, padding: "0 10px", lineHeight: "1" }}
|
||||||
|
disabled={step !== "form"}
|
||||||
|
>
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<TextInput
|
||||||
|
placeholder="Enter above text"
|
||||||
|
value={captchaInput}
|
||||||
|
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
|
||||||
|
withAsterisk
|
||||||
|
style={{ flexGrow: 1 }}
|
||||||
|
readOnly={step !== "form"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{step !== "form" && (
|
||||||
|
<PasswordInput
|
||||||
|
label="Enter OTP"
|
||||||
|
placeholder="Enter 6-digit OTP"
|
||||||
|
value={otp}
|
||||||
|
onChange={(e) => setOtp(e.currentTarget.value)}
|
||||||
|
withAsterisk
|
||||||
|
mt="sm"
|
||||||
|
maxLength={6}
|
||||||
|
readOnly={otpValidated}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</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>
|
||||||
|
</Paper>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user