fix(topbar): display user name

public/static/css/style.css

@@ -666,3 +666,7 @@ div.hr {
   border: solid 1px #95a5a6;
   border-radius: 0.5rem;
 }
+
+.user {
+  font-weight: bold;
+}

src/client/web/src/client/users_mock.ts

@@ -73,7 +73,7 @@ export const resps = {
     status: 200,
     statusText: "",
     data: {
-      id: 0,
+      id: "0",
       name: "mockUser",
       role: "admin",
       usedSpace: "256",

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

@@ -32,6 +32,8 @@ describe("Login", () => {
 
     // login
     expect(updater().props.login).toEqual({
+      userID: "0",
+      userName: "mockUser",
       userRole: "admin",
       authed: true,
       captchaID: "",

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

@@ -49,6 +49,8 @@ describe("State Manager", () => {
 
     // login
     expect(coreState.login).toEqual({
+      userID: "0",
+      userName: "mockUser",
       userRole: "admin",
       authed: true,
       captchaID: "mockCaptchaID",

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

@@ -81,6 +81,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
       })
       .then(() => {
         this.update(updater().updateBrowser);
+        this.update(updater().updateLogin);
       });
   };
 

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

@@ -101,6 +101,7 @@ export class StateMgr extends React.Component<Props, State, {}> {
         }
       })
       .then(() => {
+        this.update(updater().updateLogin);
         this.update(updater().updatePanes);
         this.update(updater().updateAdmin);
       });

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

@@ -205,6 +205,8 @@ export class Updater {
   self = async (): Promise<boolean> => {
     const resp = await this.usersClient.self();
     if (resp.status === 200) {
+      this.props.login.userID = resp.data.id;
+      this.props.login.userName = resp.data.name;
       this.props.login.userRole = resp.data.role;
       return true;
     }

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

@@ -26,10 +26,7 @@ export class TopBar extends React.Component<Props, State, {}> {
       .self()
       .then(() => {
         // TODO: remove hardcode role
-        if (
-          this.props.login.authed &&
-          this.props.login.userRole === "admin"
-        ) {
+        if (this.props.login.authed && this.props.login.userRole === "admin") {
           return Promise.all([updater().listRoles(), updater().listUsers()]);
         }
       })
@@ -41,6 +38,15 @@ export class TopBar extends React.Component<Props, State, {}> {
   };
 
   render() {
+    const adminBtn =
+      this.props.login.userRole === "admin" ? (
+        <button
+          onClick={this.showAdmin}
+          className="grey1-bg white-font margin-r-m"
+        >
+          {this.props.msg.pkg.get("admin")}
+        </button>
+      ) : null;
     return (
       <div
         id="top-bar"
@@ -54,18 +60,14 @@ export class TopBar extends React.Component<Props, State, {}> {
             Quickshare
           </a>
           <span className="flex-23col text-right">
+            <span className="user margin-r-m">{this.props.login.userName}</span>
             <button
               onClick={this.showSettings}
               className="grey1-bg white-font margin-r-m"
             >
               {this.props.msg.pkg.get("settings")}
             </button>
-            <button
-              onClick={this.showAdmin}
-              className="grey1-bg white-font margin-r-m"
-            >
-              {this.props.msg.pkg.get("admin")}
-            </button>
+            {adminBtn}
           </span>
         </div>
       </div>