114 lines
3.0 KiB
JavaScript
114 lines
3.0 KiB
JavaScript
'use client'
|
|
import React, { useState } from "react";
|
|
import axios from "axios";
|
|
import authAxios from "@/utils/axios";
|
|
|
|
const ChangePassword = () => {
|
|
const [oldPassword, setOldPassword] = useState("");
|
|
const [newPassword, setNewPassword] = useState("");
|
|
const [confirmNewPassword, setConfirmNewPassword] = useState("");
|
|
const [error, setError] = useState("");
|
|
const [success, setSuccess] = useState("");
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
|
|
if (!oldPassword || !newPassword || !confirmNewPassword) {
|
|
setError("All fields are required.");
|
|
return;
|
|
}
|
|
|
|
|
|
if (newPassword !== confirmNewPassword) {
|
|
setError("New passwords do not match.");
|
|
return;
|
|
}
|
|
|
|
|
|
setError("");
|
|
|
|
try {
|
|
|
|
const response = await authAxios.post(
|
|
"/account/change-password/",
|
|
{
|
|
old_password: oldPassword,
|
|
new_password: newPassword,
|
|
confirm_new_password: confirmNewPassword,
|
|
}
|
|
);
|
|
|
|
if (response.data.status) {
|
|
setSuccess("Password updated successfully.");
|
|
} else {
|
|
setError(response.data.message || "Something went wrong.");
|
|
}
|
|
} catch (err) {
|
|
setError("Failed to change password. Please try again.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<h1 className="text-3xl font-semibold border-b pb-4 text-zinc-700">
|
|
Change Password
|
|
</h1>
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="sm:w-3/4 p-4">
|
|
<label className="block font-medium my-3 text-zinc-700 sm:text-xl text-lg">
|
|
Old Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
className="mt-1 block w-full sm:w-3/5 rounded-md p-3 border"
|
|
value={oldPassword}
|
|
onChange={(e) => setOldPassword(e.target.value)}
|
|
/>
|
|
|
|
<label className="block font-medium my-3 text-zinc-700 sm:text-xl text-lg">
|
|
New Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
className="mt-1 block w-full sm:w-3/5 rounded-md p-3 border"
|
|
value={newPassword}
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
/>
|
|
|
|
<label className="block my-3 font-medium text-zinc-700 sm:text-xl text-lg">
|
|
Confirm New Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
className="mt-1 block w-full sm:w-3/5 rounded-md p-3 border"
|
|
value={confirmNewPassword}
|
|
onChange={(e) => setConfirmNewPassword(e.target.value)}
|
|
/>
|
|
|
|
{error && (
|
|
<div className="text-red-600 mt-2">
|
|
<p>{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{success && (
|
|
<div className="text-green-600 mt-2">
|
|
<p>{success}</p>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
className="bg-[#AC8C6B] bg-opacity-70 text-white px-4 py-3 rounded-md mt-3"
|
|
>
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChangePassword;
|