33 lines
1.4 KiB
TypeScript
33 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { signIn } from "next-auth/react";
|
|
import { Monitor, Github } from "lucide-react";
|
|
|
|
export default function LoginPage() {
|
|
return (
|
|
<div className="min-h-[calc(100vh-3.5rem)] flex items-center justify-center p-4">
|
|
<div className="w-full max-w-sm">
|
|
<div className="rounded-2xl border border-[var(--border)] bg-[var(--bg-card)] p-8 text-center shadow-xl">
|
|
<div className="w-12 h-12 rounded-2xl bg-[var(--accent-dim)] border border-[var(--accent-border)] flex items-center justify-center mx-auto mb-5">
|
|
<Monitor className="w-6 h-6 text-emerald-500" />
|
|
</div>
|
|
<h1 className="text-xl font-bold text-[var(--text)] mb-1">SSH Launcher</h1>
|
|
<p className="text-sm text-[var(--text-muted)] mb-8">
|
|
Sign in to manage your Cloudflare Zero Trust SSH hosts
|
|
</p>
|
|
<button
|
|
onClick={() => signIn("github", { callbackUrl: "/" })}
|
|
className="w-full flex items-center justify-center gap-3 rounded-xl bg-[var(--text)] text-[var(--bg)] font-semibold py-3 px-4 hover:opacity-90 transition"
|
|
>
|
|
<Github className="w-4 h-4" />
|
|
Continue with GitHub
|
|
</button>
|
|
<p className="text-xs text-[var(--text-faint)] mt-6">
|
|
Your Cloudflare credentials are stored encrypted in your browser session.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|