SSOLogin

1"use client";
2
3import { useState, useMemo } from "react";
4import { Building2, ArrowRight, ShieldCheck, Loader2 } from "lucide-react";
5
6const ssoProviders: Record<string, string> = {
7  "acme.com": "Acme Corp",
8  "globex.io": "Globex Inc",
9  "initech.dev": "Initech",
10};
11
12export default function SSOLogin() {
13  const [email, setEmail] = useState("");
14  const [connecting, setConnecting] = useState(false);
15
16  const domain = useMemo(() => {
17    const parts = email.split("@");
18    return parts.length === 2 ? parts[1] : "";
19  }, [email]);
20
21  const detectedOrg = ssoProviders[domain] ?? null;
22
23  const handleSSO = () => {
24    setConnecting(true);
25    setTimeout(() => setConnecting(false), 2000);
26  };
27
28  return (
29    <div className="mx-auto w-full max-w-md rounded-2xl border border-zinc-200 bg-white p-8 shadow-xl dark:border-zinc-800 dark:bg-zinc-950">
30      <div className="mb-6 text-center">
31        <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-slate-700 to-slate-900 dark:from-slate-600 dark:to-slate-800">
32          <Building2 className="h-6 w-6 text-white" />
33        </div>
34        <h2 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">Enterprise SSO</h2>
35        <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Sign in with your company account</p>
36      </div>
37
38      <div className="space-y-4">
39        <div>
40          <label className="mb-1.5 block text-sm font-medium text-zinc-700 dark:text-zinc-300">Work email</label>
41          <input type="email" placeholder="you@company.com" value={email} onChange={(e) => setEmail(e.target.value)} className="w-full rounded-lg border border-zinc-300 bg-transparent px-3.5 py-2.5 text-sm outline-none transition-colors placeholder:text-zinc-400 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20 dark:border-zinc-700 dark:text-zinc-100" />
42        </div>
43
44        {detectedOrg && (
45          <div className="flex items-center gap-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3 dark:border-emerald-800 dark:bg-emerald-900/20">
46            <ShieldCheck className="h-5 w-5 shrink-0 text-emerald-600 dark:text-emerald-400" />
47            <div className="flex-1">
48              <p className="text-sm font-medium text-emerald-800 dark:text-emerald-300">SSO enabled for {detectedOrg}</p>
49              <p className="text-xs text-emerald-600 dark:text-emerald-400">Your organization requires SSO authentication</p>
50            </div>
51          </div>
52        )}
53
54        <button
55          onClick={handleSSO}
56          disabled={!detectedOrg || connecting}
57          className="flex w-full items-center justify-center gap-2 rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-semibold text-white transition-all hover:bg-zinc-800 active:scale-[0.98] disabled:opacity-50 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
58        >
59          {connecting ? (
60            <><Loader2 className="h-4 w-4 animate-spin" /> Connecting to {detectedOrg}...</>
61          ) : (
62            <>Continue with SSO <ArrowRight className="h-4 w-4" /></>
63          )}
64        </button>
65      </div>
66
67      <div className="my-6 flex items-center gap-3">
68        <div className="h-px flex-1 bg-zinc-200 dark:bg-zinc-800" />
69        <span className="text-xs font-medium text-zinc-400">OR</span>
70        <div className="h-px flex-1 bg-zinc-200 dark:bg-zinc-800" />
71      </div>
72
73      <button className="w-full rounded-lg border border-zinc-200 px-4 py-2.5 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800">
74        Sign in with password instead
75      </button>
76    </div>
77  );
78}