reya/coop
1
0
Fork 0
Code Issues Pull Requests Releases Activity

feat: add auth screens

Browse Source
This commit is contained in:
reya
2024-07-25 10:59:36 +07:00
parent d206f1d2aa
commit 005cbeab72
12 changed files with 571 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/commands.ts
View File

@@ -4,9 +4,33 @@
/** user-defined commands **/
export const commands = {
async login(id: string) : Promise<Result<string, string>> {
async login(id: string, bunker: string | null) : Promise<Result<string, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("login", { id }) };
return { status: "ok", data: await TAURI_INVOKE("login", { id, bunker }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async createAccount(name: string, picture: string) : Promise<Result<null, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("create_account", { name, picture }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async importKey(nsec: string, password: string) : Promise<Result<string, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("import_key", { nsec, password }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async connectAccount(uri: string) : Promise<Result<string, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("connect_account", { uri }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
@@ -15,9 +39,9 @@ try {
async getAccounts() : Promise<string[]> {
return await TAURI_INVOKE("get_accounts");
},
async getProfile(id: string) : Promise<Result<string, string>> {
async getMetadata(id: string) : Promise<Result<string, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("get_profile", { id }) };
return { status: "ok", data: await TAURI_INVOKE("get_metadata", { id }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };

2
src/components/user/provider.tsx
View File

@@ -42,7 +42,7 @@ export function UserProvider({
.replace("nostr:", "")
.replace(/[^\w\s]/gi, "");
const query: string = await invoke("get_profile", {
const query: string = await invoke("get_metadata", {
id: normalizePubkey,
});

88
src/routes.gen.ts
View File

@@ -14,34 +14,58 @@ import { createFileRoute } from '@tanstack/react-router'
import { Route as rootRoute } from './routes/__root'
import { Route as IndexImport } from './routes/index'
import { Route as AccountChatsImport } from './routes/$account.chats'
import { Route as AccountChatsIdImport } from './routes/$account.chats.$id'
// Create Virtual Routes
const NostrConnectLazyImport = createFileRoute('/nostr-connect')()
const NewLazyImport = createFileRoute('/new')()
const ImportKeyLazyImport = createFileRoute('/import-key')()
const CreateAccountLazyImport = createFileRoute('/create-account')()
const AccountChatsLazyImport = createFileRoute('/$account/chats')()
const AccountChatsIdLazyImport = createFileRoute('/$account/chats/$id')()
// Create/Update Routes
const NostrConnectLazyRoute = NostrConnectLazyImport.update({
path: '/nostr-connect',
getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/nostr-connect.lazy').then((d) => d.Route))
const NewLazyRoute = NewLazyImport.update({
path: '/new',
getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/new.lazy').then((d) => d.Route))
const ImportKeyLazyRoute = ImportKeyLazyImport.update({
path: '/import-key',
getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/import-key.lazy').then((d) => d.Route))
const CreateAccountLazyRoute = CreateAccountLazyImport.update({
path: '/create-account',
getParentRoute: () => rootRoute,
} as any).lazy(() =>
import('./routes/create-account.lazy').then((d) => d.Route),
)
const IndexRoute = IndexImport.update({
path: '/',
getParentRoute: () => rootRoute,
} as any)
const AccountChatsRoute = AccountChatsImport.update({
const AccountChatsLazyRoute = AccountChatsLazyImport.update({
path: '/$account/chats',
getParentRoute: () => rootRoute,
} as any)
} as any).lazy(() =>
import('./routes/$account.chats.lazy').then((d) => d.Route),
)
const AccountChatsIdRoute = AccountChatsIdImport.update({
const AccountChatsIdLazyRoute = AccountChatsIdLazyImport.update({
path: '/$id',
getParentRoute: () => AccountChatsRoute,
} as any)
getParentRoute: () => AccountChatsLazyRoute,
} as any).lazy(() =>
import('./routes/$account.chats.$id.lazy').then((d) => d.Route),
)
// Populate the FileRoutesByPath interface
@@ -54,6 +78,20 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof IndexImport
parentRoute: typeof rootRoute
}
'/create-account': {
id: '/create-account'
path: '/create-account'
fullPath: '/create-account'
preLoaderRoute: typeof CreateAccountLazyImport
parentRoute: typeof rootRoute
}
'/import-key': {
id: '/import-key'
path: '/import-key'
fullPath: '/import-key'
preLoaderRoute: typeof ImportKeyLazyImport
parentRoute: typeof rootRoute
}
'/new': {
id: '/new'
path: '/new'
@@ -61,19 +99,26 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof NewLazyImport
parentRoute: typeof rootRoute
}
'/nostr-connect': {
id: '/nostr-connect'
path: '/nostr-connect'
fullPath: '/nostr-connect'
preLoaderRoute: typeof NostrConnectLazyImport
parentRoute: typeof rootRoute
}
'/$account/chats': {
id: '/$account/chats'
path: '/$account/chats'
fullPath: '/$account/chats'
preLoaderRoute: typeof AccountChatsImport
preLoaderRoute: typeof AccountChatsLazyImport
parentRoute: typeof rootRoute
}
'/$account/chats/$id': {
id: '/$account/chats/$id'
path: '/$id'
fullPath: '/$account/chats/$id'
preLoaderRoute: typeof AccountChatsIdImport
parentRoute: typeof AccountChatsImport
preLoaderRoute: typeof AccountChatsIdLazyImport
parentRoute: typeof AccountChatsLazyImport
}
}
}
@@ -82,8 +127,13 @@ declare module '@tanstack/react-router' {
export const routeTree = rootRoute.addChildren({
IndexRoute,
CreateAccountLazyRoute,
ImportKeyLazyRoute,
NewLazyRoute,
AccountChatsRoute: AccountChatsRoute.addChildren({ AccountChatsIdRoute }),
NostrConnectLazyRoute,
AccountChatsLazyRoute: AccountChatsLazyRoute.addChildren({
AccountChatsIdLazyRoute,
}),
})
/* prettier-ignore-end */
@@ -95,24 +145,36 @@ export const routeTree = rootRoute.addChildren({
"filePath": "__root.tsx",
"children": [
"/",
"/create-account",
"/import-key",
"/new",
"/nostr-connect",
"/$account/chats"
]
},
"/": {
"filePath": "index.tsx"
},
"/create-account": {
"filePath": "create-account.lazy.tsx"
},
"/import-key": {
"filePath": "import-key.lazy.tsx"
},
"/new": {
"filePath": "new.lazy.tsx"
},
"/nostr-connect": {
"filePath": "nostr-connect.lazy.tsx"
},
"/$account/chats": {
"filePath": "$account.chats.tsx",
"filePath": "$account.chats.lazy.tsx",
"children": [
"/$account/chats/$id"
]
},
"/$account/chats/$id": {
"filePath": "$account.chats.$id.tsx",
"filePath": "$account.chats.$id.lazy.tsx",
"parent": "/$account/chats"
}
}

4
src/routes/$account.chats.$id.tsx → src/routes/$account.chats.$id.lazy.tsx
View File

@@ -4,7 +4,7 @@ import { Spinner } from "@/components/spinner";
import { ArrowUp, CloudArrowUp, Paperclip } from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { createLazyFileRoute } from "@tanstack/react-router";
import { listen } from "@tauri-apps/api/event";
import { message } from "@tauri-apps/plugin-dialog";
import type { NostrEvent } from "nostr-tools";
@@ -17,7 +17,7 @@ type Payload = {
sender: string;
};
export const Route = createFileRoute("/$account/chats/$id")({
export const Route = createLazyFileRoute("/$account/chats/$id")({
component: Screen,
});

4
src/routes/$account.chats.tsx → src/routes/$account.chats.lazy.tsx
View File

@@ -4,7 +4,7 @@ import { User } from "@/components/user";
import { Plus, UsersThree } from "@phosphor-icons/react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Link, Outlet, createFileRoute } from "@tanstack/react-router";
import { Link, Outlet, createLazyFileRoute } from "@tanstack/react-router";
import { listen } from "@tauri-apps/api/event";
import type { NostrEvent } from "nostr-tools";
import { useEffect } from "react";
@@ -14,7 +14,7 @@ type Payload = {
sender: string;
};
export const Route = createFileRoute("/$account/chats")({
export const Route = createLazyFileRoute("/$account/chats")({
component: Screen,
});

94
src/routes/create-account.lazy.tsx Normal file
View File

@@ -0,0 +1,94 @@
import { commands } from "@/commands";
import { Frame } from "@/components/frame";
import { Spinner } from "@/components/spinner";
import { createLazyFileRoute } from "@tanstack/react-router";
import { message } from "@tauri-apps/plugin-dialog";
import { useState, useTransition } from "react";
export const Route = createLazyFileRoute("/create-account")({
component: Screen,
});
function Screen() {
const navigate = Route.useNavigate();
const [picture, setPicture] = useState("");
const [name, setName] = useState("");
const [isPending, startTransition] = useTransition();
const submit = async () => {
startTransition(async () => {
const res = await commands.createAccount(name, picture);
if (res.status === "ok") {
navigate({ to: "/", replace: true });
} else {
await message(res.error, {
title: "New Identity",
kind: "error",
});
return;
}
});
};
return (
<div className="size-full flex items-center justify-center">
<div className="w-[320px] flex flex-col gap-8">
<div className="flex flex-col gap-1 text-center">
<h1 className="leading-tight text-xl font-semibold">
Import Private Key
</h1>
</div>
<div className="flex flex-col gap-3">
<Frame
className="flex flex-col gap-3 p-3 rounded-xl overflow-hidden"
shadow
>
<div className="flex flex-col gap-1">
<label
htmlFor="avatar"
className="font-medium text-neutral-900 dark:text-neutral-100"
>
Avatar
</label>
<input
name="avatar"
type="text"
placeholder="https://"
value={picture}
onChange={(e) => setPicture(e.target.value)}
className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none"
/>
</div>
<div className="flex flex-col gap-1">
<label
htmlFor="name"
className="font-medium text-neutral-900 dark:text-neutral-100"
>
Name
</label>
<input
name="name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none"
/>
</div>
</Frame>
<div className="flex flex-col items-center gap-1">
<button
type="button"
onClick={() => submit()}
disabled={isPending}
className="inline-flex items-center justify-center w-full h-10 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
>
{isPending ? <Spinner /> : "Continue"}
</button>
</div>
</div>
</div>
</div>
);
}

102
src/routes/import-key.lazy.tsx Normal file
View File

@@ -0,0 +1,102 @@
import { commands } from "@/commands";
import { Frame } from "@/components/frame";
import { Spinner } from "@/components/spinner";
import { createLazyFileRoute } from "@tanstack/react-router";
import { message } from "@tauri-apps/plugin-dialog";
import { useState, useTransition } from "react";
export const Route = createLazyFileRoute("/import-key")({
component: Screen,
});
function Screen() {
const navigate = Route.useNavigate();
const [key, setKey] = useState("");
const [password, setPassword] = useState("");
const [isPending, startTransition] = useTransition();
const submit = async () => {
startTransition(async () => {
if (!key.startsWith("nsec1")) {
await message(
"You need to enter a valid private key starts with nsec or ncryptsec",
{ title: "Import Key", kind: "info" },
);
return;
}
const res = await commands.importKey(key, password);
if (res.status === "ok") {
navigate({ to: "/", replace: true });
} else {
await message(res.error, {
title: "Import Private Ket",
kind: "error",
});
return;
}
});
};
return (
<div className="size-full flex items-center justify-center">
<div className="w-[320px] flex flex-col gap-8">
<div className="flex flex-col gap-1 text-center">
<h1 className="leading-tight text-xl font-semibold">
Import Private Key
</h1>
</div>
<div className="flex flex-col gap-3">
<Frame
className="flex flex-col gap-3 p-3 rounded-xl overflow-hidden"
shadow
>
<div className="flex flex-col gap-1">
<label
htmlFor="key"
className="font-medium text-neutral-900 dark:text-neutral-100"
>
Private Key
</label>
<input
name="key"
type="text"
placeholder="nsec or ncryptsec..."
value={key}
onChange={(e) => setKey(e.target.value)}
className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none"
/>
</div>
<div className="flex flex-col gap-1">
<label
htmlFor="password"
className="font-medium text-neutral-900 dark:text-neutral-100"
>
Password (Optional)
</label>
<input
name="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none"
/>
</div>
</Frame>
<div className="flex flex-col items-center gap-1">
<button
type="button"
onClick={() => submit()}
disabled={isPending}
className="inline-flex items-center justify-center w-full h-10 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
>
{isPending ? <Spinner /> : "Continue"}
</button>
</div>
</div>
</div>
</div>
);
}

4
src/routes/index.tsx
View File

@@ -43,7 +43,9 @@ function Screen() {
const loginWith = async (npub: string) => {
setValue(npub);
startTransition(async () => {
const res = await commands.login(npub);
const bunker: string = localStorage.getItem(`${npub}_bunker`);
const verifyBunker = bunker?.length && bunker?.startsWith("bunker://");
const res = await commands.login(npub, verifyBunker ? bunker : null);
if (res.status === "ok") {
navigate({

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

@@ -1,5 +1,39 @@
import { createLazyFileRoute } from '@tanstack/react-router'
import { createLazyFileRoute, Link } from "@tanstack/react-router";
export const Route = createLazyFileRoute('/new')({
component: () => <div>Hello /new!</div>
})
export const Route = createLazyFileRoute("/new")({
component: Screen,
});
function Screen() {
return (
<div className="size-full flex items-center justify-center">
<div className="w-[320px] flex flex-col gap-8">
<div className="flex flex-col gap-1 text-center">
<h1 className="leading-tight text-xl font-semibold">
Direct Message client for Nostr.
</h1>
</div>
<div className="flex flex-col gap-3">
<Link
to="/create-account"
className="w-full h-10 bg-blue-500 hover:bg-blue-600 text-white rounded-lg inline-flex items-center justify-center shadow"
>
Create a new identity
</Link>
<Link
to="/nostr-connect"
className="w-full h-10 bg-white hover:bg-neutral-100 dark:hover:bg-neutral-950 dark:bg-neutral-900 rounded-lg inline-flex items-center justify-center"
>
Login with Nostr Connect
</Link>
<Link
to="/import-key"
className="w-full text-sm text-neutral-600 dark:text-neutral-400 inline-flex items-center justify-center"
>
Login with Private Key (not recommended)
</Link>
</div>
</div>
</div>
);
}

93
src/routes/nostr-connect.lazy.tsx Normal file
View File

@@ -0,0 +1,93 @@
import { commands } from "@/commands";
import { Frame } from "@/components/frame";
import { Spinner } from "@/components/spinner";
import { createLazyFileRoute } from "@tanstack/react-router";
import { message } from "@tauri-apps/plugin-dialog";
import { useState, useTransition } from "react";
export const Route = createLazyFileRoute("/nostr-connect")({
component: Screen,
});
function Screen() {
const navigate = Route.useNavigate();
const [uri, setUri] = useState("");
const [isPending, startTransition] = useTransition();
const submit = async () => {
startTransition(async () => {
if (!uri.startsWith("bunker://")) {
await message(
"You need to enter a valid Connect URI starts with bunker://",
{ title: "Nostr Connect", kind: "info" },
);
return;
}
const res = await commands.connectAccount(uri);
if (res.status === "ok") {
const npub = res.data;
const parsed = new URL(uri);
parsed.searchParams.delete("secret");
// save connection string
localStorage.setItem(`${npub}_bunker`, parsed.toString());
navigate({ to: "/", replace: true });
} else {
await message(res.error, { title: "Nostr Connect", kind: "error" });
return;
}
});
};
return (
<div className="size-full flex items-center justify-center">
<div className="w-[320px] flex flex-col gap-8">
<div className="flex flex-col gap-1 text-center">
<h1 className="leading-tight text-xl font-semibold">
Nostr Connect.
</h1>
</div>
<div className="flex flex-col gap-3">
<Frame
className="flex flex-col gap-1 p-3 rounded-xl overflow-hidden"
shadow
>
<label
htmlFor="uri"
className="font-medium text-neutral-900 dark:text-neutral-100"
>
Connection String
</label>
<input
name="uri"
type="text"
placeholder="bunker://..."
value={uri}
onChange={(e) => setUri(e.target.value)}
className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:border-blue-500 focus:outline-none"
/>
</Frame>
<div className="flex flex-col items-center gap-1">
<button
type="button"
onClick={() => submit()}
disabled={isPending}
className="inline-flex items-center justify-center w-full h-10 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
>
{isPending ? <Spinner /> : "Continue"}
</button>
{isPending ? (
<p className="text-sm text-center text-neutral-600 dark:text-neutral-400">
Waiting confirmation...
</p>
) : null}
</div>
</div>
</div>
</div>
);
}