doesnm/quickshare
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(fe): clean up components

Browse source
This commit is contained in:
hexxa 2021-09-27 16:07:15 +08:00 • committed by Hexxa
parent 0b37536451
commit d85a46d039
7 changed files with 100 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/client/web/src/common/env.ts
View file

@ -6,6 +6,6 @@ export function alertMsg(msg: string) {
}
}
export function comfirmMsg(msg: string): boolean {
export function confirmMsg(msg: string): boolean {
return confirm(msg);
}

14
src/client/web/src/components/browser.tsx
View file

@ -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()

2
src/client/web/src/components/core_state.ts
View file

@ -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"
},

76
src/client/web/src/components/pane_admin.tsx
View file

@ -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<
</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 = () => {
updater()
addRole = async () => {
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(
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<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,9 +467,10 @@ export class AdminPane extends React.Component<Props, State, {}> {
className="title-m bold margin-b-m"
/>
<Flexbox
children={List([
<span>
<span className="inline-block margin-r-m margin-b-m">
<div className="font-size-s grey1-font">
{this.props.msg.pkg.get("user.name")}
</div>
<input
type="text"
onChange={this.onChangeUserName}
@ -476,6 +478,12 @@ export class AdminPane extends React.Component<Props, State, {}> {
className="black0-font margin-r-m margin-b-m"
placeholder={this.props.msg.pkg.get("user.name")}
/>
</span>
<span className="inline-block margin-r-m margin-b-m">
<div className="font-size-s grey1-font">
{this.props.msg.pkg.get("user.role")}
</div>
<input
type="text"
onChange={this.onChangeUserRole}
@ -483,13 +491,25 @@ export class AdminPane extends React.Component<Props, State, {}> {
className="black0-font margin-r-m margin-b-m"
placeholder={this.props.msg.pkg.get("user.role")}
/>
</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("user.password")}
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}
@ -497,20 +517,13 @@ export class AdminPane extends React.Component<Props, State, {}> {
className="black0-font margin-r-m margin-b-m"
placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
/>
</span>,
</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>,
])}
childrenStyles={List([
{
alignItems: "flex-start",
},
{ justifyContent: "flex-end" },
])}
className="margin-t-m"
/>
</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>

6
src/client/web/src/components/topbar.tsx
View file

@ -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) => {

5
src/client/web/src/i18n/en_US.ts
View file

@ -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",
});

7
src/client/web/src/i18n/zh_CN.ts
View file

@ -72,10 +72,13 @@ export const msgs: Map<string, string> = 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个文件",
});