From 4ff243994fc3b9a0e3504e2296917f1713362992 Mon Sep 17 00:00:00 2001 From: hexxa Date: Mon, 18 Oct 2021 16:34:12 +0800 Subject: [PATCH] feat(fe/settings): add wallpaper form to settings pane --- src/client/web/src/client/index.ts | 1 + src/client/web/src/client/users.ts | 12 +- .../web/src/components/pane_settings.tsx | 136 +++++++++++++++++- .../web/src/components/state_updater.ts | 10 ++ src/client/web/src/i18n/zh_CN.ts | 2 +- 5 files changed, 158 insertions(+), 3 deletions(-) diff --git a/src/client/web/src/client/index.ts b/src/client/web/src/client/index.ts index ba6f1c5..4ac4750 100644 --- a/src/client/web/src/client/index.ts +++ b/src/client/web/src/client/index.ts @@ -107,6 +107,7 @@ export interface IUsersClient { delRole: (role: string) => Promise; listRoles: () => Promise; getCaptchaID: () => Promise; + setPreferences: (prefers: Preferences) => Promise; } export interface IFilesClient { diff --git a/src/client/web/src/client/users.ts b/src/client/web/src/client/users.ts index 59e9c53..95a9d2f 100644 --- a/src/client/web/src/client/users.ts +++ b/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 => { + return this.do({ + method: "patch", + url: `${this.url}/v1/users/preferences`, + data: { + preferences: prefers, + }, + }); + }; } diff --git a/src/client/web/src/components/pane_settings.tsx b/src/client/web/src/components/pane_settings.tsx index d10ba03..7a497c2 100644 --- a/src/client/web/src/components/pane_settings.tsx +++ b/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 { changeNewPwd2 = (ev: React.ChangeEvent) => { this.setState({ newPwd2: ev.target.value }); }; + changeBgUrl = (ev: React.ChangeEvent) => { + 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) => { + 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) => { + 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) => { + 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) => { + updater().setPreferences({ + ...this.props.login.preferences, + cssURL: ev.target.value, + }); + this.props.update(updater().updateLogin); + }; + changeLanPackURL = (ev: React.ChangeEvent) => { + 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 { }; } + 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 => { 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 { /> +
{ childrenStyles={List([{}, { justifyContent: "flex-end" }])} />
+ +
+
+ + {this.props.msg.pkg.get("cfg.bg")} + , + + + + , + ])} + childrenStyles={List([{}, { justifyContent: "flex-end" }])} + /> + +
+ {this.props.msg.pkg.get("cfg.bg.url")} +
+ +
, + +
+
+ {this.props.msg.pkg.get("cfg.bg.repeat")} +
+ +
, + +
+
+ {this.props.msg.pkg.get("cfg.bg.pos")} +
+ +
, + +
+
+ {this.props.msg.pkg.get("cfg.bg.align")} +
+ +
, + ])} + /> + ); diff --git a/src/client/web/src/components/state_updater.ts b/src/client/web/src/components/state_updater.ts index c4e6780..093d5fa 100644 --- a/src/client/web/src/components/state_updater.ts +++ b/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 => { + const resp = await this.usersClient.setPreferences(this.props.login.preferences); + return resp.status; + }; + getClientCfg = async (): Promise => { const resp = await this.settingsClient.getClientCfg(); if (resp.status === 200) { diff --git a/src/client/web/src/i18n/zh_CN.ts b/src/client/web/src/i18n/zh_CN.ts index 05776ec..0e0e39e 100644 --- a/src/client/web/src/i18n/zh_CN.ts +++ b/src/client/web/src/i18n/zh_CN.ts @@ -65,7 +65,7 @@ export const msgs: Map = Map({ "role.add": "新增角色", "role.name": "角色名字", "admin.roles": "角色列表", - zhCN: "中文简体", + zhCN: "简体中文", enUS: "English(US)", "move.fail": "移动失败", "share.404.title": "没有找到正在共享的文件夹",