me
55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { HourglassSimpleMediumIcon } from "@phosphor-icons/react";
|
|
import { useAuth } from "../../hooks/useAuth";
|
|
import { Modal } from "../ui/Modal";
|
|
|
|
export function PasskeyModal() {
|
|
const { unlock } = useAuth();
|
|
|
|
return (
|
|
<Modal isOpen={true}>
|
|
<HourglassSimpleMediumIcon
|
|
size={48}
|
|
className="text-primary mx-auto mb-8 animate-pulse"
|
|
weight="duotone"
|
|
/>
|
|
<h3
|
|
data-testid="passkey-modal-title"
|
|
className="font-bold text-lg font-display text-primary"
|
|
>
|
|
You've been away a while.
|
|
</h3>
|
|
<p className="py-4 font-sans">
|
|
Your letters are still there. Just need the key once more.
|
|
</p>
|
|
<div className="divider w-1/2 mx-auto text-xs text-neutral-content/30 mt-0"></div>
|
|
<p className="text-xs text-neutral-content/30 font-mono italic">
|
|
Nothing was lost.
|
|
</p>
|
|
<div className="modal-action items-center gap-4">
|
|
<form
|
|
className="form-control w-full inline-flex"
|
|
onSubmit={async (e: React.SubmitEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.currentTarget);
|
|
const password = formData.get("password") as string;
|
|
if (!password) return;
|
|
await unlock(password);
|
|
}}
|
|
>
|
|
<input
|
|
name="password"
|
|
required
|
|
type="password"
|
|
placeholder="password"
|
|
className="font-sans validator input input-bordered rounded-r-none"
|
|
/>
|
|
<div className="validator-message text-xs text-error"></div>
|
|
<button type="submit" className="btn btn-primary rounded-l-none">
|
|
Unlock
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|