fix(backend,frontend) remake update profile
This commit is contained in:
Binary file not shown.
@@ -1,82 +0,0 @@
|
||||
package handlers
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
"os"
|
||||
"time"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
"github.com/golang-jwt/jwt/v5"
|
||||
"golang.org/x/crypto/bcrypt"
|
||||
|
||||
"viplight-mrp/database"
|
||||
"viplight-mrp/models"
|
||||
)
|
||||
|
||||
func Login(c *gin.Context) {
|
||||
jwtKey := []byte(os.Getenv("JWT_SECRET"))
|
||||
var input struct {
|
||||
Username string `json:"username"`
|
||||
Password string `json:"password"`
|
||||
}
|
||||
|
||||
if err := c.ShouldBindJSON(&input); err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid input"})
|
||||
return
|
||||
}
|
||||
|
||||
var user models.User
|
||||
|
||||
err := database.DB.Where("username = ?", input.Username).First(&user).Error
|
||||
|
||||
passErr := bcrypt.CompareHashAndPassword([]byte(user.Password), []byte(input.Password))
|
||||
|
||||
if err != nil || passErr != nil {
|
||||
c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid login or password"})
|
||||
return
|
||||
}
|
||||
|
||||
token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
|
||||
"user_id": user.ID,
|
||||
"role": user.Role,
|
||||
"exp": time.Now().Add(time.Hour * 24).Unix(),
|
||||
})
|
||||
|
||||
tokenString, _ := token.SignedString(jwtKey)
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{"token": tokenString})
|
||||
}
|
||||
|
||||
func Register(c *gin.Context) {
|
||||
var input struct {
|
||||
Username string `json:"username" binding:"required"`
|
||||
Password string `json:"password" binding:"required"`
|
||||
}
|
||||
|
||||
// 1. Проверяем входящие данные
|
||||
if err := c.ShouldBindJSON(&input); err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid input"})
|
||||
return
|
||||
}
|
||||
|
||||
// 2. Хешируем пароль (чтобы не хранить его в открытом виде)
|
||||
hashedPassword, err := bcrypt.GenerateFromPassword([]byte(input.Password), bcrypt.DefaultCost)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to hash password"})
|
||||
return
|
||||
}
|
||||
|
||||
// 3. Создаем объект пользователя
|
||||
user := models.User{
|
||||
Username: input.Username,
|
||||
Password: string(hashedPassword),
|
||||
Role: "user", // по умолчанию
|
||||
}
|
||||
|
||||
// 4. Сохраняем в базу через GORM
|
||||
if err := database.DB.Create(&user).Error; err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": "Could not create user maybe username exists?"})
|
||||
return
|
||||
}
|
||||
c.JSON(http.StatusOK, gin.H{"message": "Registration successful"})
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
package handlers
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
"os"
|
||||
"time"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
"github.com/golang-jwt/jwt/v5"
|
||||
"golang.org/x/crypto/bcrypt"
|
||||
|
||||
"viplight-mrp/database"
|
||||
"viplight-mrp/models"
|
||||
)
|
||||
|
||||
func Login(c *gin.Context) {
|
||||
jwtKey := []byte(os.Getenv("JWT_SECRET"))
|
||||
var input struct {
|
||||
Username string `json:"username"`
|
||||
Password string `json:"password"`
|
||||
}
|
||||
|
||||
if err := c.ShouldBindJSON(&input); err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid input"})
|
||||
return
|
||||
}
|
||||
|
||||
var user models.User
|
||||
|
||||
err := database.DB.Where("username = ?", input.Username).First(&user).Error
|
||||
|
||||
passErr := bcrypt.CompareHashAndPassword([]byte(user.Password), []byte(input.Password))
|
||||
|
||||
if err != nil || passErr != nil {
|
||||
c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid login or password"})
|
||||
return
|
||||
}
|
||||
|
||||
token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
|
||||
"user_id": user.ID,
|
||||
"role": user.Role,
|
||||
"exp": time.Now().Add(time.Hour * 24).Unix(),
|
||||
})
|
||||
|
||||
tokenString, _ := token.SignedString(jwtKey)
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{"token": tokenString, "user": gin.H{
|
||||
"id": user.ID,
|
||||
"first_name": user.FirstName,
|
||||
"last_name": user.LastName,
|
||||
"phone": user.Phone,
|
||||
"department": user.Department,
|
||||
"role": user.Role,
|
||||
}})
|
||||
}
|
||||
|
||||
func Register(c *gin.Context) {
|
||||
var input struct {
|
||||
Username string `json:"username" binding:"required"`
|
||||
Password string `json:"password" binding:"required,min=8"`
|
||||
FirstName string `json:"first_name" binding:"required"`
|
||||
LastName string `json:"last_name" binding:"required"`
|
||||
Phone string `json:"phone"`
|
||||
Department string `json:"department" binding:"required"`
|
||||
Role string `json:"role" binding:"required"`
|
||||
}
|
||||
|
||||
// 1. Проверяем входящие данные
|
||||
if err := c.ShouldBindJSON(&input); err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "Ошибка валидации ", "details": err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
// 2. Хешируем пароль (чтобы не хранить его в открытом виде)
|
||||
hashedPassword, err := bcrypt.GenerateFromPassword([]byte(input.Password), bcrypt.DefaultCost)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": "Ошибка при шифровании пароля"})
|
||||
return
|
||||
}
|
||||
|
||||
// 3. Создаем объект пользователя
|
||||
user := models.User{
|
||||
Username: input.Username,
|
||||
Password: string(hashedPassword),
|
||||
FirstName: input.FirstName,
|
||||
LastName: input.LastName,
|
||||
Phone: input.Phone,
|
||||
Department: input.Department,
|
||||
Role: input.Role, // по умолчанию
|
||||
}
|
||||
|
||||
// 4. Сохраняем в базу через GORM
|
||||
if err := database.DB.Create(&user).Error; err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": "Ошибка при регистрации пользователя", "details": err.Error()})
|
||||
return
|
||||
}
|
||||
c.JSON(http.StatusOK, gin.H{"message": "Пользователь успешно зарегистрирован"})
|
||||
}
|
||||
|
||||
func UpdateProfile(c *gin.Context) {
|
||||
var input models.UpdateUserInput
|
||||
|
||||
if err := c.ShouldBindJSON(&input); err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
userID := c.MustGet("user_id")
|
||||
|
||||
if err := database.DB.Model(&models.User{}).Where("id = ?", userID).Updates(models.User{
|
||||
FirstName: input.FirstName,
|
||||
LastName: input.LastName,
|
||||
Phone: input.Phone,
|
||||
Department: input.Department,
|
||||
Role: input.Role,
|
||||
}).Error; err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": "Не удалось обновить данные", "details": err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{"message": "Данные успешно обновлены"})
|
||||
}
|
||||
+6
-2
@@ -35,9 +35,7 @@ func main() {
|
||||
|
||||
api := r.Group("/api")
|
||||
{
|
||||
api.POST("/register", handlers.Register)
|
||||
api.POST("/login", handlers.Login)
|
||||
|
||||
protected := api.Group("/")
|
||||
protected.Use(middleware.AuthRequired())
|
||||
{
|
||||
@@ -47,8 +45,14 @@ func main() {
|
||||
protected.POST("/parts", handlers.CreatePart)
|
||||
protected.POST("/parts/bulk", handlers.ImportParts)
|
||||
protected.PATCH("/parts/:id/status", handlers.UpdateStatus)
|
||||
protected.PATCH("/user/update", handlers.UpdateProfile)
|
||||
protected.DELETE("/parts/:id", handlers.DeletePart)
|
||||
}
|
||||
|
||||
admin := protected.Group("/")
|
||||
admin.Use(middleware.AdminOnly())
|
||||
{
|
||||
admin.POST("/register", handlers.Register)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -35,14 +35,29 @@ func AuthRequired() gin.HandlerFunc {
|
||||
c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid or expired token"})
|
||||
c.Abort()
|
||||
return
|
||||
|
||||
}
|
||||
|
||||
if claims, ok := token.Claims.(jwt.MapClaims); ok {
|
||||
c.Set("user_id", claims["user_id"])
|
||||
if claims, ok := token.Claims.(jwt.MapClaims); ok && token.Valid {
|
||||
if id, ok := claims["user_id"].(float64); ok {
|
||||
c.Set("user_id", uint(id))
|
||||
}
|
||||
c.Set("role", claims["role"])
|
||||
}
|
||||
|
||||
c.Next()
|
||||
}
|
||||
}
|
||||
|
||||
func AdminOnly() gin.HandlerFunc {
|
||||
return func(c *gin.Context) {
|
||||
role, exists := c.Get("role")
|
||||
|
||||
if !exists || role != "Админ" {
|
||||
c.JSON(http.StatusForbidden, gin.H{"error": "Доступ ограничен"})
|
||||
c.Abort()
|
||||
return
|
||||
}
|
||||
|
||||
c.Next()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
package models
|
||||
|
||||
type UpdateUserInput struct {
|
||||
FirstName string `json:"first_name"`
|
||||
LastName string `json:"last_name"`
|
||||
Phone string `json:"phone"`
|
||||
Department string `json:"department"`
|
||||
Role string `json:"role"`
|
||||
}
|
||||
@@ -4,7 +4,11 @@ import "gorm.io/gorm"
|
||||
|
||||
type User struct {
|
||||
gorm.Model `json:"-"`
|
||||
Username string `gorm:"unique;not null"`
|
||||
Password string `gorm:"not null" json:"-"`
|
||||
Username string `gorm:"unique;not null" binding:"required"`
|
||||
Password string `gorm:"not null" json:"-" binding:"required,min=8"`
|
||||
Role string `gorm:"default:'Рабочий'" json:"role"`
|
||||
FirstName string `json:"first_name" binding:"required"`
|
||||
LastName string `gorm:"index" json:"last_name" binding:"required"`
|
||||
Phone string `gorm:"index" json:"phone"`
|
||||
Department string `json:"department" binding:"required"`
|
||||
}
|
||||
|
||||
@@ -2,7 +2,9 @@ import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
|
||||
import Dashboard from "./pages/Dashboard";
|
||||
import PartDetail from "./pages/PartDetail";
|
||||
import AddPartPage from "./pages/AddPartPage";
|
||||
import ProfilePage from "./pages/ProfilePage";
|
||||
import AuthForm from "./components/AuthForm";
|
||||
import RegisterForm from "./components/RegisterForm";
|
||||
|
||||
const PrivateRoute = ({ children }) => {
|
||||
const token = localStorage.getItem("token");
|
||||
@@ -19,6 +21,14 @@ export default function App() {
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/login" element={<AuthForm />} />
|
||||
<Route
|
||||
path="/profile"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<ProfilePage />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
|
||||
@@ -90,3 +90,10 @@ export const parseAndImportCsv = (file) => {
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const registerUser = (userData) => {
|
||||
axios.post(`${API_URL}/register`, userData);
|
||||
};
|
||||
export const getMe = () => {
|
||||
axios.post(`${API_URL}/me`);
|
||||
};
|
||||
|
||||
@@ -14,10 +14,12 @@ const AuthForm = () => {
|
||||
setMessage({ text: "", isError: false });
|
||||
|
||||
try {
|
||||
const { data } = await axios.post(`${API_BASE}/login`, formData);
|
||||
const response = await axios.post(`${API_BASE}/login`, formData);
|
||||
const data = response.data;
|
||||
|
||||
if (data.token) {
|
||||
localStorage.setItem("token", data.token);
|
||||
localStorage.setItem("user", JSON.stringify(data.user));
|
||||
navigate("/");
|
||||
}
|
||||
} catch (err) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useRef } from "react";
|
||||
import { useRef } from "react";
|
||||
import { parseAndImportCsv } from "../api";
|
||||
|
||||
export default function CsvImporter({ onImported }) {
|
||||
|
||||
@@ -4,6 +4,18 @@ import { useNavigate } from "react-router-dom";
|
||||
export default function Header({ onRefresh, onOpenScanner }) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.clear();
|
||||
navigate("/login");
|
||||
};
|
||||
|
||||
const handleUser = () => {
|
||||
const savedUser = localStorage.getItem("user");
|
||||
return savedUser ? JSON.parse(savedUser) : {};
|
||||
};
|
||||
|
||||
const user = handleUser();
|
||||
|
||||
return (
|
||||
<header className="w-full border-b border-slate-800 bg-slate-950/60 backdrop-blur-xl sticky top-0 z-50">
|
||||
<div className="max-w-[1440px] mx-auto px-4 md:px-8 h-16 md:h-20 flex justify-between items-center">
|
||||
@@ -29,6 +41,44 @@ export default function Header({ onRefresh, onOpenScanner }) {
|
||||
>
|
||||
<span>📷</span> СКАНЕР
|
||||
</button>
|
||||
|
||||
{/* Блок пользователя */}
|
||||
<div
|
||||
onClick={() => navigate("/profile")}
|
||||
className="flex items-center gap-4 border-l border-slate-800 pl-6"
|
||||
>
|
||||
<div className="text-right hidden sm:block">
|
||||
<p className="text-sm font-bold text-white leading-tight">
|
||||
{user.first_name} {user.last_name}
|
||||
</p>
|
||||
<p className="text-[10px] text-slate-400 font-medium uppercase tracking-widest mt-0.5">
|
||||
{user.department} <span className="text-slate-600 mx-1">|</span>{" "}
|
||||
{user.role}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative group">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-black text-sm border-2 border-slate-800 cursor-pointer hover:border-blue-400 transition-all">
|
||||
{user.first_name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
|
||||
{/* Меню при наведении */}
|
||||
<div className="absolute right-0 mt-2 w-48 py-2 bg-slate-900 border border-slate-800 rounded-xl shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all">
|
||||
<div className="px-4 py-2 border-b border-slate-800 sm:hidden">
|
||||
<p className="text-xs text-white font-bold">
|
||||
{user.first_name}
|
||||
</p>
|
||||
<p className="text-[10px] text-slate-500">{user.role}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full text-left px-4 py-2 text-xs text-red-400 hover:bg-red-500/10"
|
||||
>
|
||||
Выйти из системы
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
import { useState } from "react";
|
||||
import { registerUser } from "../api"; // Используем твой метод из index.js
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function RegisterForm() {
|
||||
const navigate = useNavigate();
|
||||
const [formData, setFormData] = useState({
|
||||
username: "",
|
||||
password: "",
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
phone: "",
|
||||
department: "",
|
||||
role: "Рабочий",
|
||||
});
|
||||
const [message, setMessage] = useState({ text: "", isError: false });
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setMessage({ text: "", isError: false });
|
||||
|
||||
try {
|
||||
await registerUser(formData);
|
||||
setMessage({ text: "Сотрудник успешно создан!", isError: false });
|
||||
// Небольшая задержка перед переходом, чтобы админ увидел успех
|
||||
setTimeout(() => navigate("/"), 1500);
|
||||
} catch (err) {
|
||||
setMessage({
|
||||
text: err.response?.data?.error || "Ошибка регистрации",
|
||||
isError: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-slate-950 px-4 py-10">
|
||||
<div className="w-full max-w-lg space-y-8 bg-slate-900 p-10 rounded-2xl border border-slate-800 shadow-2xl">
|
||||
<div className="text-center">
|
||||
<h2 className="text-3xl font-black text-white tracking-tighter">
|
||||
VIPLIGHT <span className="text-blue-500">MRP</span>
|
||||
</h2>
|
||||
<p className="mt-2 text-sm text-slate-400 uppercase tracking-widest">
|
||||
Регистрация сотрудника
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="mt-8 space-y-4" onSubmit={handleSubmit}>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="appearance-none block w-full px-3 py-3 border border-slate-800 bg-slate-800 text-white placeholder-slate-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
placeholder="Имя"
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, first_name: e.target.value })
|
||||
}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="appearance-none block w-full px-3 py-3 border border-slate-800 bg-slate-800 text-white placeholder-slate-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
placeholder="Фамилия"
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, last_name: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
className="appearance-none block w-full px-3 py-3 border border-slate-800 bg-slate-800 text-white placeholder-slate-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
placeholder="Email (Логин)"
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, username: e.target.value })
|
||||
}
|
||||
/>
|
||||
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
className="appearance-none block w-full px-3 py-3 border border-slate-800 bg-slate-800 text-white placeholder-slate-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
placeholder="Пароль (мин. 8 символов)"
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, password: e.target.value })
|
||||
}
|
||||
/>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="appearance-none block w-full px-3 py-3 border border-slate-800 bg-slate-800 text-white placeholder-slate-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
placeholder="Телефон"
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, phone: e.target.value })
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="appearance-none block w-full px-3 py-3 border border-slate-800 bg-slate-800 text-white placeholder-slate-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
placeholder="Отдел"
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, department: e.target.value })
|
||||
}
|
||||
/>
|
||||
<select
|
||||
className="appearance-none block w-full px-3 py-3 border border-slate-800 bg-slate-800 text-white rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm cursor-pointer"
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, role: e.target.value })
|
||||
}
|
||||
value={formData.role}
|
||||
>
|
||||
<option value="Рабочий">Рабочий</option>
|
||||
<option value="Менеджер">Менеджер</option>
|
||||
<option value="Админ">Админ</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{message.text && (
|
||||
<p
|
||||
className={`text-center text-xs font-bold uppercase tracking-tighter ${message.isError ? "text-red-500" : "text-emerald-500"}`}
|
||||
>
|
||||
{message.text}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex gap-4 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate("/")}
|
||||
className="w-1/3 py-3 px-4 border border-slate-800 text-sm font-bold rounded-xl text-slate-400 hover:bg-slate-800 transition-all"
|
||||
>
|
||||
ОТМЕНА
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-2/3 py-3 px-4 border border-transparent text-sm font-bold rounded-xl text-white bg-blue-600 hover:bg-blue-500 transition-all active:scale-95 shadow-lg shadow-blue-900/20"
|
||||
>
|
||||
ЗАРЕГИСТРИРОВАТЬ
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user