Add docker

2026-06-19 20:15:16 +03:00 · 2026-01-10 17:51:08 +03:00
parent 62d33acde9
commit 8167c77a27
36 changed files with 1351 additions and 117 deletions
@@ -1,12 +1,15 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { useEffect } from 'react';
 import { useAuthStore } from './store/authStore';
+import { useThemeStore } from './store/themeStore';
 import { authService } from './services/authService';
 import AuthPage from './pages/AuthPage';
 import VerifyEmailPage from './pages/VerifyEmailPage';
 import ResetPasswordPage from './pages/ResetPasswordPage';
+import ForgotPasswordPage from './pages/ForgotPasswordPage';
 import ChatPage from './pages/ChatPage';
 import ProfilePage from './pages/ProfilePage';
+import SettingsPage from './pages/SettingsPage';

 function PrivateRoute({ children }: { children: React.ReactNode }) {
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
@@ -26,6 +29,12 @@ function PrivateRoute({ children }: { children: React.ReactNode }) {
 function App() {
  const setUser = useAuthStore((state) => state.setUser);
  const setLoading = useAuthStore((state) => state.setLoading);
+  const theme = useThemeStore((state) => state.theme);
+
+  useEffect(() => {
+    // Apply theme on mount
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);

  useEffect(() => {
    const checkAuth = async () => {
@@ -48,6 +57,7 @@ function App() {
        <Route path="/auth" element={<AuthPage />} />
        <Route path="/verify-email/:token" element={<VerifyEmailPage />} />
        <Route path="/reset-password/:token" element={<ResetPasswordPage />} />
+        <Route path="/forgot-password" element={<ForgotPasswordPage />} />
        <Route
          path="/chat"
          element={
@@ -64,6 +74,14 @@ function App() {
            </PrivateRoute>
          }
        />
+        <Route
+          path="/settings"
+          element={
+            <PrivateRoute>
+              <SettingsPage />
+            </PrivateRoute>
+          }
+        />
        <Route path="/" element={<Navigate to="/chat" />} />
      </Routes>
    </BrowserRouter>
@@ -21,7 +21,7 @@ export default function LoginForm() {
    setIsLoading(true);

    try {
-      const data = await authService.login({ username, password });
+      await authService.login({ username, password });
      const user = await authService.getCurrentUser();
      setUser(user);
      navigate('/chat');
@@ -55,9 +55,14 @@ export default function LoginForm() {
          <label htmlFor="password" className="block font-lora italic text-[15px] text-text-muted">
            Пароль
          </label>
-          <a href="#" className="font-inter text-sm hover:underline transition" style={{ color: '#6B705C' }}>
+          <button
+            type="button"
+            onClick={() => navigate('/forgot-password')}
+            className="font-inter text-sm hover:underline transition"
+            style={{ color: 'var(--accent-primary)' }}
+          >
            Забыли пароль?
-          </a>
+          </button>
        </div>
        <div className="relative">
          <input
@@ -6,6 +6,7 @@ import { authService } from '../../services/authService';

 export default function RegisterForm() {
  const [email, setEmail] = useState('');
+  const [displayName, setDisplayName] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
@@ -35,7 +36,7 @@ export default function RegisterForm() {
    setIsLoading(true);

    try {
-      await authService.register({ email, username, password });
+      await authService.register({ email, display_name: displayName, username, password });
      setSuccess('Регистрация успешна! Проверьте почту для подтверждения.');
      setTimeout(() => navigate('/auth'), 2000);
    } catch (err: any) {
@@ -63,6 +64,21 @@ export default function RegisterForm() {
        />
      </div>

+      <div>
+        <label htmlFor="displayName" className="block font-lora italic text-[15px] text-text-muted mb-2">
+          Имя для отображения
+        </label>
+        <input
+          id="displayName"
+          type="text"
+          value={displayName}
+          onChange={(e) => setDisplayName(e.target.value)}
+          placeholder="Как вас называть"
+          className="w-full px-0 py-3 bg-transparent border-0 border-b-2 border-gray-200 font-inter text-text-main placeholder:text-text-muted/50 focus:outline-none focus:border-accent-terracotta transition-all duration-300"
+          required
+        />
+      </div>
+
      <div>
        <label htmlFor="username" className="block font-lora italic text-[15px] text-text-muted mb-2">
          Никнейм
@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Mail, X } from 'lucide-react';
+import { authService } from '../../services/authService';
+
+interface VerificationBannerProps {
+  userEmail: string;
+}
+
+export default function VerificationBanner({ userEmail }: VerificationBannerProps) {
+  const [isVisible, setIsVisible] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const [message, setMessage] = useState('');
+  const [isSuccess, setIsSuccess] = useState(false);
+
+  const handleResendEmail = async () => {
+    setIsLoading(true);
+    setMessage('');
+
+    try {
+      await authService.resendVerificationEmail();
+      setIsSuccess(true);
+      setMessage('Письмо успешно отправлено! Проверьте свою почту.');
+      setTimeout(() => {
+        setMessage('');
+      }, 5000);
+    } catch (err: any) {
+      setIsSuccess(false);
+      setMessage(err.response?.data?.detail || 'Ошибка отправки письма');
+      setTimeout(() => {
+        setMessage('');
+      }, 5000);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -20 }}
+        className="mb-6 relative rounded-2xl p-4 shadow-sm"
+        style={{ 
+          backgroundColor: 'var(--accent-primary-soft)',
+          border: '2px solid var(--accent-primary)'
+        }}
+      >
+        <button
+          onClick={() => setIsVisible(false)}
+          className="absolute top-3 right-3 p-1 hover:opacity-70 transition"
+          style={{ color: 'var(--accent-primary)' }}
+          title="Закрыть"
+        >
+          <X size={18} />
+        </button>
+
+        <div className="flex items-start gap-3 pr-8">
+          <div className="flex-shrink-0 p-2 rounded-full" style={{ backgroundColor: 'var(--accent-primary)' }}>
+            <Mail size={20} className="text-white" />
+          </div>
+
+          <div className="flex-1">
+            <h3 className="font-inter font-semibold mb-1" style={{ color: 'var(--accent-primary)' }}>
+              Подтвердите свою почту
+            </h3>
+            <p className="text-sm font-inter mb-3" style={{ color: 'var(--text-primary)' }}>
+              Мы отправили письмо с подтверждением на <span className="font-semibold">{userEmail}</span>. 
+              Проверьте почту и перейдите по ссылке для активации аккаунта.
+            </p>
+
+            {message && (
+              <motion.div
+                initial={{ opacity: 0, y: -5 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="mb-3 text-sm font-inter"
+                style={{ 
+                  color: isSuccess ? 'var(--accent-primary)' : 'var(--error-color)'
+                }}
+              >
+                {message}
+              </motion.div>
+            )}
+
+            <motion.button
+              onClick={handleResendEmail}
+              disabled={isLoading}
+              whileTap={{ scale: 0.98 }}
+              className="px-4 py-2 rounded-full font-inter text-sm font-semibold transition hover:shadow-md disabled:opacity-50"
+              style={{ 
+                backgroundColor: 'var(--accent-primary)',
+                color: 'white'
+              }}
+            >
+              {isLoading ? 'Отправка...' : 'Отправить письмо повторно'}
+            </motion.button>
+          </div>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}
@@ -2,6 +2,45 @@
@tailwind components;
@tailwind utilities;

+/* Light Theme (Default) */
+:root,
+[data-theme='light'] {
+  --bg-primary: #F5F5F1;
+  --bg-card: #FFFFFF;
+  --bg-input: #F9F9F7;
+  --bg-input-disabled: #EFEFEF;
+  
+  --accent-primary: #6B705C;
+  --accent-primary-soft: rgba(107, 112, 92, 0.1);
+  --accent-secondary: #D27D56;
+  
+  --text-primary: #2C2C2C;
+  --text-secondary: #8B8B8B;
+  
+  --border-color: #E5E5E5;
+  --error-color: #C79A8B;
+  --error-soft: rgba(199, 154, 139, 0.1);
+}
+
+/* Dark Theme */
+[data-theme='dark'] {
+  --bg-primary: #1a1a1a;
+  --bg-card: #242424;
+  --bg-input: #2d2d2d;
+  --bg-input-disabled: #1f1f1f;
+  
+  --accent-primary: #8B9176;
+  --accent-primary-soft: rgba(139, 145, 118, 0.15);
+  --accent-secondary: #E29574;
+  
+  --text-primary: #E5E5E5;
+  --text-secondary: #A8A8A8;
+  
+  --border-color: #3a3a3a;
+  --error-color: #D89B8E;
+  --error-soft: rgba(216, 155, 142, 0.15);
+}
+
 body {
  margin: 0;
  min-height: 100vh;
@@ -10,5 +49,8 @@ body {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-  color: #2C2C2C;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
+
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import LoginForm from '../components/auth/LoginForm';
 import RegisterForm from '../components/auth/RegisterForm';
+import miniLogo from '../assets/mini-logo.png';

 export default function AuthPage() {
  const [isLogin, setIsLogin] = useState(true);
@@ -25,8 +26,8 @@ export default function AuthPage() {
        <div className="bg-card-white rounded-[32px] shadow-soft px-10 py-12">
          {/* Logo */}
          <div className="text-center mb-8">
-            <div className="auth-logo w-[100px] h-[100px] mx-auto mb-8 rounded-full bg-gradient-to-br from-accent-terracotta to-accent-olive flex items-center justify-center text-white text-4xl font-lora shadow-logo border-[3px] border-[#EBEBE6]">
-              A
+            <div className="auth-logo w-[100px] h-[100px] mx-auto mb-8 flex items-center justify-center">
+              <img src={miniLogo} alt="Aether Logo" className="w-full h-full object-contain" />
            </div>
            <div className="font-lora text-accent-olive text-lg tracking-[2px] mb-6">
              AETHER
@@ -1,53 +1,144 @@
 import { useAuthStore } from '../store/authStore';
 import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { MessageSquarePlus, Settings, User } from 'lucide-react';
+import miniLogo from '../assets/mini-logo.png';
+import VerificationBanner from '../components/common/VerificationBanner';

 export default function ChatPage() {
  const user = useAuthStore((state) => state.user);
-  const logout = useAuthStore((state) => state.logout);
  const navigate = useNavigate();

-  const handleLogout = async () => {
-    // TODO: Call logout API
-    logout();
-    window.location.href = '/auth';
-  };
-
  return (
-    <div className="min-h-screen bg-gray-100">
-      <div className="h-screen flex">
-        {/* Sidebar */}
-        <div className="w-80 bg-card-white border-r border-gray-200">
-          <div className="p-4 border-b border-gray-200">
-            <h1 className="text-2xl font-lora font-semibold text-accent-olive">Aether</h1>
-          </div>
-          
+    <div className="min-h-screen h-screen flex" style={{ backgroundColor: 'var(--bg-primary)' }}>
+      {/* Sidebar */}
+      <div className="w-80 flex flex-col shadow-soft" style={{ backgroundColor: 'var(--bg-card)' }}>
+        {/* Header */}
+        <div className="p-6 border-b" style={{ borderColor: 'var(--border-color)' }}>
+          <h1 className="text-3xl font-lora font-semibold text-center tracking-wider" style={{ color: 'var(--accent-primary)' }}>
+            AETHER
+          </h1>
+        </div>
+
+        {/* Verification Banner */}
+        {user && !user.is_verified && (
          <div className="p-4">
-            <p className="text-sm text-text-muted font-inter">Привет, {user?.username}!</p>
-            <button
+            <VerificationBanner userEmail={user.email} />
+          </div>
+        )}
+
+        {/* User Profile Section */}
+        <div className="p-6 border-b" style={{ borderColor: 'var(--border-color)' }}>
+          <div className="flex items-center gap-4">
+            {/* Avatar */}
+            <div
+              className="w-14 h-14 flex items-center justify-center flex-shrink-0 cursor-pointer hover:opacity-90 transition"
+              style={{
+                backgroundImage: user?.avatar_url ? `url(${user.avatar_url})` : undefined,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                borderRadius: user?.avatar_url ? '50%' : '0',
+              }}
              onClick={() => navigate('/profile')}
-              className="mt-2 text-sm text-accent-olive hover:opacity-70 font-inter block"
+              title="Перейти в профиль"
            >
-              Мой профиль
-            </button>
+              {!user?.avatar_url && (
+                <img src={miniLogo} alt="Avatar" className="w-full h-full object-contain" />
+              )}
+            </div>
+
+            {/* User Info */}
+            <div className="flex-1 min-w-0">
+              <h3 className="font-inter font-semibold truncate" style={{ color: 'var(--text-primary)' }}>
+                {user?.display_name || user?.username}
+              </h3>
+              <p className="text-sm font-inter truncate" style={{ color: 'var(--text-secondary)' }}>
+                @{user?.username}
+              </p>
+            </div>
+
+            {/* Settings Icon */}
            <button
-              onClick={handleLogout}
-              className="mt-2 text-sm text-error-soft hover:text-red-700 font-inter"
+              onClick={() => navigate('/settings')}
+              className="p-2 hover:bg-gray-100 rounded-full transition"
+              title="Настройки"
            >
-              Выйти
+              <Settings size={20} style={{ color: 'var(--text-secondary)' }} />
            </button>
          </div>

-          <div className="flex-1 overflow-y-auto">
-            <div className="p-4 text-center text-text-muted font-inter">
-              Чаты скоро появятся...
+          {/* Action Button */}
+          <div className="mt-4">
+            <motion.button
+              onClick={() => navigate('/profile')}
+              whileTap={{ scale: 0.95 }}
+              className="w-full flex items-center justify-center gap-2 py-2 px-3 rounded-xl font-inter text-sm font-medium transition hover:opacity-80"
+              style={{ backgroundColor: 'var(--bg-input)', color: 'var(--accent-primary)' }}
+            >
+              <User size={16} />
+              Профиль
+            </motion.button>
+          </div>
+        </div>
+
+        {/* New Chat Button */}
+        <div className="p-4">
+          <motion.button
+            whileTap={{ scale: 0.98 }}
+            className="w-full flex items-center justify-center gap-3 py-3 px-4 rounded-2xl font-inter font-semibold shadow-sm hover:shadow-md transition"
+            style={{ backgroundColor: 'var(--accent-primary)', color: 'white' }}
+          >
+            <MessageSquarePlus size={20} />
+            Новый чат
+          </motion.button>
+        </div>
+
+        {/* Chats List */}
+        <div className="flex-1 overflow-y-auto px-4">
+          <div className="space-y-2">
+            {/* Placeholder for future chats */}
+            <div className="text-center py-12 px-4">
+              <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-br from-accent-terracotta/20 to-accent-olive/20 flex items-center justify-center">
+                <MessageSquarePlus size={32} style={{ color: 'var(--accent-primary)', opacity: 0.5 }} />
+              </div>
+              <p className="font-inter text-sm" style={{ color: 'var(--text-secondary)' }}>
+                Пока нет чатов
+              </p>
+              <p className="font-inter text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
+                Начните новый диалог
+              </p>
            </div>
          </div>
        </div>

-        {/* Main Chat Area */}
-        <div className="flex-1 flex flex-col">
-          <div className="flex-1 flex items-center justify-center text-text-muted font-inter">
-            Выберите чат или начните новый
+        {/* Footer Info */}
+        <div className="p-4 border-t text-center" style={{ borderColor: 'var(--border-color)' }}>
+          <p className="text-xs font-inter" style={{ color: 'var(--text-secondary)' }}>
+            Aether Chat v1.0
+          </p>
+        </div>
+      </div>
+
+      {/* Main Chat Area */}
+      <div className="flex-1 flex flex-col">
+        {/* Empty State */}
+        <div className="flex-1 flex items-center justify-center p-8">
+          <div className="text-center max-w-md">
+            <motion.div
+              initial={{ scale: 0.9, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ duration: 0.3 }}
+            >
+              <div className="w-32 h-32 mx-auto mb-6 flex items-center justify-center">
+                <img src={miniLogo} alt="Aether Logo" className="w-full h-full object-contain" />
+              </div>
+              <h2 className="text-2xl font-lora font-semibold mb-3" style={{ color: 'var(--text-primary)' }}>
+                Добро пожаловать в Aether
+              </h2>
+              <p className="font-inter" style={{ color: 'var(--text-secondary)' }}>
+                Выберите существующий чат из списка слева или создайте новый, чтобы начать общение
+              </p>
+            </motion.div>
          </div>
        </div>
      </div>
@@ -0,0 +1,152 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { ArrowLeft } from 'lucide-react';
+import { authService } from '../services/authService';
+import miniLogo from '../assets/mini-logo.png';
+
+export default function ForgotPasswordPage() {
+  const navigate = useNavigate();
+  const [username, setUsername] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    try {
+      await authService.requestPasswordReset(username);
+      setSuccess(true);
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'Ошибка отправки письма');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 relative" style={{ backgroundColor: 'var(--bg-primary)' }}>
+      {/* Subtle texture background */}
+      <div className="absolute inset-0 opacity-30 pointer-events-none"
+           style={{ 
+             backgroundImage: 'radial-gradient(circle at center, rgba(0,0,0,0.03) 1%, transparent 1%)',
+             backgroundSize: '20px 20px'
+           }}>
+      </div>
+
+      <motion.div 
+        className="w-full max-w-md relative z-10"
+        initial={{ scale: 0.95, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+      >
+        <div className="rounded-[32px] shadow-soft p-8" style={{ backgroundColor: 'var(--bg-card)' }}>
+          <div className="text-center mb-8">
+            <div className="w-20 h-20 mx-auto mb-4 flex items-center justify-center">
+              <img src={miniLogo} alt="Aether Logo" className="w-full h-full object-contain" />
+            </div>
+            <div className="font-lora text-lg tracking-[2px] mb-6" style={{ color: 'var(--accent-primary)' }}>
+              AETHER
+            </div>
+            <h2 className="text-xl font-lora font-semibold" style={{ color: 'var(--text-primary)' }}>
+              Восстановление пароля
+            </h2>
+            <p className="mt-2 text-sm font-inter" style={{ color: 'var(--text-secondary)' }}>
+              Введите почту или никнейм для получения ссылки на сброс пароля
+            </p>
+          </div>
+
+          {!success ? (
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div>
+                <label htmlFor="username" className="block font-lora italic text-[15px] mb-2" style={{ color: 'var(--text-secondary)' }}>
+                  Почта или никнейм
+                </label>
+                <input
+                  id="username"
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder="example@mail.com"
+                  autoFocus
+                  className="w-full px-0 py-3 bg-transparent border-0 border-b-2 font-inter placeholder:text-text-muted/50 focus:outline-none transition-all duration-300"
+                  style={{ 
+                    color: 'var(--text-primary)',
+                    borderColor: 'var(--border-color)',
+                  }}
+                  required
+                />
+              </div>
+
+              {error && (
+                <motion.div 
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="p-3 rounded-xl text-sm font-inter"
+                  style={{
+                    backgroundColor: 'var(--error-soft)',
+                    color: 'var(--error-color)',
+                    border: '2px solid var(--error-color)',
+                  }}
+                >
+                  {error}
+                </motion.div>
+              )}
+
+              <motion.button
+                type="submit"
+                disabled={isLoading}
+                whileTap={{ scale: 0.95 }}
+                style={{ backgroundColor: 'var(--accent-primary)', color: 'white' }}
+                className="w-full mt-8 py-[18px] px-10 rounded-full font-inter font-semibold uppercase tracking-wider hover:shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isLoading ? 'Отправка...' : 'Отправить ссылку'}
+              </motion.button>
+
+              <div className="text-center">
+                <button
+                  type="button"
+                  onClick={() => navigate('/auth')}
+                  className="flex items-center gap-2 mx-auto font-inter text-sm hover:opacity-70 transition"
+                  style={{ color: 'var(--accent-primary)' }}
+                >
+                  <ArrowLeft size={16} />
+                  Вернуться к входу
+                </button>
+              </div>
+            </form>
+          ) : (
+            <motion.div 
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              className="text-center space-y-4"
+            >
+              <div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto"
+                   style={{ backgroundColor: 'var(--accent-primary-soft)' }}>
+                <svg className="w-8 h-8" style={{ color: 'var(--accent-primary)' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-lora font-semibold" style={{ color: 'var(--text-primary)' }}>
+                Письмо отправлено!
+              </h3>
+              <p className="text-sm font-inter" style={{ color: 'var(--text-secondary)' }}>
+                Проверьте почту и следуйте инструкциям для сброса пароля
+              </p>
+              <motion.button
+                onClick={() => navigate('/auth')}
+                whileTap={{ scale: 0.95 }}
+                className="mt-4 px-6 py-3 rounded-full font-inter font-semibold transition hover:shadow-lg"
+                style={{ backgroundColor: 'var(--accent-primary)', color: 'white' }}
+              >
+                Вернуться к входу
+              </motion.button>
+            </motion.div>
+          )}
+        </div>
+      </motion.div>
+    </div>
+  );
+}
@@ -1,10 +1,13 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
-import { Camera, Trash2, LogOut, ArrowLeft } from 'lucide-react';
+import { Camera, Trash2, LogOut, ArrowLeft, Settings, Eye, EyeOff } from 'lucide-react';
 import { userService } from '../services/userService';
 import type { UserUpdate } from '../services/userService';
 import { useAuthStore } from '../store/authStore';
+import { authService } from '../services/authService';
+import miniLogo from '../assets/mini-logo.png';
+import VerificationBanner from '../components/common/VerificationBanner';

 export default function ProfilePage() {
  const navigate = useNavigate();
@@ -16,6 +19,15 @@ export default function ProfilePage() {
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

+  const [isChangingPassword, setIsChangingPassword] = useState(false);
+  const [oldPassword, setOldPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [showOldPassword, setShowOldPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [passwordError, setPasswordError] = useState('');
+  const [passwordSuccess, setPasswordSuccess] = useState('');
+
  const [formData, setFormData] = useState<UserUpdate>({
    display_name: user?.display_name || '',
    username: user?.username || '',
@@ -104,55 +116,106 @@ export default function ProfilePage() {
    }
  };

+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setPasswordError('');
+    setPasswordSuccess('');
+
+    if (newPassword !== confirmPassword) {
+      setPasswordError('Пароли не совпадают');
+      return;
+    }
+
+    if (newPassword.length < 8) {
+      setPasswordError('Пароль должен быть минимум 8 символов');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      await authService.changePassword(oldPassword, newPassword);
+      setPasswordSuccess('Пароль успешно изменен');
+      setOldPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+      setIsChangingPassword(false);
+      setTimeout(() => setPasswordSuccess(''), 3000);
+    } catch (err: any) {
+      setPasswordError(err.response?.data?.detail || 'Ошибка изменения пароля');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
  if (!user) return null;

  return (
-    <div className="min-h-screen" style={{ backgroundColor: '#F5F5F1' }}>
+    <div className="min-h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
      <div className="max-w-4xl mx-auto p-6">
        {/* Header */}
        <div className="mb-6 flex items-center justify-between">
          <button
            onClick={() => navigate('/chat')}
            className="flex items-center gap-2 font-inter font-medium hover:opacity-70 transition"
-            style={{ color: '#6B705C' }}
+            style={{ color: 'var(--accent-primary)' }}
          >
            <ArrowLeft size={20} />
            Назад к чатам
          </button>
-          <button
-            onClick={handleLogout}
-            className="flex items-center gap-2 font-inter font-medium hover:opacity-70 transition"
-            style={{ color: '#C79A8B' }}
-          >
-            <LogOut size={20} />
-            Выйти
-          </button>
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => navigate('/settings')}
+              className="flex items-center gap-2 font-inter font-medium hover:opacity-70 transition"
+              style={{ color: 'var(--text-secondary)' }}
+              title="Настройки"
+            >
+              <Settings size={20} />
+            </button>
+            <button
+              onClick={handleLogout}
+              className="flex items-center gap-2 font-inter font-medium hover:opacity-70 transition"
+              style={{ color: 'var(--error-color)' }}
+            >
+              <LogOut size={20} />
+              Выйти
+            </button>
+          </div>
        </div>

+        {/* Verification Banner */}
+        {!user.is_verified && (
+          <VerificationBanner userEmail={user.email} />
+        )}
+
        {/* Profile Card */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
-          className="bg-white rounded-3xl shadow-soft p-8"
+          className="rounded-3xl shadow-soft p-8"
+          style={{ backgroundColor: 'var(--bg-card)' }}
        >
          {/* Avatar Section */}
          <div className="flex flex-col items-center mb-8">
            <div className="relative">
              <div
-                className="w-32 h-32 rounded-full bg-gradient-to-br from-accent-terracotta to-accent-olive flex items-center justify-center text-white text-4xl font-lora shadow-logo overflow-hidden"
+                className="w-32 h-32 flex items-center justify-center overflow-hidden"
                style={{
                  backgroundImage: user.avatar_url ? `url(${user.avatar_url})` : undefined,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
+                  borderRadius: user.avatar_url ? '50%' : '0',
                }}
              >
-                {!user.avatar_url && user.username[0].toUpperCase()}
+                {!user.avatar_url && (
+                  <img src={miniLogo} alt="Avatar" className="w-full h-full object-contain" />
+                )}
              </div>
              
              <label
                htmlFor="avatar-upload"
                className="absolute bottom-0 right-0 p-2 rounded-full cursor-pointer hover:opacity-80 transition"
-                style={{ backgroundColor: '#6B705C' }}
+                style={{ backgroundColor: 'var(--accent-primary)' }}
              >
                <Camera size={20} className="text-white" />
                <input
@@ -170,7 +233,7 @@ export default function ProfilePage() {
                  type="button"
                  onClick={handleDeleteAvatar}
                  className="absolute bottom-0 left-0 p-2 rounded-full hover:opacity-80 transition"
-                  style={{ backgroundColor: '#C79A8B' }}
+                  style={{ backgroundColor: 'var(--error-color)' }}
                  disabled={isLoading}
                >
                  <Trash2 size={20} className="text-white" />
@@ -178,10 +241,10 @@ export default function ProfilePage() {
              )}
            </div>

-            <h1 className="mt-4 text-2xl font-lora font-semibold" style={{ color: '#2C2C2C' }}>
+            <h1 className="mt-4 text-2xl font-lora font-semibold" style={{ color: 'var(--text-primary)' }}>
              {user.username}
            </h1>
-            <p className="font-inter text-sm" style={{ color: '#8B8B8B' }}>
+            <p className="font-inter text-sm" style={{ color: 'var(--text-secondary)' }}>
              {user.email}
            </p>
          </div>
@@ -190,7 +253,7 @@ export default function ProfilePage() {
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
-                <label className="block font-lora italic text-[15px] mb-2" style={{ color: '#8B8B8B' }}>
+                <label className="block font-lora italic text-[15px] mb-2" style={{ color: 'var(--text-secondary)' }}>
                  Имя для отображения
                </label>
                <input
@@ -200,15 +263,15 @@ export default function ProfilePage() {
                  disabled={!isEditing}
                  className="w-full px-4 py-3 rounded-xl font-inter transition-all"
                  style={{
-                    backgroundColor: isEditing ? '#F9F9F7' : '#EFEFEF',
-                    color: '#2C2C2C',
+                    backgroundColor: isEditing ? 'var(--bg-input)' : 'var(--bg-input-disabled)',
+                    color: 'var(--text-primary)',
                    border: '2px solid transparent',
                  }}
                />
              </div>

              <div>
-                <label className="block font-lora italic text-[15px] mb-2" style={{ color: '#8B8B8B' }}>
+                <label className="block font-lora italic text-[15px] mb-2" style={{ color: 'var(--text-secondary)' }}>
                  Никнейм
                </label>
                <input
@@ -218,15 +281,15 @@ export default function ProfilePage() {
                  disabled={!isEditing}
                  className="w-full px-4 py-3 rounded-xl font-inter transition-all"
                  style={{
-                    backgroundColor: isEditing ? '#F9F9F7' : '#EFEFEF',
-                    color: '#2C2C2C',
+                    backgroundColor: isEditing ? 'var(--bg-input)' : 'var(--bg-input-disabled)',
+                    color: 'var(--text-primary)',
                    border: '2px solid transparent',
                  }}
                />
              </div>

              <div>
-                <label className="block font-lora italic text-[15px] mb-2" style={{ color: '#8B8B8B' }}>
+                <label className="block font-lora italic text-[15px] mb-2" style={{ color: 'var(--text-secondary)' }}>
                  Дата рождения
                </label>
                <input
@@ -236,8 +299,8 @@ export default function ProfilePage() {
                  disabled={!isEditing}
                  className="w-full px-4 py-3 rounded-xl font-inter transition-all"
                  style={{
-                    backgroundColor: isEditing ? '#F9F9F7' : '#EFEFEF',
-                    color: '#2C2C2C',
+                    backgroundColor: isEditing ? 'var(--bg-input)' : 'var(--bg-input-disabled)',
+                    color: 'var(--text-primary)',
                    border: '2px solid transparent',
                  }}
                />
@@ -245,7 +308,7 @@ export default function ProfilePage() {
            </div>

            <div>
-              <label className="block font-lora italic text-[15px] mb-2" style={{ color: '#8B8B8B' }}>
+              <label className="block font-lora italic text-[15px] mb-2" style={{ color: 'var(--text-secondary)' }}>
                О себе
              </label>
              <textarea
@@ -255,8 +318,8 @@ export default function ProfilePage() {
                rows={4}
                className="w-full px-4 py-3 rounded-xl font-inter transition-all resize-none"
                style={{
-                  backgroundColor: isEditing ? '#F9F9F7' : '#EFEFEF',
-                  color: '#2C2C2C',
+                  backgroundColor: isEditing ? 'var(--bg-input)' : 'var(--bg-input-disabled)',
+                  color: 'var(--text-primary)',
                  border: '2px solid transparent',
                }}
                placeholder="Расскажите о себе..."
@@ -269,9 +332,9 @@ export default function ProfilePage() {
                animate={{ opacity: 1, y: 0 }}
                className="p-3 rounded-xl text-sm font-inter"
                style={{
-                  backgroundColor: 'rgba(199, 154, 139, 0.1)',
-                  color: '#C79A8B',
-                  border: '2px solid #C79A8B',
+                  backgroundColor: 'var(--error-soft)',
+                  color: 'var(--error-color)',
+                  border: '2px solid var(--error-color)',
                }}
              >
                {error}
@@ -284,9 +347,9 @@ export default function ProfilePage() {
                animate={{ opacity: 1, y: 0 }}
                className="p-3 rounded-xl text-sm font-inter"
                style={{
-                  backgroundColor: 'rgba(107, 112, 92, 0.1)',
-                  color: '#6B705C',
-                  border: '2px solid #6B705C',
+                  backgroundColor: 'var(--accent-primary-soft)',
+                  color: 'var(--accent-primary)',
+                  border: '2px solid var(--accent-primary)',
                }}
              >
                {success}
@@ -297,9 +360,12 @@ export default function ProfilePage() {
              {!isEditing ? (
                <motion.button
                  type="button"
-                  onClick={() => setIsEditing(true)}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setIsEditing(true);
+                  }}
                  whileTap={{ scale: 0.95 }}
-                  style={{ backgroundColor: '#6B705C', color: 'white' }}
+                  style={{ backgroundColor: 'var(--accent-primary)', color: 'white' }}
                  className="flex-1 py-3 px-6 rounded-full font-inter font-semibold hover:shadow-lg transition-all"
                >
                  Редактировать профиль
@@ -310,19 +376,29 @@ export default function ProfilePage() {
                    type="submit"
                    disabled={isLoading}
                    whileTap={{ scale: 0.95 }}
-                    style={{ backgroundColor: '#6B705C', color: 'white' }}
+                    style={{ backgroundColor: 'var(--accent-primary)', color: 'white' }}
                    className="flex-1 py-3 px-6 rounded-full font-inter font-semibold hover:shadow-lg transition-all disabled:opacity-50"
                  >
                    {isLoading ? 'Сохранение...' : 'Сохранить'}
                  </motion.button>
                  <motion.button
                    type="button"
-                    onClick={() => {
+                    onClick={(e) => {
+                      e.preventDefault();
                      setIsEditing(false);
                      setError('');
+                      // Восстанавливаем оригинальные данные при отмене
+                      if (user) {
+                        setFormData({
+                          display_name: user.display_name || '',
+                          username: user.username,
+                          description: user.description || '',
+                          birth_day: user.birth_day || '',
+                        });
+                      }
                    }}
                    whileTap={{ scale: 0.95 }}
-                    style={{ backgroundColor: '#8B8B8B', color: 'white' }}
+                    style={{ backgroundColor: 'var(--text-secondary)', color: 'white' }}
                    className="flex-1 py-3 px-6 rounded-full font-inter font-semibold hover:shadow-lg transition-all"
                  >
                    Отмена
@@ -332,15 +408,170 @@ export default function ProfilePage() {
            </div>
          </form>

+          {/* Password Change Section */}
+          <div className="mt-8 pt-8 border-t" style={{ borderColor: 'var(--border-color)' }}>
+            <h3 className="font-lora font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
+              Безопасность
+            </h3>
+
+            {!isChangingPassword ? (
+              <motion.button
+                type="button"
+                onClick={() => setIsChangingPassword(true)}
+                whileTap={{ scale: 0.95 }}
+                className="py-3 px-6 rounded-full font-inter font-semibold transition hover:shadow-lg"
+                style={{ backgroundColor: 'var(--bg-input)', color: 'var(--accent-primary)' }}
+              >
+                Изменить пароль
+              </motion.button>
+            ) : (
+              <form onSubmit={handleChangePassword} className="space-y-4">
+                <div>
+                  <label className="block font-lora italic text-[15px] mb-2" style={{ color: 'var(--text-secondary)' }}>
+                    Старый пароль
+                  </label>
+                  <div className="relative">
+                    <input
+                      type={showOldPassword ? 'text' : 'password'}
+                      value={oldPassword}
+                      onChange={(e) => setOldPassword(e.target.value)}
+                      className="w-full px-4 py-3 pr-12 rounded-xl font-inter transition-all"
+                      style={{
+                        backgroundColor: 'var(--bg-input)',
+                        color: 'var(--text-primary)',
+                        border: '2px solid transparent',
+                      }}
+                      required
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowOldPassword(!showOldPassword)}
+                      className="absolute right-4 top-1/2 -translate-y-1/2"
+                      style={{ color: 'var(--text-secondary)' }}
+                    >
+                      {showOldPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+                    </button>
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block font-lora italic text-[15px] mb-2" style={{ color: 'var(--text-secondary)' }}>
+                    Новый пароль
+                  </label>
+                  <div className="relative">
+                    <input
+                      type={showNewPassword ? 'text' : 'password'}
+                      value={newPassword}
+                      onChange={(e) => setNewPassword(e.target.value)}
+                      placeholder="Минимум 8 символов"
+                      className="w-full px-4 py-3 pr-12 rounded-xl font-inter transition-all"
+                      style={{
+                        backgroundColor: 'var(--bg-input)',
+                        color: 'var(--text-primary)',
+                        border: '2px solid transparent',
+                      }}
+                      required
+                      minLength={8}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowNewPassword(!showNewPassword)}
+                      className="absolute right-4 top-1/2 -translate-y-1/2"
+                      style={{ color: 'var(--text-secondary)' }}
+                    >
+                      {showNewPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+                    </button>
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block font-lora italic text-[15px] mb-2" style={{ color: 'var(--text-secondary)' }}>
+                    Подтвердите новый пароль
+                  </label>
+                  <input
+                    type={showNewPassword ? 'text' : 'password'}
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    placeholder="Повторите новый пароль"
+                    className="w-full px-4 py-3 rounded-xl font-inter transition-all"
+                    style={{
+                      backgroundColor: 'var(--bg-input)',
+                      color: 'var(--text-primary)',
+                      border: '2px solid transparent',
+                    }}
+                    required
+                  />
+                </div>
+
+                {passwordError && (
+                  <motion.div
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="p-3 rounded-xl text-sm font-inter"
+                    style={{
+                      backgroundColor: 'var(--error-soft)',
+                      color: 'var(--error-color)',
+                      border: '2px solid var(--error-color)',
+                    }}
+                  >
+                    {passwordError}
+                  </motion.div>
+                )}
+
+                {passwordSuccess && (
+                  <motion.div
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="p-3 rounded-xl text-sm font-inter"
+                    style={{
+                      backgroundColor: 'var(--accent-primary-soft)',
+                      color: 'var(--accent-primary)',
+                      border: '2px solid var(--accent-primary)',
+                    }}
+                  >
+                    {passwordSuccess}
+                  </motion.div>
+                )}
+
+                <div className="flex gap-4">
+                  <motion.button
+                    type="submit"
+                    disabled={isLoading}
+                    whileTap={{ scale: 0.95 }}
+                    className="flex-1 py-3 px-6 rounded-full font-inter font-semibold transition hover:shadow-lg disabled:opacity-50"
+                    style={{ backgroundColor: 'var(--accent-primary)', color: 'white' }}
+                  >
+                    {isLoading ? 'Сохранение...' : 'Изменить пароль'}
+                  </motion.button>
+                  <motion.button
+                    type="button"
+                    onClick={() => {
+                      setIsChangingPassword(false);
+                      setOldPassword('');
+                      setNewPassword('');
+                      setConfirmPassword('');
+                      setPasswordError('');
+                    }}
+                    whileTap={{ scale: 0.95 }}
+                    className="flex-1 py-3 px-6 rounded-full font-inter font-semibold transition hover:shadow-lg"
+                    style={{ backgroundColor: 'var(--text-secondary)', color: 'white' }}
+                  >
+                    Отмена
+                  </motion.button>
+                </div>
+              </form>
+            )}
+          </div>
+
          {/* Danger Zone */}
-          <div className="mt-8 pt-8 border-t" style={{ borderColor: '#E5E5E5' }}>
-            <h3 className="font-lora font-semibold mb-4" style={{ color: '#C79A8B' }}>
+          <div className="mt-8 pt-8 border-t" style={{ borderColor: 'var(--border-color)' }}>
+            <h3 className="font-lora font-semibold mb-4" style={{ color: 'var(--error-color)' }}>
              Опасная зона
            </h3>
            <motion.button
              onClick={handleDeleteAccount}
              whileTap={{ scale: 0.95 }}
-              style={{ backgroundColor: '#C79A8B', color: 'white' }}
+              style={{ backgroundColor: 'var(--error-color)', color: 'white' }}
              className="py-3 px-6 rounded-full font-inter font-semibold hover:shadow-lg transition-all"
            >
              Удалить аккаунт
@@ -3,6 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { Eye, EyeOff } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { authService } from '../services/authService';
+import miniLogo from '../assets/mini-logo.png';

 export default function ResetPasswordPage() {
  const { token } = useParams<{ token: string }>();
@@ -70,8 +71,8 @@ export default function ResetPasswordPage() {
      >
        <div className="bg-card-white rounded-[32px] shadow-soft p-8">
          <div className="text-center mb-8">
-            <div className="w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-accent-terracotta to-accent-olive flex items-center justify-center text-white text-3xl font-lora shadow-logo border-[3px] border-[#EBEBE6]">
-              A
+            <div className="w-20 h-20 mx-auto mb-4 flex items-center justify-center">
+              <img src={miniLogo} alt="Aether Logo" className="w-full h-full object-contain" />
            </div>
            <div className="font-lora text-lg tracking-[2px] mb-6" style={{ color: '#6B705C' }}>
              AETHER
@@ -0,0 +1,125 @@
+import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { ArrowLeft, Moon, Sun } from 'lucide-react';
+import { useThemeStore } from '../store/themeStore';
+
+export default function SettingsPage() {
+  const navigate = useNavigate();
+  const { theme, setTheme } = useThemeStore();
+
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
+      <div className="max-w-4xl mx-auto p-6">
+        {/* Header */}
+        <div className="mb-6">
+          <button
+            onClick={() => navigate('/chat')}
+            className="flex items-center gap-2 font-inter font-medium hover:opacity-70 transition"
+            style={{ color: 'var(--accent-primary)' }}
+          >
+            <ArrowLeft size={20} />
+            Назад к чатам
+          </button>
+        </div>
+
+        {/* Settings Card */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="rounded-3xl shadow-soft p-8"
+          style={{ backgroundColor: 'var(--bg-card)' }}
+        >
+          <h1 className="text-3xl font-lora font-semibold mb-8" style={{ color: 'var(--text-primary)' }}>
+            Настройки
+          </h1>
+
+          {/* Appearance Section */}
+          <div className="space-y-6">
+            <div>
+              <h2 className="text-xl font-lora font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
+                Внешний вид
+              </h2>
+
+              {/* Theme Selector */}
+              <div className="space-y-3">
+                <label className="block font-lora italic text-[15px] mb-3" style={{ color: 'var(--text-secondary)' }}>
+                  Тема оформления
+                </label>
+
+                <div className="grid grid-cols-2 gap-4">
+                  {/* Light Theme */}
+                  <motion.button
+                    whileTap={{ scale: 0.98 }}
+                    onClick={() => setTheme('light')}
+                    className="relative p-6 rounded-2xl border-2 transition-all"
+                    style={{
+                      backgroundColor: theme === 'light' ? 'var(--accent-primary-soft)' : 'var(--bg-input)',
+                      borderColor: theme === 'light' ? 'var(--accent-primary)' : 'transparent',
+                    }}
+                  >
+                    <div className="flex flex-col items-center gap-3">
+                      <div className="w-16 h-16 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center shadow-lg">
+                        <Sun size={32} className="text-white" />
+                      </div>
+                      <span className="font-inter font-semibold" style={{ color: 'var(--text-primary)' }}>
+                        Светлая тема
+                      </span>
+                      {theme === 'light' && (
+                        <motion.div
+                          initial={{ scale: 0 }}
+                          animate={{ scale: 1 }}
+                          className="absolute top-3 right-3 w-6 h-6 rounded-full flex items-center justify-center"
+                          style={{ backgroundColor: 'var(--accent-primary)' }}
+                        >
+                          <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                          </svg>
+                        </motion.div>
+                      )}
+                    </div>
+                  </motion.button>
+
+                  {/* Dark Theme */}
+                  <motion.button
+                    whileTap={{ scale: 0.98 }}
+                    onClick={() => setTheme('dark')}
+                    className="relative p-6 rounded-2xl border-2 transition-all"
+                    style={{
+                      backgroundColor: theme === 'dark' ? 'var(--accent-primary-soft)' : 'var(--bg-input)',
+                      borderColor: theme === 'dark' ? 'var(--accent-primary)' : 'transparent',
+                    }}
+                  >
+                    <div className="flex flex-col items-center gap-3">
+                      <div className="w-16 h-16 rounded-full bg-gradient-to-br from-indigo-600 to-purple-700 flex items-center justify-center shadow-lg">
+                        <Moon size={32} className="text-white" />
+                      </div>
+                      <span className="font-inter font-semibold" style={{ color: 'var(--text-primary)' }}>
+                        Темная тема
+                      </span>
+                      {theme === 'dark' && (
+                        <motion.div
+                          initial={{ scale: 0 }}
+                          animate={{ scale: 1 }}
+                          className="absolute top-3 right-3 w-6 h-6 rounded-full flex items-center justify-center"
+                          style={{ backgroundColor: 'var(--accent-primary)' }}
+                        >
+                          <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                          </svg>
+                        </motion.div>
+                      )}
+                    </div>
+                  </motion.button>
+                </div>
+
+                <p className="text-sm font-inter mt-3" style={{ color: 'var(--text-secondary)' }}>
+                  Выберите тему, которая лучше всего подходит для ваших глаз
+                </p>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { authService } from '../services/authService';
+import miniLogo from '../assets/mini-logo.png';

 export default function VerifyEmailPage() {
  const { token } = useParams<{ token: string }>();
@@ -41,6 +42,9 @@ export default function VerifyEmailPage() {
      >
        <div className="bg-card-white rounded-[32px] shadow-soft p-8 text-center">
          <div className="mb-6">
+            <div className="w-20 h-20 mx-auto mb-4 flex items-center justify-center">
+              <img src={miniLogo} alt="Aether Logo" className="w-full h-full object-contain" />
+            </div>
            <h1 className="text-2xl font-lora font-semibold text-accent-olive mb-2">Aether</h1>
          </div>

@@ -11,14 +11,17 @@ const apiClient = axios.create({
 });

 let isRefreshing = false;
-let failedQueue: any[] = [];
+let failedQueue: Array<{
+  resolve: (value?: any) => void;
+  reject: (reason?: any) => void;
+}> = [];

-const processQueue = (error: any, token: string | null = null) => {
+const processQueue = (error: any = null) => {
  failedQueue.forEach(prom => {
    if (error) {
      prom.reject(error);
    } else {
-      prom.resolve(token);
+      prom.resolve();
    }
  });
  
@@ -31,8 +34,14 @@ apiClient.interceptors.response.use(
  async (error) => {
    const originalRequest = error.config;

-    // Если ошибка 401 и это не запрос на refresh и не повторный запрос
-    if (error.response?.status === 401 && !originalRequest._retry && originalRequest.url !== '/auth/refresh') {
+    // Если ошибка 401 и запрос ещё не повторялся
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      // Если это сам запрос на refresh - редирект на логин
+      if (originalRequest.url?.includes('/auth/refresh')) {
+        isRefreshing = false;
+        window.location.href = '/auth';
+        return Promise.reject(error);
+      }
      
      // Проверяем, находимся ли на публичной странице
      const publicPaths = ['/auth', '/verify-email', '/reset-password'];
@@ -43,8 +52,8 @@ apiClient.interceptors.response.use(
        return Promise.reject(error);
      }

+      // Если refresh уже в процессе, добавляем запрос в очередь
      if (isRefreshing) {
-        // Если refresh уже в процессе, добавляем запрос в очередь
        return new Promise((resolve, reject) => {
          failedQueue.push({ resolve, reject });
        })
@@ -63,14 +72,15 @@ apiClient.interceptors.response.use(
        // Пытаемся обновить токен
        await apiClient.post('/auth/refresh');
        
-        // Если успешно, обрабатываем очередь и повторяем оригинальный запрос
-        processQueue(null, 'refreshed');
+        // Если успешно, обрабатываем очередь
+        processQueue();
        isRefreshing = false;
        
+        // Повторяем оригинальный запрос с обновленным токеном
        return apiClient(originalRequest);
      } catch (refreshError) {
        // Если refresh не удался, очищаем очередь и редиректим на логин
-        processQueue(refreshError, null);
+        processQueue(refreshError);
        isRefreshing = false;
        
        window.location.href = '/auth';
@@ -8,6 +8,7 @@ export interface LoginData {

 export interface RegisterData {
  email: string;
+  display_name: string;
  username: string;
  password: string;
 }
@@ -41,6 +42,11 @@ export const authService = {
    return response.data;
  },

+  resendVerificationEmail: async () => {
+    const response = await apiClient.post('/auth/email/resend-verification');
+    return response.data;
+  },
+
  resetPassword: async (token: string, newPassword: string) => {
    const response = await apiClient.post(`/auth/password/reset/${token}`, null, {
      params: { new_password: newPassword }
@@ -48,6 +54,21 @@ export const authService = {
    return response.data;
  },

+  requestPasswordReset: async (username_email: string) => {
+    const response = await apiClient.post('/auth/password/reset', null, {
+      params: { username_email }
+    });
+    return response.data;
+  },
+
+  changePassword: async (oldPassword: string, newPassword: string) => {
+    const response = await apiClient.post('/auth/password/change', {
+      old_password: oldPassword,
+      new_password: newPassword
+    });
+    return response.data;
+  },
+
  getCurrentUser: async (): Promise<User> => {
    const response = await apiClient.get('/users/me');
    return response.data;
@@ -0,0 +1,31 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export type Theme = 'light' | 'dark';
+
+interface ThemeStore {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+}
+
+export const useThemeStore = create<ThemeStore>()(
+  persist(
+    (set) => ({
+      theme: 'light',
+      setTheme: (theme) => {
+        set({ theme });
+        document.documentElement.setAttribute('data-theme', theme);
+      },
+      toggleTheme: () =>
+        set((state) => {
+          const newTheme = state.theme === 'light' ? 'dark' : 'light';
+          document.documentElement.setAttribute('data-theme', newTheme);
+          return { theme: newTheme };
+        }),
+    }),
+    {
+      name: 'theme-storage',
+    }
+  )
+);