56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
|
|
export function LoginScreen() {
|
|
return (
|
|
<div className="relative flex items-center justify-center w-full h-full">
|
|
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
|
<div className="flex flex-col gap-1 text-center items-center">
|
|
<h1 className="text-2xl font-semibold">Welcome back, anon!</h1>
|
|
</div>
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex flex-col gap-2">
|
|
<Link
|
|
to="/auth/login-oauth"
|
|
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
|
|
>
|
|
Login with Nostr Address
|
|
</Link>
|
|
<Link
|
|
to="/auth/login-nsecbunker"
|
|
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
|
|
>
|
|
Login with nsecBunker
|
|
</Link>
|
|
</div>
|
|
<div className="flex flex-col gap-6">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<div className="w-full border-t border-neutral-900" />
|
|
</div>
|
|
<div className="relative flex justify-center">
|
|
<span className="px-2 font-medium bg-black text-neutral-600">
|
|
Or continue with
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Link
|
|
to="/auth/login-key"
|
|
className="mb-2 inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
|
|
>
|
|
Login with Private Key
|
|
</Link>
|
|
<p className="text-sm text-center text-neutral-500">
|
|
Lume will put your Private Key in{" "}
|
|
<span className="text-teal-600">Secure Storage</span> depended
|
|
on your OS Platform. It will be secured by Password or Biometric
|
|
ID
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|