feat: cambiar clave desde la app (usuario logueado)

Nuevo PUT /api/auth/change-password: exige la clave actual (a diferencia de
reset-password, que usa un token de correo sin sesion). Opcion "Cambiar clave"
agregada al menu de usuario (popup), disponible para cualquier rol.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "project-linkedcorp-frontend",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/app/AppShell.jsx

@@ -1,22 +1,32 @@
 import { useState } from 'react';
 import { Outlet, useNavigate } from 'react-router-dom';
-import { Menu, Sun, Moon, Bell, LogOut, User, Globe } from 'lucide-react';
+import { Menu, Sun, Moon, Bell, LogOut, User, Globe, KeyRound, Save } from 'lucide-react';
 import { NavigationView } from '../components/NavigationView.jsx';
 import { Flyout, FlyoutItem, FlyoutSeparator } from '../components/Flyout.jsx';
+import { DetailPopup } from '../components/DetailPopup.jsx';
+import { Field } from '../components/Field.jsx';
+import { Button } from '../components/Button.jsx';
 import { useAuth } from '../context/auth-context.jsx';
 import { useUi } from '../context/ui-context.jsx';
 import { useAsync } from '../hooks/useAsync.js';
 import { listNotifications, markAllNotificationsRead, markNotificationRead } from '../services/notifications.js';
+import { changePassword } from '../services/auth.js';
+
+const EMPTY_PASSWORD_FORM = { currentPassword: '', newPassword: '', confirmPassword: '' };
 
 export default function AppShell() {
   const [navMode, setNavMode] = useState('expanded');
   const { user, logout } = useAuth();
-  const { t, theme, setTheme, lang, setLang } = useUi();
+  const { t, theme, setTheme, lang, setLang, pushToast } = useUi();
   const navigate = useNavigate();
 
   const { data: notifData, reload: reloadNotifications } = useAsync(listNotifications, []);
   const unread = notifData?.unread || 0;
 
+  const [changingPassword, setChangingPassword] = useState(false);
+  const [passwordForm, setPasswordForm] = useState(EMPTY_PASSWORD_FORM);
+  const [passwordError, setPasswordError] = useState('');
+
   function toggleNav() {
     setNavMode((m) => (m === 'expanded' ? 'compact' : 'expanded'));
   }
@@ -28,6 +38,31 @@ export default function AppShell() {
     else if (notification.entity_type === 'activity') navigate(`/proyectos`);
   }
 
+  function openChangePassword() {
+    setPasswordForm(EMPTY_PASSWORD_FORM);
+    setPasswordError('');
+    setChangingPassword(true);
+  }
+
+  async function submitChangePassword() {
+    setPasswordError('');
+    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
+      setPasswordError(t('register_password_mismatch'));
+      return;
+    }
+    if (passwordForm.newPassword.length < 8) {
+      setPasswordError(t('register_password_short'));
+      return;
+    }
+    try {
+      await changePassword(passwordForm.currentPassword, passwordForm.newPassword);
+      setChangingPassword(false);
+      pushToast({ tone: 'success', message: t('change_password_success') });
+    } catch (err) {
+      setPasswordError(err.message || t('common_error'));
+    }
+  }
+
   return (
     <div className="app-shell">
       <NavigationView mode={navMode} />
@@ -79,6 +114,9 @@ export default function AppShell() {
                 <div style={{ fontSize: '.7rem', color: 'rgb(var(--muted))' }}>{user?.roleName || user?.roleCode}</div>
               </div>
               <FlyoutSeparator />
+              <FlyoutItem icon={KeyRound} onClick={openChangePassword}>
+                {t('change_password_title')}
+              </FlyoutItem>
               <FlyoutItem icon={LogOut} danger onClick={() => { logout(); navigate('/login'); }}>
                 {t('logout')}
               </FlyoutItem>
@@ -89,6 +127,23 @@ export default function AppShell() {
           <Outlet />
         </div>
       </div>
+
+      <DetailPopup open={changingPassword} title={t('change_password_title')} onClose={() => setChangingPassword(false)} width={420} height={380}>
+        {passwordError && <div className="login-error">{passwordError}</div>}
+        <Field label={t('change_password_current')}>
+          <input className="input" type="password" value={passwordForm.currentPassword} onChange={(e) => setPasswordForm((f) => ({ ...f, currentPassword: e.target.value }))} autoFocus />
+        </Field>
+        <Field label={t('reset_password_new')}>
+          <input className="input" type="password" value={passwordForm.newPassword} onChange={(e) => setPasswordForm((f) => ({ ...f, newPassword: e.target.value }))} />
+        </Field>
+        <Field label={t('register_password_confirm')}>
+          <input className="input" type="password" value={passwordForm.confirmPassword} onChange={(e) => setPasswordForm((f) => ({ ...f, confirmPassword: e.target.value }))} />
+        </Field>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <Button variant="accent" icon={Save} onClick={submitChangePassword}>{t('common_save')}</Button>
+          <Button variant="standard" onClick={() => setChangingPassword(false)}>{t('common_cancel')}</Button>
+        </div>
+      </DetailPopup>
     </div>
   );
 }

frontend/src/i18n/messages.js

@@ -32,6 +32,9 @@ export const messages = {
     reset_password_new: 'Clave nueva',
     reset_password_submit: 'Guardar clave',
     reset_password_success: 'Clave actualizada. Redirigiendo a iniciar sesion...',
+    change_password_title: 'Cambiar clave',
+    change_password_current: 'Clave actual',
+    change_password_success: 'Clave actualizada correctamente.',
 
     user_status_pending_verification: 'Pendiente de verificar correo',
     user_status_pending_approval: 'Pendiente de aprobacion',
@@ -206,6 +209,9 @@ export const messages = {
     reset_password_new: 'New password',
     reset_password_submit: 'Save password',
     reset_password_success: 'Password updated. Redirecting to sign in...',
+    change_password_title: 'Change password',
+    change_password_current: 'Current password',
+    change_password_success: 'Password updated successfully.',
 
     user_status_pending_verification: 'Pending email verification',
     user_status_pending_approval: 'Pending approval',

frontend/src/services/auth.js

@@ -4,3 +4,4 @@ export const register = (data) => api.post('/auth/register', data);
 export const verifyEmail = (token) => api.get(`/auth/verify-email?token=${encodeURIComponent(token)}`);
 export const forgotPassword = (email) => api.post('/auth/forgot-password', { email });
 export const resetPassword = (token, password) => api.post('/auth/reset-password', { token, password });
+export const changePassword = (currentPassword, newPassword) => api.put('/auth/change-password', { currentPassword, newPassword });