@@ -84,6 +87,12 @@ export default function ConfiguracionPage() {
fields={[{ key: 'name', label: t('common_name'), type: 'text' }]}
/>
+
+ {user?.roleCode === 'superadmin' && (
+
+
+ )}
);
}
diff --git a/frontend/src/pages/Configuracion/SmtpSettingsPanel.jsx b/frontend/src/pages/Configuracion/SmtpSettingsPanel.jsx
new file mode 100644
index 0000000..b86b524
--- /dev/null
+++ b/frontend/src/pages/Configuracion/SmtpSettingsPanel.jsx
@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { Save } from 'lucide-react';
+import { useUi } from '../../context/ui-context.jsx';
+import { useAsync, useAction } from '../../hooks/useAsync.js';
+import { getSmtpConfig, updateSmtpConfig } from '../../services/settings.js';
+import { Field, FieldRow } from '../../components/Field.jsx';
+import { Button } from '../../components/Button.jsx';
+import { InfoBar } from '../../components/InfoBar.jsx';
+
+export default function SmtpSettingsPanel() {
+ const { t, pushToast } = useUi();
+ const runAction = useAction();
+ const { data: config, reload } = useAsync(getSmtpConfig, []);
+ const [form, setForm] = useState({ host: '', port: 587, user: '', from: '', pass: '' });
+
+ useEffect(() => {
+ if (config) setForm({ host: config.host, port: config.port, user: config.user, from: config.from, pass: '' });
+ }, [config]);
+
+ async function save() {
+ await runAction(async () => {
+ await updateSmtpConfig(form);
+ await reload();
+ setForm((f) => ({ ...f, pass: '' }));
+ pushToast({ tone: 'success', message: t('common_saved') });
+ });
+ }
+
+ if (!config) return {t('common_loading')}
;
+
+ return (
+
+ {!config.configured && {t('smtp_not_configured')} }
+
+
+ setForm((f) => ({ ...f, host: e.target.value }))} placeholder="192.168.222.10" />
+
+
+ setForm((f) => ({ ...f, port: Number(e.target.value) }))} />
+
+
+
+
+ setForm((f) => ({ ...f, user: e.target.value }))} placeholder="project@linkedcorp.net" />
+
+
+ setForm((f) => ({ ...f, from: e.target.value }))} placeholder="project@linkedcorp.net" />
+
+
+
+ setForm((f) => ({ ...f, pass: e.target.value }))} />
+
+
+
+ );
+}
diff --git a/frontend/src/pages/Login/ForgotPasswordPage.jsx b/frontend/src/pages/Login/ForgotPasswordPage.jsx
new file mode 100644
index 0000000..f005457
--- /dev/null
+++ b/frontend/src/pages/Login/ForgotPasswordPage.jsx
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Send } from 'lucide-react';
+import { useUi } from '../../context/ui-context.jsx';
+import { forgotPassword } from '../../services/auth.js';
+import { Field } from '../../components/Field.jsx';
+import { Button } from '../../components/Button.jsx';
+import logoDark from '../../assets/logoLinkedCorpTxt.png';
+import logoLight from '../../assets/logoLinkedCorpTxtBlack.png';
+
+export default function ForgotPasswordPage() {
+ const { t, theme } = useUi();
+ const [email, setEmail] = useState('');
+ const [sent, setSent] = useState(false);
+ const [loading, setLoading] = useState(false);
+
+ async function handleSubmit(e) {
+ e.preventDefault();
+ setLoading(true);
+ try {
+ await forgotPassword(email);
+ } finally {
+ setLoading(false);
+ setSent(true); // siempre generico, exista o no el correo
+ }
+ }
+
+ return (
+
+
+
+ );
+}
diff --git a/frontend/src/pages/Login/LoginPage.jsx b/frontend/src/pages/Login/LoginPage.jsx
index d90cad7..64c7a41 100644
--- a/frontend/src/pages/Login/LoginPage.jsx
+++ b/frontend/src/pages/Login/LoginPage.jsx
@@ -1,5 +1,5 @@
import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
import { LogIn } from 'lucide-react';
import { useAuth } from '../../context/auth-context.jsx';
import { useUi } from '../../context/ui-context.jsx';
@@ -24,8 +24,8 @@ export default function LoginPage() {
try {
await login(email, password);
navigate('/', { replace: true });
- } catch {
- setError(t('login_error'));
+ } catch (err) {
+ setError(err.message || t('login_error'));
} finally {
setLoading(false);
}
@@ -48,6 +48,10 @@ export default function LoginPage() {
+
+ {t('login_forgot_password')}
+ {t('login_create_account')}
+
);
diff --git a/frontend/src/pages/Login/RegisterPage.jsx b/frontend/src/pages/Login/RegisterPage.jsx
new file mode 100644
index 0000000..e821366
--- /dev/null
+++ b/frontend/src/pages/Login/RegisterPage.jsx
@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { UserPlus } from 'lucide-react';
+import { useAuth } from '../../context/auth-context.jsx';
+import { useUi } from '../../context/ui-context.jsx';
+import { register } from '../../services/auth.js';
+import { Field } from '../../components/Field.jsx';
+import { Button } from '../../components/Button.jsx';
+import logoDark from '../../assets/logoLinkedCorpTxt.png';
+import logoLight from '../../assets/logoLinkedCorpTxtBlack.png';
+
+export default function RegisterPage() {
+ const { setSession } = useAuth();
+ const { t, theme } = useUi();
+ const navigate = useNavigate();
+ const [name, setName] = useState('');
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [confirm, setConfirm] = useState('');
+ const [error, setError] = useState('');
+ const [info, setInfo] = useState('');
+ const [loading, setLoading] = useState(false);
+
+ async function handleSubmit(e) {
+ e.preventDefault();
+ setError('');
+ setInfo('');
+ if (password !== confirm) { setError(t('register_password_mismatch')); return; }
+ if (password.length < 8) { setError(t('register_password_short')); return; }
+ setLoading(true);
+ try {
+ const result = await register({ name, email, password });
+ if (result.bootstrap) {
+ setSession(result.token, result.user);
+ navigate('/', { replace: true });
+ return;
+ }
+ setInfo(t('register_success'));
+ } catch (err) {
+ setError(err.message || t('common_error'));
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ return (
+
+
+
+ );
+}
diff --git a/frontend/src/pages/Login/ResetPasswordPage.jsx b/frontend/src/pages/Login/ResetPasswordPage.jsx
new file mode 100644
index 0000000..fdcf28c
--- /dev/null
+++ b/frontend/src/pages/Login/ResetPasswordPage.jsx
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { KeyRound } from 'lucide-react';
+import { useUi } from '../../context/ui-context.jsx';
+import { resetPassword } from '../../services/auth.js';
+import { Field } from '../../components/Field.jsx';
+import { Button } from '../../components/Button.jsx';
+import logoDark from '../../assets/logoLinkedCorpTxt.png';
+import logoLight from '../../assets/logoLinkedCorpTxtBlack.png';
+
+export default function ResetPasswordPage() {
+ const { t, theme } = useUi();
+ const navigate = useNavigate();
+ const [searchParams] = useSearchParams();
+ const token = searchParams.get('token') || '';
+ const [password, setPassword] = useState('');
+ const [confirm, setConfirm] = useState('');
+ const [error, setError] = useState('');
+ const [success, setSuccess] = useState(false);
+ const [loading, setLoading] = useState(false);
+
+ async function handleSubmit(e) {
+ e.preventDefault();
+ setError('');
+ if (password !== confirm) { setError(t('register_password_mismatch')); return; }
+ if (password.length < 8) { setError(t('register_password_short')); return; }
+ setLoading(true);
+ try {
+ await resetPassword(token, password);
+ setSuccess(true);
+ setTimeout(() => navigate('/login', { replace: true }), 2000);
+ } catch (err) {
+ setError(err.message || t('common_error'));
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ return (
+
+
+
+ );
+}
diff --git a/frontend/src/pages/Login/VerifyEmailPage.jsx b/frontend/src/pages/Login/VerifyEmailPage.jsx
new file mode 100644
index 0000000..a7ad594
--- /dev/null
+++ b/frontend/src/pages/Login/VerifyEmailPage.jsx
@@ -0,0 +1,44 @@
+import { useEffect, useRef, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { useUi } from '../../context/ui-context.jsx';
+import { verifyEmail } from '../../services/auth.js';
+import logoDark from '../../assets/logoLinkedCorpTxt.png';
+import logoLight from '../../assets/logoLinkedCorpTxtBlack.png';
+
+export default function VerifyEmailPage() {
+ const { t, theme } = useUi();
+ const [searchParams] = useSearchParams();
+ const [state, setState] = useState('loading');
+ const [message, setMessage] = useState('');
+ // El token de verificacion se consume en el servidor (un solo uso): con React.StrictMode el
+ // efecto se dispara dos veces en dev, y la segunda llamada fallaria con "token invalido" aunque
+ // la primera ya haya verificado correctamente. Esta ref evita el segundo disparo.
+ const requestedTokenRef = useRef(null);
+
+ useEffect(() => {
+ const token = searchParams.get('token');
+ if (!token) { setState('error'); setMessage(t('verify_email_missing_token')); return; }
+ if (requestedTokenRef.current === token) return;
+ requestedTokenRef.current = token;
+ verifyEmail(token)
+ .then(() => { setState('success'); setMessage(t('verify_email_success')); })
+ .catch((err) => { setState('error'); setMessage(err.message || t('common_error')); });
+ }, [searchParams, t]);
+
+ return (
+
+
+ );
+}
diff --git a/frontend/src/pages/Organizacion/UsersPanel.jsx b/frontend/src/pages/Organizacion/UsersPanel.jsx
index e656771..43a305e 100644
--- a/frontend/src/pages/Organizacion/UsersPanel.jsx
+++ b/frontend/src/pages/Organizacion/UsersPanel.jsx
@@ -1,8 +1,9 @@
import { useState } from 'react';
-import { Plus, Save, UserX, UserCheck } from 'lucide-react';
+import { Plus, Save, UserX, UserCheck, Check, X as XIcon } from 'lucide-react';
import { useUi } from '../../context/ui-context.jsx';
+import { useAuth } from '../../context/auth-context.jsx';
import { useAsync, useAction } from '../../hooks/useAsync.js';
-import { listUsers, listRoles, createUser, updateUser, setUserActive } from '../../services/users.js';
+import { listUsers, listRoles, createUser, updateUser, setUserActive, approveUser, rejectUser } from '../../services/users.js';
import { listDepartments } from '../../services/departments.js';
import { ListView } from '../../components/ListView.jsx';
import { SearchInput } from '../../components/SearchInput.jsx';
@@ -17,19 +18,25 @@ function flatten(nodes, acc = []) {
return acc;
}
+const STATUS_COLOR = { pending_verification: 'muted', pending_approval: 'warning', active: 'success' };
const EMPTY_FORM = { name: '', email: '', roleId: '', departmentId: '', position: '', password: '' };
export default function UsersPanel() {
- const { t, pushToast } = useUi();
+ const { t, pushToast, openDialog } = useUi();
+ const { user: currentUser } = useAuth();
const runAction = useAction();
const { data: users, reload } = useAsync(listUsers, []);
const { data: roles } = useAsync(listRoles, []);
const { data: deptTree } = useAsync(listDepartments, []);
+ const canManage = ['admin', 'superadmin'].includes(currentUser?.roleCode);
+
const [search, setSearch] = useState('');
const [editing, setEditing] = useState(false);
const [selected, setSelected] = useState(null);
const [form, setForm] = useState(EMPTY_FORM);
+ const [approving, setApproving] = useState(null);
+ const [approveForm, setApproveForm] = useState({ roleId: '', departmentId: '' });
const deptOptions = deptTree ? flatten(deptTree).map((d) => ({ value: d.id, label: d.name })) : [];
const roleOptions = (roles || []).map((r) => ({ value: r.id, label: r.name }));
@@ -41,6 +48,7 @@ export default function UsersPanel() {
}
function startEdit(user) {
+ if (!canManage) return;
setSelected(user);
setForm({ name: user.name, email: user.email, roleId: user.role_id, departmentId: user.department_id || '', position: user.position || '', password: '' });
setEditing(true);
@@ -68,13 +76,40 @@ export default function UsersPanel() {
});
}
+ function startApprove(user) {
+ const collaboratorRole = (roles || []).find((r) => r.code === 'collaborator');
+ setApproving(user);
+ setApproveForm({ roleId: user.role_id || collaboratorRole?.id || '', departmentId: '' });
+ }
+
+ async function confirmApprove() {
+ await runAction(async () => {
+ await approveUser(approving.id, { roleId: approveForm.roleId, departmentId: approveForm.departmentId || null });
+ setApproving(null);
+ await reload();
+ pushToast({ tone: 'success', message: t('common_saved') });
+ });
+ }
+
+ function confirmReject(user) {
+ openDialog({
+ tone: 'warning',
+ title: t('user_reject'),
+ message: t('user_reject_confirm_msg'),
+ actions: [
+ { label: t('common_cancel'), variant: 'standard' },
+ { label: t('user_reject'), variant: 'danger', onClick: () => runAction(async () => { await rejectUser(user.id); await reload(); }) },
+ ],
+ });
+ }
+
const columns = [
{ key: 'name', label: t('common_name') },
{ key: 'email', label: t('user_email') },
{ key: 'role_name', label: t('user_role') },
{ key: 'department_name', label: t('common_department'), render: (r) => r.department_name || '—' },
- { key: 'is_active', label: t('common_status'), sortable: false, render: (r) => (
-
+
+
+ 
+
+ {t('verify_email_title')}
+ {state === 'loading' && {t('common_loading')}
}
+ {state === 'success' && {message}
}
+ {state === 'error' && {message}
}
+
+ {t('register_back_to_login')}
+
+
+
+
+
+