From 738585dcaf2373d2e5d6065d25961d4b8ac4084f Mon Sep 17 00:00:00 2001
From: Kohei Watanabe <kou029w@gmail.com>
Date: Mon, 3 Oct 2022 20:35:33 +0900
Subject: [PATCH] support public key

---
 src/index.html | 13 ++++++++++---
 src/main.ts    | 20 ++++++++++++++++----
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/index.html b/src/index.html
index aaa7981..337f5c8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -40,8 +40,8 @@
         <label style="display: block">
           Public Key Use
           <select name="use">
-            <option value="sig">signature</option>
-            <option value="enc">encryption</option>
+            <option value="sig">Signature</option>
+            <option value="enc">Encryption</option>
             <option value="">-</option>
           </select>
         </label>
@@ -60,7 +60,14 @@
         </label>
         <input type="submit" value="Generate" style="display: block" />
       </form>
-      <pre id="output"></pre>
+      <label>
+        Private Key
+        <pre id="private"></pre>
+      </label>
+      <label>
+        Public Key
+        <pre id="public"></pre>
+      </label>
     </main>
     <footer>
       by <a href="https://github.com/kou029w/" rel="noreferrer">kou029w</a>
diff --git a/src/main.ts b/src/main.ts
index df3d586..3e54e97 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,14 +7,17 @@ import {
 } from "jose";
 
 const form = document.querySelector("form") as HTMLFormElement;
-const output = document.querySelector("#output") as HTMLPreElement;
+const publicKeyOutput = document.querySelector("#public") as HTMLPreElement;
+const privateKeyOutput = document.querySelector("#private") as HTMLPreElement;
 
 async function onSubmit(e: SubmitEvent) {
   e.preventDefault();
   const data = new FormData(form);
   const alg = data.get("alg") as string;
   const use = (data.get("use") as string) || undefined;
-  const { privateKey } = await generateKeyPair(alg, { extractable: true });
+  const { privateKey, publicKey } = await generateKeyPair(alg, {
+    extractable: true,
+  });
   const jwk = await exportJWK(privateKey);
   const createKid = {
     "rfc7638-s256": () => calculateJwkThumbprint(jwk, "sha256"),
@@ -25,8 +28,17 @@ async function onSubmit(e: SubmitEvent) {
     "rfc9278-s512": () => calculateJwkThumbprintUri(jwk, "sha512"),
     "date-time": () => new Date().toISOString(),
   }[data.get("kid-method") as string];
-  output.textContent = JSON.stringify(
-    { ...{ alg, use, kid: await createKid?.() }, ...jwk },
+  const kid = await createKid?.();
+  privateKeyOutput.textContent = JSON.stringify(
+    { ...{ alg, use, kid }, ...jwk },
+    null,
+    "  "
+  );
+  publicKeyOutput.textContent = JSON.stringify(
+    {
+      ...{ alg, use, kid },
+      ...(await exportJWK(publicKey)),
+    },
     null,
     "  "
   );