From 1f5dd061d6b726f68962ed03cb4a98fce361de60 Mon Sep 17 00:00:00 2001 From: hexxa Date: Sat, 25 Sep 2021 18:48:03 +0800 Subject: [PATCH] fix(fe): hide elements in sharing mode --- src/client/web/src/components/browser.tsx | 122 ++++++++++-------- src/client/web/src/components/pane_login.tsx | 26 +--- src/client/web/src/components/panes.tsx | 1 + src/client/web/src/components/root_frame.tsx | 12 +- src/client/web/src/components/state_mgr.tsx | 53 +------- .../web/src/components/state_updater.ts | 65 ++++++++++ src/client/web/src/components/topbar.tsx | 16 ++- 7 files changed, 158 insertions(+), 137 deletions(-) diff --git a/src/client/web/src/components/browser.tsx b/src/client/web/src/components/browser.tsx index 073a6b0..57f9e2d 100644 --- a/src/client/web/src/components/browser.tsx +++ b/src/client/web/src/components/browser.tsx @@ -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 { }; 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 { /> , - + - ) : ( - - )} - - {this.state.selectedItems.size > 0 ? ( - +
+ + {this.props.browser.isSharing ? ( - + ) : ( - - ) : null} - , + )} - - {`${this.props.msg.pkg.get( - "browser.used" - )} ${usedSpace} / ${spaceLimit}`} - , - ])} - className="padding-m" - childrenStyles={List([{}, { justifyContent: "flex-end" }])} - /> + {this.state.selectedItems.size > 0 ? ( + + + + + + ) : null} + , + + + {`${this.props.msg.pkg.get( + "browser.used" + )} ${usedSpace} / ${spaceLimit}`} + , + ])} + className="padding-m" + childrenStyles={List([{}, { justifyContent: "flex-end" }])} + /> +
{ /> , - + - {sharingListPane} - {uploadingListPane} +
+ {sharingListPane} +
+
+ {uploadingListPane} +
{itemListPane} diff --git a/src/client/web/src/components/pane_login.tsx b/src/client/web/src/components/pane_login.tsx index 03faac3..dd58abc 100644 --- a/src/client/web/src/components/pane_login.tsx +++ b/src/client/web/src/components/pane_login.tsx @@ -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 { ) .then((ok: boolean): Promise => { 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); }); }; diff --git a/src/client/web/src/components/panes.tsx b/src/client/web/src/components/panes.tsx index 2f90251..c80c5d4 100644 --- a/src/client/web/src/components/panes.tsx +++ b/src/client/web/src/components/panes.tsx @@ -55,6 +55,7 @@ export class Panes extends React.Component { {this.props.msg.pkg.get("panes.close")} + diff --git a/src/client/web/src/components/root_frame.tsx b/src/client/web/src/components/root_frame.tsx index 1442513..6614a5a 100644 --- a/src/client/web/src/components/root_frame.tsx +++ b/src/client/web/src/components/root_frame.tsx @@ -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; @@ -17,7 +19,7 @@ export interface Props { update?: (updater: (prevState: ICoreState) => ICoreState) => void; } -export interface State {} +export interface State { } export class RootFrame extends React.Component { constructor(p: Props) { super(p); @@ -27,10 +29,12 @@ export class RootFrame extends React.Component { const wallpaperStyle = this.props.ui.wallpaper !== "" ? { - background: `url("${this.props.ui.wallpaper}") ${this.props.ui.repeat} ${this.props.ui.position} ${this.props.ui.align}`, - } + background: `url("${this.props.ui.wallpaper}") ${this.props.ui.repeat} ${this.props.ui.position} ${this.props.ui.align}`, + } : {}; + const showBrowser = this.props.login.userRole === roleVisitor && !this.props.browser.isSharing ? "hidden" : ""; + return (
@@ -49,7 +53,7 @@ export class RootFrame extends React.Component { update={this.props.update} /> -
+
{ 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(["login"])); - updater().displayPane(""); - return Promise.all([]); - } - - // redirect to login - updater().setPanes(Set(["login"])); - updater().displayPane("login"); - return Promise.all([updater().getCaptchaID()]); - } - - if (updater().props.login.userRole === roleAdmin) { - updater().setPanes(Set(["login", "settings", "admin"])); - } else { - updater().setPanes(Set(["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); diff --git a/src/client/web/src/components/state_updater.ts b/src/client/web/src/components/state_updater.ts index 057b0c3..1b13ac8 100644 --- a/src/client/web/src/components/state_updater.ts +++ b/src/client/web/src/components/state_updater.ts @@ -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(listResp.data.metadatas); return true; } + this.props.browser.dirPath = List([]); + this.props.browser.items = List([]); return false; }; @@ -221,6 +224,8 @@ export class Updater { this.props.browser.items = List(listResp.data.metadatas); return true; } + this.props.browser.dirPath = List([]); + this.props.browser.items = List([]); return false; }; @@ -289,6 +294,66 @@ export class Updater { this.props.panes.paneNames = paneNames; }; + initPanes = async (): Promise> => { + // init browser content + if (this.props.login.userRole === roleVisitor) { + if (this.props.browser.isSharing) { + // sharing with visitor + this.setPanes(Set(["login"])); + this.displayPane(""); + return Promise.all([]); + } + + // redirect to login + this.setPanes(Set(["login"])); + this.displayPane("login"); + return Promise.all([this.getCaptchaID()]); + } + + if (this.props.login.userRole === roleAdmin) { + this.setPanes(Set(["login", "settings", "admin"])); + } else { + this.setPanes(Set(["login", "settings"])); + } + this.displayPane(""); + + return Promise.all([ + this.refreshUploadings(), + this.initUploads(), + this.listSharings(), + ]); + }; + + initAll = async (params: URLSearchParams): Promise => { + 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 => { const resp = await this.usersClient.self(); if (resp.status === 200) { diff --git a/src/client/web/src/components/topbar.tsx b/src/client/web/src/components/topbar.tsx index d33ef93..1936b2c 100644 --- a/src/client/web/src/components/topbar.tsx +++ b/src/client/web/src/components/topbar.tsx @@ -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 { }); }; - logout = async () => { + logout = async (): Promise => { 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); }); };