128 lines
4.5 KiB
React
128 lines
4.5 KiB
React
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import axios from "axios";
|
|
|
|
export default function ProfilePage() {
|
|
const navigate = useNavigate();
|
|
// Инициализируем состояние данными из localStorage
|
|
const [userData, setUserData] = useState(() => {
|
|
const user = JSON.parse(localStorage.getItem("user") || "{}");
|
|
return user;
|
|
});
|
|
|
|
const handleChange = (e) => {
|
|
setUserData({ ...userData, [e.target.name]: e.target.value });
|
|
};
|
|
|
|
const handleUpdate = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const token = localStorage.getItem("token");
|
|
|
|
// Отправляем PATCH или PUT запрос на бэкенд для обновления профиля
|
|
await axios.patch("/api/user/update", userData, {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
const updatedUser = {
|
|
...JSON.parse(localStorage.getItem("user") || "{}"),
|
|
...userData,
|
|
};
|
|
|
|
localStorage.setItem("user", JSON.stringify(updatedUser));
|
|
alert("Данные успешно обновлены!");
|
|
} catch (err) {
|
|
alert("Ошибка обновления: " + err.response?.data?.error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-950 flex items-center justify-center p-6">
|
|
<div className="w-full max-w-md bg-slate-900 border border-slate-800 rounded-2xl p-8">
|
|
<h2 className="text-xl font-black text-white mb-6 uppercase tracking-tighter">
|
|
Мой <span className="text-blue-500">профиль</span>
|
|
</h2>
|
|
|
|
<form onSubmit={handleUpdate} className="space-y-4">
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] text-slate-500 uppercase font-bold ml-1">
|
|
Имя
|
|
</label>
|
|
<input
|
|
name="first_name"
|
|
value={userData.first_name}
|
|
onChange={handleChange}
|
|
className="w-full bg-slate-800 text-white p-3 rounded-xl text-sm outline-none focus:ring-2 focus:ring-blue-500/50"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] text-slate-500 uppercase font-bold ml-1">
|
|
Фамилия
|
|
</label>
|
|
<input
|
|
name="last_name"
|
|
value={userData.last_name}
|
|
onChange={handleChange}
|
|
className="w-full bg-slate-800 text-white p-3 rounded-xl text-sm outline-none focus:ring-2 focus:ring-blue-500/50"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] text-slate-500 uppercase font-bold ml-1">
|
|
Телефон
|
|
</label>
|
|
<input
|
|
name="phone"
|
|
value={userData.phone}
|
|
onChange={handleChange}
|
|
className="w-full bg-slate-800 text-white p-3 rounded-xl text-sm outline-none focus:ring-2 focus:ring-blue-500/50"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] text-slate-500 uppercase font-bold ml-1">
|
|
Отдел
|
|
</label>
|
|
<input
|
|
name="department"
|
|
value={userData.department}
|
|
onChange={handleChange}
|
|
className="w-full bg-slate-800 text-white p-3 rounded-xl text-sm outline-none focus:ring-2 focus:ring-blue-500/50"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] text-slate-500 uppercase font-bold ml-1">
|
|
Должность
|
|
</label>
|
|
<input
|
|
name="role"
|
|
value={userData.role}
|
|
onChange={handleChange}
|
|
className="w-full bg-slate-800 text-white p-3 rounded-xl text-sm outline-none focus:ring-2 focus:ring-blue-500/50"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-3 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate("/")}
|
|
className="flex-1 bg-slate-800 text-slate-400 py-3 rounded-xl text-xs font-bold"
|
|
>
|
|
ОТМЕНА
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="flex-1 bg-blue-600 text-white py-3 rounded-xl text-xs font-bold hover:bg-blue-500 transition-all"
|
|
>
|
|
СОХРАНИТЬ
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|