Update

components/CreateRootUser.tsx

@@ -33,12 +33,11 @@ export default class CreateRootUser extends Component<Props> {
                     set_value={set_password}
                 />
                 <Button
-                    disabled={false}
+                    disabled={!username && !password}
                     onClick={() => {
-                        console.log("Click");
                     }}
                 >
-                    Login
+                    {t("user.login")}
                 </Button>
             </div>
         );

components/Md3Select.tsx

@@ -0,0 +1,91 @@
+import { Component, VNode } from "preact";
+import { MdOutlinedSelect, MdSelectOption } from "../server/dmodule.ts";
+
+type OProps = {
+    value: string;
+    headline?: string;
+    selected?: boolean;
+    disabled?: boolean;
+};
+
+class Md3Option extends Component<OProps> {
+    render() {
+        if (!MdSelectOption.value) return null;
+        const Option = MdSelectOption.value;
+        return (
+            <Option
+                value={this.props.value}
+                headline={this.props.headline || this.props.value}
+                selected={this.props.selected}
+                disabled={this.props.disabled}
+            />
+        );
+    }
+}
+
+type Props = {
+    children: VNode<Md3Option>[] | VNode<Md3Option>;
+    /**@default {false} */
+    quick?: boolean;
+    /**@default {false} */
+    required?: boolean;
+    /**@default {false} */
+    disabled?: boolean;
+    errorText?: string;
+    label?: string;
+    supportingText?: string;
+    /**@default {false} */
+    error?: boolean;
+    menuFixed?: boolean;
+    typeaheadDelay?: number;
+    hasLeadingIcon?: boolean;
+    hasTrailingIcon?: boolean;
+    displayText?: string;
+    selectedIndex?: number;
+};
+
+type State = {
+    selectedIndex: number;
+};
+
+export default class Md3Select extends Component<Props, State> {
+    static readonly Option = Md3Option;
+    constructor(props: Props) {
+        super(props);
+        this.state = { selectedIndex: props.selectedIndex || 0 };
+    }
+    componentWillReceiveProps(
+        nextProps: Readonly<Props>,
+        _nextContext: unknown,
+    ): void {
+        const selectedIndex = nextProps.selectedIndex || 0;
+        this.setState({ selectedIndex });
+    }
+    get selectedIndex() {
+        return this.state.selectedIndex;
+    }
+    render() {
+        if (!MdOutlinedSelect.value) return null;
+        const Select = MdOutlinedSelect.value;
+        return (
+            <Select
+                quick={this.props.quick}
+                required={this.props.required}
+                disabled={this.props.disabled}
+                errorText={this.props.errorText}
+                label={this.props.label}
+                supportingText={this.props.supportingText}
+                error={this.props.error}
+                menuFixed={this.props.menuFixed}
+                typeaheadDelay={this.props.typeaheadDelay}
+                hasLeadingIcon={this.props.hasLeadingIcon}
+                hasTrailingIcon={this.props.hasTrailingIcon}
+                displayText={this.props.displayText}
+                selectedIndex={this.state.selectedIndex}
+            >
+                {/**@ts-ignore */}
+                {this.props.children}
+            </Select>
+        );
+    }
+}

server/dmodule.ts

@@ -1,7 +1,9 @@
 import { signal } from "@preact/signals";
 import type {
     MdOutlinedButton as _MdOutlinedButton,
+    MdOutlinedSelect as _MdOutlinedSelect,
     MdOutlinedTextField as _MdOutlinedTextField,
+    MdSelectOption as _MdSelectOption,
     MdTonalButton as _MdTonalButton,
 } from "./md3.ts";
 
@@ -17,9 +19,19 @@ export const MdTonalButton = signal<typeof _MdTonalButton | undefined>(
     undefined,
 );
 
+export const MdSelectOption = signal<typeof _MdSelectOption | undefined>(
+    undefined,
+);
+
+export const MdOutlinedSelect = signal<typeof _MdOutlinedSelect | undefined>(
+    undefined,
+);
+
 export async function load_dmodule() {
     const md3 = await import("./md3.ts");
     MdOutlinedTextField.value = md3.MdOutlinedTextField;
     MdOutlinedButton.value = md3.MdOutlinedButton;
     MdTonalButton.value = md3.MdTonalButton;
+    MdSelectOption.value = md3.MdSelectOption;
+    MdOutlinedSelect.value = md3.MdOutlinedSelect;
 }

server/md3.ts

@@ -1,6 +1,8 @@
 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 { MdSelectOption as _MdSelectOption } from "@material/web/select/select-option.js?dts=1";
+import { MdOutlinedSelect as _MdOutlinedSelect } from "@material/web/select/outlined-select.js?dts=1";
 import { createComponent } from "@lit-labs/react/?target=es2022";
 import * as Preact from "preact/compat";
 
@@ -25,6 +27,22 @@ export const MdTonalButton = createComponent({
     react: Preact,
 });
 
+export const MdSelectOption = createComponent({
+    tagName: "md-select-option",
+    elementClass: _MdSelectOption,
+    // @ts-ignore Checked
+    react: Preact,
+});
+
+export const MdOutlinedSelect = createComponent({
+    tagName: "md-outlined-select",
+    elementClass: _MdOutlinedSelect,
+    // @ts-ignore Checked
+    react: Preact,
+});
+
 export { _MdOutlinedTextField };
 export { _MdOutlinedButton };
 export { _MdTonalButton };
+export { _MdSelectOption };
+export { _MdOutlinedSelect };

static/common.css

@@ -344,6 +344,8 @@ div.new_task div.content .text .mdc-text-field {
     --md-sys-color-surface-tint: #4CDADA;
     --md-sys-color-outline-variant: #3F4948;
     --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-container: var(--dark-backgroud);
+    --md-sys-color-surface-container-highest: #335c84;
 }
 
 .b-text-field.md3.label md-outlined-text-field {

translation/en/user.jsonc

@@ -1,4 +1,5 @@
 {
     "username": "Username",
-    "password": "Password"
+    "password": "Password",
+    "login": "Login"
 }

translation/zh-cn/user.jsonc

@@ -1,4 +1,5 @@
 {
     "username": "用户名",
-    "password": "密码"
+    "password": "密码",
+    "login": "登录"
 }