From e273c29c36e4c1ca99024af6d699201796e0d0a3 Mon Sep 17 00:00:00 2001
From: Kirill <mpak8501@yandex.ru>
Date: Fri, 22 May 2026 15:04:49 +0500
Subject: [PATCH] refactor(SettingsPage): split into ProfileSection,
 AvatarSection, AuthMethodsSection

- Extract ProfileSection (45 lines): display name form with save button
- Extract AvatarSection (114 lines): avatar preview, style selector, generate/save/cancel
- Extract AuthMethodsSection (204 lines): auth methods list, set/change password forms
- Rewrite SettingsPage as composer (41 lines): composes 3 sections with dividers
- Add tests for all 3 sections
---
 .../me/ui/sections/AuthMethodsSection.tsx     | 204 ++++++++++
 .../pages/me/ui/sections/AvatarSection.tsx    | 114 ++++++
 .../pages/me/ui/sections/ProfileSection.tsx   |  45 +++
 .../src/pages/me/ui/sections/SettingsPage.tsx | 368 +-----------------
 .../__tests__/AuthMethodsSection.test.tsx     |  44 +++
 .../sections/__tests__/AvatarSection.test.tsx |  36 ++
 .../__tests__/ProfileSection.test.tsx         |  23 ++
 7 files changed, 473 insertions(+), 361 deletions(-)
 create mode 100644 client/src/pages/me/ui/sections/AuthMethodsSection.tsx
 create mode 100644 client/src/pages/me/ui/sections/AvatarSection.tsx
 create mode 100644 client/src/pages/me/ui/sections/ProfileSection.tsx
 create mode 100644 client/src/pages/me/ui/sections/__tests__/AuthMethodsSection.test.tsx
 create mode 100644 client/src/pages/me/ui/sections/__tests__/AvatarSection.test.tsx
 create mode 100644 client/src/pages/me/ui/sections/__tests__/ProfileSection.test.tsx

diff --git a/client/src/pages/me/ui/sections/AuthMethodsSection.tsx b/client/src/pages/me/ui/sections/AuthMethodsSection.tsx
new file mode 100644
index 0000000..4bdda00
--- /dev/null
+++ b/client/src/pages/me/ui/sections/AuthMethodsSection.tsx
@@ -0,0 +1,204 @@
+import { useCallback, useEffect, useState } from 'react'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Chip from '@mui/material/Chip'
+import Stack from '@mui/material/Stack'
+import TextField from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+import { useMutation } from '@tanstack/react-query'
+import { useUnit } from 'effector-react'
+import { useForm } from 'react-hook-form'
+import { apiClient } from '@/shared/api/client'
+import { $user, fetchAuthMethodsFx, setPasswordFx, unlinkOAuthFx, type AuthMethod } from '@/shared/model/auth'
+
+const METHOD_LABELS: Record<string, string> = { password: 'Пароль', vk: 'ВКонтакте', yandex: 'Яндекс' }
+
+export function AuthMethodsSection() {
+  const user = useUnit($user)
+
+  const [authMethods, setAuthMethods] = useState<AuthMethod[]>([])
+  const [showSetPassword, setShowSetPassword] = useState(false)
+  const passwordForm = useForm<{ password: string; passwordConfirm: string }>({
+    defaultValues: { password: '', passwordConfirm: '' },
+  })
+
+  useEffect(() => {
+    fetchAuthMethodsFx()
+      .then(setAuthMethods)
+      .catch(() => {
+        setAuthMethods([])
+      })
+  }, [])
+
+  const setPasswordMutation = useMutation({
+    mutationFn: async (pw: string) => {
+      await setPasswordFx(pw)
+      const methods = await fetchAuthMethodsFx()
+      setAuthMethods(methods)
+      setShowSetPassword(false)
+    },
+    onError: () => {},
+  })
+
+  const unlinkMutation = useMutation({
+    mutationFn: async (provider: 'vk' | 'yandex') => {
+      await unlinkOAuthFx(provider)
+      const methods = await fetchAuthMethodsFx()
+      setAuthMethods(methods)
+    },
+    onError: () => {},
+  })
+
+  const [showChangePassword, setShowChangePassword] = useState(false)
+  const changePasswordForm = useForm<{ oldPassword: string; newPassword: string; confirmPassword: string }>({
+    defaultValues: { oldPassword: '', newPassword: '', confirmPassword: '' },
+  })
+
+  const changePasswordMutation = useMutation({
+    mutationFn: async (params: { oldPassword: string; newPassword: string }) => {
+      await apiClient.post('me/change-password', params)
+    },
+    onSuccess: () => {
+      setShowChangePassword(false)
+      changePasswordForm.reset()
+    },
+  })
+
+  const linkedCount = useCallback(() => {
+    return authMethods.filter((m) => m.active).length
+  }, [authMethods])
+
+  if (!user) return null
+
+  return (
+    <Box>
+      <Typography variant="h6" gutterBottom>
+        Методы входа
+      </Typography>
+      <Stack spacing={1}>
+        {authMethods.map((m) => (
+          <Stack key={m.type} direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+            <Typography sx={{ minWidth: 120 }}>{METHOD_LABELS[m.type] || m.type}</Typography>
+            <Chip label={m.active ? 'Привязан' : 'Не привязан'} color={m.active ? 'success' : 'default'} size="small" />
+            {m.active && m.type !== 'password' && (
+              <Button
+                size="small"
+                variant="outlined"
+                color="error"
+                disabled={linkedCount() <= 1}
+                onClick={() => unlinkMutation.mutate(m.type as 'vk' | 'yandex')}
+              >
+                Отвязать
+              </Button>
+            )}
+            {m.active && m.type === 'password' && (
+              <Button size="small" variant="outlined" onClick={() => setShowChangePassword(true)}>
+                Сменить пароль
+              </Button>
+            )}
+            {!m.active && m.type === 'password' && (
+              <Button size="small" variant="outlined" onClick={() => setShowSetPassword(true)}>
+                Установить пароль
+              </Button>
+            )}
+            {!m.active && m.type !== 'password' && (
+              <Button
+                size="small"
+                variant="outlined"
+                component="a"
+                href={`/api/auth/oauth/${m.type}/link?token=${localStorage.getItem('craftshop_auth_token') || ''}`}
+              >
+                Привязать
+              </Button>
+            )}
+          </Stack>
+        ))}
+      </Stack>
+
+      {showSetPassword && (
+        <Stack spacing={2} sx={{ mt: 2, p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1 }}>
+          <TextField label="Пароль" type="password" {...passwordForm.register('password')} fullWidth />
+          <TextField
+            label="Подтверждение пароля"
+            type="password"
+            {...passwordForm.register('passwordConfirm')}
+            fullWidth
+            error={
+              Boolean(passwordForm.watch('passwordConfirm')) &&
+              passwordForm.watch('password') !== passwordForm.watch('passwordConfirm')
+            }
+            helperText={
+              passwordForm.watch('passwordConfirm') &&
+              passwordForm.watch('password') !== passwordForm.watch('passwordConfirm')
+                ? 'Пароли не совпадают'
+                : null
+            }
+          />
+          <Stack direction="row" spacing={1}>
+            <Button
+              variant="contained"
+              disabled={
+                !passwordForm.watch('password') ||
+                passwordForm.watch('password').length < 8 ||
+                passwordForm.watch('password') !== passwordForm.watch('passwordConfirm') ||
+                setPasswordMutation.isPending
+              }
+              onClick={() => setPasswordMutation.mutate(passwordForm.getValues('password'))}
+            >
+              Сохранить
+            </Button>
+            <Button variant="text" onClick={() => setShowSetPassword(false)}>
+              Отмена
+            </Button>
+          </Stack>
+        </Stack>
+      )}
+
+      {showChangePassword && (
+        <Stack spacing={2} sx={{ mt: 2, p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1 }}>
+          <TextField label="Текущий пароль" type="password" {...changePasswordForm.register('oldPassword')} fullWidth />
+          <TextField label="Новый пароль" type="password" {...changePasswordForm.register('newPassword')} fullWidth />
+          <TextField
+            label="Подтверждение пароля"
+            type="password"
+            {...changePasswordForm.register('confirmPassword')}
+            fullWidth
+            error={
+              Boolean(changePasswordForm.watch('confirmPassword')) &&
+              changePasswordForm.watch('newPassword') !== changePasswordForm.watch('confirmPassword')
+            }
+            helperText={
+              changePasswordForm.watch('confirmPassword') &&
+              changePasswordForm.watch('newPassword') !== changePasswordForm.watch('confirmPassword')
+                ? 'Пароли не совпадают'
+                : null
+            }
+          />
+          <Stack direction="row" spacing={1}>
+            <Button
+              variant="contained"
+              disabled={
+                !changePasswordForm.watch('oldPassword') ||
+                !changePasswordForm.watch('newPassword') ||
+                changePasswordForm.watch('newPassword').length < 8 ||
+                changePasswordForm.watch('newPassword') !== changePasswordForm.watch('confirmPassword') ||
+                changePasswordMutation.isPending
+              }
+              onClick={() =>
+                changePasswordMutation.mutate({
+                  oldPassword: changePasswordForm.getValues('oldPassword'),
+                  newPassword: changePasswordForm.getValues('newPassword'),
+                })
+              }
+            >
+              Сохранить
+            </Button>
+            <Button variant="text" onClick={() => setShowChangePassword(false)}>
+              Отмена
+            </Button>
+          </Stack>
+        </Stack>
+      )}
+    </Box>
+  )
+}
diff --git a/client/src/pages/me/ui/sections/AvatarSection.tsx b/client/src/pages/me/ui/sections/AvatarSection.tsx
new file mode 100644
index 0000000..dd5b656
--- /dev/null
+++ b/client/src/pages/me/ui/sections/AvatarSection.tsx
@@ -0,0 +1,114 @@
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import MenuItem from '@mui/material/MenuItem'
+import Select from '@mui/material/Select'
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+import { createAvatar } from '@dicebear/core'
+import { useUnit } from 'effector-react'
+import { AVATAR_STYLES, DEFAULT_STYLE_ID, getStyleById } from '@/shared/lib/avatar-styles'
+import { $user, updateProfileFx } from '@/shared/model/auth'
+import { UserAvatar } from '@/shared/ui/UserAvatar'
+
+export function AvatarSection() {
+  const user = useUnit($user)
+  const pendingProfile = useUnit(updateProfileFx.pending)
+
+  const [selectedStyle, setSelectedStyle] = useState(user?.avatarStyle || DEFAULT_STYLE_ID)
+  const [previewSrc, setPreviewSrc] = useState<string | null>(null)
+  const [previewStyle, setPreviewStyle] = useState<string>(DEFAULT_STYLE_ID)
+
+  const hasUnsavedPreview = previewSrc !== null
+
+  if (!user) return null
+
+  return (
+    <Box>
+      <Typography variant="h6" gutterBottom>
+        Аватар
+      </Typography>
+
+      <Stack direction="row" spacing={3} sx={{ alignItems: 'flex-start', mb: 2 }}>
+        <Box sx={{ textAlign: 'center' }}>
+          <UserAvatar
+            userId={user.id}
+            avatarUrl={hasUnsavedPreview ? previewSrc : user.avatar}
+            avatarStyle={hasUnsavedPreview ? previewStyle : user.avatarStyle}
+            size={80}
+            sx={{
+              border: 2,
+              borderColor: hasUnsavedPreview ? 'warning.main' : 'primary.main',
+            }}
+          />
+          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.5 }}>
+            {hasUnsavedPreview ? 'Предпросмотр' : user.avatar ? 'Сохранён' : 'Авто'}
+          </Typography>
+        </Box>
+        {hasUnsavedPreview && (
+          <Box sx={{ textAlign: 'center' }}>
+            <UserAvatar
+              userId={user.id}
+              avatarUrl={user.avatar}
+              avatarStyle={user.avatarStyle}
+              size={80}
+              sx={{ border: 2, borderColor: 'divider', opacity: 0.6 }}
+            />
+            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.5 }}>
+              Текущий
+            </Typography>
+          </Box>
+        )}
+      </Stack>
+
+      <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 1, mb: 1 }}>
+        <FormControl size="small" sx={{ minWidth: 140 }}>
+          <InputLabel>Стиль</InputLabel>
+          <Select value={selectedStyle} label="Стиль" onChange={(e) => setSelectedStyle(e.target.value)}>
+            {AVATAR_STYLES.map((s) => (
+              <MenuItem key={s.id} value={s.id}>
+                {s.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button
+          variant="outlined"
+          onClick={() => {
+            const seed = `${user.id}_${Date.now()}`
+            const styleDef = getStyleById(selectedStyle)
+            const avatar = createAvatar(styleDef.style, { seed })
+            setPreviewSrc(avatar.toDataUri())
+            setPreviewStyle(selectedStyle)
+          }}
+        >
+          Сгенерировать
+        </Button>
+      </Stack>
+
+      {hasUnsavedPreview && (
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 1, mb: 1 }}>
+          <Button
+            variant="contained"
+            disabled={pendingProfile}
+            onClick={() => {
+              updateProfileFx({
+                displayName: user.displayName?.trim() || null,
+                avatar: previewSrc,
+                avatarStyle: previewStyle,
+              })
+              setPreviewSrc(null)
+            }}
+          >
+            Сохранить
+          </Button>
+          <Button variant="text" onClick={() => setPreviewSrc(null)}>
+            Отмена
+          </Button>
+        </Stack>
+      )}
+    </Box>
+  )
+}
diff --git a/client/src/pages/me/ui/sections/ProfileSection.tsx b/client/src/pages/me/ui/sections/ProfileSection.tsx
new file mode 100644
index 0000000..11ff3f1
--- /dev/null
+++ b/client/src/pages/me/ui/sections/ProfileSection.tsx
@@ -0,0 +1,45 @@
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Stack from '@mui/material/Stack'
+import TextField from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+import { useUnit } from 'effector-react'
+import { useForm } from 'react-hook-form'
+import { $user, updateProfileFx } from '@/shared/model/auth'
+
+export function ProfileSection() {
+  const user = useUnit($user)
+  const pendingProfile = useUnit(updateProfileFx.pending)
+
+  const profileForm = useForm<{ displayName: string }>({
+    defaultValues: { displayName: user?.displayName ? String(user.displayName) : '' },
+    mode: 'onChange',
+  })
+
+  return (
+    <Box>
+      <Typography variant="h6" gutterBottom>
+        Профиль
+      </Typography>
+      <Stack spacing={2}>
+        <TextField
+          label="Имя или ник"
+          helperText="До 40 символов"
+          slotProps={{ htmlInput: { maxLength: 40 } }}
+          {...profileForm.register('displayName')}
+        />
+        <Button
+          variant="contained"
+          disabled={pendingProfile}
+          onClick={() => {
+            const raw = profileForm.getValues('displayName')
+            const name = raw.trim()
+            updateProfileFx({ displayName: name.length ? name : null })
+          }}
+        >
+          Сохранить
+        </Button>
+      </Stack>
+    </Box>
+  )
+}
diff --git a/client/src/pages/me/ui/sections/SettingsPage.tsx b/client/src/pages/me/ui/sections/SettingsPage.tsx
index df6635a..dd4035a 100644
--- a/client/src/pages/me/ui/sections/SettingsPage.tsx
+++ b/client/src/pages/me/ui/sections/SettingsPage.tsx
@@ -1,113 +1,16 @@
-import { useCallback, useEffect, useState } from 'react'
 import Alert from '@mui/material/Alert'
 import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
-import Chip from '@mui/material/Chip'
 import Divider from '@mui/material/Divider'
-import FormControl from '@mui/material/FormControl'
-import InputLabel from '@mui/material/InputLabel'
-import MenuItem from '@mui/material/MenuItem'
-import Select from '@mui/material/Select'
 import Stack from '@mui/material/Stack'
-import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
-import { createAvatar } from '@dicebear/core'
-import { useMutation } from '@tanstack/react-query'
 import { useUnit } from 'effector-react'
-import { useForm } from 'react-hook-form'
-import { AVATAR_STYLES, DEFAULT_STYLE_ID, getStyleById } from '@/shared/lib/avatar-styles'
-import {
-  $updateProfileError,
-  $user,
-  fetchAuthMethodsFx,
-  setPasswordFx,
-  unlinkOAuthFx,
-  updateProfileFx,
-  type AuthMethod,
-} from '@/shared/model/auth'
-import { UserAvatar } from '@/shared/ui/UserAvatar'
-import { apiClient } from '@/shared/api/client'
-import type { AxiosError } from 'axios'
-
-function getApiErrorMessage(error: unknown): string | null {
-  const e = error as AxiosError<{ error?: string }>
-  const msg = e?.response?.data?.error
-  return msg ? String(msg) : null
-}
+import { $user } from '@/shared/model/auth'
+import { AuthMethodsSection } from './AuthMethodsSection'
+import { AvatarSection } from './AvatarSection'
+import { ProfileSection } from './ProfileSection'
 
 export function SettingsPage() {
   const user = useUnit($user)
-  const pendingProfile = useUnit(updateProfileFx.pending)
-  const errorProfile = useUnit($updateProfileError)
-
-  const profileForm = useForm<{ displayName: string }>({
-    defaultValues: {
-      displayName: user?.displayName ? String(user.displayName) : '',
-    },
-    mode: 'onChange',
-  })
-
-  const profileErrorMsg = getApiErrorMessage(errorProfile)
-
-  const [selectedStyle, setSelectedStyle] = useState(user?.avatarStyle || DEFAULT_STYLE_ID)
-  const [previewSrc, setPreviewSrc] = useState<string | null>(null)
-  const [previewStyle, setPreviewStyle] = useState<string>(DEFAULT_STYLE_ID)
-
-  const hasUnsavedPreview = previewSrc !== null
-
-  const [authMethods, setAuthMethods] = useState<AuthMethod[]>([])
-  const [showSetPassword, setShowSetPassword] = useState(false)
-  const passwordForm = useForm<{ password: string; passwordConfirm: string }>({
-    defaultValues: { password: '', passwordConfirm: '' },
-  })
-
-  useEffect(() => {
-    fetchAuthMethodsFx()
-      .then(setAuthMethods)
-      .catch(() => {
-        setAuthMethods([])
-      })
-  }, [])
-
-  const setPasswordMutation = useMutation({
-    mutationFn: async (pw: string) => {
-      await setPasswordFx(pw)
-      const methods = await fetchAuthMethodsFx()
-      setAuthMethods(methods)
-      setShowSetPassword(false)
-    },
-    onError: () => {},
-  })
-
-  const unlinkMutation = useMutation({
-    mutationFn: async (provider: 'vk' | 'yandex') => {
-      await unlinkOAuthFx(provider)
-      const methods = await fetchAuthMethodsFx()
-      setAuthMethods(methods)
-    },
-    onError: () => {},
-  })
-
-  const [showChangePassword, setShowChangePassword] = useState(false)
-  const changePasswordForm = useForm<{ oldPassword: string; newPassword: string; confirmPassword: string }>({
-    defaultValues: { oldPassword: '', newPassword: '', confirmPassword: '' },
-  })
-
-  const changePasswordMutation = useMutation({
-    mutationFn: async (params: { oldPassword: string; newPassword: string }) => {
-      await apiClient.post('me/change-password', params)
-    },
-    onSuccess: () => {
-      setShowChangePassword(false)
-      changePasswordForm.reset()
-    },
-  })
-
-  const linkedCount = useCallback(() => {
-    return authMethods.filter((m) => m.active).length
-  }, [authMethods])
-
-  const METHOD_LABELS: Record<string, string> = { password: 'Пароль', vk: 'ВКонтакте', yandex: 'Яндекс' }
 
   if (!user) {
     return <Alert severity="info">Нужно войти. Перейдите на страницу «Вход».</Alert>
@@ -122,271 +25,14 @@ export function SettingsPage() {
         Текущая почта: <b>{user.email}</b>
       </Typography>
 
-      {profileErrorMsg && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {profileErrorMsg}
-        </Alert>
-      )}
-
       <Stack spacing={3} sx={{ maxWidth: 560 }}>
-        <Box>
-          <Typography variant="h6" gutterBottom>
-            Профиль
-          </Typography>
-          <Stack spacing={2}>
-            <TextField
-              label="Имя или ник"
-              helperText="До 40 символов"
-              slotProps={{ htmlInput: { maxLength: 40 } }}
-              {...profileForm.register('displayName')}
-            />
-            <Button
-              variant="contained"
-              disabled={pendingProfile}
-              onClick={() => {
-                const raw = profileForm.getValues('displayName')
-                const name = raw.trim()
-                updateProfileFx({ displayName: name.length ? name : null })
-              }}
-            >
-              Сохранить
-            </Button>
-          </Stack>
-        </Box>
-
+        <ProfileSection />
         <Divider />
-
-        <Box>
-          <Typography variant="h6" gutterBottom>
-            Аватар
-          </Typography>
-
-          <Stack direction="row" spacing={3} sx={{ alignItems: 'flex-start', mb: 2 }}>
-            <Box sx={{ textAlign: 'center' }}>
-              <UserAvatar
-                userId={user.id}
-                avatarUrl={hasUnsavedPreview ? previewSrc : user.avatar}
-                avatarStyle={hasUnsavedPreview ? previewStyle : user.avatarStyle}
-                size={80}
-                sx={{
-                  border: 2,
-                  borderColor: hasUnsavedPreview ? 'warning.main' : 'primary.main',
-                }}
-              />
-              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.5 }}>
-                {hasUnsavedPreview ? 'Предпросмотр' : user.avatar ? 'Сохранён' : 'Авто'}
-              </Typography>
-            </Box>
-            {hasUnsavedPreview && (
-              <Box sx={{ textAlign: 'center' }}>
-                <UserAvatar
-                  userId={user.id}
-                  avatarUrl={user.avatar}
-                  avatarStyle={user.avatarStyle}
-                  size={80}
-                  sx={{ border: 2, borderColor: 'divider', opacity: 0.6 }}
-                />
-                <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.5 }}>
-                  Текущий
-                </Typography>
-              </Box>
-            )}
-          </Stack>
-
-          <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 1, mb: 1 }}>
-            <FormControl size="small" sx={{ minWidth: 140 }}>
-              <InputLabel>Стиль</InputLabel>
-              <Select value={selectedStyle} label="Стиль" onChange={(e) => setSelectedStyle(e.target.value)}>
-                {AVATAR_STYLES.map((s) => (
-                  <MenuItem key={s.id} value={s.id}>
-                    {s.label}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-            <Button
-              variant="outlined"
-              onClick={() => {
-                const seed = `${user.id}_${Date.now()}`
-                const styleDef = getStyleById(selectedStyle)
-                const avatar = createAvatar(styleDef.style, { seed })
-                setPreviewSrc(avatar.toDataUri())
-                setPreviewStyle(selectedStyle)
-              }}
-            >
-              Сгенерировать
-            </Button>
-          </Stack>
-
-          {hasUnsavedPreview && (
-            <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 1, mb: 1 }}>
-              <Button
-                variant="contained"
-                disabled={pendingProfile}
-                onClick={() => {
-                  updateProfileFx({
-                    displayName: user.displayName?.trim() || null,
-                    avatar: previewSrc,
-                    avatarStyle: previewStyle,
-                  })
-                  setPreviewSrc(null)
-                }}
-              >
-                Сохранить
-              </Button>
-              <Button variant="text" onClick={() => setPreviewSrc(null)}>
-                Отмена
-              </Button>
-            </Stack>
-          )}
-        </Box>
-
+        <AvatarSection />
         {!user.isAdmin && (
           <>
             <Divider />
-            <Box>
-              <Typography variant="h6" gutterBottom>
-                Методы входа
-              </Typography>
-              <Stack spacing={1}>
-                {authMethods.map((m) => (
-                  <Stack key={m.type} direction="row" spacing={2} sx={{ alignItems: 'center' }}>
-                    <Typography sx={{ minWidth: 120 }}>{METHOD_LABELS[m.type] || m.type}</Typography>
-                    <Chip
-                      label={m.active ? 'Привязан' : 'Не привязан'}
-                      color={m.active ? 'success' : 'default'}
-                      size="small"
-                    />
-                    {m.active && m.type !== 'password' && (
-                      <Button
-                        size="small"
-                        variant="outlined"
-                        color="error"
-                        disabled={linkedCount() <= 1}
-                        onClick={() => unlinkMutation.mutate(m.type as 'vk' | 'yandex')}
-                      >
-                        Отвязать
-                      </Button>
-                    )}
-                    {m.active && m.type === 'password' && (
-                      <Button size="small" variant="outlined" onClick={() => setShowChangePassword(true)}>
-                        Сменить пароль
-                      </Button>
-                    )}
-                    {!m.active && m.type === 'password' && (
-                      <Button size="small" variant="outlined" onClick={() => setShowSetPassword(true)}>
-                        Установить пароль
-                      </Button>
-                    )}
-                    {!m.active && m.type !== 'password' && (
-                      <Button
-                        size="small"
-                        variant="outlined"
-                        component="a"
-                        href={`/api/auth/oauth/${m.type}/link?token=${localStorage.getItem('craftshop_auth_token') || ''}`}
-                      >
-                        Привязать
-                      </Button>
-                    )}
-                  </Stack>
-                ))}
-              </Stack>
-
-              {showSetPassword && (
-                <Stack spacing={2} sx={{ mt: 2, p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1 }}>
-                  <TextField label="Пароль" type="password" {...passwordForm.register('password')} fullWidth />
-                  <TextField
-                    label="Подтверждение пароля"
-                    type="password"
-                    {...passwordForm.register('passwordConfirm')}
-                    fullWidth
-                    error={
-                      Boolean(passwordForm.watch('passwordConfirm')) &&
-                      passwordForm.watch('password') !== passwordForm.watch('passwordConfirm')
-                    }
-                    helperText={
-                      passwordForm.watch('passwordConfirm') &&
-                      passwordForm.watch('password') !== passwordForm.watch('passwordConfirm')
-                        ? 'Пароли не совпадают'
-                        : null
-                    }
-                  />
-                  <Stack direction="row" spacing={1}>
-                    <Button
-                      variant="contained"
-                      disabled={
-                        !passwordForm.watch('password') ||
-                        passwordForm.watch('password').length < 8 ||
-                        passwordForm.watch('password') !== passwordForm.watch('passwordConfirm') ||
-                        setPasswordMutation.isPending
-                      }
-                      onClick={() => setPasswordMutation.mutate(passwordForm.getValues('password'))}
-                    >
-                      Сохранить
-                    </Button>
-                    <Button variant="text" onClick={() => setShowSetPassword(false)}>
-                      Отмена
-                    </Button>
-                  </Stack>
-                </Stack>
-              )}
-
-              {showChangePassword && (
-                <Stack spacing={2} sx={{ mt: 2, p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1 }}>
-                  <TextField
-                    label="Текущий пароль"
-                    type="password"
-                    {...changePasswordForm.register('oldPassword')}
-                    fullWidth
-                  />
-                  <TextField
-                    label="Новый пароль"
-                    type="password"
-                    {...changePasswordForm.register('newPassword')}
-                    fullWidth
-                  />
-                  <TextField
-                    label="Подтверждение пароля"
-                    type="password"
-                    {...changePasswordForm.register('confirmPassword')}
-                    fullWidth
-                    error={
-                      Boolean(changePasswordForm.watch('confirmPassword')) &&
-                      changePasswordForm.watch('newPassword') !== changePasswordForm.watch('confirmPassword')
-                    }
-                    helperText={
-                      changePasswordForm.watch('confirmPassword') &&
-                      changePasswordForm.watch('newPassword') !== changePasswordForm.watch('confirmPassword')
-                        ? 'Пароли не совпадают'
-                        : null
-                    }
-                  />
-                  <Stack direction="row" spacing={1}>
-                    <Button
-                      variant="contained"
-                      disabled={
-                        !changePasswordForm.watch('oldPassword') ||
-                        !changePasswordForm.watch('newPassword') ||
-                        changePasswordForm.watch('newPassword').length < 8 ||
-                        changePasswordForm.watch('newPassword') !== changePasswordForm.watch('confirmPassword') ||
-                        changePasswordMutation.isPending
-                      }
-                      onClick={() =>
-                        changePasswordMutation.mutate({
-                          oldPassword: changePasswordForm.getValues('oldPassword'),
-                          newPassword: changePasswordForm.getValues('newPassword'),
-                        })
-                      }
-                    >
-                      Сохранить
-                    </Button>
-                    <Button variant="text" onClick={() => setShowChangePassword(false)}>
-                      Отмена
-                    </Button>
-                  </Stack>
-                </Stack>
-              )}
-            </Box>
+            <AuthMethodsSection />
           </>
         )}
       </Stack>
diff --git a/client/src/pages/me/ui/sections/__tests__/AuthMethodsSection.test.tsx b/client/src/pages/me/ui/sections/__tests__/AuthMethodsSection.test.tsx
new file mode 100644
index 0000000..06c425d
--- /dev/null
+++ b/client/src/pages/me/ui/sections/__tests__/AuthMethodsSection.test.tsx
@@ -0,0 +1,44 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { AuthMethodsSection } from '../AuthMethodsSection'
+
+vi.mock('@/shared/model/auth', () => ({
+  $user: {
+    defaultState: { id: '1', email: 'test@test.com' },
+    subscribe: () => () => {},
+    getState: () => ({ id: '1', email: 'test@test.com' }),
+    watch: () => () => {},
+    on: () => {},
+    reset: () => {},
+  },
+  fetchAuthMethodsFx: vi.fn().mockResolvedValue([]),
+  setPasswordFx: vi.fn(),
+  unlinkOAuthFx: vi.fn(),
+}))
+
+vi.mock('@/shared/api/client', () => ({ apiClient: { post: vi.fn() } }))
+
+vi.mock('effector-react', async () => {
+  return {
+    useUnit: () => ({ id: '1', email: 'test@test.com' }),
+  }
+})
+
+function renderSection() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } })
+  return render(
+    <QueryClientProvider client={qc}>
+      <AuthMethodsSection />
+    </QueryClientProvider>,
+  )
+}
+
+describe('AuthMethodsSection', () => {
+  it('renders auth methods section', async () => {
+    renderSection()
+    await waitFor(() => {
+      expect(screen.getByText('Методы входа')).toBeTruthy()
+    })
+  })
+})
diff --git a/client/src/pages/me/ui/sections/__tests__/AvatarSection.test.tsx b/client/src/pages/me/ui/sections/__tests__/AvatarSection.test.tsx
new file mode 100644
index 0000000..447dc34
--- /dev/null
+++ b/client/src/pages/me/ui/sections/__tests__/AvatarSection.test.tsx
@@ -0,0 +1,36 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { AvatarSection } from '../AvatarSection'
+
+vi.mock('@/shared/model/auth', () => ({
+  $user: {
+    defaultState: { id: '1', avatar: null, avatarStyle: 'initials', displayName: 'Test' },
+    subscribe: () => () => {},
+    getState: () => ({ id: '1', avatar: null, avatarStyle: 'initials', displayName: 'Test' }),
+    watch: () => () => {},
+    on: () => {},
+    reset: () => {},
+  },
+  updateProfileFx: { pending: false },
+}))
+
+vi.mock('effector-react', async () => {
+  return {
+    useUnit: () => ({ id: '1', avatar: null, avatarStyle: 'initials', displayName: 'Test' }),
+  }
+})
+
+vi.mock('@dicebear/core', () => ({
+  createAvatar: vi.fn(() => ({
+    toDataUri: () => 'data:image/svg+xml,<svg></svg>',
+  })),
+}))
+
+describe('AvatarSection', () => {
+  it('renders avatar section', async () => {
+    render(<AvatarSection />)
+    await waitFor(() => {
+      expect(screen.getByText('Аватар')).toBeTruthy()
+    })
+  })
+})
diff --git a/client/src/pages/me/ui/sections/__tests__/ProfileSection.test.tsx b/client/src/pages/me/ui/sections/__tests__/ProfileSection.test.tsx
new file mode 100644
index 0000000..0f3d448
--- /dev/null
+++ b/client/src/pages/me/ui/sections/__tests__/ProfileSection.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { ProfileSection } from '../ProfileSection'
+
+vi.mock('@/shared/model/auth', () => ({
+  $user: null,
+  $updateProfileError: null,
+  updateProfileFx: { pending: false },
+}))
+
+vi.mock('effector-react', async () => {
+  const actual = await vi.importActual('effector-react')
+  return { ...actual, useUnit: () => null }
+})
+
+describe('ProfileSection', () => {
+  it('renders profile section', () => {
+    render(<ProfileSection />)
+    expect(screen.getByText('Профиль')).toBeTruthy()
+    expect(screen.getByLabelText('Имя или ник')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Сохранить' })).toBeTruthy()
+  })
+})