feat: implement password reset functionality with token verification and change password feature

2025-10-10 09:15:29 +02:00
parent 7ec4bdf620
commit f1e7c2d7aa
9 changed files with 441 additions and 2 deletions
--- a/src/components/settings/PasswordReset.js
+++ b/src/components/settings/PasswordReset.js
@@ -0,0 +1,129 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslation } from "@/lib/i18n";
+
+export default function PasswordReset() {
+	const { t } = useTranslation();
+	const [currentPassword, setCurrentPassword] = useState("");
+	const [newPassword, setNewPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+	const [message, setMessage] = useState("");
+	const [error, setError] = useState("");
+
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		setError("");
+		setMessage("");
+
+		if (newPassword !== confirmPassword) {
+			setError("New passwords do not match");
+			return;
+		}
+
+		if (newPassword.length < 6) {
+			setError("New password must be at least 6 characters long");
+			return;
+		}
+
+		setIsLoading(true);
+
+		try {
+			const response = await fetch("/api/auth/change-password", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					currentPassword,
+					newPassword,
+				}),
+			});
+
+			const data = await response.json();
+
+			if (response.ok) {
+				setMessage("Password changed successfully");
+				setCurrentPassword("");
+				setNewPassword("");
+				setConfirmPassword("");
+			} else {
+				setError(data.error || "Failed to change password");
+			}
+		} catch (err) {
+			setError("An error occurred while changing password");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<div className="space-y-4">
+			<p className="text-sm text-gray-500 dark:text-gray-400">
+				{t('settings.passwordDescription') || 'Change your account password'}
+			</p>
+
+			<form onSubmit={handleSubmit} className="space-y-4">
+				<div>
+					<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+						{t('settings.currentPassword') || 'Current Password'}
+					</label>
+					<input
+						type="password"
+						value={currentPassword}
+						onChange={(e) => setCurrentPassword(e.target.value)}
+						className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+						required
+					/>
+				</div>
+
+				<div>
+					<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+						{t('settings.newPassword') || 'New Password'}
+					</label>
+					<input
+						type="password"
+						value={newPassword}
+						onChange={(e) => setNewPassword(e.target.value)}
+						className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+						required
+					/>
+				</div>
+
+				<div>
+					<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+						{t('settings.confirmPassword') || 'Confirm New Password'}
+					</label>
+					<input
+						type="password"
+						value={confirmPassword}
+						onChange={(e) => setConfirmPassword(e.target.value)}
+						className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+						required
+					/>
+				</div>
+
+				{error && (
+					<div className="text-red-600 text-sm">
+						{error}
+					</div>
+				)}
+
+				{message && (
+					<div className="text-green-600 text-sm">
+						{message}
+					</div>
+				)}
+
+				<button
+					type="submit"
+					disabled={isLoading}
+					className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+				>
+					{isLoading ? (t('common.loading') || 'Loading...') : (t('settings.changePassword') || 'Change Password')}
+				</button>
+			</form>
+		</div>
+	);
+}