rewrite annotations

package-lock.json

@@ -10,8 +10,8 @@
       "license": "MIT",
       "devDependencies": {
         "@exampledev/new.css": "^1.1.3",
-        "esbuild": "^0.18.0",
+        "esbuild": "^0.18.11",
-        "jose": "^4.14.1"
+        "jose": "^4.14.4"
       }
     },
     "node_modules/@esbuild/android-arm": {

package.json

@@ -2,7 +2,7 @@
   "name": "jwk.pages.dev",
   "version": "0.0.0",
   "private": true,
-  "author": "Kohei Watanabe <kou029w@gmail.com>",
+  "author": "Kohei Watanabe <nebel@fogtype.com>",
   "license": "MIT",
   "scripts": {
     "build": "esbuild --bundle --loader:.html=copy --outdir=dist src/*",
@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@exampledev/new.css": "^1.1.3",
-    "esbuild": "^0.18.0",
+    "esbuild": "^0.18.11",
-    "jose": "^4.14.1"
+    "jose": "^4.14.4"
   }
 }

src/index.html

@@ -11,6 +11,11 @@
     <header>
       <h1>JSON Web Key Generator</h1>
       <p>Generate JSON Web Key.</p>
+      <nav>
+        <a href="https://github.com/kou029w/jwk.pages.dev" rel="noreferrer">
+          GitHub
+        </a>
+      </nav>
     </header>
     <main>
       <form>
@@ -18,31 +23,23 @@
           Algorithm
           <select name="alg">
             <!-- https://www.iana.org/assignments/jose/web-signature-encryption-algorithms.csv -->
-            <option>ES256</option>
+            <option label="ECDSA (ES256)">ES256</option>
-            <option>ES384</option>
+            <option label="ECDSA (ES384)">ES384</option>
-            <option>ES512</option>
+            <option label="ECDSA (ES512)">ES512</option>
-            <option>RS256</option>
+            <option label="RSASSA-PKCS1-v1_5 (RS256)">RS256</option>
-            <option>RS384</option>
+            <option label="RSASSA-PKCS1-v1_5 (RS384)">RS384</option>
-            <option>RS512</option>
+            <option label="RSASSA-PKCS1-v1_5 (RS512)">RS512</option>
-            <option>PS256</option>
+            <option label="RSASSA-PSS (PS256)">PS256</option>
-            <option>PS384</option>
+            <option label="RSASSA-PSS (PS384)">PS384</option>
-            <option>PS512</option>
+            <option label="RSASSA-PSS (PS512)">PS512</option>
-            <option>RSA-OAEP</option>
-            <option>RSA-OAEP-256</option>
-            <option>RSA-OAEP-384</option>
-            <option>RSA-OAEP-512</option>
             <option>ECDH-ES</option>
             <option>ECDH-ES+A128KW</option>
             <option>ECDH-ES+A192KW</option>
             <option>ECDH-ES+A256KW</option>
-          </select>
+            <option>RSA-OAEP</option>
-        </label>
+            <option>RSA-OAEP-256</option>
-        <label style="display: block">
+            <option>RSA-OAEP-384</option>
-          Public Key Use
+            <option>RSA-OAEP-512</option>
-          <select name="use">
-            <option value="sig">Signature</option>
-            <option value="enc">Encryption</option>
-            <option value="">-</option>
           </select>
         </label>
         <label style="display: block">
@@ -54,23 +51,25 @@
             <option value="rfc9278-s256">JWK Thumbprint URI (SHA-256)</option>
             <option value="rfc9278-s384">JWK Thumbprint URI (SHA-384)</option>
             <option value="rfc9278-s512">JWK Thumbprint URI (SHA-512)</option>
+            <option value="uuid">UUID</option>
+            <option value="uuid-uri">UUID URI</option>
+            <option value="unix-timestamp">Timestamp</option>
+            <option value="ecma-timestamp">Timestamp (milliseconds)</option>
             <option value="date-time">Date and Time</option>
             <option value="">-</option>
           </select>
         </label>
-        <input type="submit" value="Generate" style="display: block" />
+        <input
+          type="submit"
+          value="Generate"
+          aria-label="Generate"
+          style="display: block"
+        />
       </form>
-      <label>
+      <label for="private">Private Key</label>
-        Private Key
+      <pre id="private"></pre>
-        <pre id="private"></pre>
+      <label for="public">Public Key</label>
-      </label>
+      <pre id="public"></pre>
-      <label>
-        Public Key
-        <pre id="public"></pre>
-      </label>
     </main>
-    <footer>
-      by <a href="https://github.com/kou029w" rel="noreferrer">kou029w</a>
-    </footer>
   </body>
 </html>

src/main.ts

@@ -14,7 +14,25 @@ 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 use = {
+    ES256: "sig",
+    ES384: "sig",
+    ES512: "sig",
+    RS256: "sig",
+    RS384: "sig",
+    RS512: "sig",
+    PS256: "sig",
+    PS384: "sig",
+    PS512: "sig",
+    "ECDH-ES": "enc",
+    "ECDH-ES+A128KW": "enc",
+    "ECDH-ES+A192KW": "enc",
+    "ECDH-ES+A256KW": "enc",
+    "RSA-OAEP": "enc",
+    "RSA-OAEP-256": "enc",
+    "RSA-OAEP-384": "enc",
+    "RSA-OAEP-512": "enc",
+  }[alg];
   const { privateKey, publicKey } = await generateKeyPair(alg, {
     extractable: true,
   });
@@ -26,21 +44,22 @@ async function onSubmit(e: SubmitEvent) {
     "rfc9278-s256": () => calculateJwkThumbprintUri(jwk, "sha256"),
     "rfc9278-s384": () => calculateJwkThumbprintUri(jwk, "sha384"),
     "rfc9278-s512": () => calculateJwkThumbprintUri(jwk, "sha512"),
+    uuid: () => crypto.randomUUID(),
+    "uuid-uri": () => `urn:uuid:${crypto.randomUUID()}`,
+    "unix-timestamp": () => String(Math.floor(new Date().getTime() / 1_000)),
+    "ecma-timestamp": () => String(new Date().getTime()),
     "date-time": () => new Date().toISOString(),
   }[data.get("kid-method") as string];
   const kid = await createKid?.();
   privateKeyOutput.textContent = JSON.stringify(
-    { ...{ alg, use, kid }, ...jwk },
+    { alg, use, kid, ...jwk },
     null,
-    "  "
+    "  ",
   );
   publicKeyOutput.textContent = JSON.stringify(
-    {
+    { alg, use, kid, ...(await exportJWK(publicKey)) },
-      ...{ alg, use, kid },
-      ...(await exportJWK(publicKey)),
-    },
     null,
-    "  "
+    "  ",
   );
 }