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

.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"],

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,8 +10,6 @@ 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>
@@ -19,7 +17,6 @@ const DistChip: FC<{ name: string }> = ({ name, children }) =>
           {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 loginDialog = await waitForElement(() => getByText('Sign in'));
-    const registrationInfoModal = await waitForElement(() => getByTestId('login--form-container'));
+    expect(loginDialog).toBeTruthy();
-    expect(registrationInfoModal).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
+      {!user && <LoginDialog onClose={() => setShowLoginModal(false)} open={showLoginModal} />}
-        error={error}
-        onCancel={() => setShowLoginModal(false)}
-        onSubmit={handleDoLogin}
-        visibility={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,

src/components/Login/Login.test.tsx

@@ -1,127 +0,0 @@
-/**
- * @prettier
- */
-
-import React from 'react';
-
-import { mount } from '../../utils/test-enzyme';
-
-import LoginModal from './Login';
-
-const eventUsername = {
-  target: {
-    value: 'xyz',
-  },
-};
-
-const eventPassword = {
-  target: {
-    value: '1234',
-  },
-};
-
-const event = {
-  preventDefault: jest.fn(),
-};
-
-describe('<LoginModal />', () => {
-  test('should load the component in default state', () => {
-    const wrapper = mount(<LoginModal />);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  test('should load the component with props', () => {
-    const props = {
-      visibility: true,
-      error: {
-        type: 'error',
-        title: 'Error Title',
-        description: 'Error Description',
-      },
-      onCancel: () => {},
-      onSubmit: () => {},
-    };
-    const wrapper = mount(<LoginModal {...props} />);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  test('onCancel: should close the login modal', () => {
-    const props = {
-      visibility: true,
-      error: {
-        type: 'error',
-        title: 'Error Title',
-        description: 'Error Description',
-      },
-      onCancel: jest.fn(),
-      onSubmit: () => {},
-    };
-    const wrapper = mount(<LoginModal {...props} />);
-    wrapper.find('button[id="login--form-cancel"]').simulate('click');
-    expect(props.onCancel).toHaveBeenCalled();
-  });
-
-  test('setCredentials - should set username and password in state', () => {
-    const props = {
-      visibility: true,
-      onCancel: () => {},
-      onSubmit: () => {},
-    };
-    const wrapper = mount(<LoginModal {...props} />);
-    const { setCredentials } = wrapper.instance();
-
-    expect(setCredentials('username', eventUsername)).toBeUndefined();
-    expect(wrapper.state('form').username.value).toEqual('xyz');
-
-    expect(setCredentials('password', eventPassword)).toBeUndefined();
-    expect(wrapper.state('form').password.value).toEqual('1234');
-  });
-
-  test('validateCredentials: should validate credentials', async () => {
-    const props = {
-      visibility: true,
-      onCancel: () => {},
-      onSubmit: jest.fn(),
-    };
-
-    const wrapper = mount(<LoginModal {...props} />);
-    const instance = wrapper.instance();
-
-    instance.submitCredentials = jest.fn();
-    const { handleValidateCredentials, setCredentials, submitCredentials } = instance;
-
-    expect(setCredentials('username', eventUsername)).toBeUndefined();
-    expect(wrapper.state('form').username.value).toEqual('xyz');
-
-    expect(setCredentials('password', eventPassword)).toBeUndefined();
-    expect(wrapper.state('form').password.value).toEqual('1234');
-
-    handleValidateCredentials(event);
-    expect(event.preventDefault).toHaveBeenCalled();
-    expect(wrapper.state('form').username.pristine).toEqual(false);
-    expect(wrapper.state('form').password.pristine).toEqual(false);
-
-    expect(submitCredentials).toHaveBeenCalledTimes(1);
-  });
-
-  test('submitCredentials: should submit credentials', async () => {
-    const props = {
-      onSubmit: jest.fn(),
-    };
-
-    const wrapper = mount(<LoginModal {...props} />);
-    const { setCredentials, submitCredentials } = wrapper.instance();
-    expect(setCredentials('username', eventUsername)).toBeUndefined();
-    expect(wrapper.state('form').username.value).toEqual('xyz');
-
-    expect(setCredentials('password', eventPassword)).toBeUndefined();
-    expect(wrapper.state('form').password.value).toEqual('1234');
-
-    await submitCredentials();
-    expect(props.onSubmit).toHaveBeenCalledWith('xyz', '1234');
-    expect(wrapper.state('form').username.value).toEqual('');
-    expect(wrapper.state('form').username.pristine).toEqual(true);
-    expect(wrapper.state('form').password.value).toEqual('');
-    expect(wrapper.state('form').password.pristine).toEqual(true);
-  });
-});

src/components/Login/Login.tsx

@@ -1,254 +0,0 @@
-import React, { Component } from 'react';
-import ErrorIcon from '@material-ui/icons/Error';
-
-import Button from '../../muiComponents/Button';
-import Dialog from '../../muiComponents/Dialog';
-import DialogTitle from '../../muiComponents/DialogTitle';
-import DialogContent from '../../muiComponents/DialogContent';
-import DialogActions from '../../muiComponents/DialogActions';
-import FormControl from '../../muiComponents/FormControl';
-import FormHelperText from '../../muiComponents/FormHelperText';
-import Input from '../../muiComponents/Input';
-import InputLabel from '../../muiComponents/InputLabel';
-import SnackbarContent from '../../muiComponents/SnackbarContent';
-
-import * as classes from './styles';
-
-interface FormFields {
-  required: boolean;
-  pristine: boolean;
-  helperText: string;
-  value: string;
-}
-export interface FormError {
-  type: string;
-  title: string;
-  description: string;
-}
-
-interface LoginModalProps {
-  visibility: boolean;
-  error?: FormError;
-  onCancel: () => void;
-  onSubmit: (username: string, password: string) => void;
-}
-
-interface LoginModalState {
-  form: {
-    username: Partial<FormFields>;
-    password: Partial<FormFields>;
-  };
-  error?: FormError;
-}
-
-export default class LoginModal extends Component<Partial<LoginModalProps>, LoginModalState> {
-  constructor(props: LoginModalProps) {
-    super(props);
-    this.state = {
-      form: {
-        username: {
-          required: true,
-          pristine: true,
-          helperText: 'Field required',
-          value: '',
-        },
-        password: {
-          required: true,
-          pristine: true,
-          helperText: 'Field required',
-          value: '',
-        },
-      },
-      error: props.error,
-    };
-  }
-
-  public render(): JSX.Element {
-    const { visibility = true, onCancel = () => null, error } = this.props as LoginModalProps;
-    return (
-      <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>
-            {error && this.renderLoginError(error)}
-            {this.renderNameField()}
-            {this.renderPasswordField()}
-          </DialogContent>
-          {this.renderActions()}
-        </form>
-      </Dialog>
-    );
-  }
-
-  /**
-   * set login modal's username and password to current state
-   * Required to login
-   */
-  public setCredentials = (name, e) => {
-    const { form } = this.state;
-    this.setState({
-      form: {
-        ...form,
-        [name]: {
-          ...form[name],
-          value: e.target.value,
-          pristine: false,
-        },
-      },
-    });
-  };
-
-  public handleUsernameChange = event => {
-    this.setCredentials('username', event);
-  };
-
-  public handlePasswordChange = event => {
-    this.setCredentials('password', event);
-  };
-
-  public handleValidateCredentials = event => {
-    const { form } = this.state;
-    // prevents default submit behavior
-    event.preventDefault();
-
-    this.setState(
-      {
-        form: Object.keys(form).reduce(
-          (acc, key) => ({
-            ...acc,
-            ...{ [key]: { ...form[key], pristine: false } },
-          }),
-          { username: {}, password: {} }
-        ),
-      },
-      () => {
-        if (!Object.keys(form).some(id => !form[id])) {
-          this.submitCredentials();
-        }
-      }
-    );
-  };
-
-  public submitCredentials = async () => {
-    const { form } = this.state;
-    const username = (form.username && form.username.value) || '';
-    const password = (form.password && form.password.value) || '';
-    const { onSubmit } = this.props;
-    if (onSubmit) {
-      await onSubmit(username, password);
-    }
-    // let's wait for API response and then set
-    // username and password filed to empty state
-    this.setState({
-      form: Object.keys(form).reduce(
-        (acc, key) => ({
-          ...acc,
-          ...{ [key]: { ...form[key], value: '', pristine: true } },
-        }),
-        { username: {}, password: {} }
-      ),
-    });
-  };
-
-  public renderErrorMessage(title: string, description: string): JSX.Element {
-    return (
-      <span>
-        <div>
-          <strong>{title}</strong>
-        </div>
-        <div>{description}</div>
-      </span>
-    );
-  }
-
-  public renderMessage(title: string, description: string): JSX.Element {
-    return (
-      <div className={classes.loginErrorMsg} id={'client-snackbar'}>
-        <ErrorIcon className={classes.loginIcon} />
-        {this.renderErrorMessage(title, description)}
-      </div>
-    );
-  }
-
-  public renderLoginError({ type, title, description }: FormError): JSX.Element | false {
-    return (
-      type === 'error' && (
-        <SnackbarContent className={classes.loginError} message={this.renderMessage(title, description)} />
-      )
-    );
-  }
-
-  public renderNameField = () => {
-    const {
-      form: { username },
-    } = this.state;
-    return (
-      <FormControl error={!username.value && !username.pristine} fullWidth={true} required={username.required}>
-        <InputLabel htmlFor={'username'}>{'Username'}</InputLabel>
-        <Input
-          id={'login--form-username'}
-          onChange={this.handleUsernameChange}
-          placeholder={'Your username'}
-          value={username.value}
-        />
-        {!username.value && !username.pristine && (
-          <FormHelperText id={'username-error'}>{username.helperText}</FormHelperText>
-        )}
-      </FormControl>
-    );
-  };
-
-  public renderPasswordField = () => {
-    const {
-      form: { password },
-    } = this.state;
-    return (
-      <FormControl
-        // className={css`
-        //   margin-top: 8px;
-        // `}
-        error={!password.value && !password.pristine}
-        fullWidth={true}
-        required={password.required}>
-        <InputLabel htmlFor={'password'}>{'Password'}</InputLabel>
-        <Input
-          id={'login--form-password'}
-          onChange={this.handlePasswordChange}
-          placeholder={'Your strong password'}
-          type={'password'}
-          value={password.value}
-        />
-        {!password.value && !password.pristine && (
-          <FormHelperText id={'password-error'}>{password.helperText}</FormHelperText>
-        )}
-      </FormControl>
-    );
-  };
-
-  public renderActions = () => {
-    const {
-      form: { username, password },
-    } = this.state;
-    const { onCancel } = this.props;
-    return (
-      <DialogActions className={'dialog-footer'}>
-        <Button color={'inherit'} id={'login--form-cancel'} onClick={onCancel} type={'button'}>
-          {'Cancel'}
-        </Button>
-        <Button
-          color={'inherit'}
-          disabled={!password.value || !username.value}
-          id={'login--form-submit'}
-          type={'submit'}>
-          {'Login'}
-        </Button>
-      </DialogActions>
-    );
-  };
-}

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

@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-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\\" 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>"`;

src/components/Login/index.ts

@@ -1 +0,0 @@
-export { default } from './Login';

src/components/Login/styles.ts

@@ -1,23 +0,0 @@
-import { css } from 'emotion';
-
-import { theme } from '../../design-tokens/theme';
-
-export const loginDialog = css({
-  minWidth: '300px',
-});
-
-export const loginError = css({
-  backgroundColor: `${theme.palette.red} !important`,
-  minWidth: 'inherit !important',
-  marginBottom: '10px !important',
-});
-
-export const loginErrorMsg = css({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-export const loginIcon = css({
-  opacity: 0.9,
-  marginRight: '8px',
-});

src/components/LoginDialog/LoginDialog.test.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import { render, waitForElement, fireEvent, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
+import AppContext, { AppContextProps } from '../../App/AppContext';
+import api from '../../utils/api';
+
+import LoginDialog from './LoginDialog';
+
+const appContextValue: AppContextProps = {
+  scope: '',
+  packages: [],
+  setUser: jest.fn(),
+};
+
+describe('<LoginDialog /> component', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.resetAllMocks();
+  });
+
+  test('should render the component in default state', () => {
+    const props = {
+      onClose: jest.fn(),
+    };
+    const { container } = render(
+      <AppContext.Provider value={appContextValue}>
+        <LoginDialog onClose={props.onClose} />
+      </AppContext.Provider>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should load the component with the open prop', async () => {
+    const props = {
+      open: true,
+      onClose: jest.fn(),
+    };
+
+    const { getByText } = render(
+      <AppContext.Provider value={appContextValue}>
+        <LoginDialog onClose={props.onClose} open={props.open} />
+      </AppContext.Provider>
+    );
+
+    const loginDialogHeading = await waitForElement(() => getByText('Sign in'));
+    expect(loginDialogHeading).toBeTruthy();
+  });
+
+  test('onClose: should close the login modal', async () => {
+    const props = {
+      open: true,
+      onClose: jest.fn(),
+    };
+
+    const { getByTestId } = render(
+      <AppContext.Provider value={appContextValue}>
+        <LoginDialog onClose={props.onClose} open={props.open} />
+      </AppContext.Provider>
+    );
+
+    const loginDialogButton = await waitForElement(() => getByTestId('close-login-dialog-button'));
+    expect(loginDialogButton).toBeTruthy();
+
+    fireEvent.click(loginDialogButton, { open: false });
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  // TODO
+  test.skip('setCredentials - should set username and password in state', async () => {
+    const props = {
+      open: true,
+      onClose: jest.fn(),
+    };
+
+    jest.spyOn(api, 'request').mockImplementation(() =>
+      Promise.resolve({
+        username: 'xyz',
+        token: 'djsadaskljd',
+      })
+    );
+
+    const { getByPlaceholderText, getByText } = render(
+      <AppContext.Provider value={appContextValue}>
+        <LoginDialog onClose={props.onClose} open={props.open} />
+      </AppContext.Provider>
+    );
+
+    // TODO: the input's value is not being updated in the DOM
+    const userNameInput = getByPlaceholderText('Your username');
+    fireEvent.focus(userNameInput);
+    fireEvent.change(userNameInput, { target: { value: 'xyz' } });
+
+    // TODO: the input's value is not being updated in the DOM
+    const passwordInput = getByPlaceholderText('Your strong password');
+    fireEvent.focus(passwordInput);
+    fireEvent.change(passwordInput, { target: { value: '1234' } });
+
+    // TODO: submitting form does not work
+    const signInButton = getByText('Sign in');
+    fireEvent.click(signInButton);
+  });
+
+  test.todo('validateCredentials: should validate credentials');
+
+  test.todo('submitCredentials: should submit credentials');
+});

src/components/LoginDialog/LoginDialog.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useContext, useCallback } from 'react';
+
+import { makeLogin } from '../../utils/login';
+import storage from '../../utils/storage';
+import Dialog from '../../muiComponents/Dialog';
+import DialogContent from '../../muiComponents/DialogContent';
+import AppContext from '../../App/AppContext';
+
+import LoginDialogCloseButton from './LoginDialogCloseButton';
+import LoginDialogForm, { FormValues } from './LoginDialogForm';
+import LoginDialogHeader from './LoginDialogHeader';
+
+interface Props {
+  open?: boolean;
+  onClose: () => void;
+}
+
+const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
+  const appContext = useContext(AppContext);
+
+  if (!appContext) {
+    throw Error('The app Context was not correct used');
+  }
+
+  const [error, setError] = useState();
+
+  const handleDoLogin = useCallback(
+    async (data: FormValues) => {
+      const { username, token, error } = await makeLogin(data.username, data.password);
+
+      if (error) {
+        setError(error);
+      }
+
+      if (username && token) {
+        storage.setItem('username', username);
+        storage.setItem('token', token);
+        appContext.setUser({ username });
+        onClose();
+      }
+    },
+    [appContext, onClose]
+  );
+
+  return (
+    <Dialog fullWidth={true} id="login--dialog" maxWidth="sm" onClose={onClose} open={open}>
+      <LoginDialogCloseButton onClose={onClose} />
+      <DialogContent>
+        <LoginDialogHeader />
+        <LoginDialogForm error={error} onSubmit={handleDoLogin} />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default LoginDialog;

src/components/LoginDialog/LoginDialogCloseButton.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import CloseIcon from '@material-ui/icons/Close';
+
+import DialogTitle from '../../muiComponents/DialogTitle';
+import IconButton from '../../muiComponents/IconButton';
+import { Theme } from '../../design-tokens/theme';
+
+const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
+  position: 'absolute',
+  right: theme.spacing() / 2,
+  top: theme.spacing() / 2,
+  color: theme.palette.grey[500],
+}));
+
+interface Props {
+  onClose: () => void;
+}
+
+const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => (
+  <DialogTitle>
+    <StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
+      <CloseIcon titleAccess="Close Dialog" />
+    </StyledIconButton>
+  </DialogTitle>
+);
+
+export default LoginDialogCloseButton;

src/components/LoginDialog/LoginDialogForm.tsx

@@ -0,0 +1,94 @@
+import React, { memo } from 'react';
+import styled from '@emotion/styled';
+import useForm from 'react-hook-form/dist/react-hook-form.ie11';
+
+import TextField from '../../muiComponents/TextField';
+import Button from '../../muiComponents/Button';
+import { Theme } from '../../design-tokens/theme';
+import { LoginError } from '../../utils/login';
+
+import LoginDialogFormError from './LoginDialogFormError';
+
+const StyledForm = styled('form')<{ theme?: Theme }>(({ theme }) => ({
+  marginTop: theme.spacing(1),
+}));
+
+const StyledButton = styled(Button)<{ theme?: Theme }>(({ theme }) => ({
+  margin: theme.spacing(3, 0, 2),
+}));
+
+export interface FormValues {
+  username: string;
+  password: string;
+}
+
+interface Props {
+  onSubmit: (formValues: FormValues) => void;
+  error?: LoginError;
+}
+
+const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
+  const {
+    register,
+    errors,
+    handleSubmit,
+    formState: { isValid },
+  } = useForm<FormValues>({ mode: 'onChange' });
+
+  const onSubmitForm = (formValues: FormValues) => {
+    onSubmit(formValues);
+  };
+
+  return (
+    <StyledForm noValidate={true} onSubmit={handleSubmit(onSubmitForm)}>
+      <TextField
+        autoComplete="username"
+        error={!!errors.username}
+        fullWidth={true}
+        helperText={errors.username?.message}
+        id="login--dialog-username"
+        inputRef={register({
+          required: { value: true, message: 'This field is required' },
+          minLength: { value: 2, message: 'This field required the min length of 2' },
+        })}
+        label="Username"
+        margin="normal"
+        name="username"
+        placeholder="Your username"
+        required={true}
+        variant="outlined"
+      />
+      <TextField
+        autoComplete="current-password"
+        error={!!errors.password}
+        fullWidth={true}
+        helperText={errors.password?.message}
+        id="login--dialog-password"
+        inputRef={register({
+          required: { value: true, message: 'This field is required' },
+          minLength: { value: 2, message: 'This field required the min length of 2' },
+        })}
+        label="Password"
+        margin="normal"
+        name="password"
+        placeholder="Your strong password"
+        required={true}
+        type="password"
+        variant="outlined"
+      />
+      {error && <LoginDialogFormError error={error} />}
+      <StyledButton
+        color="primary"
+        disabled={!isValid}
+        fullWidth={true}
+        id="login--dialog-button-submit"
+        size="large"
+        type="submit"
+        variant="contained">
+        {'Sign In'}
+      </StyledButton>
+    </StyledForm>
+  );
+});
+
+export default LoginDialogForm;

src/components/LoginDialog/LoginDialogFormError.tsx

@@ -0,0 +1,42 @@
+import React, { memo } from 'react';
+import styled from '@emotion/styled';
+import Error from '@material-ui/icons/Error';
+
+import SnackbarContent from '../../muiComponents/SnackbarContent';
+import Box from '../../muiComponents/Box';
+import { Theme } from '../../design-tokens/theme';
+import { LoginError } from '../../utils/login';
+
+const StyledSnackbarContent = styled(SnackbarContent)<{ theme?: Theme }>(({ theme }) => ({
+  backgroundColor: theme.palette.error.dark,
+}));
+
+const StyledErrorIcon = styled(Error)<{ theme?: Theme }>(({ theme }) => ({
+  fontSize: 20,
+  opacity: 0.9,
+  marginRight: theme.spacing(1),
+}));
+
+export interface FormValues {
+  username: string;
+  password: string;
+}
+
+interface Props {
+  error: LoginError;
+}
+
+const LoginDialogFormError = memo(({ error }: Props) => {
+  return (
+    <StyledSnackbarContent
+      message={
+        <Box alignItems="center" display="flex">
+          <StyledErrorIcon />
+          {error.description}
+        </Box>
+      }
+    />
+  );
+});
+
+export default LoginDialogFormError;

src/components/LoginDialog/LoginDialogHeader.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import LockOutlined from '@material-ui/icons/LockOutlined';
+import CloseIcon from '@material-ui/icons/Close';
+
+import Heading from '../../muiComponents/Heading';
+import Avatar from '../../muiComponents/Avatar';
+import Box from '../../muiComponents/Box';
+import IconButton from '../../muiComponents/IconButton';
+import { Theme } from '../../design-tokens/theme';
+
+const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
+  margin: theme.spacing(1),
+  backgroundColor: theme.palette.primary.main,
+}));
+
+const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
+  position: 'absolute',
+  right: theme.spacing() / 2,
+  top: theme.spacing() / 2,
+  color: theme.palette.grey[500],
+}));
+
+interface Props {
+  onClose?: () => void;
+}
+
+const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
+  return (
+    <Box alignItems="center" display="flex" flexDirection="column" position="relative">
+      {onClose && (
+        <StyledIconButton aria-label="Close" onClick={onClose}>
+          <CloseIcon />
+        </StyledIconButton>
+      )}
+      <StyledAvatar>
+        <LockOutlined />
+      </StyledAvatar>
+      <Heading>{'Sign in'}</Heading>
+    </Box>
+  );
+};
+
+export default LoginDialogHeader;

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LoginDialog /> component should render the component in default state 1`] = `null`;

src/components/LoginDialog/index.ts

@@ -0,0 +1 @@
+export { default } from './LoginDialog';

src/components/Package/Package.tsx

@@ -114,7 +114,6 @@ const Package: React.FC<PackageInterface> = ({
       <a href={homepage} target={'_blank'}>
         <Tooltip aria-label={'Homepage'} title={'Visit homepage'}>
           <IconButton aria-label={'Homepage'}>
-            {/* eslint-disable-next-line react/jsx-max-depth */}
             <HomeIcon />
           </IconButton>
         </Tooltip>
@@ -128,7 +127,6 @@ const Package: React.FC<PackageInterface> = ({
       <a href={bugs.url} target={'_blank'}>
         <Tooltip aria-label={'Bugs'} title={'Open an issue'}>
           <IconButton aria-label={'Bugs'}>
-            {/* eslint-disable-next-line react/jsx-max-depth */}
             <BugReport />
           </IconButton>
         </Tooltip>
@@ -143,7 +141,6 @@ const Package: React.FC<PackageInterface> = ({
       <a onClick={downloadTarball(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))} target={'_blank'}>
         <Tooltip aria-label={'Download the tar file'} title={'Download tarball'}>
           <IconButton aria-label={'Download'}>
-            {/* eslint-disable-next-line react/jsx-max-depth */}
             <DownloadIcon />
           </IconButton>
         </Tooltip>
@@ -155,7 +152,6 @@ const Package: React.FC<PackageInterface> = ({
       <Grid container={true} item={true} xs={12}>
         <Grid item={true} xs={true}>
           <WrapperLink to={`/-/web/detail/${packageName}`}>
-            {/* eslint-disable-next-line react/jsx-max-depth */}
             <PackageTitle className="package-title">{packageName}</PackageTitle>
           </WrapperLink>
         </Grid>

src/components/Repository/Repository.tsx

@@ -1,5 +1,3 @@
-/* eslint react/jsx-max-depth: 0 */
-
 import React from 'react';
 import styled from '@emotion/styled';
 
@@ -37,7 +35,6 @@ const RepositoryListItemText = styled(ListItemText)({
   margin: 0,
 });
 
-/* eslint-disable react/jsx-wrap-multilines */
 const Repository: React.FC = () => {
   const detailContext = React.useContext(DetailContext);
 

src/pages/Version/Version.test.tsx

@@ -23,7 +23,6 @@ const detailContextValue = {
 };
 
 describe('test Version page', () => {
-  /* eslint-disable react/jsx-max-depth */
   test('should render the version page', async () => {
     const { getByTestId, getByText } = render(
       <MemoryRouter>

src/utils/login.test.ts

@@ -59,7 +59,6 @@ describe('makeLogin', (): void => {
     const result = {
       error: {
         description: "Username or password can't be empty!",
-        title: 'Unable to login',
         type: 'error',
       },
     };
@@ -77,8 +76,7 @@ describe('makeLogin', (): void => {
   test('makeLogin - login should failed with 401', async () => {
     const result = {
       error: {
-        description: 'bad username/password, access denied',
+        description: 'Unable to sign in',
-        title: 'Unable to login',
         type: 'error',
       },
     };
@@ -91,7 +89,6 @@ describe('makeLogin', (): void => {
   test('makeLogin - login should failed with when no data is sent', async () => {
     const result = {
       error: {
-        title: 'Unable to login',
         type: 'error',
         description: "Username or password can't be empty!",
       },

src/utils/login.ts

@@ -47,7 +47,6 @@ export interface LoginBody {
 }
 
 export interface LoginError {
-  title: string;
   type: string;
   description: string;
 }
@@ -56,7 +55,6 @@ export async function makeLogin(username?: string, password?: string): Promise<L
   // checks isEmpty
   if (isEmpty(username) || isEmpty(password)) {
     const error = {
-      title: 'Unable to login',
       type: 'error',
       description: "Username or password can't be empty!",
     };
@@ -77,10 +75,10 @@ export async function makeLogin(username?: string, password?: string): Promise<L
     };
     return result;
   } catch (e) {
+    console.error('login error', e.message);
     const error = {
-      title: 'Unable to login',
       type: 'error',
-      description: e.error,
+      description: 'Unable to sign in',
     };
     return { error };
   }

test/e2e/e2e.spec.js

@@ -30,16 +30,16 @@ describe('/ (Verdaccio Page)', () => {
     await clickElement('button[data-testid="header--button-login"]');
     await page.waitFor(500);
     // we fill the sign in form
-    const signInDialog = await page.$('#login--form-container');
+    const signInDialog = await page.$('#login--dialog');
-    const userInput = await signInDialog.$('#login--form-username');
+    const userInput = await signInDialog.$('#login--dialog-username');
     expect(userInput).not.toBeNull();
-    const passInput = await signInDialog.$('#login--form-password');
+    const passInput = await signInDialog.$('#login--dialog-password');
     expect(passInput).not.toBeNull();
     await userInput.type('test', { delay: 100 });
     await passInput.type('test', { delay: 100 });
     await passInput.dispose();
     // click on log in
-    const loginButton = await page.$('#login--form-submit');
+    const loginButton = await page.$('#login--dialog-button-submit');
     expect(loginButton).toBeDefined();
     await loginButton.focus();
     await loginButton.click({ delay: 100 });
@@ -89,8 +89,7 @@ describe('/ (Verdaccio Page)', () => {
     const signInButton = await page.$('button[data-testid="header--button-login"]');
     await signInButton.click();
     await page.waitFor(1000);
-    const signInDialog = await page.$('#login--form-container');
+    const signInDialog = await page.$('#login--dialog');
-
     expect(signInDialog).not.toBeNull();
   });
   //

yarn.lock

@@ -3939,7 +3939,7 @@ commander@3.0.2:
   resolved "https://registry.verdaccio.org/commander/-/commander-3.0.2.tgz#6837c3fb677ad9933d1cfba42dd14d5117d6b39e"
   integrity sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==
 
-commander@^2.11.0, commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@^2.20.3, commander@^2.8.1, commander@^2.9.0, commander@~2.20.0:
+commander@^2.11.0, commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@^2.20.3, commander@^2.8.1, commander@^2.9.0, commander@~2.20.0, commander@~2.20.3:
   version "2.20.3"
   resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -9671,6 +9671,11 @@ multicast-dns@^6.0.1:
     dns-packet "^1.3.1"
     thunky "^1.0.2"
 
+mutationobserver-shim@0.3.3:
+  version "0.3.3"
+  resolved "https://registry.verdaccio.org/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz#65869630bc89d7bf8c9cd9cb82188cd955aacd2b"
+  integrity sha512-gciOLNN8Vsf7YzcqRjKzlAJ6y7e+B86u7i3KXes0xfxx/nfLmozlW1Vn+Sc9x3tPIePFgc1AeIFhtRgkqTjzDQ==
+
 mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.verdaccio.org/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
@@ -11526,6 +11531,11 @@ react-dom@16.12.0:
     prop-types "^15.6.2"
     scheduler "^0.18.0"
 
+react-hook-form@3.28.12:
+  version "3.28.12"
+  resolved "https://registry.verdaccio.org/react-hook-form/-/react-hook-form-3.28.12.tgz#387173543ab8e89b47ed076ba7ad9886848d94f4"
+  integrity sha512-5bHttMAehOgUHeJhbCVzXguRljFrl2ZK+ydLBqsfLCOtS4++p34vp4/Hkqle5waGojZpNbDSaGUEee24WwfGQg==
+
 react-hot-loader@4.12.18:
   version "4.12.18"
   resolved "https://registry.verdaccio.org/react-hot-loader/-/react-hot-loader-4.12.18.tgz#a9029e34af2690d76208f9a35189d73c2dfea6a7"
@@ -13687,7 +13697,7 @@ uglify-js@3.4.x:
     commander "~2.19.0"
     source-map "~0.6.1"
 
-uglify-js@^3.1.4, uglify-js@^3.6.0:
+uglify-js@^3.1.4:
   version "3.6.0"
   resolved "https://registry.verdaccio.org/uglify-js/-/uglify-js-3.6.0.tgz#704681345c53a8b2079fb6cec294b05ead242ff5"
   integrity sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==
@@ -13695,6 +13705,14 @@ uglify-js@^3.1.4, uglify-js@^3.6.0:
     commander "~2.20.0"
     source-map "~0.6.1"
 
+uglify-js@^3.6.0:
+  version "3.7.1"
+  resolved "https://registry.verdaccio.org/uglify-js/-/uglify-js-3.7.1.tgz#35c7de17971a4aa7689cd2eae0a5b39bb838c0c5"
+  integrity sha512-pnOF7jY82wdIhATVn87uUY/FHU+MDUdPLkmGFvGoclQmeu229eTkbG5gjGGBi3R7UuYYSEeYXY/TTY5j2aym2g==
+  dependencies:
+    commander "~2.20.3"
+    source-map "~0.6.1"
+
 uglifyjs-webpack-plugin@2.2.0:
   version "2.2.0"
   resolved "https://registry.verdaccio.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-2.2.0.tgz#e75bc80e7f1937f725954c9b4c5a1e967ea9d0d7"