feat(settings): enable choose lan in settings

src/client/web/src/components/__test__/panes.test.tsx

@@ -12,10 +12,11 @@ describe("Panes", () => {
 
     const coreState = newWithWorker(mockWorker);
     const panes = new Panes({
-        panes: coreState.panes,
-        admin: coreState.admin,
-        login: coreState.login,
-        update: (updater: (prevState: ICoreState) => ICoreState) => {},
+      panes: coreState.panes,
+      admin: coreState.admin,
+      login: coreState.login,
+      msg: coreState.msg,
+      update: (updater: (prevState: ICoreState) => ICoreState) => {},
     });
 
     updater().init(coreState);

src/client/web/src/components/core_state.ts

@@ -3,7 +3,6 @@ import { List, Set, Map } from "immutable";
 import BgWorker from "../worker/upload.bg.worker";
 import { FgWorker } from "../worker/upload.fg.worker";
 
-// import { Props as PanelProps } from "./root_frame";
 import { BrowserProps } from "./browser";
 import { PanesProps } from "./panes";
 import { LoginProps } from "./pane_login";
@@ -19,14 +18,12 @@ export interface MsgProps {
   pkg: Map<string, string>;
 }
 export interface ICoreState {
-  // panel: PanelProps;
   isVertical: boolean;
   browser: BrowserProps;
   panes: PanesProps;
   login: LoginProps;
   admin: AdminProps;
   msg: MsgProps;
-  // settings: SettingsProps;
 }
 
 export function newWithWorker(worker: IWorker): ICoreState {
@@ -70,7 +67,7 @@ export function initState(): ICoreState {
     msg: {
       lan: "en_US",
       pkg: MsgPackage.get("en_US"),
-    }
+    },
   };
 }
 

src/client/web/src/components/layouter.tsx

@@ -1,38 +0,0 @@
-import * as React from "react";
-
-export interface Props {
-  isHorizontal: boolean;
-  elements: Array<JSX.Element>;
-}
-
-export interface State {}
-export class Layouter extends React.Component<Props, State, {}> {
-  constructor(p: Props) {
-    super(p);
-  }
-
-  horizontalLayout = (children: Array<JSX.Element>): Array<JSX.Element> => {
-    return children.map((child: JSX.Element, idx: number) => {
-      // if (idx === 0) {
-      //   return <span key={`layout=${idx}`}>{child}</span>;
-      // }
-      return (
-        <span key={`layout=${idx}`}>
-          {child}
-          <span className="margin-s"></span>
-        </span>
-      );
-    });
-  };
-
-  verticalLayout = (children: Array<JSX.Element>): Array<JSX.Element> => {
-    return this.horizontalLayout(children);
-  };
-
-  render() {
-    const elements = this.props.isHorizontal
-      ? this.horizontalLayout(this.props.elements)
-      : this.verticalLayout(this.props.elements);
-    return <div className="layouter">{elements}</div>;
-  }
-}

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

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { List } from "immutable";
 
 import { ICoreState, MsgProps } from "./core_state";
 import { updater } from "./state_updater";

src/client/web/src/components/pane_settings.tsx

@@ -63,6 +63,11 @@ export class PaneSettings extends React.Component<Props, State, {}> {
     }
   };
 
+  setLan = (lan: string) => {
+    updater().setLan(lan);
+    this.props.update(updater().updateMsg);
+  };
+
   render() {
     return (
       <div className="container">
@@ -70,7 +75,9 @@ export class PaneSettings extends React.Component<Props, State, {}> {
           <div>
             <div className="flex-list-container">
               <div className="flex-list-item-l">
-                <h5 className="black-font">Update Password</h5>
+                <h5 className="black-font">
+                  {this.props.msg.pkg.get("settings.pwd.update")}
+                </h5>
               </div>
               <div className="flex-list-item-r">
                 <button onClick={this.setPwd} className="grey1-bg white-font">
@@ -111,10 +118,40 @@ export class PaneSettings extends React.Component<Props, State, {}> {
 
           <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">
+                <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 white-font"
+                >
+                  {this.props.msg.pkg.get("enUS")}
+                </button>
+                <button
+                  onClick={() => {
+                    this.setLan("zh_CN");
+                  }}
+                  className="white-font"
+                >
+                  {this.props.msg.pkg.get("zhCN")}
+                </button>
+              </div>
+            </div>
+          </div>
+
           <div>
             <div className="flex-list-container">
               <div className="flex-list-item-l">
-                <h5 className="black-font">Logout</h5>
+                <h5 className="black-font">
+                  {this.props.msg.pkg.get("login.logout")}
+                </h5>
               </div>
               <div className="flex-list-item-r">
                 <AuthPane

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

@@ -37,6 +37,8 @@ export const msgs: Map<string, string> = Map({
   "settings.pwd.old": "current password",
   "settings.pwd.new1": "new password",
   "settings.pwd.new2": "input again password",
+  "settings.chooseLan": "Choose Language",
+  "settings.pwd.update": "Update Password",
   settings: "Settings",
   admin: "Admin",
   "update.ok": "Succeeded to update",
@@ -61,4 +63,6 @@ export const msgs: Map<string, string> = Map({
   "role.add": "Add Role",
   "role.name": "Role Name",
   "admin.roles": "Roles",
+  zhCN: "Chinese (simplified)",
+  enUS: "English (USA)",
 });

src/client/web/src/i18n/msger.ts

@@ -16,9 +16,9 @@ export class Msger {
 export class MsgPackage {
   static get(key: string): Map<string, string> {
     switch (key) {
-      case "en-US":
+      case "en_US":
         return Map(enMsgs);
-      case "zh-CN":
+      case "zh_CN":
         return Map(cnMsgs);
       default:
         return Map(enMsgs);

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

@@ -38,6 +38,8 @@ export const msgs: Map<string, string> = Map({
   "settings.pwd.new1": "新密码",
   "settings.pwd.new2": "再次输入新密码",
   settings: "设置",
+  "settings.chooseLan": "选择语言",
+  "settings.pwd.update": "更新密码",
   admin: "管理",
   "update.ok": "更新成功",
   "update.fail": "更新失败",
@@ -60,4 +62,6 @@ export const msgs: Map<string, string> = Map({
   "role.add": "新增角色",
   "role.name": "角色名字",
   "admin.roles": "角色列表",
+  "zhCN": "中文简体",
+  "enUS": "英语美国",
 });