70 lines
2.8 KiB
TypeScript
70 lines
2.8 KiB
TypeScript
// pages/DashboardPage.tsx
|
||
import React, { useState } from 'react';
|
||
import {useUser} from "../../utils/users/UseUser.ts";
|
||
import {changePassword} from "../../API/users.ts";
|
||
|
||
|
||
export function DashboardPage() {
|
||
// Получаем данные о пользователе
|
||
const userContext = useUser();
|
||
const user = userContext?.user;
|
||
|
||
// Состояние для управления модальным окном
|
||
const [isModalOpen, setModalOpen] = useState(false);
|
||
const [currentPassword, setCurrentPassword] = useState('');
|
||
const [newPassword, setNewPassword] = useState('');
|
||
|
||
// Обработчик смены пароля
|
||
const handleChangePassword = async () => {
|
||
try {
|
||
await changePassword({ currentPassword, newPassword });
|
||
alert('Пароль успешно изменен!');
|
||
setModalOpen(false); // Закрыть модальное окно после успешной смены пароля
|
||
} catch (error) {
|
||
alert('Ошибка при смене пароля: ' + error.message);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="dashboard">
|
||
<div className="welcome-message">
|
||
С возвращением, {user?.last_name} {user?.first_name} {user?.middle_name}!
|
||
</div>
|
||
<div className="user-role">
|
||
Вы вошли как: {user?.roleTitle}
|
||
</div>
|
||
|
||
{
|
||
!isModalOpen &&
|
||
<button className="change-password-button" onClick={() => setModalOpen(true)}>
|
||
Поменять пароль
|
||
</button>
|
||
}
|
||
|
||
{isModalOpen && (
|
||
<div className="change-password">
|
||
<div className="modal-content">
|
||
<label>
|
||
Текущий пароль:
|
||
<input
|
||
type="password"
|
||
value={currentPassword}
|
||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
Новый пароль:
|
||
<input
|
||
type="password"
|
||
value={newPassword}
|
||
onChange={(e) => setNewPassword(e.target.value)}
|
||
/>
|
||
</label>
|
||
<button onClick={handleChangePassword}>Сменить пароль</button>
|
||
<button onClick={() => setModalOpen(false)}>Закрыть</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
} |