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

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" />