ダイアログをshowModal で開く

client/SignUpDialog.tsx

@@ -0,0 +1,72 @@
+import { h, JSX } from "https://esm.sh/[email protected]?pin=v135";
+import {
+  useEffect,
+  useRef,
+} from "https://esm.sh/[email protected]/hooks?pin=v135";
+import { encodeBase64Url } from "jsr:@std/encoding/base64url";
+
+export const SignUpDialog = (props: {
+  readonly privateKey: Uint8Array | null;
+  readonly copyPassword: () => void;
+  readonly onClose: () => void;
+}): JSX.Element | null => {
+  const ref = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    ref.current?.addEventListener("close", props.onClose);
+    return () => {
+      ref.current?.removeEventListener("close", props.onClose);
+    };
+  }, [props.onClose, ref.current]);
+
+  useEffect(() => {
+    if (props.privateKey === null) {
+      ref.current?.close();
+    } else {
+      ref.current?.showModal();
+    }
+  }, [props.privateKey]);
+
+  if (props.privateKey === null) {
+    return null;
+  }
+
+  return (
+    <dialog
+      ref={ref}
+      style={{
+        width: "80%",
+        boxShadow: "0px 20px 36px 0px rgba(0, 0, 0, 0.6)",
+      }}
+    >
+      <form
+        method="dialog"
+        style={{
+          display: "grid",
+          gap: 16,
+        }}
+      >
+        <label>
+          <div>Username</div>
+          <input type="text" />
+        </label>
+        <label>
+          <div>
+            Password (auto created. If you lose this password, you will not be
+            able to log in.)
+          </div>
+          <input
+            type="password"
+            value={encodeBase64Url(props.privateKey)}
+            readOnly={true}
+            autoComplete="new-password"
+          />
+          <button type="button" onClick={props.copyPassword}>
+            copy password
+          </button>
+        </label>
+        <button type="submit">Sign Up</button>
+      </form>
+    </dialog>
+  );
+};

client/app.tsx

@@ -3,7 +3,6 @@ import {
   StateUpdater,
 } from "https://esm.sh/[email protected]/hooks?pin=v135";
 import { h } from "https://esm.sh/[email protected]?pin=v135";
-import { encodeBase64Url } from "jsr:@std/encoding/base64url";
 
 export const App = (props: {
   readonly state: number;
@@ -38,45 +37,6 @@ export const App = (props: {
       <button type="button" onClick={props.signUp}>
         Sign Up
       </button>
-
-      {props.privateKey === null ? <div></div> : (
-        <dialog
-          open
-          style={{
-            width: "80%",
-            boxShadow: "0px 20px 36px 0px rgba(0, 0, 0, 0.6)",
-            position: "absolute",
-            left: "50%",
-            top: "50%",
-            transform: "translate(-50%, -50%)",
-          }}
-        >
-          <form
-            style={{
-              display: "grid",
-            }}
-          >
-            <label>
-              Username
-              <input type="text" required />
-            </label>
-            <label>
-              Password (auto created. If you lose this password, you will not be
-              able to log in.)
-              <input
-                value={encodeBase64Url(props.privateKey)}
-                readOnly={true}
-                type="password"
-                autoComplete="new-password"
-              />
-              <button type="button" onClick={props.copyPassword}>
-                copy password
-              </button>
-            </label>
-            <button type="submit">sign up!</button>
-          </form>
-        </dialog>
-      )}
     </div>
   );
 };

client/start.tsx

@@ -3,6 +3,7 @@ import { h, hydrate, JSX } from "https://esm.sh/[email protected]?pin=v135";
 import { useState } from "https://esm.sh/[email protected]/hooks?pin=v135";
 import { utils } from "jsr:@noble/secp256k1";
 import { encodeBase64Url } from "jsr:@std/encoding/base64url";
+import { SignUpDialog } from "./SignUpDialog.tsx";
 
 const root = document.getElementById("root");
 if (root === null) {
@@ -14,20 +15,32 @@ const AppWithState = (): JSX.Element => {
   const [privateKey, setPrivateKey] = useState<Uint8Array | null>(null);
 
   return (
-    <App
-      state={state}
-      privateKey={privateKey}
-      setState={setState}
-      signUp={() => {
-        setPrivateKey(utils.randomPrivateKey());
-      }}
-      copyPassword={() => {
-        if (privateKey === null) {
-          return;
-        }
-        navigator.clipboard.writeText(encodeBase64Url(privateKey));
-      }}
-    />
+    <div>
+      <App
+        state={state}
+        privateKey={privateKey}
+        setState={setState}
+        signUp={() => {
+          setPrivateKey(utils.randomPrivateKey());
+        }}
+        copyPassword={() => {
+          if (privateKey === null) {
+            return;
+          }
+          navigator.clipboard.writeText(encodeBase64Url(privateKey));
+        }}
+      />
+      <SignUpDialog
+        privateKey={privateKey}
+        copyPassword={() => {
+          if (privateKey === null) {
+            return;
+          }
+          navigator.clipboard.writeText(encodeBase64Url(privateKey));
+        }}
+        onClose={() => setPrivateKey(null)}
+      />
+    </div>
   );
 };
 

server/main.tsx

@@ -41,13 +41,15 @@ dialog::backdrop {
                 }}
               >
                 <div id="root">
-                  <App
-                    state={0}
-                    privateKey={null}
-                    setState={() => {}}
-                    signUp={() => {}}
-                    copyPassword={() => {}}
-                  />
+                  <div>
+                    <App
+                      state={0}
+                      privateKey={null}
+                      setState={() => {}}
+                      signUp={() => {}}
+                      copyPassword={() => {}}
+                    />
+                  </div>
                 </div>
               </body>
             </html>,