From d85a46d0397e44aa69aa7f61867165df90de7c05 Mon Sep 17 00:00:00 2001 From: hexxa Date: Mon, 27 Sep 2021 16:07:15 +0800 Subject: [PATCH] fix(fe): clean up components --- src/client/web/src/common/env.ts | 2 +- src/client/web/src/components/browser.tsx | 14 +- src/client/web/src/components/core_state.ts | 2 +- src/client/web/src/components/pane_admin.tsx | 134 ++++++++++--------- src/client/web/src/components/topbar.tsx | 6 +- src/client/web/src/i18n/en_US.ts | 5 +- src/client/web/src/i18n/zh_CN.ts | 7 +- 7 files changed, 100 insertions(+), 70 deletions(-) diff --git a/src/client/web/src/common/env.ts b/src/client/web/src/common/env.ts index 984a275..d2211e3 100644 --- a/src/client/web/src/common/env.ts +++ b/src/client/web/src/common/env.ts @@ -6,6 +6,6 @@ export function alertMsg(msg: string) { } } -export function comfirmMsg(msg: string): boolean { +export function confirmMsg(msg: string): boolean { return confirm(msg); } diff --git a/src/client/web/src/components/browser.tsx b/src/client/web/src/components/browser.tsx index cf0e857..f3fabcc 100644 --- a/src/client/web/src/components/browser.tsx +++ b/src/client/web/src/components/browser.tsx @@ -12,11 +12,11 @@ import { RiUploadCloudFill } from "@react-icons/all-files/ri/RiUploadCloudFill"; import { RiUploadCloudLine } from "@react-icons/all-files/ri/RiUploadCloudLine"; import { RiEmotionSadLine } from "@react-icons/all-files/ri/RiEmotionSadLine"; -import { alertMsg, comfirmMsg } from "../common/env"; +import { alertMsg, confirmMsg } from "../common/env"; import { updater } from "./state_updater"; import { ICoreState, MsgProps, UIProps } from "./core_state"; import { LoginProps } from "./pane_login"; -import { MetadataResp, roleVisitor } from "../client"; +import { MetadataResp, roleVisitor, roleAdmin } from "../client"; import { Up } from "../worker/upload_mgr"; import { UploadEntry } from "../worker/interface"; import { Flexbox } from "./layout/flexbox"; @@ -97,6 +97,11 @@ export class Browser extends React.Component { }; addUploads = (event: React.ChangeEvent) => { + if (event.target.files.length > 1000) { + alertMsg(this.props.msg.pkg.get("err.tooManyUploads")); + return; + } + let fileList = List(); for (let i = 0; i < event.target.files.length; i++) { fileList = fileList.push(event.target.files[i]); @@ -159,7 +164,7 @@ export class Browser extends React.Component { return; } else { const filesToDel = this.state.selectedItems.keySeq().join(", "); - if (!comfirmMsg(`do you want to delete ${filesToDel}?`)) { + if (!confirmMsg(`do you want to delete ${filesToDel}?`)) { return; } } @@ -213,6 +218,9 @@ export class Browser extends React.Component { chdir = async (dirPath: List) => { if (dirPath === this.props.browser.dirPath) { return; + } else if (this.props.login.userRole !== roleAdmin && dirPath.size <= 1) { + alertMsg(this.props.msg.pkg.get("unauthed")); + return; } return updater() diff --git a/src/client/web/src/components/core_state.ts b/src/client/web/src/components/core_state.ts index a48c278..15668dd 100644 --- a/src/client/web/src/components/core_state.ts +++ b/src/client/web/src/components/core_state.ts @@ -50,7 +50,7 @@ export function initState(): ICoreState { }, panes: { // which pane is displaying - displaying: "browser", + displaying: "", // which panes can be displayed paneNames: Set([]), // "settings", "login", "admin" }, diff --git a/src/client/web/src/components/pane_admin.tsx b/src/client/web/src/components/pane_admin.tsx index 4804a4f..70272ee 100644 --- a/src/client/web/src/components/pane_admin.tsx +++ b/src/client/web/src/components/pane_admin.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { List, Map, Set } from "immutable"; import FileSize from "filesize"; -import { alertMsg } from "../common/env"; +import { alertMsg, confirmMsg } from "../common/env"; import { ICoreState, MsgProps } from "./core_state"; import { User, Quota } from "../client"; import { updater } from "./state_updater"; @@ -97,13 +97,13 @@ export class UserForm extends React.Component< }); }; - setPwd = () => { + setPwd = async () => { if (this.state.newPwd1 !== this.state.newPwd2) { alertMsg(this.props.msg.pkg.get("settings.pwd.notSame")); return; } - updater() + return updater() .forceSetPwd(this.state.id, this.state.newPwd1) .then((ok: boolean) => { if (ok) { @@ -134,8 +134,8 @@ export class UserForm extends React.Component< }); }; - delUser = () => { - updater() + delUser = async () => { + return updater() .delUser(this.state.id) .then((ok: boolean) => { if (!ok) { @@ -208,7 +208,7 @@ export class UserForm extends React.Component< { this.setState({ newRole: ev.target.value }); }; - addRole = () => { - updater() + addRole = async () => { + return updater() .addRole(this.state.newRole) .then((ok: boolean) => { if (!ok) { @@ -359,16 +359,17 @@ export class AdminPane extends React.Component { }); }; - delRole = (role: string) => { + delRole = async (role: string) => { if ( - !confirm( - this.props.msg.pkg.get("role.delete.warning") // "After deleting this role, some of users may not be able to login." + !confirmMsg( + // "After deleting this role, some of users may not be able to login." + this.props.msg.pkg.get("role.delete.warning") ) ) { return; } - updater() + return updater() .delRole(role) .then((ok: boolean) => { if (!ok) { @@ -383,13 +384,13 @@ export class AdminPane extends React.Component { }); }; - addUser = () => { + addUser = async () => { if (this.state.newUserPwd1 !== this.state.newUserPwd2) { alertMsg(this.props.msg.pkg.get("settings.pwd.notSame")); return; } - updater() + return updater() .addUser({ id: "", // backend will fill it name: this.state.newUserName, @@ -466,51 +467,63 @@ export class AdminPane extends React.Component { className="title-m bold margin-b-m" /> - - - - - - , + +
+ {this.props.msg.pkg.get("user.name")} +
+ + - , - ])} - childrenStyles={List([ - { - alignItems: "flex-start", - }, - { justifyContent: "flex-end" }, - ])} - className="margin-t-m" - /> + +
+ {this.props.msg.pkg.get("user.role")} +
+ + + + +
+ {this.props.msg.pkg.get("settings.pwd.new1")} +
+ + + + +
+ {this.props.msg.pkg.get("settings.pwd.new2")} +
+ + + + + +
@@ -521,7 +534,6 @@ export class AdminPane extends React.Component { ])} className="title-m bold margin-b-m" /> - {userList}
diff --git a/src/client/web/src/components/topbar.tsx b/src/client/web/src/components/topbar.tsx index 1936b2c..4a7a625 100644 --- a/src/client/web/src/components/topbar.tsx +++ b/src/client/web/src/components/topbar.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { List, Set } from "immutable"; -import { alertMsg } from "../common/env"; +import { alertMsg, confirmMsg } from "../common/env"; import { ICoreState, MsgProps } from "./core_state"; import { LoginProps } from "./pane_login"; @@ -43,6 +43,10 @@ export class TopBar extends React.Component { }; logout = async (): Promise => { + if (!confirmMsg(this.props.msg.pkg.get("logout.confirm"))) { + return; + } + return updater() .logout() .then((ok: boolean) => { diff --git a/src/client/web/src/i18n/en_US.ts b/src/client/web/src/i18n/en_US.ts index a41c514..aa79da0 100644 --- a/src/client/web/src/i18n/en_US.ts +++ b/src/client/web/src/i18n/en_US.ts @@ -40,7 +40,7 @@ export const msgs: Map = Map({ update: "Update", "settings.pwd.old": "current password", "settings.pwd.new1": "new password", - "settings.pwd.new2": "input again password", + "settings.pwd.new2": "input again the new password", "settings.chooseLan": "Choose Language", "settings.pwd.update": "Update Password", settings: "Settings", @@ -80,4 +80,7 @@ export const msgs: Map = Map({ "pane.login": "Login", "pane.admin": "Administration", "pane.settings": "Settings", + "logout.confirm": "Are you going to logout?", + unauthed: "Unauthorized action", + "err.tooManyUploads": "Can not upload more than 1000 files at once", }); diff --git a/src/client/web/src/i18n/zh_CN.ts b/src/client/web/src/i18n/zh_CN.ts index 9f2c2a5..38ac120 100644 --- a/src/client/web/src/i18n/zh_CN.ts +++ b/src/client/web/src/i18n/zh_CN.ts @@ -72,10 +72,13 @@ export const msgs: Map = Map({ "share.404.desc": "在列表面板可以共享文件夹", "upload.404.title": "没有正在上传的文件", "upload.404.desc": "在列表面板可以上传文件", - "detail": "详细", - "refresh": "刷新", + detail: "详细", + refresh: "刷新", "refresh-hint": "请稍后刷新查看结果", "pane.login": "登入", "pane.admin": "管理", "pane.settings": "设置", + "logout.confirm": "确定登出吗？", + "unauthed": "未授权动作", + "err.tooManyUploads": "不可同时上传超过1000个文件", });