fix(ui/core_state): move userRole to login domain

src/client/web/src/components/__test__/pane_login.test.tsx

@@ -16,6 +16,7 @@ describe("Login", () => {
 
     const coreState = newWithWorker(mockWorker);
     const pane = new AuthPane({
+      userRole: coreState.login.userRole,
       authed: coreState.login.authed,
       captchaID: coreState.login.captchaID,
       update: (updater: (prevState: ICoreState) => ICoreState) => {},
@@ -32,31 +33,15 @@ describe("Login", () => {
 
     // login
     expect(updater().props.login).toEqual({
+      userRole: "admin",
       authed: true,
       captchaID: "",
     });
 
     // panes
     expect(updater().props.panes).toEqual({
-      userRole: "admin",
       displaying: "",
       paneNames: Set(["settings", "login", "admin"]),
     });
-
-    // admin
-    let usersMap = Map({});
-    usersResps.listUsersMockResp.data.users.forEach((user: User) => {
-      usersMap = usersMap.set(user.name, user);
-    });
-    let roles = Set<string>();
-    Object.keys(usersResps.listRolesMockResp.data.roles).forEach(
-      (role: string) => {
-        roles = roles.add(role);
-      }
-    );
-    expect(updater().props.admin).toEqual({
-      users: usersMap,
-      roles: roles,
-    });
   });
 });

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

@@ -23,7 +23,6 @@ describe("Panes", () => {
     panes.closePane();
 
     expect(updater().props.panes).toEqual({
-      userRole: coreState.panes.userRole,
       displaying: "",
       paneNames: coreState.panes.paneNames,
     });

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

@@ -43,14 +43,14 @@ describe("State Manager", () => {
 
     // panes
     expect(coreState.panes).toEqual({
-      userRole: "admin",
+      displaying: "",
-      displaying: "browser",
       paneNames: Set(["settings", "login", "admin"]),
     });
 
     // login
     expect(coreState.login).toEqual({
-      authed: false,
+      userRole: "admin",
+      authed: true,
       captchaID: "mockCaptchaID",
     });
 

src/client/web/src/components/core_state.ts

@@ -50,11 +50,11 @@ export function initState(): ICoreState {
       uploadFiles: List<File>([]),
     },
     panes: {
-      userRole: "",
       displaying: "browser",
       paneNames: Set<string>(["settings", "login", "admin"]),
     },
     login: {
+      userRole: "",
       authed: false,
       captchaID: "",
     },

src/client/web/src/components/pane_login.tsx

@@ -5,6 +5,7 @@ import { ICoreState } from "./core_state";
 import { updater } from "./state_updater";
 
 export interface Props {
+  userRole: string;
   authed: boolean;
   captchaID: string;
   update?: (updater: (prevState: ICoreState) => ICoreState) => void;
@@ -48,57 +49,38 @@ export class AuthPane extends React.Component<Props, State, {}> {
         this.props.captchaID,
         this.state.captchaInput
       )
-      .then((ok: boolean) => {
+      .then((ok: boolean): Promise<any> => {
         if (ok) {
           this.update(updater().updateLogin);
-          this.setState({ user: "", pwd: "" });
+          this.setState({ user: "", pwd: "", captchaInput: "" });
           // close all the panes
           updater().displayPane("");
           this.update(updater().updatePanes);
 
           // refresh
-          return updater().setHomeItems();
+          return Promise.all([
+            updater().setHomeItems(),
+            updater().refreshUploadings(),
+            updater().isSharing(updater().props.browser.dirPath.join("/")),
+            updater().listSharings(),
+            updater().self(),
+          ]);
         } else {
-          this.setState({ user: "", pwd: "" });
+          this.setState({ user: "", pwd: "", captchaInput: "" });
           alert("Failed to login.");
-        }
 
-      })
+          return updater().getCaptchaID();
-      .then(() => {
-        return updater().refreshUploadings();
-      })
-      .then(() => {
-        return updater().isSharing(
-          updater().props.browser.dirPath.join("/")
-        );
-      })
-      .then(() => {
-        return updater().listSharings();
-      })
-      .then(() => {
-        return updater().self();
-      })
-      .then(() => {
-        // TODO: should rely on props to get userRole
-        if (updater().props.panes.userRole === "admin") {
-          // TODO: remove hardcode
-          return updater().listRoles();
         }
       })
       .then(() => {
-        // TODO: should rely on props to get userRole
-        if (updater().props.panes.userRole === "admin") {
-          // TODO: remove hardcode
-          return updater().listUsers();
-        }
-      })
-      .then((_: boolean) => {
         this.update(updater().updateBrowser);
       });
   };
 
   logout = () => {
-    updater().logout().then((ok: boolean) => {
+    updater()
+      .logout()
+      .then((ok: boolean) => {
         if (ok) {
           this.update(updater().updateLogin);
         } else {
@@ -107,6 +89,14 @@ export class AuthPane extends React.Component<Props, State, {}> {
       });
   };
 
+  refreshCaptcha = async () => {
+    return updater()
+      .getCaptchaID()
+      .then(() => {
+        this.props.update(updater().updateLogin);
+      });
+  };
+
   render() {
     return (
       <span>
@@ -157,6 +147,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
                 <img
                   src={`/v1/captchas/imgs?capid=${this.props.captchaID}`}
                   className="captcha"
+                  onClick={this.refreshCaptcha}
                 />
               </div>
               <div className="flex-list-item-l"></div>

src/client/web/src/components/pane_settings.tsx

@@ -147,6 +147,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
               </div>
               <div className="flex-list-item-r">
                 <AuthPane
+                  userRole={this.props.login.userRole}
                   authed={this.props.login.authed}
                   captchaID={this.props.login.captchaID}
                   update={this.update}

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

@@ -9,7 +9,6 @@ import { AuthPane, Props as AuthPaneProps } from "./pane_login";
 
 export interface PanesProps {
   displaying: string;
-  userRole: string;
   paneNames: Set<string>;
 }
 export interface Props {
@@ -46,6 +45,7 @@ export class Panes extends React.Component<Props, State, {}> {
       ),
       login: (
         <AuthPane
+          userRole={this.props.login.userRole}
           authed={this.props.login.authed}
           captchaID={this.props.login.captchaID}
           update={this.props.update}
@@ -53,7 +53,7 @@ export class Panes extends React.Component<Props, State, {}> {
       ),
     });
 
-    if (this.props.panes.userRole === "admin") {
+    if (this.props.login.userRole === "admin") {
       panesMap = panesMap.set(
         "admin",
         <AdminPane

src/client/web/src/components/root_frame.tsx

@@ -29,7 +29,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
             update={this.props.update}
           />
 
-          <TopBar update={this.props.update}></TopBar>
+          <TopBar login={this.props.panes.login} update={this.props.update}></TopBar>
 
           <div className="container-center">
             <Browser

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

@@ -88,13 +88,13 @@ export class StateMgr extends React.Component<Props, State, {}> {
         return updater().self();
       })
       .then(() => {
-        if (updater().props.panes.userRole === "admin") {
+        if (updater().props.login.userRole === "admin") {
           // TODO: remove hardcode
           return updater().listRoles();
         }
       })
       .then(() => {
-        if (updater().props.panes.userRole === "admin") {
+        if (updater().props.login.userRole === "admin") {
           // TODO: remove hardcode
           return updater().listUsers();
         }

src/client/web/src/components/state_updater.ts

@@ -202,7 +202,7 @@ export class Updater {
   self = async (): Promise<boolean> => {
     const resp = await this.usersClient.self();
     if (resp.status === 200) {
-      this.props.panes.userRole = resp.data.role;
+      this.props.login.userRole = resp.data.role;
       return true;
     }
     return false;

src/client/web/src/components/topbar.tsx

@@ -1,10 +1,12 @@
 import * as React from "react";
 
 import { ICoreState } from "./core_state";
+import { Props as LoginProps } from "./pane_login";
 import { updater } from "./state_updater";
 
 export interface State {}
 export interface Props {
+  login: LoginProps;
   update?: (updater: (prevState: ICoreState) => ICoreState) => void;
 }
 
@@ -22,11 +24,10 @@ export class TopBar extends React.Component<Props, State, {}> {
     return updater()
       .self()
       .then(() => {
-        // TODO: use props instead
         // TODO: remove hardcode role
         if (
-          updater().props.login.authed &&
+          this.props.login.authed &&
-          updater().props.panes.userRole === "admin"
+          this.props.login.userRole === "admin"
         ) {
           return Promise.all([updater().listRoles(), updater().listUsers()]);
         }