src/app/dashboard/api-keys/new/page.js (view raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
"use client"; import { useState } from "react"; import { useRouter } from "next/navigation"; import Button from "@/components/shared/Button"; import Input from "@/components/shared/Input"; export default function NewAPIKeyPage() { const router = useRouter(); const [name, setName] = useState(""); const [error, setError] = useState(""); const [newKey, setNewKey] = useState(null); const [isSubmitting, setIsSubmitting] = useState(false); async function handleSubmit(e) { e.preventDefault(); setIsSubmitting(true); setError(""); try { const response = await fetch( "http://localhost:8080/twirp/apikeys.APIKeysService/CreateAPIKey", { method: "POST", headers: { Authorization: `Bearer ${localStorage.getItem("token")}`, "Content-Type": "application/json", }, body: JSON.stringify({ name }), }, ); if (!response.ok) throw new Error("Failed to create API key"); const data = await response.json(); setNewKey(data.key); } catch (error) { setError("Failed to create API key"); console.error("Error:", error); } finally { setIsSubmitting(false); } } return ( <> {newKey ? ( <div className="bg-white shadow rounded-lg p-6"> <div className="space-y-4"> <h2 className="text-lg font-medium text-gray-900"> API Key Created </h2> <p className="text-sm text-gray-500"> Please copy your API key now. You won't be able to see it again! </p> <div className="bg-gray-50 p-4 rounded-md"> <code className="text-sm break-all">{newKey}</code> </div> <div className="flex justify-end space-x-4"> <Button variant="secondary" onClick={() => { navigator.clipboard.writeText(newKey); }} > Copy to Clipboard </Button> <Button onClick={() => router.push("/dashboard/api-keys")}> Done </Button> </div> </div> </div> ) : ( <div className="bg-white shadow rounded-lg p-6"> <form onSubmit={handleSubmit} className="space-y-6"> <div> <h2 className="text-lg font-medium text-gray-900"> Create New API Key </h2> <p className="mt-1 text-sm text-gray-500"> Give your API key a name to help you identify it later. </p> </div> {error && ( <div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded"> {error} </div> )} <div> <Input label="API Key Name" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g., Development Server" required /> </div> <div className="flex justify-end space-x-4"> <Button variant="secondary" type="button" onClick={() => router.push("/dashboard/api-keys")} > Cancel </Button> <Button type="submit" disabled={isSubmitting}> {isSubmitting ? "Creating..." : "Create API Key"} </Button> </div> </form> </div> )} </> ); } |