added security and fix edit profile

src/components/profile/ProfileFormFields.jsx

@@ -60,6 +60,19 @@ function ImageUpload({
   );
 }
 
+// ─── Login field ─────────────────────────────────────────────────────────────
+function LoginField({ form, errors, onChange }) {
+  return (
+    <InputField
+      label="Логин"
+      placeholder="username"
+      value={form.login}
+      error={errors.login}
+      onChange={(e) => onChange("login", e.target.value)}
+    />
+  );
+}
+
 // ─── Name fields row ─────────────────────────────────────────────────────────
 function NameFieldsRow({ form, errors, onChange }) {
   return (
@@ -134,4 +147,4 @@ function ModalHeader({ onClose }) {
   );
 }
 
-export { InputField, ImageUpload, NameFieldsRow, ContactFields, SubmitButton, ModalHeader };
+export { InputField, ImageUpload, LoginField, NameFieldsRow, ContactFields, SubmitButton, ModalHeader };

src/components/profile/ProfileModal.jsx

@@ -1,9 +1,12 @@
 import { useState, useCallback } from "react";
 import { formatPhone } from "../../utils/formatPhone";
 import { useImageUpload } from "../../hooks/useImageUpload";
+import { useUpdateProfile } from "../../hooks/useUpdateProfile";
+import { useAuthContext } from "../../context/AuthContext";
 import { validateProfileForm, initializeFormState } from "./profileValidation";
 import {
   ImageUpload,
+  LoginField,
   NameFieldsRow,
   ContactFields,
   SubmitButton,
@@ -11,6 +14,8 @@ import {
 } from "./ProfileFormFields";
 
 export default function ProfileModal({ onClose, initialData = {} }) {
+  const { user, updateUser } = useAuthContext();
+  const { updateProfile, loading: saving, error: saveError } = useUpdateProfile();
   const [form, setForm] = useState(initializeFormState(initialData));
   const [errors, setErrors] = useState({});
 
@@ -47,15 +52,20 @@ export default function ProfileModal({ onClose, initialData = {} }) {
     }
 
     const profileData = {
-      firstName: form.firstName.trim(),
-      lastName: form.lastName.trim(),
-      phone: form.phone.trim(),
-      email: form.email.trim(),
-      avatar: imageFile || existingImageUrl,
+      name:     form.firstName.trim(),
+      login:    form.login.trim(),
+      phone:    form.phone.trim(),
+      email:    form.email.trim(),
+      avatar:   imageFile || existingImageUrl,
     };
 
-    console.log("Profile data to save:", profileData);
-    onClose();
+    const updatedUser = await updateProfile(user?.id, profileData);
+
+    if (updatedUser) {
+      // Обновляем данные пользователя в контексте и localStorage
+      updateUser(updatedUser);
+      onClose();
+    }
   };
 
   return (
@@ -72,6 +82,12 @@ export default function ProfileModal({ onClose, initialData = {} }) {
           onRemove={removeImage}
         />
 
+        <LoginField
+          form={form}
+          errors={errors}
+          onChange={handleFieldChange}
+        />
+
         <NameFieldsRow
           form={form}
           errors={errors}
@@ -85,7 +101,9 @@ export default function ProfileModal({ onClose, initialData = {} }) {
           onPhoneChange={handlePhoneChange}
         />
 
-        <SubmitButton loading={compressing} onSubmit={handleSubmit} />
+        {saveError && <p className="f-err-msg" style={{ marginBottom: 10 }}>{saveError}</p>}
+
+        <SubmitButton loading={compressing || saving} onSubmit={handleSubmit} />
       </div>
     </div>
   );

src/components/profile/profileValidation.js

@@ -24,9 +24,10 @@ export function validateProfileForm(form) {
 // ─── Form state initialization ──────────────────────────────────────────────
 export function initializeFormState(initialData = {}) {
   return {
+    login:     initialData.login     || "",
     firstName: initialData.firstName || "",
-    lastName: initialData.lastName || "",
-    phone: initialData.phone || "",
-    email: initialData.email || "",
+    lastName:  initialData.lastName  || "",
+    phone:     initialData.phone     || "",
+    email:     initialData.email     || "",
   };
 }