feat: update login flow

This commit is contained in:
2024-01-10 09:22:13 +07:00
parent 73f90ebaf9
commit f2504071cd
17 changed files with 619 additions and 705 deletions

View File

@@ -0,0 +1,55 @@
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">
Continue your experience on Nostr
</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"
>
OAuth Login
</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 (Not recommend)
</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 store your Private Key in{" "}
<span className="text-teal-600">OS Secure Storage</span>
</p>
</div>
</div>
</div>
</div>
</div>
);
}