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

feat: improve create account screen

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
src/commands.ts
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 };

104
src/routes/create-account.lazy.tsx
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>