Merge pull request #154 from ligangty/auth

Add user info support for frontend

src/main/webui/src/app/components/nav/NavHeader.jsx

@@ -14,19 +14,42 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import Container from 'react-bootstrap/Container';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import NavDropdown from 'react-bootstrap/NavDropdown';
 import {LinkContainer} from 'react-router-bootstrap';
+import {IndyRest} from '#utils/RestClient';
+import {Utils} from '#utils/AppUtils';
+
+const {authRes} = IndyRest;
 
-// TODO: This is mock user login, need to implement later for real login
-const isUserloggedIn = true;
-const username = "mock";
 
 // eslint-disable-next-line max-lines-per-function
 export default function NavHeader(){
+  const [state, setState] = useState({
+    isUserloggedIn: false,
+    userInfo: {}
+  });
+
+  useEffect(()=>{
+    const fetchUserInfo = async () => {
+      const res = await authRes.getUserInfo();
+      if (res.success){
+        setState({
+          isUserloggedIn: true,
+          userInfo: res.result
+        });
+      }else{
+        res.text().then(data => {
+          Utils.logMessage(`Failed to get user info. Error reason: ${res.status}->${data}`);
+        });
+      }
+    };
+
+    fetchUserInfo();
+  }, []);
   return (
     <Navbar expand="lg" bg="body-tertiary" fixed="top">
       <Container fluid>
@@ -59,9 +82,9 @@ export default function NavHeader(){
               <NavDropdown.Item href="/api/diag/bundle">Diagnostics Bundle</NavDropdown.Item>
             </NavDropdown>
           </Nav>
-          { isUserloggedIn &&
+          { state.isUserloggedIn &&
             <Nav className="ms-auto">
-              <NavDropdown title={username} id="nav-dropdown-login">
+              <NavDropdown title={state.userInfo.userName} id="nav-dropdown-login">
                 <NavDropdown.Item href="/logout">Log Out</NavDropdown.Item>
               </NavDropdown>
             </Nav>

src/main/webui/src/app/components/nav/NavHeader.test.jsx

@@ -15,18 +15,28 @@
  */
 
 import React from "react";
-import {render, screen, cleanup} from '@testing-library/react';
+import {render, screen, cleanup, waitFor} from '@testing-library/react';
 import userEvent from "@testing-library/user-event";
 import {MemoryRouter} from 'react-router-dom';
 import '@testing-library/jest-dom';
+import fetchMock from "fetch-mock";
 import NavHeader from "./NavHeader.jsx";
 
+beforeEach(() => {
+  fetchMock.restore();
+});
+
 afterEach(() => {
   cleanup();
 });
 
 describe('Header tests', () => {
   it("Verify Header for elements existing", async ()=>{
+    const mockUserInfo = {
+      userName: "test-user",
+      roles: ["admin", "power-user"]
+    };
+    fetchMock.mock("/api/admin/auth/userinfo", {status: 200, body: JSON.stringify(mockUserInfo)});
     const user = userEvent.setup();
     render(<MemoryRouter><NavHeader /></MemoryRouter>);
     expect(screen.getByRole("link", {name: "Indy"})).toBeInTheDocument();
@@ -51,5 +61,10 @@ describe('Header tests', () => {
     await user.click(addonsButton);
     expect(screen.getByRole("link", {name: "Not-Found Cache"})).toBeInTheDocument();
     expect(screen.getByRole("link", {name: "Delete Cache"})).toBeInTheDocument();
+
+    await waitFor(()=>{
+      expect(screen.getByText(mockUserInfo.userName)).toBeInTheDocument();
+    });
+
   });
 });

src/main/webui/src/app/utils/RestClient.js

@@ -128,6 +128,12 @@ const IndyRest = {
       return {success: false, error: {status: response.status, message: response.statusText}};
     }
   },
+  authRes: {
+    getUserInfo: async () => {
+      const response = await jsonRest.get('/api/admin/auth/userinfo');
+      return handleResponse(response);
+    }
+  },
   nfcRes: {
       // TODO: not implemented.
   },

src/main/webui/src/server/app.js

@@ -149,3 +149,8 @@ app.put(`${STORE_API_BASE}/:packageType/:type/:name`, (req, res) => {
   }
 });
 
+app.get('/api/admin/auth/userinfo', (req, res) => {
+  const testUser = {userName: "indy", roles: ["admin", "power-user", "user"]};
+  res.status(200).json(testUser);
+});
+