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

feat: add some improvements from lume

Browse Source
This commit is contained in:
reya
2024-09-01 11:51:11 +07:00
parent aa61e4daec
commit 529a410fe9
13 changed files with 420 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/commands.ts
View File

@@ -61,14 +61,6 @@ async login(account: string, password: string) : Promise<Result<string, string>>
else return { status: "error", error: e as any };
}
},
async deleteAccount(id: string) : Promise<Result<null, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("delete_account", { id }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async createAccount(name: string, about: string, picture: string, password: string) : Promise<Result<string, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("create_account", { name, about, picture, password }) };
@@ -77,9 +69,9 @@ async createAccount(name: string, about: string, picture: string, password: stri
else return { status: "error", error: e as any };
}
},
async importKey(key: string, password: string | null) : Promise<Result<string, string>> {
async importAccount(key: string, password: string) : Promise<Result<string, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("import_key", { key, password }) };
return { status: "ok", data: await TAURI_INVOKE("import_account", { key, password }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
@@ -93,6 +85,22 @@ async connectAccount(uri: string) : Promise<Result<string, string>> {
else return { status: "error", error: e as any };
}
},
async deleteAccount(id: string) : Promise<Result<null, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("delete_account", { id }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async resetPassword(key: string, password: string) : Promise<Result<null, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("reset_password", { key, password }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async getAccounts() : Promise<string[]> {
return await TAURI_INVOKE("get_accounts");
},

5
src/components/index.ts Normal file
View File

@@ -0,0 +1,5 @@
export * from "./frame";
export * from "./back";
export * from "./spinner";
export * from "./user";

118
src/routes.gen.ts
View File

@@ -15,43 +15,32 @@ import { createFileRoute } from '@tanstack/react-router'
import { Route as rootRoute } from './routes/__root'
import { Route as BootstrapRelaysImport } from './routes/bootstrap-relays'
import { Route as IndexImport } from './routes/index'
import { Route as AuthNewImport } from './routes/auth/new'
import { Route as AuthImportImport } from './routes/auth/import'
import { Route as AuthConnectImport } from './routes/auth/connect'
import { Route as AccountRelaysImport } from './routes/$account.relays'
import { Route as AccountContactsImport } from './routes/$account.contacts'
import { Route as AccountChatsIdImport } from './routes/$account.chats.$id'
// Create Virtual Routes
const NostrConnectLazyImport = createFileRoute('/nostr-connect')()
const ResetLazyImport = createFileRoute('/reset')()
const NewLazyImport = createFileRoute('/new')()
const ImportKeyLazyImport = createFileRoute('/import-key')()
const CreateAccountLazyImport = createFileRoute('/create-account')()
const AccountChatsLazyImport = createFileRoute('/$account/chats')()
const AccountChatsNewLazyImport = createFileRoute('/$account/chats/new')()
// Create/Update Routes
const NostrConnectLazyRoute = NostrConnectLazyImport.update({
path: '/nostr-connect',
const ResetLazyRoute = ResetLazyImport.update({
path: '/reset',
getParentRoute: () => rootRoute,
} as any).lazy(() => import('./routes/nostr-connect.lazy').then((d) => d.Route))
} as any).lazy(() => import('./routes/reset.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 BootstrapRelaysRoute = BootstrapRelaysImport.update({
path: '/bootstrap-relays',
getParentRoute: () => rootRoute,
@@ -71,6 +60,21 @@ const AccountChatsLazyRoute = AccountChatsLazyImport.update({
import('./routes/$account.chats.lazy').then((d) => d.Route),
)
const AuthNewRoute = AuthNewImport.update({
path: '/auth/new',
getParentRoute: () => rootRoute,
} as any)
const AuthImportRoute = AuthImportImport.update({
path: '/auth/import',
getParentRoute: () => rootRoute,
} as any)
const AuthConnectRoute = AuthConnectImport.update({
path: '/auth/connect',
getParentRoute: () => rootRoute,
} as any)
const AccountRelaysRoute = AccountRelaysImport.update({
path: '/$account/relays',
getParentRoute: () => rootRoute,
@@ -117,20 +121,6 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof BootstrapRelaysImport
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'
@@ -138,11 +128,11 @@ 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
'/reset': {
id: '/reset'
path: '/reset'
fullPath: '/reset'
preLoaderRoute: typeof ResetLazyImport
parentRoute: typeof rootRoute
}
'/$account/contacts': {
@@ -159,6 +149,27 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof AccountRelaysImport
parentRoute: typeof rootRoute
}
'/auth/connect': {
id: '/auth/connect'
path: '/auth/connect'
fullPath: '/auth/connect'
preLoaderRoute: typeof AuthConnectImport
parentRoute: typeof rootRoute
}
'/auth/import': {
id: '/auth/import'
path: '/auth/import'
fullPath: '/auth/import'
preLoaderRoute: typeof AuthImportImport
parentRoute: typeof rootRoute
}
'/auth/new': {
id: '/auth/new'
path: '/auth/new'
fullPath: '/auth/new'
preLoaderRoute: typeof AuthNewImport
parentRoute: typeof rootRoute
}
'/$account/chats': {
id: '/$account/chats'
path: '/$account/chats'
@@ -188,12 +199,13 @@ declare module '@tanstack/react-router' {
export const routeTree = rootRoute.addChildren({
IndexRoute,
BootstrapRelaysRoute,
CreateAccountLazyRoute,
ImportKeyLazyRoute,
NewLazyRoute,
NostrConnectLazyRoute,
ResetLazyRoute,
AccountContactsRoute,
AccountRelaysRoute,
AuthConnectRoute,
AuthImportRoute,
AuthNewRoute,
AccountChatsLazyRoute: AccountChatsLazyRoute.addChildren({
AccountChatsIdRoute,
AccountChatsNewLazyRoute,
@@ -210,12 +222,13 @@ export const routeTree = rootRoute.addChildren({
"children": [
"/",
"/bootstrap-relays",
"/create-account",
"/import-key",
"/new",
"/nostr-connect",
"/reset",
"/$account/contacts",
"/$account/relays",
"/auth/connect",
"/auth/import",
"/auth/new",
"/$account/chats"
]
},
@@ -225,17 +238,11 @@ export const routeTree = rootRoute.addChildren({
"/bootstrap-relays": {
"filePath": "bootstrap-relays.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"
"/reset": {
"filePath": "reset.lazy.tsx"
},
"/$account/contacts": {
"filePath": "$account.contacts.tsx"
@@ -243,6 +250,15 @@ export const routeTree = rootRoute.addChildren({
"/$account/relays": {
"filePath": "$account.relays.tsx"
},
"/auth/connect": {
"filePath": "auth/connect.tsx"
},
"/auth/import": {
"filePath": "auth/import.tsx"
},
"/auth/new": {
"filePath": "auth/new.tsx"
},
"/$account/chats": {
"filePath": "$account.chats.lazy.tsx",
"children": [

8
src/routes/nostr-connect.lazy.tsx → src/routes/auth/connect.tsx
View File

@@ -2,12 +2,12 @@ import { commands } from "@/commands";
import { GoBack } from "@/components/back";
import { Frame } from "@/components/frame";
import { Spinner } from "@/components/spinner";
import { createLazyFileRoute } from "@tanstack/react-router";
import { createFileRoute } from "@tanstack/react-router";
import { readText } from "@tauri-apps/plugin-clipboard-manager";
import { message } from "@tauri-apps/plugin-dialog";
import { useState, useTransition } from "react";
export const Route = createLazyFileRoute("/nostr-connect")({
export const Route = createFileRoute("/auth/connect")({
component: Screen,
});
@@ -70,12 +70,12 @@ function Screen() {
placeholder="bunker://..."
value={uri}
onChange={(e) => setUri(e.target.value)}
className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none"
className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
/>
<button
type="button"
onClick={() => pasteFromClipboard()}
className="absolute top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500"
className="absolute top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500 dark:text-blue-300"
>
Paste
</button>

18
src/routes/import-key.lazy.tsx → src/routes/auth/import.tsx
View File

@@ -2,12 +2,12 @@ import { commands } from "@/commands";
import { GoBack } from "@/components/back";
import { Frame } from "@/components/frame";
import { Spinner } from "@/components/spinner";
import { createLazyFileRoute } from "@tanstack/react-router";
import { createFileRoute } from "@tanstack/react-router";
import { readText } from "@tauri-apps/plugin-clipboard-manager";
import { message } from "@tauri-apps/plugin-dialog";
import { useState, useTransition } from "react";
export const Route = createLazyFileRoute("/import-key")({
export const Route = createFileRoute("/auth/import")({
component: Screen,
});
@@ -41,7 +41,7 @@ function Screen() {
return;
}
const res = await commands.importKey(key, password);
const res = await commands.importAccount(key, password);
if (res.status === "ok") {
navigate({ to: "/", replace: true });
@@ -63,7 +63,7 @@ function Screen() {
<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
Import Account
</h1>
</div>
<div className="flex flex-col gap-3">
@@ -85,24 +85,26 @@ function Screen() {
placeholder="nsec or ncryptsec..."
value={key}
onChange={(e) => setKey(e.target.value)}
className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
/>
<button
type="button"
onClick={() => pasteFromClipboard()}
className="absolute uppercase top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500"
className="absolute top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500 dark:text-blue-300"
>
Paste
</button>
</div>
</div>
{key.length && !key.startsWith("ncryptsec") ? (
{key.length ? (
<div className="flex flex-col gap-1">
<label
htmlFor="password"
className="text-sm font-medium text-neutral-800 dark:text-neutral-200"
>
Set password to secure your key
{!key.startsWith("ncryptsec")
? "Set password to secure your key"
: "Enter password to decrypt your key"}
</label>
<input
name="password"

15
src/routes/create-account.lazy.tsx → src/routes/auth/new.tsx
View File

@@ -4,11 +4,11 @@ import { GoBack } from "@/components/back";
import { Frame } from "@/components/frame";
import { Spinner } from "@/components/spinner";
import { Plus } from "@phosphor-icons/react";
import { createLazyFileRoute } from "@tanstack/react-router";
import { createFileRoute } from "@tanstack/react-router";
import { message } from "@tauri-apps/plugin-dialog";
import { useState, useTransition } from "react";
export const Route = createLazyFileRoute("/create-account")({
export const Route = createFileRoute("/auth/new")({
component: Screen,
});
@@ -53,8 +53,7 @@ function Screen() {
if (res.status === "ok") {
navigate({
to: "/$account/relays",
params: { account: res.data },
to: "/",
replace: true,
});
} else {
@@ -81,7 +80,7 @@ function Screen() {
className="flex flex-col gap-3 p-3 rounded-xl overflow-hidden"
shadow
>
<div className="self-center relative rounded-full size-20 bg-neutral-100 dark:bg-neutral-900 my-3">
<div className="self-center relative rounded-full size-20 bg-neutral-100 dark:bg-white/10 my-3">
{picture.length ? (
<img
src={picture}
@@ -113,7 +112,7 @@ function Screen() {
onChange={(e) => setName(e.target.value)}
placeholder="e.g. Alice"
spellCheck={false}
className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-600"
className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:ring-0 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-200"
/>
</div>
<div className="flex flex-col gap-1">
@@ -129,7 +128,7 @@ function Screen() {
onChange={(e) => setAbout(e.target.value)}
placeholder="e.g. Artist, anime-lover, and k-pop fan"
spellCheck={false}
className="px-3 py-1.5 rounded-lg min-h-16 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-600"
className="px-3 py-1.5 rounded-lg min-h-16 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:ring-0 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-200"
/>
</div>
<div className="h-px w-full mt-2 bg-neutral-100 dark:bg-neutral-900" />
@@ -145,7 +144,7 @@ function Screen() {
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-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-600"
className="px-3 rounded-lg h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:ring-0 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:text-neutral-200"
/>
</div>
</Frame>

22
src/routes/bootstrap-relays.lazy.tsx
View File

@@ -1,9 +1,11 @@
import { commands } from "@/commands";
import { GoBack } from "@/components";
import { Frame } from "@/components/frame";
import { Spinner } from "@/components/spinner";
import { Plus, X } from "@phosphor-icons/react";
import { ArrowLeft, Plus, X } from "@phosphor-icons/react";
import { createLazyFileRoute } from "@tanstack/react-router";
import { message } from "@tauri-apps/plugin-dialog";
import { relaunch } from "@tauri-apps/plugin-process";
import { useEffect, useState, useTransition } from "react";
export const Route = createLazyFileRoute("/bootstrap-relays")({
@@ -50,13 +52,11 @@ function Screen() {
return;
}
const merged = relays
.map((relay) => Object.values(relay).join(","))
.join("\n");
const merged = relays.join("\r\n");
const res = await commands.setBootstrapRelays(merged);
if (res.status === "ok") {
// TODO: restart app
return await relaunch();
} else {
await message(res.error, {
title: "Manage Relays",
@@ -72,7 +72,10 @@ function Screen() {
}, [bootstrapRelays]);
return (
<div className="size-full flex items-center justify-center">
<div
data-tauri-drag-region
className="relative 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">Manage Relays</h1>
@@ -134,9 +137,16 @@ function Screen() {
>
{isPending ? <Spinner /> : "Save & Restart"}
</button>
<span className="mt-2 w-full text-sm text-neutral-600 dark:text-neutral-400 inline-flex items-center justify-center">
Lume will relaunch after saving.
</span>
</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>
);
}

52
src/routes/index.lazy.tsx
View File

@@ -1,8 +1,6 @@
import { commands } from "@/commands";
import { npub } from "@/commons";
import { Frame } from "@/components/frame";
import { Spinner } from "@/components/spinner";
import { User } from "@/components/user";
import { Frame, User, Spinner } from "@/components";
import { ArrowRight, DotsThree, GearSix, Plus } from "@phosphor-icons/react";
import { Link, createLazyFileRoute } from "@tanstack/react-router";
import { Menu, MenuItem } from "@tauri-apps/api/menu";
@@ -35,6 +33,7 @@ function Screen() {
const [accounts, setAccounts] = useState([]);
const [value, setValue] = useState("");
const [autoLogin, setAutoLogin] = useState(false);
const [password, setPassword] = useState("");
const [isPending, startTransition] = useTransition();
@@ -48,30 +47,25 @@ function Screen() {
const selectAccount = (account: string) => {
setValue(account);
if (account.includes("_nostrconnect")) {
setAutoLogin(true);
}
};
const loginWith = () => {
startTransition(async () => {
if (!value || !password) return;
const res = await commands.login(value, password);
if (res.status === "ok") {
navigate({
to: "/$account/chats/new",
to: "/$account/chats",
params: { account: res.data },
replace: true,
});
} else {
if (res.error === "404") {
navigate({
to: "/$account/relays",
params: { account: value },
replace: true,
});
} else {
await message(res.error, { title: "Login", kind: "error" });
}
await message(res.error, { title: "Login", kind: "error" });
return;
}
});
};
@@ -81,6 +75,11 @@ function Screen() {
e.stopPropagation();
const menuItems = await Promise.all([
MenuItem.new({
text: "Reset password",
enabled: !account.includes("_nostrconnect"),
action: () => navigate({ to: "/reset", search: { account } }),
}),
MenuItem.new({
text: "Delete account",
action: async () => await deleteAccount(account),
@@ -96,6 +95,12 @@ function Screen() {
[],
);
useEffect(() => {
if (autoLogin) {
loginWith();
}
}, [autoLogin, value]);
useEffect(() => {
setAccounts(context.accounts);
}, [context.accounts]);
@@ -123,10 +128,10 @@ function Screen() {
onKeyDown={() => selectAccount(account)}
className="group flex items-center gap-2 hover:bg-black/5 dark:hover:bg-white/5 p-3"
>
<User.Provider pubkey={account}>
<User.Provider pubkey={account.replace("_nostrconnect", "")}>
<User.Root className="flex-1 flex items-center gap-2.5">
<User.Avatar className="rounded-full size-10" />
{value === account ? (
{value === account && !value.includes("_nostrconnect") ? (
<div className="flex-1 flex items-center gap-2">
<input
name="password"
@@ -137,14 +142,21 @@ function Screen() {
if (e.key === "Enter") loginWith();
}}
placeholder="Password"
className="px-3 rounded-full w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
className="px-3 rounded-full w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400"
/>
</div>
) : (
<div className="inline-flex flex-col items-start">
<User.Name className="max-w-[6rem] truncate font-medium leading-tight" />
<div className="inline-flex items-center gap-1.5">
<User.Name className="max-w-[6rem] truncate font-medium leading-tight" />
{account.includes("_nostrconnect") ? (
<div className="text-[8px] border border-blue-500 text-blue-500 px-1.5 rounded-full">
Nostr Connect
</div>
) : null}
</div>
<span className="text-sm text-neutral-700 dark:text-neutral-300">
{npub(account, 16)}
{npub(account.replace("_nostrconnect", ""), 16)}
</span>
</div>
)}

11
src/routes/index.tsx
View File

@@ -1,16 +1,12 @@
import { commands } from "@/commands";
import { checkForAppUpdates, checkPermission } from "@/commons";
import { checkForAppUpdates } from "@/commons";
import { createFileRoute, redirect } from "@tanstack/react-router";
export const Route = createFileRoute("/")({
beforeLoad: async () => {
// Check for app updates
// TODO: move this function to rust
await checkForAppUpdates(true);
// Request notification permission
await checkPermission();
// Get all accounts from system
const accounts = await commands.getAccounts();
@@ -21,6 +17,9 @@ export const Route = createFileRoute("/")({
});
}
return { accounts };
// Workaround for keyring bug on Windows
const fil = accounts.filter((item) => !item.includes("Coop"));
return { accounts: fil };
},
});

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

@@ -18,7 +18,7 @@ function Screen() {
</div>
<div className="flex flex-col gap-4">
<Link
to="/create-account"
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"
>
Create a new identity
@@ -32,7 +32,7 @@ function Screen() {
Login with Nostr Connect
</Link>*/}
<Link
to="/import-key"
to="/auth/import"
className="w-full h-10 bg-white hover:bg-neutral-100 dark:hover:bg-neutral-100 dark:bg-white dark:text-black rounded-lg inline-flex items-center justify-center"
>
Login with Private Key

130
src/routes/reset.lazy.tsx Normal file
View File

@@ -0,0 +1,130 @@
import { createLazyFileRoute } from "@tanstack/react-router";
import { readText } from "@tauri-apps/plugin-clipboard-manager";
import { message } from "@tauri-apps/plugin-dialog";
import { useState, useTransition } from "react";
import { Frame, GoBack, Spinner } from "@/components";
import { commands } from "@/commands";
export const Route = createLazyFileRoute("/reset")({
component: Screen,
});
function Screen() {
const navigate = Route.useNavigate();
const [key, setKey] = useState("");
const [password, setPassword] = useState("");
const [isPending, startTransition] = useTransition();
const pasteFromClipboard = async () => {
const val = await readText();
setKey(val);
};
const submit = () => {
startTransition(async () => {
if (!key.startsWith("nsec1")) {
await message(
"You need to enter a valid private key starts with nsec",
{ title: "Reset Password", kind: "info" },
);
return;
}
if (!password.length) {
await message("You must set password to secure your key", {
title: "Reset Password",
kind: "info",
});
return;
}
const res = await commands.resetPassword(key, password);
if (res.status === "ok") {
navigate({ to: "/", replace: true });
} else {
await message(res.error, {
title: "Reset Password",
kind: "error",
});
return;
}
});
};
return (
<div
data-tauri-drag-region
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">
Reset password
</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.5">
<label
htmlFor="key"
className="text-sm font-medium text-neutral-800 dark:text-neutral-200"
>
Private Key
</label>
<div className="relative">
<input
name="key"
type="password"
placeholder="nsec..."
value={key}
onChange={(e) => setKey(e.target.value)}
className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
/>
<button
type="button"
onClick={() => pasteFromClipboard()}
className="absolute uppercase top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500"
>
Paste
</button>
</div>
</div>
<div className="flex flex-col gap-1">
<label
htmlFor="password"
className="text-sm font-medium text-neutral-800 dark:text-neutral-200"
>
Set a new password
</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-500 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-9 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
>
{isPending ? <Spinner /> : "Continue"}
</button>
<GoBack className="mt-2 w-full text-sm text-neutral-600 dark:text-neutral-400 inline-flex items-center justify-center">
Go back to previous screen
</GoBack>
</div>
</div>
</div>
</div>
);
}