feat(fe/settings): add wallpaper form to settings pane

src/client/web/src/client/index.ts

@@ -107,6 +107,7 @@ export interface IUsersClient {
   delRole: (role: string) => Promise<Response>;
   listRoles: () => Promise<Response>;
   getCaptchaID: () => Promise<Response>;
+  setPreferences: (prefers: Preferences) => Promise<Response>;
 }
 
 export interface IFilesClient {

src/client/web/src/client/users.ts

@@ -1,4 +1,4 @@
-import { BaseClient, Response, userIDParam, Quota } from "./";
+import { BaseClient, Response, userIDParam, Quota, Preferences } from "./";
 
 export class UsersClient extends BaseClient {
   constructor(url: string) {
@@ -141,4 +141,14 @@ export class UsersClient extends BaseClient {
       params: {},
     });
   };
+
+  setPreferences = (prefers: Preferences): Promise<Response> => {
+    return this.do({
+      method: "patch",
+      url: `${this.url}/v1/users/preferences`,
+      data: {
+        preferences: prefers,
+      },
+    });
+  };
 }

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

@@ -2,9 +2,10 @@ import * as React from "react";
 import FileSize from "filesize";
 import { List } from "immutable";
 
-import { ICoreState, MsgProps } from "./core_state";
+import { ICoreState, UIProps, MsgProps } from "./core_state";
 import { LoginProps } from "./pane_login";
 import { Flexbox } from "./layout/flexbox";
+import { Flowgrid } from "./layout/flowgrid";
 import { updater } from "./state_updater";
 import { alertMsg } from "../common/env";
 export interface Props {
@@ -29,6 +30,48 @@ export class PaneSettings extends React.Component<Props, State, {}> {
   changeNewPwd2 = (ev: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({ newPwd2: ev.target.value });
   };
+  changeBgUrl = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    updater().setPreferences({
+      ...this.props.login.preferences,
+      bg: { ...this.props.login.preferences.bg, url: ev.target.value },
+    });
+    this.props.update(updater().updateLogin);
+  };
+  changeBgRepeat = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    updater().setPreferences({
+      ...this.props.login.preferences,
+      bg: { ...this.props.login.preferences.bg, repeat: ev.target.value },
+    });
+    this.props.update(updater().updateLogin);
+  };
+  changeBgPos = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    updater().setPreferences({
+      ...this.props.login.preferences,
+      bg: { ...this.props.login.preferences.bg, position: ev.target.value },
+    });
+    this.props.update(updater().updateLogin);
+  };
+  changeBgAlign = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    updater().setPreferences({
+      ...this.props.login.preferences,
+      bg: { ...this.props.login.preferences.bg, align: ev.target.value },
+    });
+    this.props.update(updater().updateLogin);
+  };
+  changeCSSURL = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    updater().setPreferences({
+      ...this.props.login.preferences,
+      cssURL: ev.target.value,
+    });
+    this.props.update(updater().updateLogin);
+  };
+  changeLanPackURL = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    updater().setPreferences({
+      ...this.props.login.preferences,
+      lanPackURL: ev.target.value,
+    });
+    this.props.update(updater().updateLogin);
+  };
 
   constructor(p: Props) {
     super(p);
@@ -39,6 +82,18 @@ export class PaneSettings extends React.Component<Props, State, {}> {
     };
   }
 
+  syncPreferences = async () => {
+    updater()
+      .syncPreferences()
+      .then((status: number) => {
+        if (status === 200) {
+          alertMsg(this.props.msg.pkg.get("update.ok"));
+        } else {
+          alertMsg(this.props.msg.pkg.get("update.fail"));
+        }
+      });
+  };
+
   setPwd = async (): Promise<any> => {
     if (this.state.newPwd1 !== this.state.newPwd2) {
       alertMsg(this.props.msg.pkg.get("settings.pwd.notSame"));
@@ -184,6 +239,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               />
             </span>
           </div>
+
           <div className="hr white0-bg margin-t-m margin-b-m"></div>
           <div className="margin-b-m">
             <Flexbox
@@ -212,6 +268,84 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               childrenStyles={List([{}, { justifyContent: "flex-end" }])}
             />
           </div>
+
+          <div className="hr white0-bg margin-t-m margin-b-m"></div>
+          <div>
+            <Flexbox
+              children={List([
+                <span className="title-m bold">
+                  {this.props.msg.pkg.get("cfg.bg")}
+                </span>,
+
+                <span>
+                  <button onClick={this.syncPreferences}>
+                    {this.props.msg.pkg.get("update")}
+                  </button>
+                </span>,
+              ])}
+              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            />
+            <Flowgrid
+              grids={List([
+                <div className="padding-t-m padding-b-m padding-r-m">
+                  <div className="font-size-s grey1-font">
+                    {this.props.msg.pkg.get("cfg.bg.url")}
+                  </div>
+                  <input
+                    name="bg_url"
+                    type="text"
+                    onChange={this.changeBgUrl}
+                    value={this.props.login.preferences.bg.url}
+                    className="black0-font"
+                    style={{ width: "20rem" }}
+                    placeholder={this.props.msg.pkg.get("cfg.bg.url")}
+                  />
+                </div>,
+
+                <div className="padding-t-m padding-b-m padding-r-m">
+                  <div className="font-size-s grey1-font">
+                    {this.props.msg.pkg.get("cfg.bg.repeat")}
+                  </div>
+                  <input
+                    name="bg_repeat"
+                    type="text"
+                    onChange={this.changeBgRepeat}
+                    value={this.props.login.preferences.bg.repeat}
+                    className="black0-font"
+                    placeholder={this.props.msg.pkg.get("cfg.bg.repeat")}
+                  />
+                </div>,
+
+                <div className="padding-t-m padding-b-m padding-r-m">
+                  <div className="font-size-s grey1-font">
+                    {this.props.msg.pkg.get("cfg.bg.pos")}
+                  </div>
+                  <input
+                    name="bg_pos"
+                    type="text"
+                    onChange={this.changeBgPos}
+                    value={this.props.login.preferences.bg.position}
+                    className="black0-font"
+                    placeholder={this.props.msg.pkg.get("cfg.bg.pos")}
+                  />
+                </div>,
+
+                <div className="padding-t-m padding-b-m padding-r-m">
+                  <div className="font-size-s grey1-font">
+                    {this.props.msg.pkg.get("cfg.bg.align")}
+                  </div>
+                  <input
+                    name="bg_align"
+                    type="text"
+                    onChange={this.changeBgAlign}
+                    value={this.props.login.preferences.bg.align}
+                    className="black0-font"
+                    placeholder={this.props.msg.pkg.get("cfg.bg.align")}
+                  />
+                </div>,
+              ])}
+            />
+          </div>
         </div>
       </div>
     );

src/client/web/src/components/state_updater.ts

@@ -17,6 +17,7 @@ import {
   roleAdmin,
   visitorID,
   ClientConfig,
+  Preferences,
 } from "../client";
 import { FilesClient } from "../client/files";
 import { UsersClient } from "../client/users";
@@ -580,6 +581,15 @@ export class Updater {
     };
   };
 
+  setPreferences = (prefer: Preferences) => {
+    this.props.login.preferences = { ...prefer };
+  };
+
+  syncPreferences = async ():Promise<number> => {
+    const resp = await this.usersClient.setPreferences(this.props.login.preferences);
+    return resp.status;
+  };
+
   getClientCfg = async (): Promise<number> => {
     const resp = await this.settingsClient.getClientCfg();
     if (resp.status === 200) {

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

@@ -65,7 +65,7 @@ export const msgs: Map<string, string> = Map({
   "role.add": "新增角色",
   "role.name": "角色名字",
   "admin.roles": "角色列表",
-  zhCN: "中文简体",
+  zhCN: "简体中文",
   enUS: "English(US)",
   "move.fail": "移动失败",
   "share.404.title": "没有找到正在共享的文件夹",