feat: улучшена навигационная панель с полной интеграцией темы и локализации
Some checks failed
continuous-integration/drone/pr Build is failing
Some checks failed
continuous-integration/drone/pr Build is failing
- Обновлен LayoutWrapper с улучшенным UI навигации - Добавлен dropdown меню пользователя с аватаром - Интегрированы ThemeToggle и LanguageSelector в навигацию - Переключатели темы и языка теперь всегда видны - Добавлены флаги стран в селектор языков - Создана страница редактирования профиля /profile - Улучшены стили для темной темы в navbar - Добавлены CSS стили для навигации и профиля
This commit is contained in:
@@ -4,33 +4,36 @@ import { useLocale, Locale } from '../contexts/LocaleContext';
|
||||
const LanguageSelector: React.FC = () => {
|
||||
const { locale, setLocale, t } = useLocale();
|
||||
|
||||
const languages: Array<{ code: Locale; name: string }> = [
|
||||
{ code: 'en', name: 'English' },
|
||||
{ code: 'ru', name: 'Русский' },
|
||||
{ code: 'ko', name: '한국어' },
|
||||
{ code: 'zh', name: '中文' },
|
||||
{ code: 'ja', name: '日本語' },
|
||||
const languages: Array<{ code: Locale; name: string; flag: string }> = [
|
||||
{ code: 'en', name: 'English', flag: '🇺🇸' },
|
||||
{ code: 'ru', name: 'Русский', flag: '🇷🇺' },
|
||||
{ code: 'ko', name: '한국어', flag: '🇰🇷' },
|
||||
{ code: 'zh', name: '中文', flag: '🇨🇳' },
|
||||
{ code: 'ja', name: '日本語', flag: '🇯🇵' },
|
||||
];
|
||||
|
||||
const currentLanguage = languages.find(lang => lang.code === locale);
|
||||
|
||||
return (
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn btn-outline-secondary btn-sm dropdown-toggle"
|
||||
className="btn btn-outline-secondary btn-sm dropdown-toggle d-flex align-items-center"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
title={t('language.select')}
|
||||
>
|
||||
<i className="fas fa-globe me-1"></i>
|
||||
{languages.find(lang => lang.code === locale)?.name || 'Language'}
|
||||
<span className="me-1">{currentLanguage?.flag}</span>
|
||||
<span className="d-none d-lg-inline">{currentLanguage?.name}</span>
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
{languages.map((language) => (
|
||||
<li key={language.code}>
|
||||
<button
|
||||
className={`dropdown-item ${locale === language.code ? 'active' : ''}`}
|
||||
className={`dropdown-item d-flex align-items-center ${locale === language.code ? 'active' : ''}`}
|
||||
onClick={() => setLocale(language.code)}
|
||||
>
|
||||
<span className="me-2">{language.flag}</span>
|
||||
{language.name}
|
||||
</button>
|
||||
</li>
|
||||
|
||||
@@ -13,7 +13,10 @@ import LanguageSelector from './LanguageSelector'
|
||||
import '../layout.css'
|
||||
|
||||
interface User {
|
||||
id: number
|
||||
username: string
|
||||
email: string
|
||||
full_name: string
|
||||
avatar: string | null
|
||||
}
|
||||
|
||||
@@ -37,9 +40,14 @@ export function LayoutWrapper({ children }: { children: ReactNode }) {
|
||||
return res.json()
|
||||
})
|
||||
.then(data => {
|
||||
// fullname или username
|
||||
const name = data.full_name?.trim() || data.username
|
||||
setUser({ username: name, avatar: data.avatar })
|
||||
// Заполняем полную информацию о пользователе
|
||||
setUser({
|
||||
id: data.id,
|
||||
username: data.username,
|
||||
email: data.email,
|
||||
full_name: data.full_name || '',
|
||||
avatar: data.avatar
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
// сбросить некорректный токен
|
||||
@@ -61,62 +69,111 @@ export function LayoutWrapper({ children }: { children: ReactNode }) {
|
||||
<>
|
||||
{/* Шапка не выводим на публичных страницах /[username] */}
|
||||
{!isPublicUserPage && (
|
||||
<nav className="navbar navbar-expand bg-light fixed-top shadow-sm">
|
||||
<nav className="navbar navbar-expand-lg theme-bg-secondary fixed-top shadow-sm border-bottom theme-border">
|
||||
<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}
|
||||
width={32}
|
||||
height={32}
|
||||
className="me-2"
|
||||
/>
|
||||
<span className="ms-2">CatLink</span>
|
||||
<span className="fw-bold">CatLink</span>
|
||||
</Link>
|
||||
|
||||
<button
|
||||
className="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navcol-1"
|
||||
title={t('common.menu')}
|
||||
/>
|
||||
>
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<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"> {t('common.login')}</span>
|
||||
</Link>
|
||||
)}
|
||||
{user && (
|
||||
<div className="ms-auto d-flex align-items-center gap-3">
|
||||
<ThemeToggle />
|
||||
<LanguageSelector />
|
||||
<Image
|
||||
src={
|
||||
user.avatar && user.avatar.startsWith('http')
|
||||
? user.avatar
|
||||
: user.avatar
|
||||
? `${process.env.NEXT_PUBLIC_API_URL || 'https://links.shareon.kr'}${user.avatar}`
|
||||
: '/assets/img/avatar-dhg.png'
|
||||
}
|
||||
alt="Avatar"
|
||||
width={32}
|
||||
height={32}
|
||||
className="rounded-circle"
|
||||
/>
|
||||
<span>{user.username}</span>
|
||||
{!isDashboard && (
|
||||
<Link href="/dashboard" className="btn btn-outline-secondary btn-sm">
|
||||
{/* Левое меню */}
|
||||
<ul className="navbar-nav me-auto">
|
||||
{user && (
|
||||
<li className="nav-item">
|
||||
<Link href="/dashboard" className="nav-link">
|
||||
<i className="fas fa-tachometer-alt me-1"></i>
|
||||
{t('dashboard.title')}
|
||||
</Link>
|
||||
)}
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="btn btn-outline-danger btn-sm"
|
||||
>
|
||||
{t('common.logout')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
|
||||
{/* Правое меню */}
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
{/* Переключатели темы и языка всегда видны */}
|
||||
<ThemeToggle />
|
||||
<LanguageSelector />
|
||||
|
||||
{!user ? (
|
||||
<div className="d-flex gap-2 ms-2">
|
||||
<Link href="/auth/login" className="btn btn-outline-primary btn-sm">
|
||||
<i className="fas fa-sign-in-alt me-1"></i>
|
||||
<span className="d-none d-sm-inline">{t('common.login')}</span>
|
||||
</Link>
|
||||
<Link href="/auth/register" className="btn btn-primary btn-sm">
|
||||
<i className="fas fa-user-plus me-1"></i>
|
||||
<span className="d-none d-sm-inline">{t('common.register')}</span>
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="dropdown ms-2">
|
||||
<button
|
||||
className="btn btn-link text-decoration-none d-flex align-items-center dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<Image
|
||||
src={
|
||||
user.avatar && user.avatar.startsWith('http')
|
||||
? user.avatar
|
||||
: user.avatar
|
||||
? `${process.env.NEXT_PUBLIC_API_URL || 'https://links.shareon.kr'}${user.avatar}`
|
||||
: '/assets/img/avatar-dhg.png'
|
||||
}
|
||||
alt="Avatar"
|
||||
width={32}
|
||||
height={32}
|
||||
className="rounded-circle me-2"
|
||||
/>
|
||||
<span className="text-dark fw-medium d-none d-md-inline">
|
||||
{user.full_name?.trim() || user.username}
|
||||
</span>
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<Link href="/profile" className="dropdown-item">
|
||||
<i className="fas fa-user me-2"></i>
|
||||
{t('profile.edit')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/dashboard" className="dropdown-item">
|
||||
<i className="fas fa-tachometer-alt me-2"></i>
|
||||
{t('dashboard.title')}
|
||||
</Link>
|
||||
</li>
|
||||
<li><hr className="dropdown-divider" /></li>
|
||||
<li>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="dropdown-item text-danger"
|
||||
>
|
||||
<i className="fas fa-sign-out-alt me-2"></i>
|
||||
{t('common.logout')}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import React from 'react'
|
||||
import { useTheme } from '../contexts/ThemeContext'
|
||||
import { useLocale } from '../contexts/LocaleContext'
|
||||
|
||||
interface ThemeToggleProps {
|
||||
className?: string
|
||||
@@ -10,19 +11,22 @@ interface ThemeToggleProps {
|
||||
|
||||
export const ThemeToggle: React.FC<ThemeToggleProps> = ({
|
||||
className = '',
|
||||
showLabel = true
|
||||
showLabel = false
|
||||
}) => {
|
||||
const { theme, toggleTheme } = useTheme()
|
||||
const { t } = useLocale()
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className={`btn btn-outline-secondary d-flex align-items-center ${className}`}
|
||||
title={theme === 'light' ? 'Переключить на темную тему' : 'Переключить на светлую тему'}
|
||||
className={`btn btn-outline-secondary btn-sm d-flex align-items-center ${className}`}
|
||||
title={theme === 'light' ? t('theme.dark') : t('theme.light')}
|
||||
>
|
||||
<i className={`bi ${theme === 'light' ? 'bi-moon' : 'bi-sun'} ${showLabel ? 'me-2' : ''}`}></i>
|
||||
<i className={`fas ${theme === 'light' ? 'fa-moon' : 'fa-sun'} ${showLabel ? 'me-2' : ''}`}></i>
|
||||
{showLabel && (
|
||||
<span>{theme === 'light' ? 'Темная тема' : 'Светлая тема'}</span>
|
||||
<span className="d-none d-lg-inline">
|
||||
{theme === 'light' ? t('theme.dark') : t('theme.light')}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
|
||||
@@ -1,4 +1,51 @@
|
||||
/* Layout spacing */
|
||||
.navbar-spacing {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
/* Navbar improvements */
|
||||
.navbar-brand {
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.navbar .dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border: none;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: var(--bs-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dropdown-item.text-danger:hover {
|
||||
background-color: var(--bs-danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Theme aware navbar */
|
||||
.navbar-expand-lg {
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Profile page styles */
|
||||
.profile-avatar {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-cover {
|
||||
max-height: 200px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
311
frontend/linktree-frontend/src/app/profile/page.tsx
Normal file
311
frontend/linktree-frontend/src/app/profile/page.tsx
Normal file
@@ -0,0 +1,311 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useLocale } from '../contexts/LocaleContext'
|
||||
|
||||
interface UserProfile {
|
||||
id: number
|
||||
username: string
|
||||
email: string
|
||||
full_name: string
|
||||
bio: string
|
||||
avatar: string | null
|
||||
cover: string | null
|
||||
}
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { t } = useLocale()
|
||||
const router = useRouter()
|
||||
const [profile, setProfile] = useState<UserProfile | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [avatarFile, setAvatarFile] = useState<File | null>(null)
|
||||
const [coverFile, setCoverFile] = useState<File | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
loadProfile()
|
||||
}, [])
|
||||
|
||||
const loadProfile = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
if (!token) {
|
||||
router.push('/auth/login')
|
||||
return
|
||||
}
|
||||
|
||||
const response = await fetch('/api/auth/user', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load profile')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
setProfile(data)
|
||||
} catch (error) {
|
||||
console.error('Error loading profile:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!profile) return
|
||||
|
||||
setSaving(true)
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const formData = new FormData()
|
||||
|
||||
formData.append('username', profile.username)
|
||||
formData.append('email', profile.email)
|
||||
formData.append('full_name', profile.full_name)
|
||||
formData.append('bio', profile.bio)
|
||||
|
||||
if (avatarFile) {
|
||||
formData.append('avatar', avatarFile)
|
||||
}
|
||||
|
||||
if (coverFile) {
|
||||
formData.append('cover', coverFile)
|
||||
}
|
||||
|
||||
const response = await fetch('/api/auth/user', {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: formData
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
const updatedProfile = await response.json()
|
||||
setProfile(updatedProfile)
|
||||
// Очистить выбранные файлы
|
||||
setAvatarFile(null)
|
||||
setCoverFile(null)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving profile:', error)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const removeAvatar = () => {
|
||||
if (profile) {
|
||||
setProfile({ ...profile, avatar: null })
|
||||
}
|
||||
}
|
||||
|
||||
const removeCover = () => {
|
||||
if (profile) {
|
||||
setProfile({ ...profile, cover: null })
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="container mt-4">
|
||||
<div className="d-flex justify-content-center">
|
||||
<div className="spinner-border" role="status">
|
||||
<span className="visually-hidden">{t('common.loading')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!profile) {
|
||||
return (
|
||||
<div className="container mt-4">
|
||||
<div className="alert alert-danger">
|
||||
{t('common.error')}: Profile not found
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mt-4">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-md-8">
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<h4 className="mb-0">
|
||||
<i className="fas fa-user me-2"></i>
|
||||
{t('profile.edit')}
|
||||
</h4>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<form onSubmit={handleSubmit}>
|
||||
{/* Avatar */}
|
||||
<div className="mb-4 text-center">
|
||||
<div className="mb-3">
|
||||
<img
|
||||
src={
|
||||
avatarFile
|
||||
? URL.createObjectURL(avatarFile)
|
||||
: profile.avatar
|
||||
? `${process.env.NEXT_PUBLIC_API_URL || 'https://links.shareon.kr'}${profile.avatar}`
|
||||
: '/assets/img/avatar-dhg.png'
|
||||
}
|
||||
alt="Avatar"
|
||||
className="rounded-circle profile-avatar"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</div>
|
||||
<div className="d-flex gap-2 justify-content-center">
|
||||
<label className="btn btn-outline-primary btn-sm">
|
||||
<i className="fas fa-camera me-1"></i>
|
||||
{t('profile.avatar')}
|
||||
<input
|
||||
type="file"
|
||||
className="d-none"
|
||||
accept="image/*"
|
||||
onChange={(e) => setAvatarFile(e.target.files?.[0] || null)}
|
||||
/>
|
||||
</label>
|
||||
{(profile.avatar || avatarFile) && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-danger btn-sm"
|
||||
onClick={removeAvatar}
|
||||
>
|
||||
<i className="fas fa-times me-1"></i>
|
||||
{t('profile.removeAvatar')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cover Image */}
|
||||
<div className="mb-4">
|
||||
<label className="form-label">{t('profile.cover')}</label>
|
||||
{(profile.cover || coverFile) && (
|
||||
<div className="mb-2">
|
||||
<img
|
||||
src={
|
||||
coverFile
|
||||
? URL.createObjectURL(coverFile)
|
||||
: `${process.env.NEXT_PUBLIC_API_URL || 'https://links.shareon.kr'}${profile.cover}`
|
||||
}
|
||||
alt="Cover"
|
||||
className="img-fluid rounded profile-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="d-flex gap-2">
|
||||
<label className="btn btn-outline-primary btn-sm">
|
||||
<i className="fas fa-image me-1"></i>
|
||||
{profile.cover ? t('common.update') : t('common.add')}
|
||||
<input
|
||||
type="file"
|
||||
className="d-none"
|
||||
accept="image/*"
|
||||
onChange={(e) => setCoverFile(e.target.files?.[0] || null)}
|
||||
/>
|
||||
</label>
|
||||
{(profile.cover || coverFile) && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-danger btn-sm"
|
||||
onClick={removeCover}
|
||||
>
|
||||
<i className="fas fa-times me-1"></i>
|
||||
{t('profile.removeCover')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Basic Info */}
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<div className="mb-3">
|
||||
<label className="form-label">{t('profile.username')}</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={profile.username}
|
||||
onChange={(e) => setProfile({ ...profile, username: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="mb-3">
|
||||
<label className="form-label">{t('profile.email')}</label>
|
||||
<input
|
||||
type="email"
|
||||
className="form-control"
|
||||
value={profile.email}
|
||||
onChange={(e) => setProfile({ ...profile, email: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label">{t('profile.fullName')}</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={profile.full_name}
|
||||
onChange={(e) => setProfile({ ...profile, full_name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="form-label">{t('profile.bio')}</label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
rows={4}
|
||||
value={profile.bio}
|
||||
onChange={(e) => setProfile({ ...profile, bio: e.target.value })}
|
||||
placeholder={t('profile.bio')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="d-flex justify-content-between">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<i className="fas fa-arrow-left me-2"></i>
|
||||
{t('common.back')}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<span className="spinner-border spinner-border-sm me-2"></span>
|
||||
{t('common.saving')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="fas fa-save me-2"></i>
|
||||
{t('common.save')}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user