feat(client): redesign auth page with minimal style, BearLogo, pill buttons

client/src/pages/auth/__tests__/AuthPage.test.tsx

@@ -24,9 +24,9 @@ function renderPage() {
 describe('AuthPage', () => {
   it('renders three tabs', () => {
     renderPage()
-    expect(screen.getByRole('tab', { name: 'Пароль' })).toBeTruthy()
-    expect(screen.getByRole('tab', { name: 'Код' })).toBeTruthy()
-    expect(screen.getByRole('tab', { name: 'Другой способ' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Пароль' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Код' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Другой способ' })).toBeTruthy()
   })
 
   it('shows login form by default on tab 0', () => {

client/src/pages/auth/ui/AuthPage.tsx

@@ -1,19 +1,22 @@
 import { useEffect, useState } from 'react'
+import { alpha, useTheme } from '@mui/material/styles'
 import Alert from '@mui/material/Alert'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
+import InputAdornment from '@mui/material/InputAdornment'
+import Paper from '@mui/material/Paper'
 import Stack from '@mui/material/Stack'
-import Tab from '@mui/material/Tab'
-import Tabs from '@mui/material/Tabs'
 import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
 import { useMutation } from '@tanstack/react-query'
 import { useUnit } from 'effector-react'
+import { Lock, Mail } from 'lucide-react'
 import { useForm } from 'react-hook-form'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { OAuthButtons } from '@/features/auth-oauth'
 import { apiClient } from '@/shared/api/client'
 import { $user, tokenSet } from '@/shared/model/auth'
+import { BearLogo } from '@/shared/ui/BearLogo'
 
 type AuthResponse = {
   token: string
@@ -36,6 +39,7 @@ function getApiErrorMessage(err: unknown): string | null {
 }
 
 export function AuthPage() {
+  const theme = useTheme()
   const [message, setMessage] = useState<string | null>(null)
   const [oauthError, setOauthError] = useState<string | null>(null)
   const [tab, setTab] = useState(0)
@@ -112,121 +116,239 @@ export function AuthPage() {
     getApiErrorMessage(requestCode.error) ||
     getApiErrorMessage(verifyCode.error)
 
-  const passwordError = isRegister && passwordConfirm && password !== passwordConfirm ? 'Пароли не совпадают' : null
+  const passwordError =
+    isRegister && passwordConfirm && password !== passwordConfirm ? 'Пароли не совпадают' : null
 
   return (
-    <Box>
-      <Typography variant="h4" gutterBottom>
-        Вход / регистрация
-      </Typography>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 'calc(100vh - 64px)',
+        px: 2,
+        background: `radial-gradient(circle at 50% 30%, ${alpha(theme.palette.primary.main, 0.05)} 0%, transparent 70%)`,
+      }}
+    >
+      <Box sx={{ width: '100%', maxWidth: 440 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
+          <BearLogo sx={{ fontSize: 72 }} />
+        </Box>
 
-      {message && (
-        <Alert severity="success" sx={{ mb: 2 }}>
-          {message}
-        </Alert>
-      )}
-      {oauthError && (
-        <Alert severity="error" sx={{ mb: 2 }} onClose={() => setOauthError(null)}>
-          {oauthError}
-        </Alert>
-      )}
-      {errMsg && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {errMsg}
-        </Alert>
-      )}
+        <Typography variant="h5" fontWeight={700} textAlign="center" gutterBottom>
+          Добро пожаловать в Любимый Креатив
+        </Typography>
 
-      <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 3 }}>
-        <Tab label="Пароль" />
-        <Tab label="Код" />
-        <Tab label="Другой способ" />
-      </Tabs>
+        <Typography variant="body2" color="text.secondary" textAlign="center" sx={{ mb: 3 }}>
+          Войдите или зарегистрируйтесь, чтобы продолжить
+        </Typography>
 
-      {tab === 0 && (
-        <Stack spacing={2} sx={{ maxWidth: 520 }}>
-          <Stack direction="row" spacing={1}>
-            <Button variant={!isRegister ? 'contained' : 'outlined'} onClick={() => setIsRegister(false)}>
-              Вход
-            </Button>
-            <Button variant={isRegister ? 'contained' : 'outlined'} onClick={() => setIsRegister(true)}>
-              Регистрация
-            </Button>
+        <Paper
+          sx={{
+            p: 4,
+            borderRadius: 3,
+            border: `1px solid ${theme.palette.divider}`,
+          }}
+        >
+          <Stack direction="row" spacing={1} sx={{ mb: 3 }}>
+            {[
+              { label: 'Пароль', idx: 0 },
+              { label: 'Код', idx: 1 },
+              { label: 'Другой способ', idx: 2 },
+            ].map(({ label, idx }) => (
+              <Button
+                key={idx}
+                variant={tab === idx ? 'contained' : 'outlined'}
+                size="small"
+                sx={{ borderRadius: '24px', flex: 1, textTransform: 'none' }}
+                onClick={() => {
+                  setTab(idx)
+                  setMessage(null)
+                  setOauthError(null)
+                }}
+              >
+                {label}
+              </Button>
+            ))}
           </Stack>
 
-          <TextField label="Email" {...register('email')} fullWidth />
-
-          {isRegister && (
-            <TextField
-              label="Имя (необязательно)"
-              {...register('displayName')}
-              fullWidth
-              helperText="Если не указать, будет использована часть email до @"
-            />
+          {(errMsg || oauthError) && (
+            <Alert
+              severity="error"
+              variant="outlined"
+              sx={{ mb: 2 }}
+              onClose={() => {
+                setOauthError(null)
+              }}
+            >
+              {errMsg || oauthError}
+            </Alert>
+          )}
+          {message && (
+            <Alert severity="success" variant="outlined" sx={{ mb: 2 }} onClose={() => setMessage(null)}>
+              {message}
+            </Alert>
           )}
 
-          <TextField label="Пароль" type="password" {...register('password')} fullWidth />
+          {tab === 0 && (
+            <Stack spacing={2}>
+              <Stack direction="row" justifyContent="center" spacing={3}>
+                <Button
+                  variant="text"
+                  size="small"
+                  sx={{
+                    color: !isRegister ? 'primary.main' : 'text.secondary',
+                    borderBottom: !isRegister ? 2 : 0,
+                    borderColor: 'primary.main',
+                    borderRadius: 0,
+                    pb: 0.5,
+                    textTransform: 'none',
+                  }}
+                  onClick={() => setIsRegister(false)}
+                >
+                  Вход
+                </Button>
+                <Button
+                  variant="text"
+                  size="small"
+                  sx={{
+                    color: isRegister ? 'primary.main' : 'text.secondary',
+                    borderBottom: isRegister ? 2 : 0,
+                    borderColor: 'primary.main',
+                    borderRadius: 0,
+                    pb: 0.5,
+                    textTransform: 'none',
+                  }}
+                  onClick={() => setIsRegister(true)}
+                >
+                  Регистрация
+                </Button>
+              </Stack>
 
-          {isRegister && (
-            <TextField
-              label="Подтверждение пароля"
-              type="password"
-              {...register('passwordConfirm')}
-              fullWidth
-              error={Boolean(passwordError)}
-              helperText={passwordError}
-            />
+              <TextField
+                label="Email"
+                {...register('email')}
+                fullWidth
+                slotProps={{
+                  input: {
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <Mail size={18} />
+                      </InputAdornment>
+                    ),
+                  },
+                }}
+              />
+
+              {isRegister && (
+                <TextField
+                  label="Имя (необязательно)"
+                  {...register('displayName')}
+                  fullWidth
+                  helperText="Если не указать, будет использована часть email до @"
+                />
+              )}
+
+              <TextField
+                label="Пароль"
+                type="password"
+                {...register('password')}
+                fullWidth
+                slotProps={{
+                  input: {
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <Lock size={18} />
+                      </InputAdornment>
+                    ),
+                  },
+                }}
+              />
+
+              {isRegister && (
+                <TextField
+                  label="Подтверждение пароля"
+                  type="password"
+                  {...register('passwordConfirm')}
+                  fullWidth
+                  error={Boolean(passwordError)}
+                  helperText={passwordError}
+                />
+              )}
+
+              {isRegister ? (
+                <Button
+                  variant="contained"
+                  size="large"
+                  disabled={
+                    !email ||
+                    !password ||
+                    password.length < 8 ||
+                    (isRegister && password !== passwordConfirm) ||
+                    registerMutation.isPending
+                  }
+                  onClick={() => registerMutation.mutate()}
+                >
+                  Зарегистрироваться
+                </Button>
+              ) : (
+                <Button
+                  variant="contained"
+                  size="large"
+                  disabled={!email || !password || loginMutation.isPending}
+                  onClick={() => loginMutation.mutate()}
+                >
+                  Войти
+                </Button>
+              )}
+            </Stack>
           )}
 
-          {isRegister ? (
-            <Button
-              variant="contained"
-              disabled={
-                !email ||
-                !password ||
-                password.length < 8 ||
-                (isRegister && password !== passwordConfirm) ||
-                registerMutation.isPending
-              }
-              onClick={() => registerMutation.mutate()}
-            >
-              Зарегистрироваться
-            </Button>
-          ) : (
-            <Button
-              variant="contained"
-              disabled={!email || !password || loginMutation.isPending}
-              onClick={() => loginMutation.mutate()}
-            >
-              Войти
-            </Button>
+          {tab === 1 && (
+            <Stack spacing={2}>
+              <TextField
+                label="Email"
+                {...register('email')}
+                fullWidth
+                slotProps={{
+                  input: {
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <Mail size={18} />
+                      </InputAdornment>
+                    ),
+                  },
+                }}
+              />
+              <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+                <Button
+                  variant="outlined"
+                  onClick={() => requestCode.mutate()}
+                  disabled={!email || requestCode.isPending}
+                  sx={{ whiteSpace: 'nowrap' }}
+                >
+                  Отправить код
+                </Button>
+                <TextField label="Код (6 цифр)" inputMode="numeric" {...register('code')} sx={{ flex: 1 }} />
+                <Button
+                  variant="contained"
+                  onClick={() => verifyCode.mutate()}
+                  disabled={!email || code.length !== 6 || verifyCode.isPending}
+                  sx={{ whiteSpace: 'nowrap' }}
+                >
+                  Войти
+                </Button>
+              </Stack>
+            </Stack>
           )}
-        </Stack>
-      )}
 
-      {tab === 1 && (
-        <Stack spacing={2} sx={{ maxWidth: 520 }}>
-          <TextField label="Email" {...register('email')} fullWidth />
-          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-            <Button variant="outlined" onClick={() => requestCode.mutate()} disabled={!email || requestCode.isPending}>
-              Отправить код
-            </Button>
-            <TextField label="Код (6 цифр)" inputMode="numeric" {...register('code')} />
-            <Button
-              variant="contained"
-              onClick={() => verifyCode.mutate()}
-              disabled={!email || code.length !== 6 || verifyCode.isPending}
-            >
-              Войти
-            </Button>
-          </Stack>
-        </Stack>
-      )}
-
-      {tab === 2 && (
-        <Stack sx={{ maxWidth: 520 }}>
-          <OAuthButtons />
-        </Stack>
-      )}
+          {tab === 2 && (
+            <Stack spacing={2}>
+              <OAuthButtons />
+            </Stack>
+          )}
+        </Paper>
+      </Box>
     </Box>
   )
 }