187 lines
6.5 KiB
TypeScript
187 lines
6.5 KiB
TypeScript
import { AvatarUploader } from "@/components/avatarUploader";
|
|
import { PlusIcon } from "@lume/icons";
|
|
import type { Metadata } from "@lume/types";
|
|
import { Spinner } from "@lume/ui";
|
|
import { Link } from "@tanstack/react-router";
|
|
import { createFileRoute } from "@tanstack/react-router";
|
|
import { useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { toast } from "sonner";
|
|
|
|
export const Route = createFileRoute("/settings/user")({
|
|
beforeLoad: async ({ context }) => {
|
|
const ark = context.ark;
|
|
const profile = await ark.get_current_user_profile();
|
|
return { profile };
|
|
},
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
const { ark, profile } = Route.useRouteContext();
|
|
const { register, handleSubmit } = useForm();
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [picture, setPicture] = useState<string>("");
|
|
|
|
const onSubmit = async (data: Metadata) => {
|
|
try {
|
|
setLoading(true);
|
|
|
|
const profile = { ...data, picture };
|
|
await ark.create_profile(profile);
|
|
|
|
setLoading(false);
|
|
} catch (e) {
|
|
setLoading(false);
|
|
toast.error(String(e));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex w-full h-full">
|
|
<div className="flex-1 h-full flex items-center flex-col justify-center gap-3">
|
|
<div className="relative size-24 rounded-full bg-gradient-to-tr from-orange-100 via-red-50 to-blue-200">
|
|
{profile.picture ? (
|
|
<img
|
|
src={picture || profile.picture}
|
|
alt="avatar"
|
|
loading="lazy"
|
|
decoding="async"
|
|
className="absolute inset-0 z-10 h-full w-full rounded-full object-cover"
|
|
/>
|
|
) : null}
|
|
<AvatarUploader
|
|
setPicture={setPicture}
|
|
className="absolute inset-0 z-20 flex h-full w-full items-center justify-center rounded-full bg-black/10 text-white hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
|
|
>
|
|
<PlusIcon className="size-8" />
|
|
</AvatarUploader>
|
|
</div>
|
|
<div className="text-center flex flex-col items-center">
|
|
<div className="text-lg font-semibold">{profile.display_name}</div>
|
|
<div className="text-neutral-800 dark:text-neutral-200">
|
|
{profile.nip05}
|
|
</div>
|
|
<div className="mt-4">
|
|
<Link
|
|
to="/settings/backup"
|
|
className="px-5 h-9 border border-blue-300 text-sm font-medium hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800 rounded-full bg-blue-100 text-blue-500 inline-flex items-center justify-center"
|
|
>
|
|
Backup Account
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 h-full">
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="flex flex-col gap-3 mb-0"
|
|
>
|
|
<div className="flex w-full flex-col gap-1">
|
|
<label
|
|
htmlFor="display_name"
|
|
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Display Name
|
|
</label>
|
|
<input
|
|
name="display_name"
|
|
{...register("display_name", { required: true, minLength: 1 })}
|
|
value={profile.display_name}
|
|
spellCheck={false}
|
|
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
/>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-1">
|
|
<label
|
|
htmlFor="name"
|
|
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Name
|
|
</label>
|
|
<input
|
|
name="name"
|
|
{...register("name")}
|
|
spellCheck={false}
|
|
value={profile.name}
|
|
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
/>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-1">
|
|
<label
|
|
htmlFor="website"
|
|
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Website
|
|
</label>
|
|
<input
|
|
name="website"
|
|
type="url"
|
|
{...register("website")}
|
|
spellCheck={false}
|
|
value={profile.website}
|
|
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
/>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-1">
|
|
<label
|
|
htmlFor="banner"
|
|
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Cover
|
|
</label>
|
|
<input
|
|
name="banner"
|
|
type="url"
|
|
{...register("banner")}
|
|
spellCheck={false}
|
|
value={profile.banner}
|
|
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
/>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-1">
|
|
<label
|
|
htmlFor="nip05"
|
|
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
NIP-05
|
|
</label>
|
|
<input
|
|
name="nip05"
|
|
type="email"
|
|
{...register("nip05")}
|
|
spellCheck={false}
|
|
value={profile.nip05}
|
|
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
/>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-1">
|
|
<label
|
|
htmlFor="lnaddress"
|
|
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Lightning Address
|
|
</label>
|
|
<input
|
|
name="lnaddress"
|
|
type="email"
|
|
{...register("lud16")}
|
|
value={profile.lud16}
|
|
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-end">
|
|
<button
|
|
type="submit"
|
|
className="inline-flex h-9 w-32 px-2 items-center justify-center rounded-lg bg-blue-500 font-medium text-sm text-white hover:bg-blue-600 disabled:opacity-50"
|
|
>
|
|
{loading ? <Spinner className="size-4" /> : "Update Profile"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|