116 lines
3.4 KiB
TypeScript
116 lines
3.4 KiB
TypeScript
import { useStorage } from "@lume/ark";
|
|
import { EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
|
|
import { getPublicKey, nip19 } from "nostr-tools";
|
|
import { useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { toast } from "sonner";
|
|
|
|
export function LoginWithKey() {
|
|
const storage = useStorage();
|
|
const navigate = useNavigate();
|
|
|
|
const [showKey, setShowKey] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setError,
|
|
formState: { errors, isValid },
|
|
} = useForm();
|
|
|
|
const onSubmit = async (data: { nsec: string }) => {
|
|
try {
|
|
if (!data.nsec.startsWith("nsec1"))
|
|
return toast.error("You need to enter a private key start with nsec1");
|
|
|
|
setLoading(true);
|
|
|
|
const privkey = nip19.decode(data.nsec).data as string;
|
|
const pubkey = getPublicKey(privkey);
|
|
|
|
await storage.createAccount({
|
|
pubkey: pubkey,
|
|
privkey: privkey,
|
|
});
|
|
|
|
return navigate("/auth/onboarding");
|
|
} catch (e) {
|
|
setLoading(false);
|
|
setError("nsec", {
|
|
type: "manual",
|
|
message: String(e),
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="relative flex items-center justify-center w-full h-full">
|
|
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
|
<div className="flex flex-col gap-1 text-center items-center">
|
|
<h1 className="text-2xl font-semibold">Enter your Private Key</h1>
|
|
<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
|
|
Lume will put your private key to{" "}
|
|
<span className="text-teal-500">
|
|
{storage.platform === "macos"
|
|
? "Apple Keychain"
|
|
: storage.platform === "windows"
|
|
? "Credential Manager"
|
|
: "Secret Service"}
|
|
</span>
|
|
.
|
|
<br />
|
|
It will be secured by your OS.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-6">
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="flex flex-col gap-4 mb-0"
|
|
>
|
|
<div className="relative flex flex-col gap-1">
|
|
<input
|
|
type={showKey ? "text" : "password"}
|
|
{...register("nsec", { required: false })}
|
|
spellCheck={false}
|
|
autoCapitalize="none"
|
|
autoCorrect="none"
|
|
placeholder="nsec1..."
|
|
className="pl-3 pr-11 text-xl border-transparent rounded-xl h-14 bg-neutral-950 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
|
|
/>
|
|
{errors.nsec && (
|
|
<p className="text-sm text-center text-red-600">
|
|
{errors.nsec.message as string}
|
|
</p>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowKey((state) => !state)}
|
|
className="absolute right-2 top-2 size-10 inline-flex items-center justify-center rounded-lg text-white bg-neutral-900 hover:bg-neutral-800"
|
|
>
|
|
{showKey ? (
|
|
<EyeOnIcon className="size-5" />
|
|
) : (
|
|
<EyeOffIcon className="size-5" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
disabled={!isValid}
|
|
className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
|
|
>
|
|
{loading ? (
|
|
<LoaderIcon className="size-5 animate-spin" />
|
|
) : (
|
|
"Continue"
|
|
)}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|