fix(fe): clean up components

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);
 }

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<Props, State, {}> {
   };
 
   addUploads = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files.length > 1000) {
+      alertMsg(this.props.msg.pkg.get("err.tooManyUploads"));
+      return;
+    }
+
     let fileList = List<File>();
     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<Props, State, {}> {
       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<Props, State, {}> {
   chdir = async (dirPath: List<string>) => {
     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()

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<string>([]), // "settings", "login", "admin"
     },

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 = () => {
+  delUser = async () => {
-    updater()
+    return updater()
       .delUser(this.state.id)
       .then((ok: boolean) => {
         if (!ok) {
@@ -208,7 +208,7 @@ export class UserForm extends React.Component<
                 </div>
                 <input
                   name={`${this.props.id}-spaceLimit`}
-                  type="text"
+                  type="number"
                   onChange={this.changeSpaceLimit}
                   value={this.state.quota.spaceLimit}
                   className="black0-font margin-r-m"
@@ -225,7 +225,7 @@ export class UserForm extends React.Component<
                 </div>
                 <input
                   name={`${this.props.id}-uploadSpeedLimit`}
-                  type="text"
+                  type="number"
                   onChange={this.changeUploadSpeedLimit}
                   value={this.state.quota.uploadSpeedLimit}
                   className="black0-font margin-r-m"
@@ -242,7 +242,7 @@ export class UserForm extends React.Component<
                 </div>
                 <input
                   name={`${this.props.id}-downloadSpeedLimit`}
-                  type="text"
+                  type="number"
                   onChange={this.changeDownloadSpeedLimit}
                   value={this.state.quota.downloadSpeedLimit}
                   className="black0-font margin-r-m"
@@ -343,8 +343,8 @@ export class AdminPane extends React.Component<Props, State, {}> {
     this.setState({ newRole: ev.target.value });
   };
 
-  addRole = () => {
+  addRole = async () => {
-    updater()
+    return updater()
       .addRole(this.state.newRole)
       .then((ok: boolean) => {
         if (!ok) {
@@ -359,16 +359,17 @@ export class AdminPane extends React.Component<Props, State, {}> {
       });
   };
 
-  delRole = (role: string) => {
+  delRole = async (role: string) => {
     if (
-      !confirm(
+      !confirmMsg(
-        this.props.msg.pkg.get("role.delete.warning") // "After deleting this role, some of users may not be able to login."
+        // "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<Props, State, {}> {
       });
   };
 
-  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<Props, State, {}> {
             className="title-m bold margin-b-m"
           />
 
-          <Flexbox
+          <span className="inline-block margin-r-m margin-b-m">
-            children={List([
+            <div className="font-size-s grey1-font">
-              <span>
+              {this.props.msg.pkg.get("user.name")}
-                <input
+            </div>
-                  type="text"
+            <input
-                  onChange={this.onChangeUserName}
+              type="text"
-                  value={this.state.newUserName}
+              onChange={this.onChangeUserName}
-                  className="black0-font margin-r-m margin-b-m"
+              value={this.state.newUserName}
-                  placeholder={this.props.msg.pkg.get("user.name")}
+              className="black0-font margin-r-m margin-b-m"
-                />
+              placeholder={this.props.msg.pkg.get("user.name")}
-                <input
+            />
-                  type="text"
+          </span>
-                  onChange={this.onChangeUserRole}
-                  value={this.state.newUserRole}
-                  className="black0-font margin-r-m margin-b-m"
-                  placeholder={this.props.msg.pkg.get("user.role")}
-                />
-                <input
-                  type="password"
-                  onChange={this.onChangeUserPwd1}
-                  value={this.state.newUserPwd1}
-                  className="black0-font margin-r-m margin-b-m"
-                  placeholder={this.props.msg.pkg.get("user.password")}
-                />
-                <input
-                  type="password"
-                  onChange={this.onChangeUserPwd2}
-                  value={this.state.newUserPwd2}
-                  className="black0-font margin-r-m margin-b-m"
-                  placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
-                />
-              </span>,
 
-              <button onClick={this.addUser} className="margin-r-m">
+          <span className="inline-block margin-r-m margin-b-m">
-                {this.props.msg.pkg.get("add")}
+            <div className="font-size-s grey1-font">
-              </button>,
+              {this.props.msg.pkg.get("user.role")}
-            ])}
+            </div>
-            childrenStyles={List([
+            <input
-              {
+              type="text"
-                alignItems: "flex-start",
+              onChange={this.onChangeUserRole}
-              },
+              value={this.state.newUserRole}
-              { justifyContent: "flex-end" },
+              className="black0-font margin-r-m margin-b-m"
-            ])}
+              placeholder={this.props.msg.pkg.get("user.role")}
-            className="margin-t-m"
+            />
-          />
+          </span>
+
+          <span className="inline-block margin-r-m margin-b-m">
+            <div className="font-size-s grey1-font">
+              {this.props.msg.pkg.get("settings.pwd.new1")}
+            </div>
+            <input
+              type="password"
+              onChange={this.onChangeUserPwd1}
+              value={this.state.newUserPwd1}
+              className="black0-font margin-r-m margin-b-m"
+              placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
+            />
+          </span>
+
+          <span className="inline-block margin-r-m margin-b-m">
+            <div className="font-size-s grey1-font">
+              {this.props.msg.pkg.get("settings.pwd.new2")}
+            </div>
+            <input
+              type="password"
+              onChange={this.onChangeUserPwd2}
+              value={this.state.newUserPwd2}
+              className="black0-font margin-r-m margin-b-m"
+              placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
+            />
+          </span>
+
+          <span className="inline-block margin-r-m margin-b-m">
+            <button onClick={this.addUser} className="margin-r-m">
+              {this.props.msg.pkg.get("add")}
+            </button>
+          </span>
         </div>
 
         <div className="container padding-l">
@@ -521,7 +534,6 @@ export class AdminPane extends React.Component<Props, State, {}> {
             ])}
             className="title-m bold margin-b-m"
           />
-
           {userList}
         </div>
 

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<Props, State, {}> {
   };
 
   logout = async (): Promise<void> => {
+    if (!confirmMsg(this.props.msg.pkg.get("logout.confirm"))) {
+      return;
+    }
+
     return updater()
       .logout()
       .then((ok: boolean) => {

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

@@ -40,7 +40,7 @@ export const msgs: Map<string, string> = 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<string, string> = 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",
 });

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

@@ -72,10 +72,13 @@ export const msgs: Map<string, string> = Map({
   "share.404.desc": "在列表面板可以共享文件夹",
   "upload.404.title": "没有正在上传的文件",
   "upload.404.desc": "在列表面板可以上传文件",
-  "detail": "详细",
+  detail: "详细",
-  "refresh": "刷新",
+  refresh: "刷新",
   "refresh-hint": "请稍后刷新查看结果",
   "pane.login": "登入",
   "pane.admin": "管理",
   "pane.settings": "设置",
+  "logout.confirm": "确定登出吗？",
+  "unauthed": "未授权动作",
+  "err.tooManyUploads": "不可同时上传超过1000个文件",
 });