login page

frontend/components/AccountSidebar.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import { usePathname } from 'next/navigation'
+import { AccountSidebarProps } from '@/app/types'
+import Logout from './Logout'
+import noPhoto from '../public/images/noPhoto.png'
+
+const AccountSidebar: React.FC<AccountSidebarProps> = ({
+  user,
+  navigation,
+}) => {
+  const pathname = usePathname()
+
+  if (!user) {
+    return null
+  }
+  const navigationItems = navigation
+
+  const getAccountTypeStyles = (accountType: string) => {
+    switch (accountType.toLowerCase()) {
+      case 'free':
+        return 'bg-gray-400 text-white'
+      case 'pro':
+        return 'bg-orage/70 text-white'
+      case 'premium':
+        return 'bg-blue-300'
+      default:
+        return 'bg-gray-200'
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center space-x-4 w-full bg-white rounded-2xl shadow p-4">
+        <div className="flex items-center justify-center">
+          {user.image ? (
+            <Image
+              src={user.image}
+              alt="Profile"
+              height={84}
+              width={84}
+              className="rounded-2xl w-full md:w-[84px] aspect-square object-cover"
+              priority
+            />
+          ) : (
+            <Image
+              src={noPhoto}
+              alt="Фотографии пока что нет"
+              height={84}
+              width={84}
+              priority
+              className="rounded-2xl w-full md:w-[84px] aspect-square object-cover"
+            />
+          )}
+        </div>
+        <div className="space-y-1">
+          <p className="text-xl font-bold">{user.name || 'Пользователь'}</p>
+          <p className="text-sm font-medium text-gray-500">
+            ID: {user.uuid || 'Not available'}
+          </p>
+          {user.account_type && (
+            <Link
+              href="payments/"
+              className={`${getAccountTypeStyles(
+                user.account_type
+              )} flex items-center justify-center py-1 px-3 text-sm rounded-lg`}
+            >
+              {user.account_type.charAt(0).toUpperCase() +
+                user.account_type.slice(1)}
+            </Link>
+          )}
+        </div>
+      </div>
+
+      <div className="w-full md:w-64 bg-white rounded-2xl shadow p-2">
+        <nav className="space-y-2">
+          {navigationItems.map((item) => {
+            const isActive = pathname === item.href
+            return (
+              <Link
+                key={item.name}
+                href={item.href}
+                className={`${
+                  isActive
+                    ? 'bg-mainblocks text-white'
+                    : 'text-gray-600 hover:bg-gray-100'
+                } flex items-center p-4 text-sm font-medium rounded-lg transition-colors`}
+              >
+                <item.icon
+                  className={`mr-3 h-5 w-5 ${
+                    isActive ? 'text-white' : 'text-gray-400'
+                  }`}
+                />
+                {item.name}
+              </Link>
+            )
+          })}
+        </nav>
+      </div>
+      <div className="w-full md:w-64 bg-white rounded-2xl shadow p-2">
+        <Logout />
+      </div>
+    </div>
+  )
+}
+
+export default AccountSidebar

frontend/components/Logout.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { useRouter } from 'next/navigation'
+import { signOut } from 'next-auth/react'
+import Button from './ui/Button'
+import { IoExitOutline } from 'react-icons/io5'
+import useUserStore from '@/app/store/userStore'
+
+const Logout = () => {
+  const API_URL = process.env.NEXT_PUBLIC_API_URL
+  const router = useRouter()
+
+  const handleLogout = async () => {
+    try {
+      // бекенд чистит куки
+      await fetch(`${API_URL}/logout`, {
+        method: 'POST',
+        credentials: 'include',
+      })
+
+      // чистим стор
+      useUserStore.getState().logout()
+
+      // если логин был гугловый
+      await signOut({ redirect: false })
+
+      // редирект
+      router.push('/')
+      router.refresh() // обновляем страницу чтобы обновить стейты
+    } catch (error) {
+      console.error('Logout error:', error)
+    }
+  }
+
+  return (
+    <Button
+      text="Выйти из аккаунта"
+      className="w-full text-sm font-medium text-gray-600 hover:bg-gray-100 px-4 py-4 flex items-center rounded-lg transition-colors"
+      onClick={handleLogout}
+    />
+  )
+}
+
+export default Logout

frontend/components/ui/Loader.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const Loader = () => {
+  return (
+    <div className="flex items-center justify-center p-8">
+      <div className="relative w-12 h-12">
+        {/* пульсирующие круги */}
+        <div className="absolute inset-0 rounded-full bg-orange/20 animate-ping"></div>
+        <div
+          className="absolute inset-2 rounded-full bg-orange/40 animate-ping"
+          style={{ animationDelay: '0.2s' }}
+        ></div>
+        <div className="absolute inset-4 rounded-full bg-orange animate-pulse"></div>
+        {/* бегущий блик */}
+        <div className="absolute inset-0 rounded-full bg-gradient-to-r from-transparent via-white/20 to-transparent animate-shimmer"></div>
+      </div>
+    </div>
+  )
+}
+
+export default Loader