Login: mensaje amigable y ojo de password; agenda: click en celda libre para agendar (estilo Google Calendar)

2026-09-09 10:37:15 +00:00
parent c7dcd171ee
commit 212f51cf9e
2 changed files with 87 additions and 21 deletions
--- a/frontend/src/pages/Agenda.tsx
+++ b/frontend/src/pages/Agenda.tsx
@@ -301,6 +301,8 @@ const Agenda: FC = () => {
    const apt = dragApt;
    setDragApt(null);
    setDropTarget(null);
+    // Evita que el click posterior al drop abra el modal de nueva cita
+    justDroppedRef.current = true;
    if ((apt.doctor_id ?? null) === doctorId && aptSlot(apt.time) === slot) return;
    const nombreCol = doctorId ? (doctors.find((d) => d.id === doctorId)?.name || '') : 'Sin asignar';
    const horaStr = horaFloatStr(slot);
@@ -757,6 +759,42 @@ const Agenda: FC = () => {
    setCreateOpen(true);
  };

+  // Nueva cita precargada desde una celda libre del grid (fecha/hora/médico
+  // del slot clicado). Se usa un solo click (el drag&drop se distingue con
+  // justDroppedRef: tras un drop real el click posterior se ignora).
+  const justDroppedRef = useRef(false);
+  const openCreateAt = (opts?: { date?: string; time?: string; doctorId?: number | null }) => {
+    setQuickMode(false);
+    const d = opts?.date ?? date;
+    const docId = medicoEmployeeId
+      ? String(medicoEmployeeId)
+      : (opts?.doctorId != null ? String(opts.doctorId) : doctorFilter);
+    const t = opts?.time ?? '';
+    setForm((f) => ({ ...f, date: d, time: t, doctor_id: docId }));
+    setQuickForm({
+      name: '',
+      phone: '',
+      doctor_id: docId,
+      date: d,
+      time: t,
+      notes: '',
+    });
+    setCreateOpen(true);
+  };
+
+  const clickCeldaLibre = (e: React.MouseEvent, dateStr: string, slot: number | null, doctorId: number | null) => {
+    if (justDroppedRef.current) {
+      justDroppedRef.current = false;
+      return;
+    }
+    e.preventDefault();
+    openCreateAt({
+      date: dateStr,
+      time: slot != null ? horaFloatStr(slot) : '',
+      doctorId,
+    });
+  };
+
  const submitQuick = async () => {
    if (!quickForm.name.trim() || !quickForm.phone.trim()) {
      toast.error('Nombre y teléfono son obligatorios');
@@ -1270,11 +1308,15 @@ const Agenda: FC = () => {
                                    Bloqueado{bloqueo.motivo ? ` — ${bloqueo.motivo}` : ''}
                                  </div>
                                ) : cell.length === 0 ? (
-                                  <div className={`rounded-lg border py-1.5 text-center text-[10px] font-medium transition-colors ${
-                                    quickFilter === 'libres'
-                                      ? 'bg-brand-mint border-emerald-700 text-theme-heading font-semibold'
-                                      : 'border-dashed border-theme-border-strong text-theme-muted hover:bg-theme-accent-bg'
-                                  }`}>
+                                  <div
+                                    onClick={(e) => clickCeldaLibre(e, date, slot, col.doctorId)}
+                                    className={`cursor-pointer rounded-lg border py-1.5 text-center text-[10px] font-medium transition-colors ${
+                                      quickFilter === 'libres'
+                                        ? 'bg-brand-mint border-emerald-700 text-theme-heading font-semibold'
+                                        : 'border-dashed border-theme-border-strong text-theme-muted hover:bg-theme-accent-bg'
+                                    }`}
+                                    title={`Nueva cita aquí — ${horaFloatStr(slot)}`}
+                                  >
                                    Libre
                                  </div>
                                ) : (
@@ -1377,7 +1419,8 @@ const Agenda: FC = () => {
                                  </div>
                                ) : cell.length === 0 ? (
                                  <div
-                                    className={`rounded border py-1.5 transition-colors ${
+                                    onClick={(e) => clickCeldaLibre(e, date, slot, col.doctorId)}
+                                    className={`cursor-pointer rounded border py-1.5 transition-colors ${
                                      quickFilter === 'libres'
                                        ? 'bg-brand-mint border-emerald-700'
                                        : 'border-dashed border-theme-border hover:bg-theme-accent-bg'
@@ -1481,7 +1524,11 @@ const Agenda: FC = () => {
                                    {dayBloqueo.motivo || 'Bloqueado'}
                                  </div>
                                ) : dayApts.length === 0 ? (
-                                  <div className="rounded border border-dashed border-theme-border py-1.5 text-center text-[10px] text-theme-muted">
+                                  <div
+                                    onClick={(e) => clickCeldaLibre(e, d, null, col.doctorId)}
+                                    className="cursor-pointer rounded border border-dashed border-theme-border py-1.5 text-center text-[10px] text-theme-muted hover:bg-theme-accent-bg"
+                                    title="Nueva cita este día"
+                                  >
                                    Libre
                                  </div>
                                ) : (
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,7 +1,7 @@
 import type { FC, FormEvent } from 'react';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { LogIn } from 'lucide-react';
+import { Eye, EyeOff, LogIn } from 'lucide-react';
 import { Button, Input } from '../components/ui';
 import { useAuth } from '../lib/auth';
 import { useTheme } from '../lib/theme';
@@ -15,6 +15,7 @@ const Login: FC = () => {
  const navigate = useNavigate();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const isHomeNest = theme === 'homenest';
@@ -32,7 +33,13 @@ const Login: FC = () => {
      await login(username.trim(), password);
      navigate('/', { replace: true });
    } catch (err) {
-      setError(err instanceof Error ? err.message : 'No se pudo iniciar sesión');
+      // Mensajes amigables: nunca mostrar errores técnicos crudos.
+      const msg = err instanceof Error ? err.message : '';
+      if (msg.includes('Credenciales inválidas') || msg.includes('401')) {
+        setError('Usuario o contraseña incorrectos');
+      } else {
+        setError('No se pudo iniciar sesión. Intenta de nuevo.');
+      }
    } finally {
      setSubmitting(false);
    }
@@ -89,18 +96,30 @@ const Login: FC = () => {
            }
            labelClassName={isHomeNest ? 'text-theme-muted' : 'text-white/70'}
          />
-          <Input
-            label="Contraseña"
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            autoComplete="current-password"
-            inputClassName={isHomeNest
-              ? 'bg-theme-bg border-theme-border-strong text-theme-heading placeholder:text-theme-muted/60 focus:border-theme-accent focus:ring-theme-accent/30'
-              : 'bg-theme-surface/10 border-white/10 text-white placeholder:text-white/40 focus:border-theme-accent focus:ring-theme-accent/30'
-            }
-            labelClassName={isHomeNest ? 'text-theme-muted' : 'text-white/70'}
-          />
+          <div className="relative">
+            <Input
+              label="Contraseña"
+              type={showPassword ? 'text' : 'password'}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete="current-password"
+              inputClassName={`pr-10 ${isHomeNest
+                ? 'bg-theme-bg border-theme-border-strong text-theme-heading placeholder:text-theme-muted/60 focus:border-theme-accent focus:ring-theme-accent/30'
+                : 'bg-theme-surface/10 border-white/10 text-white placeholder:text-white/40 focus:border-theme-accent focus:ring-theme-accent/30'
+              }`}
+              labelClassName={isHomeNest ? 'text-theme-muted' : 'text-white/70'}
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword((v) => !v)}
+              aria-label={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
+              title={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
+              className="absolute right-3 bottom-2.5 p-1 hover:opacity-80"
+              style={{ color: isHomeNest ? 'var(--text-muted)' : 'rgba(255,255,255,0.5)' }}
+            >
+              {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+            </button>
+          </div>
          {error && <p className="text-sm" style={{ color: 'var(--color-coral)' }}>{error}</p>}
          <Button type="submit" className="w-full" loading={submitting}>
            <LogIn size={16} className="mr-2" />