| "use client"; |
| import { useState } from "react"; |
| export function AccessToken({ admin = false }: { admin?: boolean }) { |
| const [token, setToken] = useState(""), |
| [message, setMessage] = useState(""); |
| async function save() { |
| sessionStorage.setItem(admin ? "vm-admin-token" : "vm-user-token", token); |
| if (!admin) { |
| try { |
| const r = await fetch("/api/access", { |
| method: "POST", |
| headers: { Authorization: `Bearer ${token}` }, |
| }); |
| if (!r.ok) throw new Error("Access denied"); |
| window.location.reload(); |
| } catch (e) { |
| sessionStorage.removeItem("vm-user-token"); |
| setMessage(String(e)); |
| } |
| } else setMessage("Administrator token saved for this tab"); |
| } |
| return ( |
| <div className="my-3 flex flex-wrap items-center gap-2 text-sm"> |
| <label> |
| {admin ? "Admin" : "Session"} access token{" "} |
| <input |
| aria-label={admin ? "Admin token" : "Session token"} |
| type="password" |
| autoComplete="off" |
| className="rounded-lg border border-line bg-surface px-3 py-2" |
| value={token} |
| onChange={(e) => setToken(e.target.value)} |
| /> |
| </label> |
| <button |
| className="rounded-lg border border-line px-3 py-2 hover:bg-surface-2" |
| onClick={() => void save()} |
| > |
| Connect {admin ? "administrator" : "private library"} |
| </button> |
| <button |
| className="text-muted" |
| onClick={() => { |
| sessionStorage.removeItem(admin ? "vm-admin-token" : "vm-user-token"); |
| if (!admin) |
| void fetch("/api/access", { method: "DELETE" }).then(() => |
| window.location.reload(), |
| ); |
| setMessage("Cleared"); |
| }} |
| > |
| Disconnect |
| </button> |
| <span role="status">{message}</span> |
| </div> |
| ); |
| } |
|
|
