Implement logic

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

@@ -1,6 +1,22 @@
+import { useState } from "react";
+import { useAppState } from "../../state";
+import { useDialog } from "../../contexts/DialogContext";
+
 export function ProfileDialog() {
+    const [username, setUsername] = useState("user123");
+    const [description, setDescription] = useState("");
+    const { user } = useAppState();
+    const { isProfileOpen, closeProfile } = useDialog();
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        // TODO: Implement profile update logic
+        console.log("Profile update:", { username, description });
+        closeProfile();
+    };
+
     return (
-        <mdui-dialog id="profile-dialog" close-on-overlay-click close-on-esc>
+        <mdui-dialog id="profile-dialog" close-on-overlay-click close-on-esc open={isProfileOpen}>
             <div className="content">
                 <div className="header-top">
                     <div className="profile-picture-container">
@@ -8,21 +24,29 @@ export function ProfileDialog() {
                         <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="user123" autocomplete="username"></mdui-text-field>
+                    <mdui-text-field 
+                        id="username-field" 
+                        label="Имя пользователя" 
+                        variant="outlined" 
+                        value={username}
+                        onChange={(e: any) => setUsername(e.target.value)}
+                        autocomplete="username">
+                    </mdui-text-field>
                 </div>
 
-                <form id="profile-form">
+                <form id="profile-form" onSubmit={handleSubmit}>
                     <mdui-text-field 
                         id="description-field"
                         label="О себе" 
                         variant="outlined" 
-                        // multiline={true}
-                        rows={3}
+                        value={description}
+                        onChange={(e: any) => setDescription(e.target.value)}
                         placeholder="Расскажите о себе..."
-                        autocomplete="none"></mdui-text-field>
+                        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">Закрыть</mdui-button>
+                        <mdui-button id="profile-dialog-close" variant="outlined" onClick={closeProfile}>Закрыть</mdui-button>
                     </div>
                 </form>
             </div>