Refactor(#209): Converted App component from class to func

src/App/App.test.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
-import { ReactWrapper } from 'enzyme';
 
-import { mount } from '../utils/test-enzyme';
+import { render, waitForElement, fireEvent } from '../utils/test-react-testing-library';
 import storage from '../utils/storage';
 // eslint-disable-next-line jest/no-mocks-import
 import { generateTokenWithTimeRange } from '../../jest/unit/components/__mocks__/token';
 
 import App from './App';
-import { AppProps } from './AppContext';
 
 jest.mock('../utils/storage', () => {
   class LocalStorageMock {
@@ -36,63 +34,71 @@ jest.mock('../utils/api', () => ({
   request: require('../../jest/unit/components/__mocks__/api').default.request,
 }));
 
-describe('App', () => {
+/* eslint-disable react/jsx-no-bind*/
-  let wrapper: ReactWrapper<{}, AppProps, App>;
+describe('<App />', () => {
+  test('should display the Loading component at the beginning ', () => {
+    const { container, queryByTestId } = render(<App />);
 
-  beforeEach(() => {
+    expect(container.firstChild).toMatchSnapshot();
-    wrapper = mount(<App />);
+    expect(queryByTestId('loading')).toBeTruthy();
   });
 
-  test('toggleLoginModal: should toggle the value in state', () => {
+  test('should display the Header component ', async () => {
-    const { handleToggleLoginModal } = wrapper.instance();
+    const { container, queryByTestId } = render(<App />);
-    expect(wrapper.state().showLoginModal).toBeFalsy();
+
-    handleToggleLoginModal();
+    expect(container.firstChild).toMatchSnapshot();
-    expect(wrapper.state('showLoginModal')).toBeTruthy();
+    expect(queryByTestId('loading')).toBeTruthy();
-    expect(wrapper.state('error')).toEqual(undefined);
+
+    // wait for the Header component appearance and return the element
+    const headerElement = await waitForElement(() => queryByTestId('header'));
+    expect(headerElement).toBeTruthy();
+  });
+
+  test('handleLogout - logouts the user and clear localstorage', async () => {
+    storage.setItem('username', 'verdaccio');
+    storage.setItem('token', generateTokenWithTimeRange(24));
+
+    const { queryByTestId } = render(<App />);
+
+    // wait for the Account's circle element component appearance and return the element
+    const accountCircleElement = await waitForElement(() => queryByTestId('header--menu-accountcircle'));
+    expect(accountCircleElement).toBeTruthy();
+
+    if (accountCircleElement) {
+      fireEvent.click(accountCircleElement);
+
+      // wait for the Button's logout element component appearance and return the element
+      const buttonLogoutElement = await waitForElement(() => queryByTestId('header--button-logout'));
+      expect(buttonLogoutElement).toBeTruthy();
+
+      if (buttonLogoutElement) {
+        fireEvent.click(buttonLogoutElement);
+
+        expect(queryByTestId('greetings-label')).toBeFalsy();
+      }
+    }
   });
 
   test('isUserAlreadyLoggedIn: token already available in storage', async () => {
     storage.setItem('username', 'verdaccio');
     storage.setItem('token', generateTokenWithTimeRange(24));
-    const { isUserAlreadyLoggedIn } = wrapper.instance();
 
-    isUserAlreadyLoggedIn();
+    const { queryByTestId, queryAllByText } = render(<App />);
 
-    expect(wrapper.state('user').username).toEqual('verdaccio');
+    // wait for the Account's circle element component appearance and return the element
-  });
+    const accountCircleElement = await waitForElement(() => queryByTestId('header--menu-accountcircle'));
+    expect(accountCircleElement).toBeTruthy();
 
-  test('handleLogout - logouts the user and clear localstorage', async () => {
+    if (accountCircleElement) {
-    const { handleLogout } = wrapper.instance();
+      fireEvent.click(accountCircleElement);
-    storage.setItem('username', 'verdaccio');
-    storage.setItem('token', 'xxxx.TOKEN.xxxx');
 
-    await handleLogout();
+      // wait for the Greeting's label element component appearance and return the element
-    expect(wrapper.state('user')).toEqual({});
+      const greetingsLabelElement = await waitForElement(() => queryByTestId('greetings-label'));
-    expect(wrapper.state('isUserLoggedIn')).toBeFalsy();
+      expect(greetingsLabelElement).toBeTruthy();
-  });
 
-  test('handleDoLogin - login the user successfully', async () => {
+      if (greetingsLabelElement) {
-    const { handleDoLogin } = wrapper.instance();
+        expect(queryAllByText('verdaccio')).toBeTruthy();
-    await handleDoLogin('sam', '1234');
+      }
-    const result = {
+    }
-      username: 'sam',
-    };
-    expect(wrapper.state('isUserLoggedIn')).toBeTruthy();
-    expect(wrapper.state('showLoginModal')).toBeFalsy();
-    expect(storage.getItem('username')).toEqual('sam');
-    expect(storage.getItem('token')).toEqual('TEST_TOKEN');
-    expect(wrapper.state('user')).toEqual(result);
-  });
-
-  test('handleDoLogin - authentication failure', async () => {
-    const { handleDoLogin } = wrapper.instance();
-    await handleDoLogin('sam', '12345');
-    const result = {
-      description: 'bad username/password, access denied',
-      title: 'Unable to login',
-      type: 'error',
-    };
-    expect(wrapper.state('user')).toEqual({});
-    expect(wrapper.state('error')).toEqual(result);
   });
 });

src/App/App.tsx

@@ -1,184 +1,106 @@
-import React, { Component, ReactElement } from 'react';
+import React, { useState, useEffect } from 'react';
+import styled from '@emotion/styled';
 import isNil from 'lodash/isNil';
+import { Router } from 'react-router-dom';
 
 import storage from '../utils/storage';
-import { makeLogin, isTokenExpire } from '../utils/login';
+import { isTokenExpire } from '../utils/login';
-import Loading from '../components/Loading';
-import LoginModal from '../components/Login';
-import Header from '../components/Header';
-import { Container, Content } from '../components/Layout';
 import API from '../utils/api';
+import Header from '../components/Header';
 import Footer from '../components/Footer';
+import Box from '../muiComponents/Box';
+import Loading from '../components/Loading';
+import StyleBaseline from '../design-tokens/StyleBaseline';
+import { breakpoints } from '../utils/styles/media';
 
-import AppRoute from './AppRoute';
+import AppContextProvider from './AppContextProvider';
-import { AppProps, AppContextProvider } from './AppContext';
+import AppRoute, { history } from './AppRoute';
 
-export default class App extends Component<{}, AppProps> {
+const StyledBoxContent = styled(Box)({
-  public state: AppProps = {
+  padding: 15,
-    logoUrl: window.VERDACCIO_LOGO,
+  [`@media screen and (min-width: ${breakpoints.container}px)`]: {
-    user: {},
+    maxWidth: breakpoints.container,
-    scope: window.VERDACCIO_SCOPE || '',
+    width: '100%',
-    showLoginModal: false,
+    marginLeft: 'auto',
-    isUserLoggedIn: false,
+    marginRight: 'auto',
-    packages: [],
+  },
-    isLoading: true,
+});
+
+/* eslint-disable react/jsx-max-depth */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable react-hooks/exhaustive-deps */
+const App: React.FC = () => {
+  const [user, setUser] = useState();
+  const [packages, setPackages] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  /**
+   * Logouts user
+   * Required by: <Header />
+   */
+  const logout = () => {
+    storage.removeItem('username');
+    storage.removeItem('token');
+    setUser(undefined);
   };
 
-  public componentDidMount(): void {
+  const checkUserAlreadyLoggedIn = () => {
-    this.isUserAlreadyLoggedIn();
-    this.loadOnHandler();
-  }
-
-  // eslint-disable-next-line no-unused-vars
-  public componentDidUpdate(_: AppProps, prevState: AppProps): void {
-    const { isUserLoggedIn } = this.state;
-    if (prevState.isUserLoggedIn !== isUserLoggedIn) {
-      this.loadOnHandler();
-    }
-  }
-
-  public render(): React.ReactElement<HTMLDivElement> {
-    const { isLoading, isUserLoggedIn, packages, logoUrl, user, scope } = this.state;
-
-    const context = { isUserLoggedIn, packages, logoUrl, user, scope };
-
-    return (
-      <Container isLoading={isLoading}>
-        {isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
-        {this.renderLoginModal()}
-      </Container>
-    );
-  }
-
-  public isUserAlreadyLoggedIn = () => {
     // checks for token validity
     const token = storage.getItem('token');
-    const username: string = storage.getItem('username') as string;
+    const username = storage.getItem('username');
+
     if (isTokenExpire(token) || isNil(username)) {
-      this.handleLogout();
+      logout();
-    } else {
+      return;
-      this.setState({
-        user: { username },
-        isUserLoggedIn: true,
-      });
     }
+
+    setUser({ username });
   };
 
-  public loadOnHandler = async () => {
+  const loadOnHandler = async () => {
     try {
-      const packages = await API.request<any[]>('packages', 'GET');
+      const packages = await API.request('packages', 'GET');
-      // @ts-ignore: FIX THIS TYPE:  Type 'any[]' is not assignable to type '[]'
+      // FIXME add correct type for package
-      this.setState({
+      setPackages(packages as never[]);
-        packages,
-        isLoading: false,
-      });
     } catch (error) {
       // FIXME: add dialog
       console.error({
         title: 'Warning',
         message: `Unable to load package list: ${error.message}`,
       });
-      this.setLoading(false);
-    }
-  };
-
-  public setLoading = (isLoading: boolean) =>
-    this.setState({
-      isLoading,
-    });
-
-  /**
-   * Toggles the login modal
-   * Required by: <LoginModal /> <Header />
-   */
-  public handleToggleLoginModal = () => {
-    this.setState(prevState => ({
-      showLoginModal: !prevState.showLoginModal,
-    }));
-  };
-
-  /**
-   * handles login
-   * Required by: <Header />
-   */
-  public handleDoLogin = async (usernameValue: string, passwordValue: string) => {
-    const { username, token, error } = await makeLogin(usernameValue, passwordValue);
-
-    if (username && token) {
-      storage.setItem('username', username);
-      storage.setItem('token', token);
-      this.setLoggedUser(username);
     }
 
-    if (error) {
+    setIsLoading(false);
-      this.setState({
-        user: {},
-        error,
-      });
-    }
   };
 
-  public setLoggedUser = (username: string) => {
+  useEffect(() => {
-    this.setState({
+    checkUserAlreadyLoggedIn();
-      user: {
+    loadOnHandler();
-        username,
+  }, []);
-      },
-      isUserLoggedIn: true, // close login modal after successful login
-      showLoginModal: false, // set isUserLoggedIn to true
-    });
-  };
 
-  /**
-   * Logouts user
-   * Required by: <Header />
-   */
-  public handleLogout = () => {
-    storage.removeItem('username');
-    storage.removeItem('token');
-    this.setState({
-      user: {},
-      isUserLoggedIn: false,
-    });
-  };
-
-  public renderLoginModal = (): ReactElement<HTMLElement> => {
-    const { error, showLoginModal } = this.state;
-    return (
-      <LoginModal
-        error={error}
-        onCancel={this.handleToggleLoginModal}
-        onSubmit={this.handleDoLogin}
-        visibility={showLoginModal}
-      />
-    );
-  };
-
-  public renderContent = (): ReactElement<HTMLElement> => {
   return (
     <>
-        <Content>
+      <StyleBaseline />
-          <AppRoute>{this.renderHeader()}</AppRoute>
+      <Box display="flex" flexDirection="column" height="100%">
-        </Content>
+        {isLoading ? (
+          <Loading />
+        ) : (
+          <>
+            <Router history={history}>
+              <AppContextProvider packages={packages} user={user}>
+                <Header />
+                <StyledBoxContent flexGrow={1}>
+                  <AppRoute />
+                </StyledBoxContent>
+              </AppContextProvider>
+            </Router>
             <Footer />
           </>
+        )}
+      </Box>
+    </>
   );
 };
 
-  public renderHeader = (): ReactElement<HTMLElement> => {
+export default App;
-    const {
-      logoUrl,
-      user: { username },
-      scope,
-    } = this.state;
-
-    return (
-      <Header
-        logo={logoUrl}
-        onLogout={this.handleLogout}
-        onToggleLoginModal={this.handleToggleLoginModal}
-        scope={scope}
-        username={username}
-      />
-    );
-  };
-}

src/App/AppContext.ts

@@ -0,0 +1,23 @@
+import { createContext } from 'react';
+
+import { FormError } from '../components/Login/Login';
+
+export interface AppProps {
+  error?: FormError;
+  user?: User;
+  scope: string;
+  packages: any[];
+}
+
+export interface User {
+  username: string;
+}
+
+export interface AppContextProps extends AppProps {
+  setUser: (user?: User) => void;
+  setError: (error?: FormError) => void;
+}
+
+const AppContext = createContext<undefined | AppContextProps>(undefined);
+
+export default AppContext;

src/App/AppContext.tsx

@@ -1,20 +0,0 @@
-import { createContext } from 'react';
-
-import { FormError } from '../components/Login/Login';
-
-export interface AppProps {
-  error?: FormError;
-  logoUrl: string;
-  user: {
-    username?: string;
-  };
-  scope: string;
-  showLoginModal: boolean;
-  isUserLoggedIn: boolean;
-  packages: [];
-  isLoading: boolean;
-}
-
-export const AppContext = createContext<Partial<AppProps>>({});
-export const AppContextProvider = AppContext.Provider;
-export const AppContextConsumer = AppContext.Consumer;

src/App/AppContextProvider.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react';
+
+import { FormError } from '../components/Login/Login';
+
+import AppContext, { AppProps, User } from './AppContext';
+
+interface Props {
+  packages: any[];
+  user?: User;
+}
+
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable react-hooks/exhaustive-deps */
+const AppContextProvider: React.FC<Props> = ({ children, packages, user }) => {
+  const [state, setState] = useState<AppProps>({
+    scope: window.VERDACCIO_SCOPE || '',
+    packages,
+    user,
+  });
+
+  useEffect(() => {
+    setState({
+      ...state,
+      user,
+    });
+  }, [user]);
+
+  useEffect(() => {
+    setState({
+      ...state,
+      packages,
+    });
+  }, [packages]);
+
+  const setUser = (user?: User) => {
+    setState({
+      ...state,
+      user,
+    });
+  };
+
+  const setError = (error?: FormError) => {
+    setState({
+      ...state,
+      error,
+    });
+  };
+
+  return (
+    <AppContext.Provider
+      value={{
+        ...state,
+        setUser,
+        setError,
+      }}>
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+export default AppContextProvider;

src/App/AppRoute.tsx

@@ -4,7 +4,7 @@ import { createBrowserHistory } from 'history';
 
 import Loading from '../components/Loading';
 
-import { AppContext } from './AppContext';
+import AppContext from './AppContext';
 
 const NotFound = lazy(() => import('../components/NotFound'));
 const VersionContextProvider = lazy(() => import('../pages/Version/VersionContextProvider'));
@@ -19,19 +19,25 @@ enum Route {
   PACKAGE_VERSION = '/-/web/detail/:package/v/:version',
 }
 
-const history = createBrowserHistory({
+export const history = createBrowserHistory({
   basename: window.__VERDACCIO_BASENAME_UI_OPTIONS && window.__VERDACCIO_BASENAME_UI_OPTIONS.url_prefix,
 });
 
 /* eslint react/jsx-max-depth: 0 */
-const AppRoute: React.FC = ({ children }) => {
+const AppRoute: React.FC = () => {
   const appContext = useContext(AppContext);
-  const { isUserLoggedIn, packages } = appContext;
+
+  if (!appContext) {
+    throw Error('The app Context was not correct used');
+  }
+
+  const { user, packages } = appContext;
+
+  const isUserLoggedIn = user && user.username;
 
   return (
     <Router history={history}>
       <Suspense fallback={<Loading />}>
-        {children}
         <Switch>
           <ReactRouterDomRoute exact={true} path={Route.ROOT}>
             <HomePage isUserLoggedIn={!!isUserLoggedIn} packages={packages || []} />

src/App/__snapshots__/App.test.tsx.snap

@@ -0,0 +1,179 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<App /> should display the Header component  1`] = `
+.emotion-8 {
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+  top: 50%;
+  left: 50%;
+  position: absolute;
+}
+
+.emotion-2 {
+  margin: 0 0 30px 0;
+  border-radius: 25px;
+  box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
+  background: #f7f8f6;
+}
+
+.emotion-0 {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  background-position: center;
+  background-size: contain;
+  background-image: url([object Object]);
+  background-repeat: no-repeat;
+  width: 90px;
+  height: 90px;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.emotion-4 {
+  color: #4b5e40;
+}
+
+<div
+  class="MuiBox-root MuiBox-root-215"
+>
+  <div
+    class="emotion-8 emotion-9"
+    data-testid="loading"
+  >
+    <div
+      class="emotion-2 emotion-3"
+    >
+      <div
+        class="emotion-0 emotion-1"
+      />
+    </div>
+    <div
+      class="emotion-6 emotion-7"
+    >
+      <div
+        class="MuiCircularProgress-root emotion-4 emotion-5 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+        role="progressbar"
+        style="width: 50px; height: 50px;"
+      >
+        <svg
+          class="MuiCircularProgress-svg"
+          viewBox="22 22 44 44"
+        >
+          <circle
+            class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+            cx="44"
+            cy="44"
+            fill="none"
+            r="20.2"
+            stroke-width="3.6"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<App /> should display the Loading component at the beginning  1`] = `
+.emotion-8 {
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+  top: 50%;
+  left: 50%;
+  position: absolute;
+}
+
+.emotion-2 {
+  margin: 0 0 30px 0;
+  border-radius: 25px;
+  box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
+  background: #f7f8f6;
+}
+
+.emotion-0 {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  background-position: center;
+  background-size: contain;
+  background-image: url([object Object]);
+  background-repeat: no-repeat;
+  width: 90px;
+  height: 90px;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.emotion-4 {
+  color: #4b5e40;
+}
+
+<div
+  class="MuiBox-root MuiBox-root-2"
+>
+  <div
+    class="emotion-8 emotion-9"
+    data-testid="loading"
+  >
+    <div
+      class="emotion-2 emotion-3"
+    >
+      <div
+        class="emotion-0 emotion-1"
+      />
+    </div>
+    <div
+      class="emotion-6 emotion-7"
+    >
+      <div
+        class="MuiCircularProgress-root emotion-4 emotion-5 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+        role="progressbar"
+        style="width: 50px; height: 50px;"
+      >
+        <svg
+          class="MuiCircularProgress-svg"
+          viewBox="22 22 44 44"
+        >
+          <circle
+            class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+            cx="44"
+            cy="44"
+            fill="none"
+            r="20.2"
+            stroke-width="3.6"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/App/index.ts

@@ -1 +1,2 @@
 export { default } from './App';
+export { default as AppContextProvider } from './AppContextProvider';

src/components/Header/Header.test.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 
-import { render, fireEvent, waitForElementToBeRemoved, waitForElement } from '../../utils/test-react-testing-library';
+import { render, fireEvent, waitForElement, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
+import { AppContextProvider } from '../../App';
 
 import Header from './Header';
 
-const headerProps = {
+const props = {
+  user: {
     username: 'verddacio-user',
-  scope: 'test scope',
+  },
-  withoutSearch: true,
+  packages: [],
-  handleToggleLoginModal: jest.fn(),
-  handleLogout: jest.fn(),
 };
 
 /* eslint-disable react/jsx-no-bind*/
@@ -18,82 +18,71 @@ describe('<Header /> component with logged in state', () => {
   test('should load the component in logged out state', () => {
     const { container, queryByTestId, getByText } = render(
       <Router>
-        <Header
+        <AppContextProvider packages={props.packages}>
-          onLogout={headerProps.handleLogout}
+          <Header />
-          onToggleLoginModal={headerProps.handleToggleLoginModal}
+        </AppContextProvider>
-          scope={headerProps.scope}
-        />
       </Router>
     );
 
     expect(container.firstChild).toMatchSnapshot();
-    expect(queryByTestId('header--menu-acountcircle')).toBeNull();
+    expect(queryByTestId('header--menu-accountcircle')).toBeNull();
     expect(getByText('Login')).toBeTruthy();
   });
 
   test('should load the component in logged in state', () => {
     const { container, getByTestId, queryByText } = render(
       <Router>
-        <Header
+        <AppContextProvider packages={props.packages} user={props.user}>
-          onLogout={headerProps.handleLogout}
+          <Header />
-          onToggleLoginModal={headerProps.handleToggleLoginModal}
+        </AppContextProvider>
-          scope={headerProps.scope}
-          username={headerProps.username}
-        />
       </Router>
     );
 
     expect(container.firstChild).toMatchSnapshot();
-    expect(getByTestId('header--menu-acountcircle')).toBeTruthy();
+    expect(getByTestId('header--menu-accountcircle')).toBeTruthy();
     expect(queryByText('Login')).toBeNull();
   });
 
   test('should open login dialog', async () => {
-    const { getByText } = render(
+    const { getByText, getByTestId } = render(
       <Router>
-        <Header
+        <AppContextProvider packages={props.packages}>
-          onLogout={headerProps.handleLogout}
+          <Header />
-          onToggleLoginModal={headerProps.handleToggleLoginModal}
+        </AppContextProvider>
-          scope={headerProps.scope}
-        />
       </Router>
     );
 
     const loginBtn = getByText('Login');
     fireEvent.click(loginBtn);
-    expect(headerProps.handleToggleLoginModal).toHaveBeenCalled();
+    // wait for login modal appearance and return the element
+    const registrationInfoModal = await waitForElement(() => getByTestId('login--form-container'));
+    expect(registrationInfoModal).toBeTruthy();
   });
 
   test('should logout the user', async () => {
     const { getByText, getByTestId } = render(
       <Router>
-        <Header
+        <AppContextProvider packages={props.packages} user={props.user}>
-          onLogout={headerProps.handleLogout}
+          <Header />
-          onToggleLoginModal={headerProps.handleToggleLoginModal}
+        </AppContextProvider>
-          scope={headerProps.scope}
-          username={headerProps.username}
-        />
       </Router>
     );
 
-    const headerMenuAccountCircle = getByTestId('header--menu-acountcircle');
+    const headerMenuAccountCircle = getByTestId('header--menu-accountcircle');
     fireEvent.click(headerMenuAccountCircle);
 
     // wait for button Logout's appearance and return the element
     const logoutBtn = await waitForElement(() => getByText('Logout'));
     fireEvent.click(logoutBtn);
-    expect(headerProps.handleLogout).toHaveBeenCalled();
+    expect(getByText('Login')).toBeTruthy();
   });
 
-  test("The question icon should open a new tab of verdaccio's website - installation doc", async () => {
+  test("The question icon should open a new tab of verdaccio's website - installation doc", () => {
     const { getByTestId } = render(
       <Router>
-        <Header
+        <AppContextProvider packages={props.packages} user={props.user}>
-          onLogout={headerProps.handleLogout}
+          <Header />
-          onToggleLoginModal={headerProps.handleToggleLoginModal}
+        </AppContextProvider>
-          scope={headerProps.scope}
-          username={headerProps.username}
-        />
       </Router>
     );
 
@@ -104,12 +93,9 @@ describe('<Header /> component with logged in state', () => {
   test('should open the registrationInfo modal when clicking on the info icon', async () => {
     const { getByTestId } = render(
       <Router>
-        <Header
+        <AppContextProvider packages={props.packages} user={props.user}>
-          onLogout={headerProps.handleLogout}
+          <Header />
-          onToggleLoginModal={headerProps.handleToggleLoginModal}
+        </AppContextProvider>
-          scope={headerProps.scope}
-          username={headerProps.username}
-        />
       </Router>
     );
 
@@ -124,12 +110,9 @@ describe('<Header /> component with logged in state', () => {
   test('should close the registrationInfo modal when clicking on the button close', async () => {
     const { getByTestId, getByText, queryByTestId } = render(
       <Router>
-        <Header
+        <AppContextProvider packages={props.packages} user={props.user}>
-          onLogout={headerProps.handleLogout}
+          <Header />
-          onToggleLoginModal={headerProps.handleToggleLoginModal}
+        </AppContextProvider>
-          scope={headerProps.scope}
-          username={headerProps.username}
-        />
       </Router>
     );
 
@@ -144,6 +127,6 @@ describe('<Header /> component with logged in state', () => {
       queryByTestId('registryInfo--dialog')
     );
     expect(hasRegistrationInfoModalBeenRemoved).toBeTruthy();
-  });
     test.todo('autocompletion should display suggestions according to the type value');
   });
+});

src/components/Header/Header.tsx

@@ -1,8 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 
-import Search from '../Search';
+import storage from '../../utils/storage';
 import { getRegistryURL } from '../../utils/url';
+import { makeLogin } from '../../utils/login';
 import Button from '../../muiComponents/Button';
+import AppContext from '../../App/AppContext';
+import LoginModal from '../Login';
+import Search from '../Search';
 
 import { NavBar, InnerNavBar, MobileNavBar, InnerMobileNavBar } from './styles';
 import HeaderLeft from './HeaderLeft';
@@ -10,31 +14,66 @@ import HeaderRight from './HeaderRight';
 import HeaderInfoDialog from './HeaderInfoDialog';
 
 interface Props {
-  logo?: string;
-  username?: string;
-  onLogout: () => void;
-  onToggleLoginModal: () => void;
-  scope: string;
   withoutSearch?: boolean;
 }
 
 /* eslint-disable react/jsx-max-depth */
 /* eslint-disable react/jsx-no-bind*/
-const Header: React.FC<Props> = ({ logo, withoutSearch, username, onLogout, onToggleLoginModal, scope }) => {
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+const Header: React.FC<Props> = ({ withoutSearch }) => {
+  const appContext = useContext(AppContext);
   const [isInfoDialogOpen, setOpenInfoDialog] = useState();
   const [showMobileNavBar, setShowMobileNavBar] = useState();
+  const [showLoginModal, setShowLoginModal] = useState(false);
+
+  if (!appContext) {
+    throw Error('The app Context was not correct used');
+  }
+
+  const { user, scope, error, setUser, setError } = appContext;
+  const logo = window.VERDACCIO_LOGO;
+
+  /**
+   * handles login
+   * Required by: <Header />
+   */
+  const handleDoLogin = async (usernameValue: string, passwordValue: string) => {
+    const { username, token, error } = await makeLogin(usernameValue, passwordValue);
+
+    if (username && token) {
+      storage.setItem('username', username);
+      storage.setItem('token', token);
+      setUser({ username });
+      setShowLoginModal(false);
+    }
+
+    if (error) {
+      setUser(undefined);
+      setError(error);
+    }
+  };
+
+  /**
+   * Logouts user
+   * Required by: <Header />
+   */
+  const handleLogout = () => {
+    storage.removeItem('username');
+    storage.removeItem('token');
+    setUser(undefined);
+  };
 
   return (
     <>
-      <NavBar position="static">
+      <NavBar data-testid="header" position="static">
         <InnerNavBar>
           <HeaderLeft logo={logo} />
           <HeaderRight
-            onLogout={onLogout}
+            onLogout={handleLogout}
             onOpenRegistryInfoDialog={() => setOpenInfoDialog(true)}
-            onToggleLogin={onToggleLoginModal}
+            onToggleLogin={() => setShowLoginModal(!showLoginModal)}
             onToggleMobileNav={() => setShowMobileNavBar(!showMobileNavBar)}
-            username={username}
+            username={user && user.username}
             withoutSearch={withoutSearch}
           />
         </InnerNavBar>
@@ -55,6 +94,12 @@ const Header: React.FC<Props> = ({ logo, withoutSearch, username, onLogout, onTo
           </Button>
         </MobileNavBar>
       )}
+      <LoginModal
+        error={error}
+        onCancel={() => setShowLoginModal(false)}
+        onSubmit={handleDoLogin}
+        visibility={showLoginModal}
+      />
     </>
   );
 };

src/components/Header/HeaderGreetings.tsx

@@ -11,7 +11,7 @@ interface Props {
 const HeaderGreetings: React.FC<Props> = ({ username }) => (
   <>
     <Greetings>{'Hi,'}</Greetings>
-    <Label capitalize={true} text={username} weight="bold" />
+    <Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
   </>
 );
 

src/components/Header/HeaderMenu.tsx

@@ -28,7 +28,7 @@ const HeaderMenu: React.FC<Props> = ({
   <>
     <IconButton
       color="inherit"
-      data-testid="header--menu-acountcircle"
+      data-testid="header--menu-accountcircle"
       id="header--button-account"
       onClick={onLoggedInMenu}>
       <AccountCircle />
@@ -48,7 +48,7 @@ const HeaderMenu: React.FC<Props> = ({
       <MenuItem disabled={true}>
         <HeaderGreetings username={username} />
       </MenuItem>
-      <MenuItem button={true} id="header--button-logout" onClick={onLogout}>
+      <MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
         {'Logout'}
       </MenuItem>
     </Menu>

src/components/Header/HeaderRight.tsx

@@ -53,7 +53,7 @@ const HeaderRight: React.FC<Props> = ({
   };
 
   return (
-    <RightSide>
+    <RightSide data-testid="header-right">
       {!withoutSearch && (
         <HeaderToolTip onClick={onToggleMobileNav} title={'Search packages'} tooltipIconType={'search'} />
       )}

src/components/Header/__snapshots__/Header.test.tsx.snap

@@ -141,6 +141,7 @@ exports[`<Header /> component with logged in state should load the component in
 
 <header
   class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
+  data-testid="header"
 >
   <div
     class="MuiToolbar-root MuiToolbar-regular emotion-22 emotion-23 MuiToolbar-gutters"
@@ -213,6 +214,7 @@ exports[`<Header /> component with logged in state should load the component in
     </div>
     <div
       class="MuiToolbar-root MuiToolbar-regular emotion-20 emotion-21 MuiToolbar-gutters"
+      data-testid="header-right"
     >
       <button
         class="MuiButtonBase-root MuiIconButton-root emotion-16 emotion-17 MuiIconButton-colorInherit"
@@ -302,7 +304,7 @@ exports[`<Header /> component with logged in state should load the component in
       </button>
       <button
         class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
-        data-testid="header--menu-acountcircle"
+        data-testid="header--menu-accountcircle"
         id="header--button-account"
         tabindex="0"
         type="button"
@@ -472,6 +474,7 @@ exports[`<Header /> component with logged in state should load the component in
 
 <header
   class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
+  data-testid="header"
 >
   <div
     class="MuiToolbar-root MuiToolbar-regular emotion-22 emotion-23 MuiToolbar-gutters"
@@ -544,6 +547,7 @@ exports[`<Header /> component with logged in state should load the component in
     </div>
     <div
       class="MuiToolbar-root MuiToolbar-regular emotion-20 emotion-21 MuiToolbar-gutters"
+      data-testid="header-right"
     >
       <button
         class="MuiButtonBase-root MuiIconButton-root emotion-16 emotion-17 MuiIconButton-colorInherit"

src/components/Login/Login.tsx

@@ -66,7 +66,13 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
   public render(): JSX.Element {
     const { visibility = true, onCancel = () => null, error } = this.props as LoginModalProps;
     return (
-      <Dialog fullWidth={true} id={'login--form-container'} maxWidth={'xs'} onClose={onCancel} open={visibility}>
+      <Dialog
+        data-testid={'login--form-container'}
+        fullWidth={true}
+        id={'login--form-container'}
+        maxWidth={'xs'}
+        onClose={onCancel}
+        open={visibility}>
         <form noValidate={true} onSubmit={this.handleValidateCredentials}>
           <DialogTitle>{'Login'}</DialogTitle>
           <DialogContent>

src/components/Login/__snapshots__/Login.test.tsx.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<LoginModal /> should load the component in default state 1`] = `"<div role=\\"presentation\\" class=\\"MuiDialog-root\\" id=\\"login--form-container\\" style=\\"position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;\\"><div class=\\"MuiBackdrop-root\\" aria-hidden=\\"true\\" style=\\"opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\"></div><div tabindex=\\"0\\" data-test=\\"sentinelStart\\"></div><div class=\\"MuiDialog-container MuiDialog-scrollPaper\\" style=\\"opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\" role=\\"none presentation\\" tabindex=\\"-1\\"><div class=\\"MuiPaper-root MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthXs MuiDialog-paperFullWidth MuiPaper-rounded\\" role=\\"dialog\\"><form novalidate=\\"\\"><div class=\\"MuiDialogTitle-root\\"><h2 class=\\"MuiTypography-root MuiTypography-h6\\">Login</h2></div><div class=\\"MuiDialogContent-root\\"><div class=\\"MuiFormControl-root MuiFormControl-fullWidth\\"><label class=\\"MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-required Mui-required\\" data-shrink=\\"false\\" for=\\"username\\">Username<span class=\\"MuiFormLabel-asterisk MuiInputLabel-asterisk\\"> *</span></label><div class=\\"MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl\\"><input aria-invalid=\\"false\\" id=\\"login--form-username\\" placeholder=\\"Your username\\" required=\\"\\" type=\\"text\\" class=\\"MuiInputBase-input MuiInput-input\\" value=\\"\\"></div></div><div class=\\"MuiFormControl-root MuiFormControl-fullWidth\\"><label class=\\"MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-required Mui-required\\" data-shrink=\\"false\\" for=\\"password\\">Password<span class=\\"MuiFormLabel-asterisk MuiInputLabel-asterisk\\"> *</span></label><div class=\\"MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl\\"><input aria-invalid=\\"false\\" id=\\"login--form-password\\" placeholder=\\"Your strong password\\" required=\\"\\" type=\\"password\\" class=\\"MuiInputBase-input MuiInput-input\\" value=\\"\\"></div></div></div><div class=\\"MuiDialogActions-root dialog-footer MuiDialogActions-spacing\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"login--form-cancel\\"><span class=\\"MuiButton-label\\">Cancel</span><span class=\\"MuiTouchRipple-root\\"></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"submit\\" disabled=\\"\\" id=\\"login--form-submit\\"><span class=\\"MuiButton-label\\">Login</span></button></div></form></div></div><div tabindex=\\"0\\" data-test=\\"sentinelEnd\\"></div></div>"`;
+exports[`<LoginModal /> should load the component in default state 1`] = `"<div role=\\"presentation\\" class=\\"MuiDialog-root\\" data-testid=\\"login--form-container\\" id=\\"login--form-container\\" style=\\"position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;\\"><div class=\\"MuiBackdrop-root\\" aria-hidden=\\"true\\" style=\\"opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\"></div><div tabindex=\\"0\\" data-test=\\"sentinelStart\\"></div><div class=\\"MuiDialog-container MuiDialog-scrollPaper\\" style=\\"opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\" role=\\"none presentation\\" tabindex=\\"-1\\"><div class=\\"MuiPaper-root MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthXs MuiDialog-paperFullWidth MuiPaper-rounded\\" role=\\"dialog\\"><form novalidate=\\"\\"><div class=\\"MuiDialogTitle-root\\"><h2 class=\\"MuiTypography-root MuiTypography-h6\\">Login</h2></div><div class=\\"MuiDialogContent-root\\"><div class=\\"MuiFormControl-root MuiFormControl-fullWidth\\"><label class=\\"MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-required Mui-required\\" data-shrink=\\"false\\" for=\\"username\\">Username<span class=\\"MuiFormLabel-asterisk MuiInputLabel-asterisk\\"> *</span></label><div class=\\"MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl\\"><input aria-invalid=\\"false\\" id=\\"login--form-username\\" placeholder=\\"Your username\\" required=\\"\\" type=\\"text\\" class=\\"MuiInputBase-input MuiInput-input\\" value=\\"\\"></div></div><div class=\\"MuiFormControl-root MuiFormControl-fullWidth\\"><label class=\\"MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-required Mui-required\\" data-shrink=\\"false\\" for=\\"password\\">Password<span class=\\"MuiFormLabel-asterisk MuiInputLabel-asterisk\\"> *</span></label><div class=\\"MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl\\"><input aria-invalid=\\"false\\" id=\\"login--form-password\\" placeholder=\\"Your strong password\\" required=\\"\\" type=\\"password\\" class=\\"MuiInputBase-input MuiInput-input\\" value=\\"\\"></div></div></div><div class=\\"MuiDialogActions-root dialog-footer MuiDialogActions-spacing\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"login--form-cancel\\"><span class=\\"MuiButton-label\\">Cancel</span><span class=\\"MuiTouchRipple-root\\"></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"submit\\" disabled=\\"\\" id=\\"login--form-submit\\"><span class=\\"MuiButton-label\\">Login</span></button></div></form></div></div><div tabindex=\\"0\\" data-test=\\"sentinelEnd\\"></div></div>"`;
 
-exports[`<LoginModal /> should load the component with props 1`] = `"<div role=\\"presentation\\" class=\\"MuiDialog-root\\" id=\\"login--form-container\\" style=\\"position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;\\"><div class=\\"MuiBackdrop-root\\" aria-hidden=\\"true\\" style=\\"opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\"></div><div tabindex=\\"0\\" data-test=\\"sentinelStart\\"></div><div class=\\"MuiDialog-container MuiDialog-scrollPaper\\" style=\\"opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\" role=\\"none presentation\\" tabindex=\\"-1\\"><div class=\\"MuiPaper-root MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthXs MuiDialog-paperFullWidth MuiPaper-rounded\\" role=\\"dialog\\"><form novalidate=\\"\\"><div class=\\"MuiDialogTitle-root\\"><h2 class=\\"MuiTypography-root MuiTypography-h6\\">Login</h2></div><div class=\\"MuiDialogContent-root\\"><div class=\\"MuiTypography-root MuiPaper-root MuiPaper-elevation6 MuiSnackbarContent-root css-xlgaf-loginError MuiTypography-body2\\" role=\\"alert\\"><div class=\\"MuiSnackbarContent-message\\"><div class=\\"css-vvv32-loginErrorMsg\\" id=\\"client-snackbar\\"><svg class=\\"MuiSvgIcon-root css-tkvt8h-loginIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\\"></path></svg><span><div><strong>Error Title</strong></div><div>Error Description</div></span></div></div></div><div class=\\"MuiFormControl-root MuiFormControl-fullWidth\\"><label class=\\"MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-required Mui-required\\" data-shrink=\\"false\\" for=\\"username\\">Username<span class=\\"MuiFormLabel-asterisk MuiInputLabel-asterisk\\"> *</span></label><div class=\\"MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl\\"><input aria-invalid=\\"false\\" id=\\"login--form-username\\" placeholder=\\"Your username\\" required=\\"\\" type=\\"text\\" class=\\"MuiInputBase-input MuiInput-input\\" value=\\"\\"></div></div><div class=\\"MuiFormControl-root MuiFormControl-fullWidth\\"><label class=\\"MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-required Mui-required\\" data-shrink=\\"false\\" for=\\"password\\">Password<span class=\\"MuiFormLabel-asterisk MuiInputLabel-asterisk\\"> *</span></label><div class=\\"MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl\\"><input aria-invalid=\\"false\\" id=\\"login--form-password\\" placeholder=\\"Your strong password\\" required=\\"\\" type=\\"password\\" class=\\"MuiInputBase-input MuiInput-input\\" value=\\"\\"></div></div></div><div class=\\"MuiDialogActions-root dialog-footer MuiDialogActions-spacing\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"login--form-cancel\\"><span class=\\"MuiButton-label\\">Cancel</span><span class=\\"MuiTouchRipple-root\\"></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"submit\\" disabled=\\"\\" id=\\"login--form-submit\\"><span class=\\"MuiButton-label\\">Login</span></button></div></form></div></div><div tabindex=\\"0\\" data-test=\\"sentinelEnd\\"></div></div>"`;
+exports[`<LoginModal /> should load the component with props 1`] = `"<div role=\\"presentation\\" class=\\"MuiDialog-root\\" data-testid=\\"login--form-container\\" id=\\"login--form-container\\" style=\\"position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;\\"><div class=\\"MuiBackdrop-root\\" aria-hidden=\\"true\\" style=\\"opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\"></div><div tabindex=\\"0\\" data-test=\\"sentinelStart\\"></div><div class=\\"MuiDialog-container MuiDialog-scrollPaper\\" style=\\"opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\" role=\\"none presentation\\" tabindex=\\"-1\\"><div class=\\"MuiPaper-root MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthXs MuiDialog-paperFullWidth MuiPaper-rounded\\" role=\\"dialog\\"><form novalidate=\\"\\"><div class=\\"MuiDialogTitle-root\\"><h2 class=\\"MuiTypography-root MuiTypography-h6\\">Login</h2></div><div class=\\"MuiDialogContent-root\\"><div class=\\"MuiTypography-root MuiPaper-root MuiPaper-elevation6 MuiSnackbarContent-root css-xlgaf-loginError MuiTypography-body2\\" role=\\"alert\\"><div class=\\"MuiSnackbarContent-message\\"><div class=\\"css-vvv32-loginErrorMsg\\" id=\\"client-snackbar\\"><svg class=\\"MuiSvgIcon-root css-tkvt8h-loginIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\\"></path></svg><span><div><strong>Error Title</strong></div><div>Error Description</div></span></div></div></div><div class=\\"MuiFormControl-root MuiFormControl-fullWidth\\"><label class=\\"MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-required Mui-required\\" data-shrink=\\"false\\" for=\\"username\\">Username<span class=\\"MuiFormLabel-asterisk MuiInputLabel-asterisk\\"> *</span></label><div class=\\"MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl\\"><input aria-invalid=\\"false\\" id=\\"login--form-username\\" placeholder=\\"Your username\\" required=\\"\\" type=\\"text\\" class=\\"MuiInputBase-input MuiInput-input\\" value=\\"\\"></div></div><div class=\\"MuiFormControl-root MuiFormControl-fullWidth\\"><label class=\\"MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-required Mui-required\\" data-shrink=\\"false\\" for=\\"password\\">Password<span class=\\"MuiFormLabel-asterisk MuiInputLabel-asterisk\\"> *</span></label><div class=\\"MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl\\"><input aria-invalid=\\"false\\" id=\\"login--form-password\\" placeholder=\\"Your strong password\\" required=\\"\\" type=\\"password\\" class=\\"MuiInputBase-input MuiInput-input\\" value=\\"\\"></div></div></div><div class=\\"MuiDialogActions-root dialog-footer MuiDialogActions-spacing\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"login--form-cancel\\"><span class=\\"MuiButton-label\\">Cancel</span><span class=\\"MuiTouchRipple-root\\"></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"submit\\" disabled=\\"\\" id=\\"login--form-submit\\"><span class=\\"MuiButton-label\\">Login</span></button></div></form></div></div><div tabindex=\\"0\\" data-test=\\"sentinelEnd\\"></div></div>"`;