lorsan/Aether
1
0
Fork 0
mirror of https://github.com/lorsanstand/Aether.git synced 2026-06-19 12:05:16 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add docker

Browse Source
This commit is contained in:
lorsan
2026-01-10 17:51:08 +03:00
parent 62d33acde9
commit 8167c77a27
36 changed files with 1351 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/ProfilePage.tsx
+275 -44
View File
@@ -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"
>
Удалить аккаунт