152 lines
5.2 KiB
TypeScript
152 lines
5.2 KiB
TypeScript
'use client';
|
|
|
|
import IconLockDots from '@/components/icon/icon-lock-dots';
|
|
import { useRouter } from 'next/navigation';
|
|
import React, { useState } from 'react';
|
|
import axios from 'axios';
|
|
|
|
interface ChangePasswordResponse {
|
|
message?: string;
|
|
error?: string;
|
|
}
|
|
|
|
const ComponentsAuthChangePasswordForm = () => {
|
|
const router = useRouter();
|
|
|
|
const [currentPassword, setCurrentPassword] = useState('');
|
|
const [newPassword, setNewPassword] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [success, setSuccess] = useState('');
|
|
|
|
const submitForm = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError('');
|
|
setSuccess('');
|
|
setLoading(true);
|
|
|
|
try {
|
|
const token = localStorage.getItem('token');
|
|
if (!token) {
|
|
setError('You are not logged in.');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('currentPassword', currentPassword);
|
|
formData.append('newPassword', newPassword);
|
|
|
|
const res = await axios.post<ChangePasswordResponse>(
|
|
`https://api.socialbuddy.co/api/auth/change-password`,
|
|
formData,
|
|
{
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
}
|
|
);
|
|
|
|
setSuccess(res.data.message || 'Password updated successfully!');
|
|
localStorage.removeItem('token');
|
|
router.push('/login');
|
|
} catch (err: any) {
|
|
const msg = err.response?.data?.error || err.message;
|
|
setError(msg);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={submitForm} className="dark:text-white">
|
|
|
|
{/* Alerts */}
|
|
{error && (
|
|
<div className="mb-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
|
{error}
|
|
</div>
|
|
)}
|
|
{success && (
|
|
<div className="mb-4 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700">
|
|
{success}
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-4">
|
|
|
|
{/* Current Password */}
|
|
<div className="relative">
|
|
<label
|
|
htmlFor="currentPassword"
|
|
className="block mb-1 text-sm text-gray-300"
|
|
>
|
|
Current Password
|
|
</label>
|
|
|
|
<input
|
|
id="currentPassword"
|
|
type="password"
|
|
placeholder="Current Password"
|
|
value={currentPassword}
|
|
onChange={(e) => setCurrentPassword(e.target.value)}
|
|
required
|
|
className="w-full ps-10 py-3
|
|
bg-[rgba(7,13,30,0.7)]
|
|
border border-white/15 rounded-lg
|
|
text-white placeholder:text-gray-400
|
|
focus:outline-none focus:border-white/30"
|
|
/>
|
|
|
|
<span className="absolute start-4 top-[42px] -translate-y-1/2 text-white">
|
|
<IconLockDots fill />
|
|
</span>
|
|
</div>
|
|
|
|
{/* New Password */}
|
|
<div className="relative">
|
|
<label
|
|
htmlFor="newPassword"
|
|
className="block mb-1 text-sm text-gray-300"
|
|
>
|
|
New Password
|
|
</label>
|
|
|
|
<input
|
|
id="newPassword"
|
|
type="password"
|
|
placeholder="New Password"
|
|
value={newPassword}
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
required
|
|
className="w-full ps-10 py-3
|
|
bg-[rgba(7,13,30,0.7)]
|
|
border border-white/15 rounded-lg
|
|
text-white placeholder:text-gray-400
|
|
focus:outline-none focus:border-white/30"
|
|
/>
|
|
|
|
<span className="absolute start-4 top-[42px] -translate-y-1/2 text-white">
|
|
<IconLockDots fill />
|
|
</span>
|
|
</div>
|
|
|
|
{/* Submit */}
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full py-3 rounded-xl text-lg font-semibold text-white
|
|
bg-gradient-to-r from-blue-600 to-pink-500
|
|
shadow-lg transition-all hover:opacity-90 hover:scale-[1.02]
|
|
disabled:opacity-60"
|
|
>
|
|
{loading ? 'UPDATING…' : 'CHANGE PASSWORD'}
|
|
</button>
|
|
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default ComponentsAuthChangePasswordForm;
|