feat: login Dialog Component - Replaced class by func. comp + added r…

…eact-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

.eslintrc

@@ -72,7 +72,7 @@
       "arrow": "parens",
       "condition": "parens",
       "logical": "parens",
-      "prop": "parens"
+      "prop": "ignore"
     }],
     "react/jsx-boolean-value": ["error", "always"],
     "react/jsx-closing-tag-location": ["error"],
@@ -83,7 +83,7 @@
     "react/jsx-indent": ["error", 2],
     "react/jsx-indent-props": ["error", 2],
     "react/jsx-key": ["error"],
-    "react/jsx-max-depth": ["error", { "max": 2}],
+    "react/jsx-max-depth":["error", { "max": 5}],
     "react/jsx-max-props-per-line": ["error", {"maximum": 3, "when": "multiline" }],
     "react/jsx-no-bind": ["error"],
     "react/jsx-no-comment-textnodes": ["error"],

.vscode/settings.json

@@ -7,4 +7,4 @@
 		"typescriptreact"
 	],
 	"typescript.tsdk": "node_modules/typescript/lib"
-}
+} 

jest/setup.ts

@@ -6,6 +6,7 @@ import 'raf/polyfill';
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { GlobalWithFetchMock } from 'jest-fetch-mock';
+import 'mutationobserver-shim';
 
 // @ts-ignore : Only a void function can be called with the 'new' keyword
 configure({ adapter: new Adapter() });

package.json

@@ -86,6 +86,7 @@
     "lockfile-lint": "3.0.3",
     "lodash": "^4.17.15",
     "mini-css-extract-plugin": "0.8.0",
+    "mutationobserver-shim": "0.3.3",
     "node-mocks-http": "1.8.0",
     "normalize.css": "8.0.1",
     "optimize-css-assets-webpack-plugin": "5.0.3",
@@ -96,6 +97,7 @@
     "react": "16.12.0",
     "react-autosuggest": "9.4.3",
     "react-dom": "16.12.0",
+    "react-hook-form": "3.28.12",
     "react-hot-loader": "4.12.18",
     "react-router-dom": "5.1.2",
     "request": "2.88.0",
@@ -136,7 +138,7 @@
   "bundlesize": [
     {
       "path": "./static/vendors.*.js",
-      "maxSize": "180 kB"
+      "maxSize": "185 kB"
     },
     {
       "path": "./static/main.*.js",
@@ -213,6 +215,5 @@
     "type": "opencollective",
     "url": "https://opencollective.com/verdaccio",
     "logo": "https://opencollective.com/verdaccio/logo.txt"
-  },
-  "dependencies": {}
+  }
 }

src/App/App.tsx

@@ -26,7 +26,6 @@ const StyledBoxContent = styled(Box)({
   },
 });
 
-/* eslint-disable react/jsx-max-depth */
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable react-hooks/exhaustive-deps */
 const App: React.FC = () => {

src/App/AppContext.ts

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

src/App/AppContextProvider.tsx

@@ -1,7 +1,5 @@
 import React, { useState, useEffect } from 'react';
 
-import { FormError } from '../components/Login/Login';
-
 import AppContext, { AppProps, User } from './AppContext';
 
 interface Props {
@@ -38,19 +36,11 @@ const AppContextProvider: React.FC<Props> = ({ children, packages, user }) => {
     });
   };
 
-  const setError = (error?: FormError) => {
-    setState({
-      ...state,
-      error,
-    });
-  };
-
   return (
     <AppContext.Provider
       value={{
         ...state,
         setUser,
-        setError,
       }}>
       {children}
     </AppContext.Provider>

src/App/AppRoute.tsx

@@ -23,7 +23,6 @@ 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 = () => {
   const appContext = useContext(AppContext);
 

src/components/ActionBar/ActionBarAction.tsx

@@ -25,7 +25,6 @@ export interface ActionBarActionProps {
 }
 
 /* eslint-disable react/jsx-no-bind */
-/* eslint-disable react/jsx-max-depth */
 const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
   switch (type) {
     case 'VISIT_HOMEPAGE':

src/components/Dist/Dist.tsx

@@ -10,16 +10,13 @@ import { StyledText, DistListItem, DistChips } from './styles';
 const DistChip: FC<{ name: string }> = ({ name, children }) =>
   children ? (
     <DistChips
-      // lint rule conflicting with prettier
-      /* eslint-disable react/jsx-wrap-multilines */
       label={
         <>
           <b>{name}</b>
           {': '}
           {children}
         </>
       }
-      /* eslint-enable */
     />
   ) : null;
 

src/components/Engines/Engines.tsx

@@ -19,7 +19,6 @@ const Engine: React.FC = () => {
     return null;
   }
 
-  /* eslint-disable react/jsx-max-depth */
   return (
     <Grid container={true}>
       {engines.node && (
@@ -45,7 +44,6 @@ const Engine: React.FC = () => {
       )}
     </Grid>
   );
-  /* eslint-enable react/jsx-max-depth */
 };
 
 export default Engine;

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,