Implement profile

frontend/src/ui/components/chat/ChatHeader.tsx

@@ -1,19 +1,32 @@
 import { PRODUCT_NAME } from "../../../core/config";
 import { useDialog } from "../../contexts/DialogContext";
+import { useProfile } from "../../hooks/useProfile";
+import defaultAvatar from "../../../resources/images/default-avatar.png";
 
 export function ChatHeader() {
     const { openProfile } = useDialog();
+    const { profileData } = useProfile();
 
     const handleProfileClick = () => {
         openProfile();
     };
 
+    const profilePictureUrl = profileData?.profile_picture || defaultAvatar;
+
     return (
         <header className="chat-header-left">
             <div className="product-name">{PRODUCT_NAME}</div>
             <div className="profile">
                 <a href="#" id="profile-open" onClick={handleProfileClick}>
-                    <img src="./src/resources/images/default-avatar.png" alt="" id="preview1" />
+                    <img 
+                        src={profilePictureUrl} 
+                        alt="" 
+                        id="preview1"
+                        onError={(e) => {
+                            const target = e.target as HTMLImageElement;
+                            target.src = defaultAvatar;
+                        }}
+                    />
                 </a>
             </div>
         </header>

frontend/src/ui/components/profile/ImageCropper.tsx

@@ -0,0 +1,168 @@
+import { useEffect, useRef, useState } from "react";
+
+interface ImageCropperProps {
+    onCrop: (croppedImageData: string) => void;
+    onCancel: () => void;
+    imageFile: File | null;
+}
+
+export function ImageCropper({ onCrop, onCancel, imageFile }: ImageCropperProps) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const imageRef = useRef<HTMLImageElement>(null);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [cropArea, setCropArea] = useState({ x: 0, y: 0, width: 200, height: 200 });
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+
+    useEffect(() => {
+        if (!imageFile) return;
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            if (imageRef.current) {
+                imageRef.current.src = e.target?.result as string;
+                imageRef.current.onload = () => {
+                    setIsLoaded(true);
+                    // Initialize crop area to center of image
+                    if (imageRef.current) {
+                        const img = imageRef.current;
+                        const size = Math.min(img.naturalWidth, img.naturalHeight) * 0.8;
+                        setCropArea({
+                            x: (img.naturalWidth - size) / 2,
+                            y: (img.naturalHeight - size) / 2,
+                            width: size,
+                            height: size
+                        });
+                    }
+                };
+            }
+        };
+        reader.readAsDataURL(imageFile);
+    }, [imageFile]);
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+        if (!isLoaded) return;
+        
+        const rect = canvasRef.current?.getBoundingClientRect();
+        if (!rect) return;
+
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        
+        // Check if click is within crop area
+        if (x >= cropArea.x && x <= cropArea.x + cropArea.width &&
+            y >= cropArea.y && y <= cropArea.y + cropArea.height) {
+            setIsDragging(true);
+            setDragStart({ x: x - cropArea.x, y: y - cropArea.y });
+        }
+    };
+
+    const handleMouseMove = (e: React.MouseEvent) => {
+        if (!isDragging || !isLoaded) return;
+
+        const rect = canvasRef.current?.getBoundingClientRect();
+        if (!rect || !imageRef.current) return;
+
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+
+        const newX = Math.max(0, Math.min(x - dragStart.x, imageRef.current.naturalWidth - cropArea.width));
+        const newY = Math.max(0, Math.min(y - dragStart.y, imageRef.current.naturalHeight - cropArea.height));
+
+        setCropArea(prev => ({ ...prev, x: newX, y: newY }));
+    };
+
+    const handleMouseUp = () => {
+        setIsDragging(false);
+    };
+
+    const handleCrop = () => {
+        if (!canvasRef.current || !imageRef.current || !isLoaded) return;
+
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        // Set canvas size to crop area
+        canvas.width = cropArea.width;
+        canvas.height = cropArea.height;
+
+        // Draw cropped portion
+        ctx.drawImage(
+            imageRef.current,
+            cropArea.x, cropArea.y, cropArea.width, cropArea.height,
+            0, 0, cropArea.width, cropArea.height
+        );
+
+        // Convert to data URL
+        const croppedImageData = canvas.toDataURL('image/jpeg', 0.9);
+        onCrop(croppedImageData);
+    };
+
+    const drawCropArea = () => {
+        if (!canvasRef.current || !imageRef.current || !isLoaded) return;
+
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Draw image
+        ctx.drawImage(imageRef.current, 0, 0, canvas.width, canvas.height);
+
+        // Draw crop overlay
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        // Clear crop area
+        ctx.globalCompositeOperation = 'destination-out';
+        ctx.fillRect(cropArea.x, cropArea.y, cropArea.width, cropArea.height);
+
+        // Draw crop border
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 2;
+        ctx.strokeRect(cropArea.x, cropArea.y, cropArea.width, cropArea.height);
+    };
+
+    useEffect(() => {
+        drawCropArea();
+    }, [cropArea, isLoaded]);
+
+    if (!imageFile) return null;
+
+    return (
+        <div className="cropper-container">
+            <canvas
+                ref={canvasRef}
+                width={400}
+                height={400}
+                style={{ 
+                    cursor: isDragging ? 'grabbing' : 'grab',
+                    border: '1px solid #ccc',
+                    maxWidth: '100%',
+                    height: 'auto'
+                }}
+                onMouseDown={handleMouseDown}
+                onMouseMove={handleMouseMove}
+                onMouseUp={handleMouseUp}
+                onMouseLeave={handleMouseUp}
+            />
+            <img
+                ref={imageRef}
+                style={{ display: 'none' }}
+                alt="Crop source"
+            />
+            <div className="cropper-actions">
+                <mdui-button onClick={handleCrop} disabled={!isLoaded}>
+                    Обрезать
+                </mdui-button>
+                <mdui-button variant="outlined" onClick={onCancel}>
+                    Отмена
+                </mdui-button>
+            </div>
+        </div>
+    );
+}

frontend/src/ui/components/profile/ProfileDialog.tsx

@@ -1,55 +1,179 @@
-import { useState, type FormEvent } from "react";
+import { useState, useEffect, useRef, type FormEvent } from "react";
 import defaultAvatar from "../../../resources/images/default-avatar.png";
 import type { TextField } from "mdui/components/text-field";
 import type { DialogProps } from "../../../core/types";
 import { MaterialDialog } from "../Dialog";
+import { useProfile } from "../../hooks/useProfile";
+import { ImageCropper } from "./ImageCropper";
 
 export function ProfileDialog({ isOpen, onOpenChange }: DialogProps) {
-    const [username, setUsername] = useState("user123");
+    const { profileData, isLoading, isUpdating, updateProfileData, uploadProfilePictureData } = useProfile();
+    const [username, setUsername] = useState("");
     const [description, setDescription] = useState("");
+    const [selectedImage, setSelectedImage] = useState<File | null>(null);
+    const [showCropper, setShowCropper] = useState(false);
+    
+    const fileInputRef = useRef<HTMLInputElement>(null);
 
-    const handleSubmit = (e: React.FormEvent) => {
+    // Update form fields when profile data changes
+    useEffect(() => {
+        if (profileData) {
+            setUsername(profileData.nickname || "");
+            setDescription(profileData.description || "");
+        }
+    }, [profileData]);
+
+    const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
-        // TODO: Implement profile update logic
-        console.log("Profile update:", { username, description });
-        onOpenChange(false);
+        
+        const success = await updateProfileData({
+            nickname: username.trim() || undefined,
+            description: description.trim() || undefined
+        });
+        
+        if (success) {
+            onOpenChange(false);
+        }
     };
 
-    return (
-        <MaterialDialog id="profile-dialog" close-on-overlay-click close-on-esc open={isOpen} onOpenChange={onOpenChange}>
-            <div className="content">
-                <div className="header-top">
-                    <div className="profile-picture-container">
-                        <img id="profile-picture" src={defaultAvatar} alt="Ваше фото" />
-                        <mdui-button-icon icon="camera_alt--filled" id="upload-pfp-btn" className="upload-overlay" variant="filled"></mdui-button-icon>
-                        <input type="file" id="pfp-file-input" accept="image/*" style={{ display: "none" }} />
-                    </div>
-                    <mdui-text-field 
-                        id="username-field" 
-                        label="Имя пользователя" 
-                        variant="outlined" 
-                        value={username}
-                        onChange={(e: FormEvent<HTMLElement & TextField>) => setUsername((e.target as TextField).value)}
-                        autocomplete="username">
-                    </mdui-text-field>
-                </div>
+    const handleImageSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (file && file.type.startsWith('image/')) {
+            setSelectedImage(file);
+            setShowCropper(true);
+        }
+    };
 
-                <form id="profile-form" onSubmit={handleSubmit}>
-                    <mdui-text-field 
-                        id="description-field"
-                        label="О себе" 
-                        variant="outlined" 
-                        value={description}
-                        onChange={(e: FormEvent<HTMLElement & TextField>) => setDescription((e.target as TextField).value)}
-                        placeholder="Расскажите о себе..."
-                        autocomplete="none">
-                    </mdui-text-field>
-                    <div className="dialog-actions">
-                        <mdui-button type="submit" id="profile-submit">Сохранить изменения</mdui-button>
-                        <mdui-button id="profile-dialog-close" variant="outlined" onClick={() => onOpenChange(false)}>Закрыть</mdui-button>
+    const handleCropComplete = async (croppedImageData: string) => {
+        try {
+            // Convert data URL to blob
+            const response = await fetch(croppedImageData);
+            const blob = await response.blob();
+            
+            const success = await uploadProfilePictureData(blob);
+            if (success) {
+                setShowCropper(false);
+                setSelectedImage(null);
+                if (fileInputRef.current) {
+                    fileInputRef.current.value = '';
+                }
+            }
+        } catch (error) {
+            console.error('Error processing cropped image:', error);
+        }
+    };
+
+    const handleCropCancel = () => {
+        setShowCropper(false);
+        setSelectedImage(null);
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
+
+    const handleUploadClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    const profilePictureUrl = profileData?.profile_picture || defaultAvatar;
+
+    return (
+        <>
+            <MaterialDialog id="profile-dialog" close-on-overlay-click close-on-esc open={isOpen} onOpenChange={onOpenChange}>
+                <div className="content">
+                    <div className="header-top">
+                        <div className="profile-picture-container">
+                            <img 
+                                id="profile-picture" 
+                                src={profilePictureUrl} 
+                                alt="Ваше фото"
+                                onError={(e) => {
+                                    const target = e.target as HTMLImageElement;
+                                    target.src = defaultAvatar;
+                                }}
+                            />
+                            <mdui-button-icon 
+                                icon="camera_alt--filled" 
+                                id="upload-pfp-btn" 
+                                className="upload-overlay" 
+                                variant="filled"
+                                onClick={handleUploadClick}
+                                disabled={isUpdating}
+                            />
+                            <input 
+                                ref={fileInputRef}
+                                type="file" 
+                                id="pfp-file-input" 
+                                accept="image/*" 
+                                style={{ display: "none" }}
+                                onChange={handleImageSelect}
+                            />
+                        </div>
+                        <mdui-text-field 
+                            id="username-field" 
+                            label="Имя пользователя" 
+                            variant="outlined" 
+                            value={username}
+                            onChange={(e: FormEvent<HTMLElement & TextField>) => setUsername((e.target as TextField).value)}
+                            autocomplete="username"
+                            disabled={isLoading || isUpdating}
+                        />
                     </div>
-                </form>
-            </div>
-        </MaterialDialog>
+
+                    <form id="profile-form" onSubmit={handleSubmit}>
+                        <mdui-text-field 
+                            id="description-field"
+                            label="О себе" 
+                            variant="outlined" 
+                            value={description}
+                            onChange={(e: FormEvent<HTMLElement & TextField>) => setDescription((e.target as TextField).value)}
+                            placeholder="Расскажите о себе..."
+                            autocomplete="none"
+                            disabled={isLoading || isUpdating}
+                        />
+                        <div className="dialog-actions">
+                            <mdui-button 
+                                type="submit" 
+                                id="profile-submit"
+                                disabled={isLoading || isUpdating}
+                            >
+                                {isUpdating ? "Сохранение..." : "Сохранить изменения"}
+                            </mdui-button>
+                            <mdui-button 
+                                id="profile-dialog-close" 
+                                variant="outlined" 
+                                onClick={() => onOpenChange(false)}
+                                disabled={isUpdating}
+                            >
+                                Закрыть
+                            </mdui-button>
+                        </div>
+                    </form>
+                </div>
+            </MaterialDialog>
+
+            {/* Image Cropper Dialog */}
+            <MaterialDialog 
+                id="cropper-dialog" 
+                close-on-overlay-click 
+                close-on-esc 
+                open={showCropper} 
+                onOpenChange={setShowCropper}
+            >
+                <div className="cropper-dialog-content">
+                    <div className="cropper-header">
+                        <h3>Обрезать фото профиля</h3>
+                        <mdui-button-icon icon="close" onClick={handleCropCancel} />
+                    </div>
+                    <div className="cropper-container">
+                        <ImageCropper
+                            imageFile={selectedImage}
+                            onCrop={handleCropComplete}
+                            onCancel={handleCropCancel}
+                        />
+                    </div>
+                </div>
+            </MaterialDialog>
+        </>
     );
 }