Initial commit: HelpDesk ICHN - .NET 10 backend + Next.js 16 frontend

frontend/src/app/(auth)/login/page.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { useAuth } from "@/lib/auth";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const { login } = useAuth();
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      await login(email, password);
+      router.push("/");
+    } catch (err: any) {
+      setError(err.message || "Credenciales inválidas");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="auth-page d-flex">
+      {/* Left Panel */}
+      <div className="auth-panel-left d-none d-md-flex col-md-5">
+        <div>
+          <i className="bi bi-headset display-1 mb-3"></i>
+          <h2>HelpDesk ICHN</h2>
+          <p>
+            Sistema de gestión de tickets de soporte técnico. Gestiona incidencias,
+            solicitudes y consultas de manera eficiente.
+          </p>
+          <div className="mt-4">
+            <div className="d-flex align-items-center gap-2 mb-3">
+              <i className="bi bi-check-circle-fill"></i>
+              <span>Gestión centralizada de tickets</span>
+            </div>
+            <div className="d-flex align-items-center gap-2 mb-3">
+              <i className="bi bi-check-circle-fill"></i>
+              <span>Base de conocimiento integrada</span>
+            </div>
+            <div className="d-flex align-items-center gap-2 mb-3">
+              <i className="bi bi-check-circle-fill"></i>
+              <span>SLA y métricas de rendimiento</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Right Panel - Form */}
+      <div className="auth-panel-right col-md-7 col-12">
+        <div className="auth-form">
+          <div className="d-md-none text-center mb-4">
+            <i className="bi bi-headset display-4" style={{ color: "var(--primary)" }}></i>
+            <h4 className="mt-2" style={{ color: "var(--primary)" }}>HelpDesk ICHN</h4>
+          </div>
+
+          <h3>Iniciar Sesión</h3>
+          <p className="subtitle">Ingresa tus credenciales para acceder al sistema</p>
+
+          {error && (
+            <div className="alert alert-danger py-2" role="alert">
+              <i className="bi bi-exclamation-circle me-2"></i>
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit}>
+            <div className="mb-3">
+              <label className="form-label">Correo Electrónico</label>
+              <input
+                type="email"
+                className="form-control"
+                placeholder="tu@email.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                autoFocus
+              />
+            </div>
+
+            <div className="mb-4">
+              <label className="form-label">Contraseña</label>
+              <input
+                type="password"
+                className="form-control"
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+
+            <button
+              type="submit"
+              className="btn btn-primary w-100 py-2"
+              disabled={loading}
+            >
+              {loading ? (
+                <>
+                  <span className="spinner-border spinner-border-sm me-2" role="status"></span>
+                  Ingresando...
+                </>
+              ) : (
+                <>
+                  <i className="bi bi-box-arrow-in-right me-2"></i>
+                  Iniciar Sesión
+                </>
+              )}
+            </button>
+          </form>
+
+          <div className="text-center mt-4">
+            <span className="text-muted" style={{ fontSize: "0.9rem" }}>
+              ¿No tienes cuenta?{" "}
+              <Link href="/register" style={{ color: "var(--primary)", fontWeight: 500 }}>
+                Regístrate aquí
+              </Link>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}