`app/app/login/page.tsx`

52 lines
"use client";
import { useState } from "react";
import { GlassCard, LiquidButton } from "@/components/glass";

export default function LoginPage() {
  const [role, setRole] = useState<"admin"|"user">("user");
  const [email, setEmail] = useState("");
  const [pw, setPw] = useState("");
  const [busy, setBusy] = useState(false);

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true);
    const r = await fetch("/api/auth/login", {
      method: "POST", headers: { "content-type": "application/json" },
      body: JSON.stringify({ email, password: pw, role })
    });
    if (r.ok) window.location.href = role === "admin" ? "/admin" : "/chat";
    else { setBusy(false); alert("login failed"); }
  }

  return (
    <main className="min-h-screen flex items-center justify-center p-8">
      <GlassCard className="p-10 w-full max-w-md">
        <div className="flex items-center gap-3 mb-8">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-300 via-violet-400 to-fuchsia-400" />
          <div>
            <div className="text-xl font-semibold">VenturaClaw</div>
            <div className="text-xs uppercase tracking-widest opacity-60">login</div>
          </div>
        </div>
        <div className="flex gap-2 mb-6">
          {(["user","admin"] as const).map(r =>
            <button key={r} onClick={() => setRole(r)}
              className={`flex-1 py-2 rounded-full text-sm transition ${role===r ? "bg-white/15 border border-white/25" : "border border-white/10 opacity-60"}`}>
              {r === "admin" ? "Admin" : "Team Member"}
            </button>
          )}
        </div>
        <form onSubmit={onSubmit} className="space-y-3">
          <input value={email} onChange={e=>setEmail(e.target.value)} placeholder="email"
            className="w-full px-4 py-3 rounded-xl bg-white/[0.05] border border-white/15 outline-none focus:border-white/35" required />
          <input value={pw} onChange={e=>setPw(e.target.value)} placeholder="password" type="password"
            className="w-full px-4 py-3 rounded-xl bg-white/[0.05] border border-white/15 outline-none focus:border-white/35" required />
          <LiquidButton>{busy ? "signing in…" : "Sign in"}</LiquidButton>
        </form>
        <p className="text-xs opacity-50 mt-6">All 56 connectors are pre-wired. After login the chat is connected and ready.</p>
      </GlassCard>
    </main>
  );
}