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

fix(fe): hide elements in sharing mode

Browse source
This commit is contained in:
hexxa 2021-09-25 18:48:03 +08:00 • committed by Hexxa
parent 08ed7f175b
commit 1f5dd061d6
7 changed files with 158 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,7 +15,7 @@ import { alertMsg, comfirmMsg } from "../common/env";
import { updater } from "./state_updater";
import { ICoreState, MsgProps } from "./core_state";
import { LoginProps } from "./pane_login";
import { MetadataResp, UploadInfo } from "../client";
import { MetadataResp, roleVisitor } from "../client";
import { Up } from "../worker/upload_mgr";
import { UploadEntry } from "../worker/interface";
import { Flexbox } from "./layout/flexbox";
@ -316,6 +316,8 @@ export class Browser extends React.Component<Props, State, {}> {
};
render() {
const showOp = this.props.login.userRole === roleVisitor ? "hidden" : "";
let breadcrumb = this.props.browser.dirPath.map(
(pathPart: string, key: number) => {
return (
@ -422,7 +424,7 @@ export class Browser extends React.Component<Props, State, {}> {
/>
</span>,
<span className="padding-m">
<span className={`padding-m ${showOp}`}>
<button
onClick={() => this.select(item.name)}
className={`${isSelected ? "blue0-bg white-font" : "grey2-bg grey3-font"
@ -438,10 +440,9 @@ export class Browser extends React.Component<Props, State, {}> {
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
) : (
<div>
<div key={item.name}>
<Flexbox
key={item.name}
children={List([
<span className="padding-m">
<Flexbox
@ -468,7 +469,7 @@ export class Browser extends React.Component<Props, State, {}> {
/>
</span>,
<span className="item-op padding-m">
<span className={`item-op padding-m ${showOp}`}>
<button
type="button"
onClick={() => this.select(item.name)}
@ -506,14 +507,16 @@ export class Browser extends React.Component<Props, State, {}> {
round: 0,
}
);
const itemListPane =
this.props.browser.tab === "" || this.props.browser.tab === "item" ? (
<div>
<div id="op-bar" className="op-bar">
<div id="op-bar" className={`op-bar ${showOp}`}>
<div className="margin-l-m margin-r-m margin-b-m">{ops}</div>
</div>
<div className="container">
<div className={`${showOp}`} >
<Flexbox
children={List([
<span>
@ -569,6 +572,7 @@ export class Browser extends React.Component<Props, State, {}> {
className="padding-m"
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
</div>
<Flexbox
children={List([
@ -585,7 +589,7 @@ export class Browser extends React.Component<Props, State, {}> {
/>
</span>,
<span className="padding-m">
<span className={`padding-m ${showOp}`}>
<button
onClick={() => this.selectAll()}
className={`grey1-bg white-font`}
@ -721,9 +725,8 @@ export class Browser extends React.Component<Props, State, {}> {
const sharingList = this.props.browser.sharings.map((dirPath: string) => {
return (
<div className="padding-m">
<div key={dirPath} className="padding-m">
<Flexbox
key={dirPath}
children={List([
<Flexbox
children={List([
@ -818,10 +821,11 @@ export class Browser extends React.Component<Props, State, {}> {
)
) : null;
const showTabs = this.props.login.userRole === roleVisitor ? "hidden" : "";
return (
<div>
<div id="item-list">
<div className="container">
<div className={`container ${showTabs}`}>
<div className="padding-m">
<button
onClick={() => {
@ -880,8 +884,12 @@ export class Browser extends React.Component<Props, State, {}> {
</button>
</div>
</div>
<div>
{sharingListPane}
</div>
<div>
{uploadingListPane}
</div>
{itemListPane}
</div>
</div>

26
src/client/web/src/components/pane_login.tsx
View file

@ -1,4 +1,5 @@
import * as React from "react";
import { Set } from "immutable";
import { ICoreState, MsgProps } from "./core_state";
import { updater } from "./state_updater";
@ -61,39 +62,22 @@ export class AuthPane extends React.Component<Props, State, {}> {
)
.then((ok: boolean): Promise<any> => {
if (ok) {
this.update(updater().updateLogin);
this.setState({ user: "", pwd: "", captchaInput: "" });
// close all the panes
updater().displayPane("");
this.update(updater().updatePanes);
// refresh
return Promise.all([
updater().setHomeItems(),
updater().refreshUploadings(),
updater().isSharing(updater().props.browser.dirPath.join("/")),
updater().listSharings(),
updater().self(),
]);
const params = new URLSearchParams(document.location.search.substring(1));
return updater().initAll(params);
} else {
this.setState({ user: "", pwd: "", captchaInput: "" });
alertMsg("Failed to login.");
return updater().getCaptchaID();
}
})
.then(() => {
this.update(updater().updateBrowser);
this.update(updater().updateLogin);
this.update(updater().updatePanes);
this.update(updater().updateAdmin);
updater().initLan();
this.update(updater().updateMsg);
})
.then(() => {
return updater().isSharing(updater().props.browser.dirPath.join("/"));
})
.then(() => {
this.update(updater().updateBrowser);
});
};

1
src/client/web/src/components/panes.tsx
View file

@ -55,6 +55,7 @@ export class Panes extends React.Component<Props, State, {}> {
{this.props.msg.pkg.get("panes.close")}
</button>
</div>
</div>
</div>

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

@ -6,6 +6,8 @@ import { LoginProps } from "./pane_login";
import { Panes, PanesProps } from "./panes";
import { AdminProps } from "./pane_admin";
import { TopBar } from "./topbar";
import { roleVisitor } from "../client";
export interface Props {
browser: BrowserProps;
@ -31,6 +33,8 @@ export class RootFrame extends React.Component<Props, State, {}> {
}
: {};
const showBrowser = this.props.login.userRole === roleVisitor && !this.props.browser.isSharing ? "hidden" : "";
return (
<div className="theme-white desktop">
<div id="bg" className="bg bg-img font-m" style={wallpaperStyle}>
@ -49,7 +53,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
update={this.props.update}
/>
<div className="container-center">
<div className={`container-center ${showBrowser}`}>
<Browser
browser={this.props.browser}
msg={this.props.msg}

53
src/client/web/src/components/state_mgr.tsx
View file

@ -41,58 +41,7 @@ export class StateMgr extends React.Component<Props, State, {}> {
const params = new URLSearchParams(document.location.search.substring(1));
return updater()
.initIsAuthed()
.then(() => {
return updater().self();
})
.then(() => {
const dir = params.get("dir");
if (dir != null && dir !== "") {
const dirPath = List(dir.split("/"));
return updater().setItems(dirPath);
} else {
return updater().setHomeItems();
}
})
.then(() => {
return updater().isSharing(updater().props.browser.dirPath.join("/"));
})
.then(() => {
// init browser content
if (updater().props.login.userRole === roleVisitor) {
if (updater().props.browser.isSharing) {
// sharing with visitor
updater().setPanes(Set<string>(["login"]));
updater().displayPane("");
return Promise.all([]);
}
// redirect to login
updater().setPanes(Set<string>(["login"]));
updater().displayPane("login");
return Promise.all([updater().getCaptchaID()]);
}
if (updater().props.login.userRole === roleAdmin) {
updater().setPanes(Set<string>(["login", "settings", "admin"]));
} else {
updater().setPanes(Set<string>(["login", "settings"]));
}
updater().displayPane("");
return Promise.all([
updater().refreshUploadings(),
updater().initUploads(),
updater().listSharings(),
]);
})
.then(() => {
// init admin content
if (updater().props.login.userRole === roleAdmin) {
return Promise.all([updater().listRoles(), updater().listUsers()]);
}
return;
})
.initAll(params)
.then(() => {
this.update(updater().updateBrowser);
this.update(updater().updateLogin);

65
src/client/web/src/components/state_updater.ts
View file

@ -13,6 +13,7 @@ import {
Quota,
Response,
roleVisitor,
roleAdmin,
} from "../client";
import { FilesClient } from "../client/files";
import { UsersClient } from "../client/users";
@ -210,6 +211,8 @@ export class Updater {
this.props.browser.items = List<MetadataResp>(listResp.data.metadatas);
return true;
}
this.props.browser.dirPath = List<string>([]);
this.props.browser.items = List<MetadataResp>([]);
return false;
};
@ -221,6 +224,8 @@ export class Updater {
this.props.browser.items = List<MetadataResp>(listResp.data.metadatas);
return true;
}
this.props.browser.dirPath = List<string>([]);
this.props.browser.items = List<MetadataResp>([]);
return false;
};
@ -289,6 +294,66 @@ export class Updater {
this.props.panes.paneNames = paneNames;
};
initPanes = async (): Promise<Array<any>> => {
// init browser content
if (this.props.login.userRole === roleVisitor) {
if (this.props.browser.isSharing) {
// sharing with visitor
this.setPanes(Set<string>(["login"]));
this.displayPane("");
return Promise.all([]);
}
// redirect to login
this.setPanes(Set<string>(["login"]));
this.displayPane("login");
return Promise.all([this.getCaptchaID()]);
}
if (this.props.login.userRole === roleAdmin) {
this.setPanes(Set<string>(["login", "settings", "admin"]));
} else {
this.setPanes(Set<string>(["login", "settings"]));
}
this.displayPane("");
return Promise.all([
this.refreshUploadings(),
this.initUploads(),
this.listSharings(),
]);
};
initAll = async (params: URLSearchParams): Promise<any> => {
return this.initIsAuthed()
.then(() => {
return this.self();
})
.then(() => {
const dir = params.get("dir");
if (dir != null && dir !== "") {
const dirPath = List(dir.split("/"));
return this.setItems(dirPath);
} else {
return this.setHomeItems();
}
})
.then(() => {
return this.isSharing(this.props.browser.dirPath.join("/"));
})
.then(() => {
// init panes
return this.initPanes();
})
.then(() => {
// init admin content
if (this.props.login.userRole === roleAdmin) {
return Promise.all([this.listRoles(), this.listUsers()]);
}
return;
})
};
self = async (): Promise<boolean> => {
const resp = await this.usersClient.self();
if (resp.status === 200) {

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

@ -1,5 +1,5 @@
import * as React from "react";
import { List } from "immutable";
import { List, Set } from "immutable";
import { alertMsg } from "../common/env";
import { ICoreState, MsgProps } from "./core_state";
@ -42,18 +42,28 @@ export class TopBar extends React.Component<Props, State, {}> {
});
};
logout = async () => {
logout = async (): Promise<void> => {
return updater()
.logout()
.then((ok: boolean) => {
if (ok) {
this.props.update(updater().updateLogin);
const params = new URLSearchParams(document.location.search.substring(1));
return updater().initAll(params);
} else {
alertMsg(this.props.msg.pkg.get("login.logout.fail"));
}
})
.then(() => {
return this.refreshCaptcha();
})
.then(() => {
this.props.update(updater().updateBrowser);
this.props.update(updater().updateLogin);
this.props.update(updater().updatePanes);
this.props.update(updater().updateAdmin);
updater().initLan();
this.props.update(updater().updateMsg);
});
};