feat: add mobile profile and privacy configuration modals

frontend/viewer.html

@@ -276,6 +276,13 @@
                     <div style="padding: 6px 10px; margin-bottom: 6px; font-size: 0.8rem; font-weight: 700; color: #ffeb3b; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(255,255,255,0.08);">
                         🪙 <span id="mobCredits">0</span> Créditos
                     </div>
+                    <button id="btnMobProfile" style="width: 100%; text-align: left; background: transparent; border: none; color: #ffffff; padding: 8px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px;">
+                        👤 <span>Mi perfil</span>
+                    </button>
+                    <button id="btnMobPrivacy" style="width: 100%; text-align: left; background: transparent; border: none; color: #4caf50; padding: 8px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px;">
+                        🛡️ <span>Privacidad y Seguridad</span>
+                    </button>
+                    <div style="height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0;"></div>
                     <button id="btnMobLogout" style="width: 100%; text-align: left; background: transparent; border: none; color: #ef4444; padding: 8px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px;">
                         🚪 <span>Salir</span>
                     </button>
@@ -494,6 +501,89 @@
         </div>
     </div>
 
+    <!-- User Profile Modal (Mobile) -->
+    <div id="mobProfileModal" style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; background: rgba(10, 10, 15, 0.95); backdrop-filter: blur(12px); flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;">
+        <div style="width: 100%; max-width: 420px; background: #161622; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.8);">
+            <div style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 16px;">
+                <div style="font-size: 1.1rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px;">
+                    👤 <span>Mi Perfil</span>
+                </div>
+                <button type="button" id="btnCloseMobProfile" style="background: rgba(255,255,255,0.1); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-weight: bold; font-size: 0.9rem;">✕</button>
+            </div>
+            <form id="mobProfileForm" style="display: flex; flex-direction: column; gap: 14px;">
+                <div style="display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 12px; border-radius: 12px;">
+                    <div style="position: relative; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid #7c3aed; flex-shrink: 0; background: #000;">
+                        <img id="mobProfileAvatarPreview" src="" alt="Avatar" style="width: 100%; height: 100%; object-fit: cover;">
+                    </div>
+                    <div style="flex: 1; display: flex; flex-direction: column; gap: 4px;">
+                        <label for="mobProfileAvatarInput" style="font-size: 0.75rem; padding: 6px 12px; background: rgba(124, 58, 237, 0.2); border: 1px solid #7c3aed; color: #a78bfa; border-radius: 8px; font-weight: 600; cursor: pointer; display: inline-block; width: fit-content;">
+                            📷 Cambiar foto
+                        </label>
+                        <input type="file" id="mobProfileAvatarInput" accept="image/*" style="display: none;">
+                        <span style="font-size: 0.7rem; color: #a1a1aa;">Formato JPG o PNG</span>
+                    </div>
+                </div>
+
+                <div>
+                    <label style="font-size: 0.8rem; color: #a1a1aa; display: block; margin-bottom: 6px; font-weight: 600;">Apodo / Nickname</label>
+                    <input type="text" id="mobProfileNickInput" required style="width: 100%; box-sizing: border-box; padding: 10px 12px; background: #1e1e24; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #fff; outline: none; font-size: 0.9rem;">
+                </div>
+
+                <div>
+                    <label style="font-size: 0.8rem; color: #a1a1aa; display: block; margin-bottom: 6px; font-weight: 600;">Nombre Completo (Opcional)</label>
+                    <input type="text" id="mobProfileFullNameInput" style="width: 100%; box-sizing: border-box; padding: 10px 12px; background: #1e1e24; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #fff; outline: none; font-size: 0.9rem;">
+                </div>
+
+                <div style="display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px;">
+                    <button type="button" id="btnCancelMobProfile" style="background: rgba(255,255,255,0.1); border: none; color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer;">Cancelar</button>
+                    <button type="submit" style="background: #7c3aed; border: none; color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 0.85rem; cursor: pointer;">Guardar</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Privacy & Security Modal (Mobile) -->
+    <div id="mobPrivacyModal" style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; background: rgba(10, 10, 15, 0.95); backdrop-filter: blur(12px); flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;">
+        <div style="width: 100%; max-width: 420px; background: #161622; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.8);">
+            <div style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 16px;">
+                <div style="font-size: 1.1rem; font-weight: 700; color: #4caf50; display: flex; align-items: center; gap: 6px;">
+                    🛡️ <span>Privacidad y Seguridad</span>
+                </div>
+                <button type="button" id="btnCloseMobPrivacy" style="background: rgba(255,255,255,0.1); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-weight: bold; font-size: 0.9rem;">✕</button>
+            </div>
+            <form id="mobPrivacyForm" style="display: flex; flex-direction: column; gap: 12px;">
+                <div>
+                    <label style="font-size: 0.8rem; color: #a1a1aa; display: block; margin-bottom: 6px; font-weight: 600;">Correo Electrónico</label>
+                    <input type="email" id="mobPrivacyEmailInput" style="width: 100%; box-sizing: border-box; padding: 10px 12px; background: #1e1e24; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #fff; outline: none; font-size: 0.9rem;">
+                </div>
+
+                <div style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; margin-top: 4px;">
+                    <div style="font-size: 0.85rem; font-weight: 700; color: #fff; margin-bottom: 8px;">Cambiar Contraseña</div>
+                    
+                    <div style="margin-bottom: 8px;">
+                        <label style="font-size: 0.75rem; color: #a1a1aa; display: block; margin-bottom: 4px;">Contraseña Actual</label>
+                        <input type="password" id="mobPrivacyCurrentPasswordInput" style="width: 100%; box-sizing: border-box; padding: 8px 12px; background: #1e1e24; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #fff; outline: none; font-size: 0.85rem;">
+                    </div>
+
+                    <div style="margin-bottom: 8px;">
+                        <label style="font-size: 0.75rem; color: #a1a1aa; display: block; margin-bottom: 4px;">Nueva Contraseña</label>
+                        <input type="password" id="mobPrivacyNewPasswordInput" style="width: 100%; box-sizing: border-box; padding: 8px 12px; background: #1e1e24; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #fff; outline: none; font-size: 0.85rem;">
+                    </div>
+
+                    <div>
+                        <label style="font-size: 0.75rem; color: #a1a1aa; display: block; margin-bottom: 4px;">Repetir Nueva Contraseña</label>
+                        <input type="password" id="mobPrivacyConfirmPasswordInput" style="width: 100%; box-sizing: border-box; padding: 8px 12px; background: #1e1e24; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #fff; outline: none; font-size: 0.85rem;">
+                    </div>
+                </div>
+
+                <div style="display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px;">
+                    <button type="button" id="btnCancelMobPrivacy" style="background: rgba(255,255,255,0.1); border: none; color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer;">Cancelar</button>
+                    <button type="submit" style="background: #4caf50; border: none; color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 0.85rem; cursor: pointer;">Guardar</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
     <script>
         const urlParams = new URLSearchParams(window.location.search);
         const modelUrl = urlParams.get('model');
@@ -1451,6 +1541,129 @@
             });
         }
 
+        // Mobile Profile and Privacy Modals Bindings
+        const btnMobProfile = document.getElementById('btnMobProfile');
+        const btnMobPrivacy = document.getElementById('btnMobPrivacy');
+        const mobProfileModal = document.getElementById('mobProfileModal');
+        const mobPrivacyModal = document.getElementById('mobPrivacyModal');
+        const btnCloseMobProfile = document.getElementById('btnCloseMobProfile');
+        const btnCancelMobProfile = document.getElementById('btnCancelMobProfile');
+        const btnCloseMobPrivacy = document.getElementById('btnCloseMobPrivacy');
+        const btnCancelMobPrivacy = document.getElementById('btnCancelMobPrivacy');
+        const mobProfileForm = document.getElementById('mobProfileForm');
+        const mobPrivacyForm = document.getElementById('mobPrivacyForm');
+        const mobProfileAvatarInput = document.getElementById('mobProfileAvatarInput');
+        const mobProfileAvatarPreview = document.getElementById('mobProfileAvatarPreview');
+
+        if (btnMobProfile) {
+            btnMobProfile.addEventListener('click', (e) => {
+                e.stopPropagation();
+                if (mobUserDropdown) mobUserDropdown.style.display = 'none';
+                fetch('/api/me').then(res => res.json()).then(data => {
+                    const nickInput = document.getElementById('mobProfileNickInput');
+                    const fullNameInput = document.getElementById('mobProfileFullNameInput');
+                    if (nickInput) nickInput.value = data.nick || data.username || '';
+                    if (fullNameInput) fullNameInput.value = data.full_name || '';
+                    if (mobProfileAvatarPreview && data.avatar) mobProfileAvatarPreview.src = data.avatar;
+                    if (mobProfileModal) mobProfileModal.style.display = 'flex';
+                }).catch(() => {
+                    if (mobProfileModal) mobProfileModal.style.display = 'flex';
+                });
+            });
+        }
+
+        if (btnMobPrivacy) {
+            btnMobPrivacy.addEventListener('click', (e) => {
+                e.stopPropagation();
+                if (mobUserDropdown) mobUserDropdown.style.display = 'none';
+                fetch('/api/me').then(res => res.json()).then(data => {
+                    const emailInput = document.getElementById('mobPrivacyEmailInput');
+                    if (emailInput) emailInput.value = data.email || '';
+                    if (mobPrivacyModal) mobPrivacyModal.style.display = 'flex';
+                }).catch(() => {
+                    if (mobPrivacyModal) mobPrivacyModal.style.display = 'flex';
+                });
+            });
+        }
+
+        if (mobProfileAvatarInput && mobProfileAvatarPreview) {
+            mobProfileAvatarInput.addEventListener('change', (e) => {
+                const file = e.target.files[0];
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = (evt) => {
+                        mobProfileAvatarPreview.src = evt.target.result;
+                    };
+                    reader.readAsDataURL(file);
+                }
+            });
+        }
+
+        [btnCloseMobProfile, btnCancelMobProfile].forEach(btn => {
+            if (btn) btn.addEventListener('click', () => mobProfileModal.style.display = 'none');
+        });
+
+        [btnCloseMobPrivacy, btnCancelMobPrivacy].forEach(btn => {
+            if (btn) btn.addEventListener('click', () => mobPrivacyModal.style.display = 'none');
+        });
+
+        if (mobProfileForm) {
+            mobProfileForm.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                const nick = document.getElementById('mobProfileNickInput')?.value.trim();
+                const full_name = document.getElementById('mobProfileFullNameInput')?.value.trim();
+                const avatar = mobProfileAvatarPreview?.src;
+                try {
+                    const res = await fetch('/api/update-profile', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ nick, full_name, avatar })
+                    });
+                    if (res.ok) {
+                        alert('¡Perfil actualizado con éxito!');
+                        if (mobProfileModal) mobProfileModal.style.display = 'none';
+                        fetchUserInfo();
+                    } else {
+                        alert('Error al actualizar el perfil.');
+                    }
+                } catch (err) {
+                    alert('Error de conexión al actualizar perfil.');
+                }
+            });
+        }
+
+        if (mobPrivacyForm) {
+            mobPrivacyForm.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                const email = document.getElementById('mobPrivacyEmailInput')?.value.trim();
+                const current_password = document.getElementById('mobPrivacyCurrentPasswordInput')?.value;
+                const new_password = document.getElementById('mobPrivacyNewPasswordInput')?.value;
+                const confirm_password = document.getElementById('mobPrivacyConfirmPasswordInput')?.value;
+
+                if (new_password && new_password !== confirm_password) {
+                    alert('Las contraseñas no coinciden.');
+                    return;
+                }
+
+                try {
+                    const res = await fetch('/api/update-privacy', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ email, current_password, new_password })
+                    });
+                    const data = await res.json();
+                    if (res.ok && data.success) {
+                        alert('¡Configuración de privacidad guardada!');
+                        if (mobPrivacyModal) mobPrivacyModal.style.display = 'none';
+                    } else {
+                        alert(data.error || 'Error al guardar privacidad.');
+                    }
+                } catch (err) {
+                    alert('Error de conexión al guardar privacidad.');
+                }
+            });
+        }
+
         // Logout handler
         const btnMobLogout = document.getElementById('btnMobLogout');
         if (btnMobLogout) {