From fa8e7917539b480ace368c371431f01b25062942 Mon Sep 17 00:00:00 2001
From: lifegpc <g1710431395@gmail.com>
Date: Tue, 4 Jul 2023 14:34:07 +0800
Subject: [PATCH] Update

---
 components/CreateRootUser.tsx |  5 +-
 components/Md3Select.tsx      | 91 +++++++++++++++++++++++++++++++++++
 server/dmodule.ts             | 12 +++++
 server/md3.ts                 | 18 +++++++
 static/common.css             |  2 +
 translation/en/user.jsonc     |  3 +-
 translation/zh-cn/user.jsonc  |  3 +-
 7 files changed, 129 insertions(+), 5 deletions(-)
 create mode 100644 components/Md3Select.tsx

diff --git a/components/CreateRootUser.tsx b/components/CreateRootUser.tsx
index 0629c02..375a970 100644
--- a/components/CreateRootUser.tsx
+++ b/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>
         );
diff --git a/components/Md3Select.tsx b/components/Md3Select.tsx
new file mode 100644
index 0000000..e2eadfc
--- /dev/null
+++ b/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>
+        );
+    }
+}
diff --git a/server/dmodule.ts b/server/dmodule.ts
index 6ed052f..79d5ecb 100644
--- a/server/dmodule.ts
+++ b/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;
 }
diff --git a/server/md3.ts b/server/md3.ts
index de2a4d0..dc6dd9f 100644
--- a/server/md3.ts
+++ b/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 };
diff --git a/static/common.css b/static/common.css
index 76f5711..7fdd9f0 100644
--- a/static/common.css
+++ b/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 {
diff --git a/translation/en/user.jsonc b/translation/en/user.jsonc
index f9076d3..d4b2fba 100644
--- a/translation/en/user.jsonc
+++ b/translation/en/user.jsonc
@@ -1,4 +1,5 @@
 {
     "username": "Username",
-    "password": "Password"
+    "password": "Password",
+    "login": "Login"
 }
diff --git a/translation/zh-cn/user.jsonc b/translation/zh-cn/user.jsonc
index 7777095..a419be7 100644
--- a/translation/zh-cn/user.jsonc
+++ b/translation/zh-cn/user.jsonc
@@ -1,4 +1,5 @@
 {
     "username": "用户名",
-    "password": "密码"
+    "password": "密码",
+    "login": "登录"
 }