fix(fe): hide elements in sharing mode

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<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,69 +507,72 @@ 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">
-            <Flexbox
+            <div className={`${showOp}`} >
-              children={List([
+              <Flexbox
-                <span>
+                children={List([
-                  {this.props.browser.isSharing ? (
+                  <span>
-                    <button
+                    {this.props.browser.isSharing ? (
-                      type="button"
-                      onClick={() => {
-                        this.deleteSharing(
-                          this.props.browser.dirPath.join("/")
-                        );
-                      }}
-                      className="red0-bg white-font margin-r-m"
-                    >
-                      {this.props.msg.pkg.get("browser.share.del")}
-                    </button>
-                  ) : (
-                    <button
-                      type="button"
-                      onClick={this.addSharing}
-                      className="green0-bg white-font margin-r-m"
-                    >
-                      {this.props.msg.pkg.get("browser.share.add")}
-                    </button>
-                  )}
-
-                  {this.state.selectedItems.size > 0 ? (
-                    <span>
                       <button
                         type="button"
-                        onClick={() => this.delete()}
+                        onClick={() => {
+                          this.deleteSharing(
+                            this.props.browser.dirPath.join("/")
+                          );
+                        }}
                         className="red0-bg white-font margin-r-m"
                       >
-                        {this.props.msg.pkg.get("browser.delete")}
+                        {this.props.msg.pkg.get("browser.share.del")}
                       </button>
-
+                    ) : (
                       <button
                         type="button"
-                        onClick={() => this.moveHere()}
+                        onClick={this.addSharing}
-                        className="margin-r-m"
+                        className="green0-bg white-font margin-r-m"
                       >
-                        {this.props.msg.pkg.get("browser.paste")}
+                        {this.props.msg.pkg.get("browser.share.add")}
                       </button>
-                    </span>
+                    )}
-                  ) : null}
-                </span>,
 
-                <span>
+                    {this.state.selectedItems.size > 0 ? (
-                  <span className="desc-m grey0-font">{`${this.props.msg.pkg.get(
+                      <span>
-                    "browser.used"
+                        <button
-                  )} ${usedSpace} / ${spaceLimit}`}</span>
+                          type="button"
-                </span>,
+                          onClick={() => this.delete()}
-              ])}
+                          className="red0-bg white-font margin-r-m"
-              className="padding-m"
+                        >
-              childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+                          {this.props.msg.pkg.get("browser.delete")}
-            />
+                        </button>
+
+                        <button
+                          type="button"
+                          onClick={() => this.moveHere()}
+                          className="margin-r-m"
+                        >
+                          {this.props.msg.pkg.get("browser.paste")}
+                        </button>
+                      </span>
+                    ) : null}
+                  </span>,
+
+                  <span>
+                    <span className="desc-m grey0-font">{`${this.props.msg.pkg.get(
+                      "browser.used"
+                    )} ${usedSpace} / ${spaceLimit}`}</span>
+                  </span>,
+                ])}
+                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>
-          {sharingListPane}
+          <div>
-          {uploadingListPane}
+            {sharingListPane}
+          </div>
+          <div>
+            {uploadingListPane}
+          </div>
           {itemListPane}
         </div>
       </div>

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<Props, State, {}> {
       )
       .then((ok: boolean): Promise<any> => {
         if (ok) {
-          this.update(updater().updateLogin);
+          const params = new URLSearchParams(document.location.search.substring(1));
-          this.setState({ user: "", pwd: "", captchaInput: "" });
+          return updater().initAll(params);
-          // 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(),
-          ]);
         } 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);
       });
   };
 

src/client/web/src/components/panes.tsx

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

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<Props, State, {}> {
   constructor(p: Props) {
     super(p);
@@ -27,10 +29,12 @@ export class RootFrame extends React.Component<Props, State, {}> {
     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 (
       <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}

src/client/web/src/components/state_mgr.tsx

@@ -41,58 +41,7 @@ export class StateMgr extends React.Component<Props, State, {}> {
     const params = new URLSearchParams(document.location.search.substring(1));
 
     return updater()
-      .initIsAuthed()
+      .initAll(params)
-      .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;
-      })
       .then(() => {
         this.update(updater().updateBrowser);
         this.update(updater().updateLogin);

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

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