reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: new flow (#235)

Browse Source 
* feat: redesign initial screen

* feat: improve login process
This commit is contained in:
雨宮蓮
2024-10-02 14:56:26 +07:00
committed by GitHub
parent 0c19ada1ab
commit e098743d43
9 changed files with 221 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/routes/new.lazy.tsx
View File

@@ -1,6 +1,4 @@
import { GoBack } from "@/components";
import { ArrowLeft } from "@phosphor-icons/react";
import { Link, createLazyFileRoute } from "@tanstack/react-router";
import { createLazyFileRoute } from "@tanstack/react-router";
export const Route = createLazyFileRoute("/new")({
component: Screen,
@@ -10,42 +8,79 @@ function Screen() {
return (
<div
data-tauri-drag-region
className="relative size-full flex items-center justify-center"
className="bg-white/50 dark:bg-black/50 relative size-full flex items-center justify-center"
>
<div className="w-[320px] flex flex-col gap-8">
<div className="w-[350px] flex flex-col gap-8">
<div className="flex flex-col gap-1 text-center">
<h1 className="leading-tight text-xl font-semibold">
Welcome to Nostr.
<h1 className="leading-tight text-lg font-semibold">
How would you like to use Lume?
</h1>
</div>
<div className="flex flex-col gap-4">
<Link
to="/auth/new"
className="w-full h-10 bg-blue-500 font-medium hover:bg-blue-600 text-white rounded-lg inline-flex items-center justify-center shadow"
<a
href="/auth/connect"
className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-900 ring-1 ring-black/5 dark:ring-white/5"
>
Create a new identity
</Link>
<div className="w-full h-px bg-black/5 dark:bg-white/5" />
<h3 className="mb-1.5 font-medium">Continue with Nostr Connect</h3>
<div className="text-sm">
<p className="text-neutral-500 dark:text-neutral-600">
Your account will be handled by a remote signer. Lume will not
store your account keys.
</p>
</div>
</a>
<a
href="/auth/import"
className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-900 ring-1 ring-black/5 dark:ring-white/5"
>
<h3 className="mb-1.5 font-medium">Continue with Secret Key</h3>
<div className="text-sm">
<p className="text-neutral-500 dark:text-neutral-600">
Lume will store your keys in secure storage. You can provide a
password to add extra security.
</p>
</div>
</a>
<div className="flex items-center justify-between gap-2">
<div className="flex-1 h-px bg-black/5 dark:bg-white/5" />
<div className="shrink-0 text-sm text-neutral-500 dark:text-neutral-400">
Do you not have a Nostr account yet?
</div>
<div className="flex-1 h-px bg-black/5 dark:bg-white/5" />
</div>
<div className="flex flex-col gap-2">
<Link
to="/auth/connect"
className="w-full h-10 bg-white hover:bg-neutral-100 dark:hover:bg-neutral-100 dark:text-black rounded-lg inline-flex items-center justify-center"
<a
href="https://nsec.app"
target="_blank"
rel="noreferrer"
className="text-sm bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 rounded-lg flex items-center gap-1.5 h-9 px-1"
>
Login with Nostr Connect
</Link>
<Link
to="/auth/import"
className="w-full h-10 bg-white hover:bg-neutral-100 dark:hover:bg-neutral-100 dark:text-black rounded-lg inline-flex items-center justify-center"
<div className="size-7 rounded-md bg-black inline-flex items-center justify-center">
<img src="/nsec_app.svg" alt="nsec.app" className="size-5" />
</div>
Create one with nsec.app
</a>
<a
href="https://nosta.me"
target="_blank"
rel="noreferrer"
className="text-sm bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 rounded-lg flex items-center gap-1.5 h-9 px-1"
>
Login with Private Key
</Link>
<div className="size-7 rounded-md bg-black overflow-hidden">
<img
src="/nosta.jpg"
alt="nosta"
className="size-7 object-cover"
/>
</div>
Create one with nosta.me
</a>
<p className="text-xs text-neutral-400 dark:text-neutral-600">
Or you can create account from other Nostr clients.
</p>
</div>
</div>
</div>
<GoBack className="fixed top-11 left-2 flex items-center gap-1.5 text-sm font-medium">
<ArrowLeft className="size-5" />
Back
</GoBack>
</div>
);
}