Feature user and admin panels (#30)

src/js/ui.js

@@ -88,9 +88,88 @@ function updateQuickModelSelector() {
 
 function openSettings() {
     updateSettingsUI();
+    updateProfileSection();
     document.getElementById('settingsModal').classList.add('active');
 }
 
+function updateProfileSection() {
+    const profileSection = document.getElementById('profileSection');
+    const unmanagedSettings = document.getElementById('unmanagedSettings');
+
+    if (Backend.isManaged) {
+        profileSection.style.display = '';
+        unmanagedSettings.style.display = 'none';
+        loadProfileIntoSettings();
+    } else {
+        profileSection.style.display = 'none';
+        unmanagedSettings.style.display = '';
+    }
+    // Always reset password form
+    document.getElementById('profileChangePwForm').style.display = 'none';
+}
+
+async function loadProfileIntoSettings() {
+    try {
+        const profile = await Backend.getProfile();
+        document.getElementById('profileDisplayName').value = profile.display_name || '';
+        document.getElementById('profileEmail').value = profile.email || '';
+    } catch (e) {
+        console.warn('Failed to load profile:', e);
+    }
+}
+
+async function saveProfile() {
+    if (!Backend.isManaged) return;
+
+    const displayName = document.getElementById('profileDisplayName').value.trim();
+    const email = document.getElementById('profileEmail').value.trim();
+
+    const updates = {};
+    if (displayName !== (Backend.user.display_name || '')) {
+        updates.display_name = displayName || null;
+    }
+    if (email && email !== Backend.user.email) {
+        updates.email = email;
+    }
+
+    if (Object.keys(updates).length === 0) return;
+
+    try {
+        const profile = await Backend.updateProfile(updates);
+        // Update local user state
+        if (profile.display_name !== undefined) Backend.user.display_name = profile.display_name;
+        if (profile.email) Backend.user.email = profile.email;
+        Backend.save();
+        showToast('✅ Profile updated', 'success');
+    } catch (e) {
+        showToast('❌ ' + e.message, 'error');
+    }
+}
+
+async function handleChangePassword() {
+    const current = document.getElementById('profileCurrentPw').value;
+    const newPw = document.getElementById('profileNewPw').value;
+
+    if (!current || !newPw) {
+        showToast('⚠️ Fill in both fields', 'warning');
+        return;
+    }
+    if (newPw.length < 8) {
+        showToast('⚠️ New password must be at least 8 characters', 'warning');
+        return;
+    }
+
+    try {
+        await Backend.changePassword(current, newPw);
+        showToast('✅ Password updated', 'success');
+        document.getElementById('profileCurrentPw').value = '';
+        document.getElementById('profileNewPw').value = '';
+        document.getElementById('profileChangePwForm').style.display = 'none';
+    } catch (e) {
+        showToast('❌ ' + e.message, 'error');
+    }
+}
+
 function closeSettings() {
     document.getElementById('settingsModal').classList.remove('active');
 }