fix(pane_login): unify styles

src/client/web/src/components/pane_login.tsx

@@ -70,7 +70,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
           return updater().initAll(params);
         } else {
           this.setState({ user: "", pwd: "", captchaInput: "" });
-          alertMsg("Failed to login.");
+          alertMsg(this.props.msg.pkg.get("op.fail"));
           return updater().getCaptchaID();
         }
       })
@@ -94,74 +94,64 @@ export class AuthPane extends React.Component<Props, State, {}> {
 
   render() {
     return (
-      <span>
-        <div
-          className="container"
-          style={{ display: this.props.login.authed ? "none" : "block" }}
-        >
-          <div className="padding-l">
-            <span className="inline-block margin-r-m margin-b-m">
-              <div className="font-size-s grey1-font">
-                {this.props.msg.pkg.get("login.username")}
-              </div>
-              <input
-                name="user"
-                type="text"
-                onChange={this.changeUser}
-                value={this.state.user}
-                className="black0-font margin-t-m margin-b-m margin-r-m"
-                placeholder={this.props.msg.pkg.get("login.username")}
-              />
-            </span>
-
-            <span className="inline-block margin-r-m margin-b-m">
-              <div className="font-size-s grey1-font">
-                {this.props.msg.pkg.get("login.pwd")}
-              </div>
-              <input
-                name="pwd"
-                type="password"
-                onChange={this.changePwd}
-                value={this.state.pwd}
-                className="black0-font margin-t-m margin-b-m"
-                placeholder={this.props.msg.pkg.get("login.pwd")}
-              />
-            </span>
-
-            <span className="inline-block margin-r-m margin-b-m">
-              <div className="font-size-s grey1-font">
-                {this.props.msg.pkg.get("login.captcha")}
-              </div>
-              <Flexbox
-                children={List([
-                  <input
-                    name="captcha"
-                    type="text"
-                    onChange={this.changeCaptcha}
-                    value={this.state.captchaInput}
-                    className="black0-font margin-t-m margin-b-m margin-r-m"
-                    placeholder={this.props.msg.pkg.get("login.captcha")}
-                  />,
-                  <img
-                    src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
-                    className="captcha"
-                    onClick={this.refreshCaptcha}
-                  />,
-                ])}
-              />
-            </span>
-
-            <span className="inline-block margin-r-m margin-b-m">
-              <button
-                onClick={this.login}
-                className="green0-bg white-font margin-t-m margin-b-m"
-              >
-                {this.props.msg.pkg.get("login.login")}
-              </button>
-            </span>
+      <div
+        id="pane-login"
+        className="container"
+        style={{ display: this.props.login.authed ? "none" : "block" }}
+      >
+        <span className="float-input">
+          <div className="label">
+            {this.props.msg.pkg.get("login.username")}
           </div>
-        </div>
-      </span>
+          <input
+            name="user"
+            type="text"
+            onChange={this.changeUser}
+            value={this.state.user}
+            placeholder={this.props.msg.pkg.get("login.username")}
+          />
+        </span>
+
+        <span className="float-input">
+          <div className="label">{this.props.msg.pkg.get("login.pwd")}</div>
+          <input
+            name="pwd"
+            type="password"
+            onChange={this.changePwd}
+            value={this.state.pwd}
+            placeholder={this.props.msg.pkg.get("login.pwd")}
+          />
+        </span>
+
+        <span className="float-input">
+          <div className="label">{this.props.msg.pkg.get("login.captcha")}</div>
+          <Flexbox
+            children={List([
+              <input
+                name="captcha"
+                type="text"
+                onChange={this.changeCaptcha}
+                value={this.state.captchaInput}
+                placeholder={this.props.msg.pkg.get("login.captcha")}
+              />,
+              <img
+                src={`/v1/captchas/imgs?capid=${this.props.login.captchaID}`}
+                className="captcha"
+                onClick={this.refreshCaptcha}
+              />,
+            ])}
+          />
+        </span>
+
+        <span className="float-input">
+          <button
+            id="btn-login"
+            onClick={this.login}
+          >
+            {this.props.msg.pkg.get("login.login")}
+          </button>
+        </span>
+      </div>
     );
   }
 }

src/client/web/src/i18n/en_US.ts

@@ -97,10 +97,12 @@ export const msgs: Map<string, string> = Map({
   reset: "Reset",
   "bg.url.alert": "Image URL is too short or too long",
   "bg.pos.alert": "Position only supports: top, bottom, left, right, center",
-  "bg.repeat.alert": "Repeat only supports: repeat-x, repeat-y, repeat, space, round, no-repeat",
+  "bg.repeat.alert":
+    "Repeat only supports: repeat-x, repeat-y, repeat, space, round, no-repeat",
   "bg.align.alert": "Align only supports: scroll, fixed, local",
   "prefer.theme": "Theme",
   "prefer.theme.url": "Theme URL",
   "settings.customLan": "Customized Language Pack",
   "settings.lanPackURL": "Language Pack URL",
+  "op.fail": "Operation Failed",
 });

src/client/web/src/i18n/zh_CN.ts

@@ -103,4 +103,5 @@ export const msgs: Map<string, string> = Map({
   "prefer.theme.url": "主题链接",
   "settings.customLan": "自定义语言包",
   "settings.lanPackURL": "语言包链接",
+  "op.fail": "操作失败",
 });