F

src/features/auth/api/profileApi.ts

@@ -90,6 +90,25 @@ export async function passwordResetStart(payload: PasswordResetStartPayload): Pr
   }
 }
 
+export async function updatePhone(phone: string): Promise<void> {
+  const headers = await authedHeaders()
+
+  const res = await fetch(`${USERS_API_URL}/me/settings/phone`, {
+    method: 'PATCH',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      ...headers,
+    },
+    body: JSON.stringify({ phone }),
+  })
+
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}))
+    throw data
+  }
+}
+
 export interface PasswordResetCompletePayload {
   email: string
   code: string

src/features/auth/hooks/useUpdatePhone.ts

@@ -0,0 +1,12 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { updatePhone } from '../api/profileApi'
+
+export function useUpdatePhone() {
+  const queryClient = useQueryClient()
+  return useMutation<void, unknown, string>({
+    mutationFn: updatePhone,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['me'] })
+    },
+  })
+}

src/features/auth/index.ts

@@ -1,8 +1,9 @@
 export { registrationStart, registrationComplete, loginStart, loginComplete } from './api/registrationApi'
-export { getMe, uploadAvatar } from './api/profileApi'
+export { getMe, uploadAvatar, updatePhone } from './api/profileApi'
 export type { MeResponse, UploadAvatarPayload } from './api/profileApi'
 export { useMe } from './hooks/useMe'
 export { useUploadAvatar } from './hooks/useUploadAvatar'
+export { useUpdatePhone } from './hooks/useUpdatePhone'
 export type { RegistrationStartPayload, RegistrationCompletePayload, LoginStartPayload, LoginCompletePayload, AuthResponse } from './api/registrationApi'
 export { useIsAuthenticated } from './hooks/useIsAuthenticated'
 export { useAuth, AUTH_QUERY_KEY } from './hooks/useAuth'

src/pages/profile/ui/ProfilePage.tsx

@@ -1,8 +1,9 @@
+import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useMe } from '@features/auth'
+import { useMe, useUpdatePhone } from '@features/auth'
 import { usePortfolio, useWalletAddresses } from '@features/wallet'
 import { ROUTES } from '@shared/config/routes'
-import { Button, FormField } from '@shared/ui'
+import { Button, FormField, Notification } from '@shared/ui'
 import { WalletHeader } from '@widgets/wallet-header'
 import { ProfileAvatar, ProfileSection } from '@widgets/profile'
 import styles from './ProfilePage.module.css'
@@ -11,8 +12,34 @@ export function ProfilePage() {
   const { data } = useMe()
   const { data: portfolio, isLoading: isPortfolioLoading } = usePortfolio()
   const { data: walletAddresses } = useWalletAddresses()
+  const updatePhone = useUpdatePhone()
   const navigate = useNavigate()
 
+  const [phone, setPhone] = useState('')
+  const [savedPhone, setSavedPhone] = useState('')
+  const [notification, setNotification] = useState<{ message: string; status: 'success' | 'error' } | null>(null)
+
+  useEffect(() => {
+    if (data?.phone != null) {
+      setPhone(data.phone)
+      setSavedPhone(data.phone)
+    }
+  }, [data?.phone])
+
+  function handlePhoneBlur() {
+    const next = phone.trim()
+    if (next === savedPhone || updatePhone.isPending) return
+    updatePhone.mutate(next, {
+      onSuccess: () => {
+        setSavedPhone(next)
+        setNotification({ status: 'success', message: 'Номер телефона обновлён' })
+      },
+      onError: () => {
+        setNotification({ status: 'error', message: 'Не удалось обновить номер телефона' })
+      },
+    })
+  }
+
   const capitalize = (s: string) => (s ? s[0].toUpperCase() + s.slice(1).toLowerCase() : '')
   const fullName = data
     ? [data.last_name, data.first_name, data.middle_name].filter(Boolean).map(capitalize).join(' ')
@@ -44,10 +71,10 @@ export function ProfilePage() {
         <div className={styles.sections}>
           <ProfileSection title="Личные данные">
             <div className={styles.grid2}>
-              <FormField label="Полное ФИО" value={fullName} placeholder="Например: Иванов Иван Иванович" />
+              <FormField label="Полное ФИО" value={fullName} placeholder="Например: Иванов Иван Иванович" readOnly />
               <FormField label="Адрес электронной почты" value={data?.email ?? ''} type="email" icon="check" placeholder="example@mail.ru" readOnly />
               <FormField label="Серия и номер паспорта" value={data?.passport_data ?? ''} placeholder="0000 000000" readOnly />
-              <FormField label="Номер телефона" value={data?.phone ?? ''} type="tel" icon="check" placeholder="+7 (999) 000-00-00" readOnly />
+              <FormField label="Номер телефона" value={phone} onChange={setPhone} onBlur={handlePhoneBlur} type="tel" placeholder="+7 (999) 000-00-00" />
             </div>
           </ProfileSection>
 
@@ -92,6 +119,13 @@ export function ProfilePage() {
           </ProfileSection>
         </div>
       </main>
+      {notification && (
+        <Notification
+          status={notification.status}
+          message={notification.message}
+          onClose={() => setNotification(null)}
+        />
+      )}
     </div>
   )
 }

src/shared/ui/FormField/FormField.tsx

@@ -7,12 +7,13 @@ interface Props {
   placeholder?: string
   type?: 'text' | 'email' | 'tel' | 'password'
   onChange?: (value: string) => void
+  onBlur?: () => void
   readOnly?: boolean
   required?: boolean
   icon?: 'check' | 'lock'
 }
 
-export function FormField({ label, value, placeholder, type = 'text', onChange, readOnly, required, icon }: Props) {
+export function FormField({ label, value, placeholder, type = 'text', onChange, onBlur, readOnly, required, icon }: Props) {
   const [copied, setCopied] = useState(false)
   const [isVisible, setIsVisible] = useState(false)
 
@@ -41,6 +42,7 @@ export function FormField({ label, value, placeholder, type = 'text', onChange,
           placeholder={placeholder}
           readOnly={readOnly}
           required={required}
+          onBlur={onBlur}
         />
         {isPassword && (
           <button