forked from baron/baron-sso
90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
import { ShieldHalf, LogIn, ExternalLink } from "lucide-react";
|
|
import { useAuth } from "react-oidc-context";
|
|
import { Button } from "../../components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "../../components/ui/card";
|
|
|
|
function LoginPage() {
|
|
const auth = useAuth();
|
|
|
|
const handleSSOLogin = () => {
|
|
// OIDC client-side authentication flow started here
|
|
auth.signinRedirect();
|
|
};
|
|
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/10 via-background to-background">
|
|
<div className="w-full max-w-md space-y-8">
|
|
<div className="flex flex-col items-center justify-center space-y-4 text-center">
|
|
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/15 text-primary shadow-[0_20px_50px_rgba(54,211,153,0.3)]">
|
|
<ShieldHalf size={32} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h1 className="text-3xl font-bold tracking-tight">Baron SSO</h1>
|
|
<p className="text-sm text-muted-foreground uppercase tracking-[0.2em]">
|
|
Developer Control Plane
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="border-primary/20 bg-card/50 backdrop-blur-xl shadow-2xl">
|
|
<CardHeader className="space-y-1">
|
|
<CardTitle className="text-2xl flex items-center gap-2">
|
|
<LogIn size={20} className="text-primary" />
|
|
개발자 포털 로그인
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Baron 통합 인증(SSO)을 통해 개발자 포털에 접속합니다.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="pt-4 pb-8 space-y-3">
|
|
<Button
|
|
onClick={handleSSOLogin}
|
|
className="w-full h-14 text-lg font-semibold flex gap-3 shadow-lg"
|
|
disabled={auth.isLoading}
|
|
>
|
|
{auth.isLoading ? (
|
|
<>
|
|
<div className="h-5 w-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
|
로그인 진행 중...
|
|
</>
|
|
) : (
|
|
<>
|
|
<ShieldHalf size={22} />
|
|
SSO 계정으로 로그인
|
|
<ExternalLink size={16} className="opacity-50" />
|
|
</>
|
|
)}
|
|
</Button>
|
|
|
|
<p className="mt-6 text-xs text-center text-muted-foreground leading-relaxed">
|
|
개발자 포털 세션은 브라우저 정책에 따라 유지됩니다.
|
|
<br />
|
|
민감한 작업 시 재인증을 요구할 수 있습니다.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="flex justify-center gap-4">
|
|
<div className="h-1 w-1 rounded-full bg-primary/30" />
|
|
<div className="h-1 w-1 rounded-full bg-primary/30" />
|
|
<div className="h-1 w-1 rounded-full bg-primary/30" />
|
|
</div>
|
|
|
|
<p className="px-8 text-center text-sm text-muted-foreground">
|
|
인증 정보가 없거나 로그인이 되지 않는 경우
|
|
<br />
|
|
시스템 관리자에게 문의하세요.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LoginPage;
|