From 8caa7139904e2ed7f88f4866d70f218cfba3ba7a Mon Sep 17 00:00:00 2001
From: hexxa <hexxa@outlook.com>
Date: Mon, 27 Sep 2021 14:30:59 +0800
Subject: [PATCH] fix(settings): clean up pane

---
 public/static/css/reset.css                   |   4 +
 .../web/src/components/pane_settings.tsx      | 102 ++++++++++--------
 2 files changed, 64 insertions(+), 42 deletions(-)

diff --git a/public/static/css/reset.css b/public/static/css/reset.css
index b11c4e5..5d0da1a 100644
--- a/public/static/css/reset.css
+++ b/public/static/css/reset.css
@@ -97,6 +97,10 @@ input:focus {
   box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
 }
 
+::placeholder {
+  color: #95a5a6;
+}
+
 button {
   cursor: pointer;
   border: none;
diff --git a/src/client/web/src/components/pane_settings.tsx b/src/client/web/src/components/pane_settings.tsx
index a46846d..14d72b1 100644
--- a/src/client/web/src/components/pane_settings.tsx
+++ b/src/client/web/src/components/pane_settings.tsx
@@ -1,9 +1,11 @@
 import * as React from "react";
 
 import { ICoreState, MsgProps } from "./core_state";
-import { AuthPane, LoginProps } from "./pane_login";
+import { LoginProps } from "./pane_login";
+import { Flexbox } from "./layout/flexbox";
 import { updater } from "./state_updater";
 import { alertMsg } from "../common/env";
+import { List } from "immutable";
 export interface Props {
   login: LoginProps;
   msg: MsgProps;
@@ -38,15 +40,19 @@ export class PaneSettings extends React.Component<Props, State, {}> {
     };
   }
 
-  setPwd = () => {
+  setPwd = async (): Promise<any> => {
     if (this.state.newPwd1 !== this.state.newPwd2) {
       alertMsg(this.props.msg.pkg.get("settings.pwd.notSame"));
-    } else if (this.state.newPwd1 == "") {
+    } else if (
+      this.state.oldPwd == "" ||
+      this.state.newPwd1 == "" ||
+      this.state.newPwd2 == ""
+    ) {
       alertMsg(this.props.msg.pkg.get("settings.pwd.empty"));
     } else if (this.state.oldPwd == this.state.newPwd1) {
       alertMsg(this.props.msg.pkg.get("settings.pwd.notChanged"));
     } else {
-      updater()
+      return updater()
         .setPwd(this.state.oldPwd, this.state.newPwd1)
         .then((ok: boolean) => {
           if (ok) {
@@ -73,78 +79,90 @@ export class PaneSettings extends React.Component<Props, State, {}> {
       <div className="container">
         <div className="padding-l">
           <div>
-            <div className="flex-list-container">
-              <div className="flex-list-item-l">
+            <Flexbox
+              children={List([
                 <h5 className="black-font">
                   {this.props.msg.pkg.get("settings.pwd.update")}
-                </h5>
-              </div>
-              <div className="flex-list-item-r">
+                </h5>,
                 <button onClick={this.setPwd}>
                   {this.props.msg.pkg.get("update")}
-                </button>
-              </div>
-            </div>
+                </button>,
+              ])}
+              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            />
 
-            <div>
+            <span className="inline-block margin-r-m margin-b-m">
+              <div className="font-size-s grey1-font">
+                {this.props.msg.pkg.get("settings.pwd.old")}
+              </div>
               <input
                 name="old_pwd"
                 type="password"
                 onChange={this.changeOldPwd}
                 value={this.state.oldPwd}
-                className="black0-font margin-t-m margin-b-m"
+                className="black0-font margin-t-m"
                 placeholder={this.props.msg.pkg.get("settings.pwd.old")}
               />
-            </div>
-            <div>
+            </span>
+
+            <span className="inline-block margin-r-m  margin-b-m">
+              <div className="font-size-s grey1-font">
+                {this.props.msg.pkg.get("settings.pwd.new1")}
+              </div>
               <input
                 name="new_pwd1"
                 type="password"
                 onChange={this.changeNewPwd1}
                 value={this.state.newPwd1}
-                className="black0-font margin-t-m margin-b-m margin-r-m"
+                className="black0-font margin-t-m"
                 placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
               />
+            </span>
+
+            <span className="inline-block margin-r-m margin-b-m">
+              <div className="font-size-s grey1-font">
+                {this.props.msg.pkg.get("settings.pwd.new2")}
+              </div>
               <input
                 name="new_pwd2"
                 type="password"
                 onChange={this.changeNewPwd2}
                 value={this.state.newPwd2}
-                className="black0-font margin-t-m margin-b-m"
+                className="black0-font margin-t-m"
                 placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
               />
-            </div>
+            </span>
           </div>
 
           <div className="hr white0-bg margin-t-m margin-b-m"></div>
 
           <div className="margin-b-m">
-            <div className="flex-list-container">
-              <div className="flex-list-item-l">
+            <Flexbox
+              children={List([
                 <h5 className="black-font">
                   {this.props.msg.pkg.get("settings.chooseLan")}
-                </h5>
-              </div>
-              <div className="flex-list-item-r">
-                <button
-                  onClick={() => {
-                    this.setLan("en_US");
-                  }}
-                  className="margin-r-m"
-                >
-                  {this.props.msg.pkg.get("enUS")}
-                </button>
-                <button
-                  onClick={() => {
-                    this.setLan("zh_CN");
-                  }}
-                >
-                  {this.props.msg.pkg.get("zhCN")}
-                </button>
-              </div>
-            </div>
+                </h5>,
+                <span>
+                  <button
+                    onClick={() => {
+                      this.setLan("en_US");
+                    }}
+                    className="margin-r-m"
+                  >
+                    {this.props.msg.pkg.get("enUS")}
+                  </button>
+                  <button
+                    onClick={() => {
+                      this.setLan("zh_CN");
+                    }}
+                  >
+                    {this.props.msg.pkg.get("zhCN")}
+                  </button>
+                </span>,
+              ])}
+              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            />
           </div>
-
         </div>
       </div>
     );