Update

components/BMd3TextField.tsx

@@ -1,8 +1,10 @@
 import { Component, ComponentChildren, ContextType } from "preact";
 import { BCtx } from "./BContext.tsx";
 import { Ref, useRef, useState } from "preact/hooks";
-import type _TextField from "../server/md3/md-outlined-text-field.ts";
-import type { MdOutlinedTextField as _TextFieldE } from "../server/md3/md-outlined-text-field.ts";
+import type {
+    _MdOutlinedTextField as _TextFieldE,
+    MdOutlinedTextField as _TextField,
+} from "../server/md3.ts";
 import { MdOutlinedTextField } from "../server/dmodule.ts";
 import List from "preact-material-components/List";
 

components/CreateRootUser.tsx

@@ -3,6 +3,7 @@ import { GlobalCtx } from "./GlobalContext.tsx";
 import BMd3TextField from "./BMd3TextField.tsx";
 import t from "../server/i18n.ts";
 import { useState } from "preact/hooks";
+import { MdTonalButton } from "../server/dmodule.ts";
 
 type Props = {
     show: boolean;
@@ -13,8 +14,10 @@ export default class CreateRootUser extends Component<Props> {
     declare context: ContextType<typeof GlobalCtx>;
     render() {
         if (!this.props.show) return null;
+        if (!MdTonalButton.value) return null;
         const [username, set_username] = useState<string>();
-        console.log(username);
+        const [password, set_password] = useState<string>();
+        const Button = MdTonalButton.value;
         return (
             <div>
                 <BMd3TextField
@@ -23,6 +26,20 @@ export default class CreateRootUser extends Component<Props> {
                     value={username}
                     set_value={set_username}
                 />
+                <BMd3TextField
+                    label={t("user.password")}
+                    type="password"
+                    value={password}
+                    set_value={set_password}
+                />
+                <Button
+                    disabled={false}
+                    onClick={() => {
+                        console.log("Click");
+                    }}
+                >
+                    Login
+                </Button>
             </div>
         );
     }

import_map.json

@@ -24,7 +24,7 @@
         "ua-parser-js": "https://esm.sh/[email protected]",
         "pbkdf2-hmac": "https://esm.sh/[email protected]",
         "randomstring": "https://esm.sh/[email protected]",
-        "@material/web/": "https://esm.sh/@material/[email protected]/",
+        "@material/web/": "https://unpkg.lifegpc.workers.dev/@material/[email protected]/",
         "@lit-labs/react/": "https://esm.sh/@lit-labs/[email protected]/"
     }
 }

server/dmodule.ts

@@ -1,11 +1,25 @@
 import { signal } from "@preact/signals";
-import type _MdOutlinedTextField from "./md3/md-outlined-text-field.ts";
+import type {
+    MdOutlinedButton as _MdOutlinedButton,
+    MdOutlinedTextField as _MdOutlinedTextField,
+    MdTonalButton as _MdTonalButton,
+} from "./md3.ts";
 
 export const MdOutlinedTextField = signal<
     typeof _MdOutlinedTextField | undefined
 >(undefined);
 
+export const MdOutlinedButton = signal<typeof _MdOutlinedButton | undefined>(
+    undefined,
+);
+
+export const MdTonalButton = signal<typeof _MdTonalButton | undefined>(
+    undefined,
+);
+
 export async function load_dmodule() {
-    MdOutlinedTextField.value =
-        (await import("./md3/md-outlined-text-field.ts")).default;
+    const md3 = await import("./md3.ts");
+    MdOutlinedTextField.value = md3.MdOutlinedTextField;
+    MdOutlinedButton.value = md3.MdOutlinedButton;
+    MdTonalButton.value = md3.MdTonalButton;
 }

server/md3.ts

@@ -0,0 +1,30 @@
+import { MdOutlinedTextField as _MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js?dts=1";
+import { MdOutlinedButton as _MdOutlinedButton } from "@material/web/button/outlined-button.js?dts=1";
+import { MdTonalButton as _MdTonalButton } from "@material/web/button/tonal-button.js?dts=1";
+import { createComponent } from "@lit-labs/react/?target=es2022";
+import * as Preact from "preact/compat";
+
+export const MdOutlinedTextField = createComponent({
+    tagName: "md-outlined-text-field",
+    elementClass: _MdOutlinedTextField,
+    // @ts-ignore Checked
+    react: Preact,
+});
+
+export const MdOutlinedButton = createComponent({
+    tagName: "md-outlined-button",
+    elementClass: _MdOutlinedButton,
+    // @ts-ignore Checked
+    react: Preact,
+});
+
+export const MdTonalButton = createComponent({
+    tagName: "md-tonal-button",
+    elementClass: _MdTonalButton,
+    // @ts-ignore Checked
+    react: Preact,
+});
+
+export { _MdOutlinedTextField };
+export { _MdOutlinedButton };
+export { _MdTonalButton };

server/md3/md-outlined-text-field.ts

@@ -1,13 +0,0 @@
-import { MdOutlinedTextField as _MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js?target=es2022";
-import { createComponent } from "@lit-labs/react/?target=es2022";
-import * as Preact from "preact/compat";
-
-const MdOutlinedTextField = createComponent({
-    tagName: "md-outlined-text-field",
-    elementClass: _MdOutlinedTextField,
-    // @ts-ignore Checked
-    react: Preact,
-});
-
-export { _MdOutlinedTextField as MdOutlinedTextField };
-export default MdOutlinedTextField;

translation/en/user.jsonc

@@ -1,3 +1,4 @@
 {
-    "username": "Username"
+    "username": "Username",
+    "password": "Password"
 }

translation/zh-cn/user.jsonc

@@ -1,3 +1,4 @@
 {
-    "username": "用户名"
+    "username": "用户名",
+    "password": "密码"
 }