feat: improve create account screen

This commit is contained in:
reya
2024-08-05 08:37:07 +07:00
parent f1b131db0a
commit 37decdc6ea
4 changed files with 102 additions and 35 deletions

View File

@@ -58,33 +58,34 @@ pub fn delete_account(id: String) -> Result<(), String> {
#[specta::specta]
pub async fn create_account(
name: String,
picture: Option<String>,
about: String,
picture: String,
password: String,
state: State<'_, Nostr>,
) -> Result<String, String> {
let client = &state.client;
let keys = Keys::generate();
let npub = keys.public_key().to_bech32().map_err(|e| e.to_string())?;
let nsec = keys.secret_key().unwrap().to_bech32().map_err(|e| e.to_string())?;
let secret_key = keys.secret_key().map_err(|e| e.to_string())?;
let enc = EncryptedSecretKey::new(secret_key, password, 16, KeySecurity::Medium)
.map_err(|err| err.to_string())?;
let enc_bech32 = enc.to_bech32().map_err(|err| err.to_string())?;
// Save account
let keyring = Entry::new("Coop Secret Storage", &npub).unwrap();
let _ = keyring.set_password(&nsec);
let _ = keyring.set_password(&enc_bech32);
let signer = NostrSigner::Keys(keys);
// Update signer
client.set_signer(Some(signer)).await;
// Update metadata
let url = match picture {
Some(p) => Some(Url::parse(&p).map_err(|e| e.to_string())?),
None => None,
};
let mut metadata =
Metadata::new().display_name(name.clone()).name(name.to_lowercase()).about(about);
let metadata = match url {
Some(picture) => Metadata::new().display_name(name).picture(picture),
None => Metadata::new().display_name(name),
};
if let Ok(url) = Url::parse(&picture) {
metadata = metadata.picture(url)
}
match client.set_metadata(&metadata).await {
Ok(_) => Ok(npub),
@@ -232,7 +233,7 @@ pub async fn login(
};
let ncryptsec = EncryptedSecretKey::from_bech32(bech32).map_err(|e| e.to_string())?;
let secret_key = ncryptsec.to_secret_key(password).map_err(|e| e.to_string())?;
let secret_key = ncryptsec.to_secret_key(password).map_err(|_| "Wrong password.")?;
let keys = Keys::new(secret_key);
let public_key = keys.public_key();
let signer = NostrSigner::Keys(keys);

View File

@@ -70,7 +70,7 @@
"active": true,
"pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEY2OUJBNzZDOUYwNzREOApSV1RZZFBESmRycHBEMDV0NVZodllibXZNT21YTXBVOG1kRjdpUEpVS1ZkOGVuT295RENrWkpBRAo=",
"endpoints": [
"https://tauri-updater.coop-updater-service.workers.dev/check/lumehq/coop/{{target}}/{{arch}}/{{current_version}}",
"https://releases.coop-updater-service.workers.dev/check/lumehq/coop/{{target}}/{{arch}}/{{current_version}}",
"https://github.com/lumehq/coop/releases/latest/download/latest.json"
]
}

View File

@@ -20,9 +20,9 @@ try {
else return { status: "error", error: e as any };
}
},
async createAccount(name: string, picture: string | null) : Promise<Result<string, string>> {
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, picture }) };
return { status: "ok", data: await TAURI_INVOKE("create_account", { name, about, picture, password }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };

View File

@@ -1,7 +1,9 @@
import { commands } from "@/commands";
import { upload } from "@/commons";
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 { message } from "@tauri-apps/plugin-dialog";
import { useState, useTransition } from "react";
@@ -13,13 +15,41 @@ export const Route = createLazyFileRoute("/create-account")({
function Screen() {
const navigate = Route.useNavigate();
const [picture, setPicture] = useState(null);
const [password, setPassword] = useState("");
const [picture, setPicture] = useState<string>("");
const [name, setName] = useState("");
const [about, setAbout] = useState("");
const [isPending, startTransition] = useTransition();
const uploadAvatar = async () => {
const file = await upload();
if (file) {
setPicture(file);
} else {
return;
}
};
const submit = async () => {
startTransition(async () => {
const res = await commands.createAccount(name, picture);
if (!name.length) {
await message("Please add your name", {
title: "New Identity",
kind: "info",
});
return;
}
if (!password.length) {
await message("You must set password to secure your account", {
title: "New Identity",
kind: "info",
});
return;
}
const res = await commands.createAccount(name, picture, about, password);
if (res.status === "ok") {
navigate({
@@ -51,35 +81,71 @@ function Screen() {
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"
<div className="self-center relative rounded-full size-20 bg-neutral-100 dark:bg-neutral-900 my-3">
{picture.length ? (
<img
src={picture}
alt="avatar"
loading="lazy"
decoding="async"
className="absolute inset-0 z-10 object-cover w-full h-full rounded-full"
/>
) : null}
<button
type="button"
onClick={() => uploadAvatar()}
className="absolute inset-0 z-20 flex items-center justify-center w-full h-full rounded-full bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
>
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-500 focus:border-blue-500 focus:outline-none"
/>
<Plus className="size-5" />
</button>
</div>
<div className="flex flex-col gap-1">
<label
htmlFor="name"
className="font-medium text-neutral-900 dark:text-neutral-100"
className="text-sm font-medium text-neutral-800 dark:text-neutral-200"
>
Name
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-500 focus:border-blue-500 focus:outline-none"
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"
/>
</div>
<div className="flex flex-col gap-1">
<label
htmlFor="about"
className="text-sm font-medium text-neutral-800 dark:text-neutral-200"
>
About
</label>
<textarea
name="about"
value={about}
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"
/>
</div>
<div className="h-px w-full mt-2 bg-neutral-100 dark:bg-neutral-900" />
<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 account *
</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 placeholder:text-neutral-400 dark:text-neutral-600"
/>
</div>
</Frame>