new models, frontend functions, public pages

frontend/linktree-frontend/src/app/components/LayoutWrapper.tsx

@@ -0,0 +1,157 @@
+// src/components/LayoutWrapper.tsx
+'use client'
+
+import React, { ReactNode, useEffect, useState } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+import Link from 'next/link'
+import Image from 'next/image'
+import Script from 'next/script'
+
+interface User {
+  username: string
+  avatar: string
+}
+
+export function LayoutWrapper({ children }: { children: ReactNode }) {
+  const pathname = usePathname() || ''
+  const isPublicUserPage = /^\/[^\/]+$/.test(pathname)
+  const isDashboard = pathname === '/dashboard'
+  const [user, setUser] = useState<User | null>(null)
+  const router = useRouter()
+
+  // При монтировании пробуем загрузить профиль
+  useEffect(() => {
+    const token = localStorage.getItem('token')
+    if (token) {
+      fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/user/`, {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+        .then(res => {
+          if (!res.ok) throw new Error()
+          return res.json()
+        })
+        .then(data => {
+          // fullname или username
+          const name = data.full_name?.trim() || data.username
+          setUser({ username: name, avatar: data.avatar })
+        })
+        .catch(() => {
+          // сбросить некорректный токен
+          localStorage.removeItem('token')
+          setUser(null)
+        })
+    }
+  }, [])
+
+  const handleLogout = () => {
+    localStorage.removeItem('token')
+    router.push('/')
+  }
+
+  return (
+    <>
+      {/* Шапка не выводим на публичных страницах /[username] */}
+      {!isPublicUserPage && (
+        <nav className="navbar navbar-expand bg-light fixed-top shadow-sm">
+          <div className="container">
+            <Link href="/" className="navbar-brand d-flex align-items-center">
+              <Image
+                src="/assets/img/CAT.png"
+                alt="CatLink"
+                width={89}
+                height={89}
+              />
+              <span className="ms-2">CatLink</span>
+            </Link>
+            <button
+              className="navbar-toggler"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#navcol-1"
+            />
+            <div className="collapse navbar-collapse" id="navcol-1">
+              {!user && (
+                <Link href="/auth/login" className="btn btn-primary ms-auto">
+                  <i className="fa fa-user"></i>
+                  <span className="d-none d-sm-inline"> Вход</span>
+                </Link>
+              )}
+              {user && (
+                <div className="ms-auto d-flex align-items-center gap-3">
+                  <Image
+                    src={
+                      user.avatar.startsWith('http')
+                        ? user.avatar
+                        : `${process.env.NEXT_PUBLIC_API_URL}${user.avatar}`
+                    }
+                    alt="Avatar"
+                    width={32}
+                    height={32}
+                    className="rounded-circle"
+                  />
+                  <span>{user.username}</span>
+                  {!isDashboard && (
+                    <Link href="/dashboard" className="btn btn-outline-secondary btn-sm">
+                      Дашборд
+                    </Link>
+                  )}
+                  <button
+                    onClick={handleLogout}
+                    className="btn btn-outline-danger btn-sm"
+                  >
+                    Выход
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </nav>
+      )}
+
+      {/* отступ, чтобы контент не прятался под фиксированным хедером */}
+      {!isPublicUserPage && <div style={{ height: 70 }} />}
+
+      {children}
+
+      {/* Подвал не выводим на публичных страницах */}
+      {!isPublicUserPage && (
+        <footer className="bg-light footer fixed-bottom border-top">
+          <div className="container py-2">
+            <div className="row">
+              <div className="col-lg-6 text-center text-lg-start mb-2 mb-lg-0">
+                <ul className="list-inline mb-1">
+                  <li className="list-inline-item"><Link href="#">About</Link></li>
+                  <li className="list-inline-item">⋅</li>
+                  <li className="list-inline-item"><Link href="#">Contact</Link></li>
+                  <li className="list-inline-item">⋅</li>
+                  <li className="list-inline-item"><Link href="#">Terms of Use</Link></li>
+                  <li className="list-inline-item">⋅</li>
+                  <li className="list-inline-item"><Link href="#">Privacy Policy</Link></li>
+                </ul>
+                <p className="text-muted small mb-0">© CatLink 2025</p>
+              </div>
+              <div className="col-lg-6 text-center text-lg-end">
+                <ul className="list-inline mb-0">
+                  <li className="list-inline-item"><Link href="#"><i className="fa fa-facebook fa-lg fa-fw"></i></Link></li>
+                  <li className="list-inline-item"><Link href="#"><i className="fa fa-twitter fa-lg fa-fw"></i></Link></li>
+                  <li className="list-inline-item"><Link href="#"><i className="fa fa-instagram fa-lg fa-fw"></i></Link></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      )}
+
+      {/* Bootstrap JS */}
+      <Script
+        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
+        strategy="beforeInteractive"
+      />
+      <Script
+        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+        strategy="beforeInteractive"
+      />
+      <Script src="/assets/js/bs-init.js" strategy="lazyOnload" />
+    </>
+  )
+}

frontend/linktree-frontend/src/app/components/ProfileCard.tsx

@@ -1,77 +1,63 @@
-// src/components/ProfileCard.tsx
+// src/app/components/ProfileCard.tsx
 'use client'
 
+import React from 'react'
 import Image from 'next/image'
-import { format } from 'date-fns'
-import ru from 'date-fns/locale/ru'
 
-interface ProfileCardProps {
-  avatar: string       // API теперь отдаёт что-то вроде "frontend/assets/img/avatars/3.png"
+export interface ProfileCardProps {
+  avatar: string
   full_name: string
   email: string
   bio?: string
   last_login: string
   date_joined: string
+  totalGroups: number      // ← добавили
+  totalLinks: number       // ← добавили
 }
 
-export function ProfileCard({
+export const ProfileCard: React.FC<ProfileCardProps> = ({
   avatar,
   full_name,
   email,
   bio,
   last_login,
   date_joined,
-}: ProfileCardProps) {
-  // Если API отдаёт относительный путь без /media/, добавляем префикс:
-  const avatarSrc = avatar.startsWith('http')
-    ? avatar
-    : `${process.env.NEXT_PUBLIC_API_URL}/media/${avatar}`
-
-  const fmt = (iso: string) => {
-    try {
-      return format(new Date(iso), 'dd.MM.yyyy HH:mm', { locale: ru })
-    } catch {
-      return iso
-    }
-  }
-
+  totalGroups,
+  totalLinks,
+}) => {
   return (
-    <div
-      className="card shadow rounded mx-auto my-4"
-      style={{ maxWidth: 600 }}
-    >
-      <div className="card-body text-center">
-        {/* Avatar */}
-        <div className="mb-3">
-          <Image
-            className="rounded-circle border border-white"
-            src={avatarSrc}
-            alt="Avatar"
-            width={150}
-            height={150}
-          />
-        </div>
+    <div className="bg-white shadow rounded mx-auto mt-8" style={{ maxWidth: 600 }}>
+      <div
+        className="rounded-top"
+        style={{
+          backgroundImage: `url('/assets/img/iceland.jpg')`,
+          height: 150,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }}
+      />
+      <div className="text-center position-relative" style={{ marginTop: -75 }}>
+        <Image
+          className="rounded-circle border border-white"
+          src={avatar}
+          alt="Avatar"
+          width={150}
+          height={150}
+        />
+      </div>
+      <div className="px-4 pb-4 text-center">
+        <h3 className="mt-3">{full_name}</h3>
+        <p className="text-muted mb-2">{email}</p>
+        <p className="mb-3">{bio ?? 'Описание профиля отсутствует.'}</p>
 
-        {/* Full Name */}
-        <h3 className="mb-1">{full_name || '—'}</h3>
-
-        {/* Email */}
-        <p className="text-muted mb-3">{email}</p>
-
-        {/* Bio */}
-        <p className="mb-4">
-          {bio && bio.trim() ? bio : 'Описание профиля отсутствует.'}
-        </p>
-
-        {/* Даты регистрации и последнего входа */}
         <div className="d-flex justify-content-around">
-          <div className="text-start">
-            <p className="mb-1 small text-uppercase">Зарегистрирован</p>
-            <p className="mb-0">{fmt(date_joined)}</p>
+          <div>
+            <p className="mb-0 text-uppercase small">Всего групп</p>
+            <p className="fw-bold">{totalGroups}</p>
           </div>
-          <div className="text-end">
-            <p className="mb-1 small text-uppercase">Последний вход</p>
-            <p className="mb-0">{fmt(last_login)}</p>
+          <div>
+            <p className="mb-0 text-uppercase small">Всего ссылок</p>
+            <p className="fw-bold">{totalLinks}</p>
           </div>
         </div>
       </div>

frontend/linktree-frontend/src/app/components/modal.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { ReactNode, useEffect } from 'react'
+
+export function Modal({ children, onClose }: { children: ReactNode; onClose: () => void }) {
+  // Закрыть по Escape
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
+    document.addEventListener('keyup', onKey)
+    return () => document.removeEventListener('keyup', onKey)
+  }, [onClose])
+
+  return (
+    <>
+      <div
+        className="modal fade show"
+        style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}
+        onClick={onClose}
+      >
+        <div className="modal-dialog" onClick={(e) => e.stopPropagation()}>
+          <div className="modal-content p-3">
+            {children}
+          </div>
+        </div>
+      </div>
+      <div className="modal-backdrop fade show" />
+    </>
+  )
+}