feat: login Dialog Component - Replaced class by func. comp + added react-hook-form (#341)

* refactor: convert class to func

* refactor: changed login form logic

* refactor: conver to testing-library tests

* refactor: moved dependency

* refactor: replaced uglifyjs-webpack-plugin by terser-webpack-plugin

* fix: fixed e2e errors

* fix: fixed e2e test

* Delete settings.json

* fix: vscode settings rollback

* refactor: rollback webpack config

* refactor: updated eslint rule

* fix: removed --fix

* refactor: incresed the bundle size

src/components/Header/Header.test.tsx

@@ -44,7 +44,7 @@ describe('<Header /> component with logged in state', () => {
   });
 
   test('should open login dialog', async () => {
-    const { getByText, getByTestId } = render(
+    const { getByText } = render(
       <Router>
         <AppContextProvider packages={props.packages}>
           <Header />
@@ -54,9 +54,8 @@ describe('<Header /> component with logged in state', () => {
 
     const loginBtn = getByText('Login');
     fireEvent.click(loginBtn);
-    // wait for login modal appearance and return the element
-    const registrationInfoModal = await waitForElement(() => getByTestId('login--form-container'));
-    expect(registrationInfoModal).toBeTruthy();
+    const loginDialog = await waitForElement(() => getByText('Sign in'));
+    expect(loginDialog).toBeTruthy();
   });
 
   test('should logout the user', async () => {

src/components/Header/Header.tsx

@@ -2,10 +2,9 @@ import React, { useState, useContext } from 'react';
 
 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 LoginDialog from '../LoginDialog';
 import Search from '../Search';
 
 import { NavBar, InnerNavBar, MobileNavBar, InnerMobileNavBar } from './styles';
@@ -17,7 +16,6 @@ interface Props {
   withoutSearch?: boolean;
 }
 
-/* eslint-disable react/jsx-max-depth */
 /* eslint-disable react/jsx-no-bind*/
 const Header: React.FC<Props> = ({ withoutSearch }) => {
   const appContext = useContext(AppContext);
@@ -29,29 +27,9 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
     throw Error('The app Context was not correct used');
   }
 
-  const { user, scope, error, setUser, setError } = appContext;
+  const { user, scope, setUser } = 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 />
@@ -93,12 +71,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
           </Button>
         </MobileNavBar>
       )}
-      <LoginModal
-        error={error}
-        onCancel={() => setShowLoginModal(false)}
-        onSubmit={handleDoLogin}
-        visibility={showLoginModal}
-      />
+      {!user && <LoginDialog onClose={() => setShowLoginModal(false)} open={showLoginModal} />}
     </>
   );
 };

src/components/Header/HeaderMenu.tsx

@@ -16,7 +16,6 @@ interface Props {
   onLoggedInMenuClose: () => void;
 }
 
-/* eslint-disable react/jsx-max-depth */
 const HeaderMenu: React.FC<Props> = ({
   onLogout,
   username,