Login Dialog Component - Replaced class by func. comp + added react-hook-form

.eslintrc

@@ -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": 0,
     "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

@@ -1,10 +1,40 @@
 {
-	"eslint.packageManager": "yarn",
+	"workbench.iconTheme": "Monokai Pro Icons",
+	"window.zoomLevel": 0,
+	"typescript.updateImportsOnFileMove.enabled": "always",
+	"diffEditor.ignoreTrimWhitespace": false,
+	"explorer.confirmDelete": false,
+	"editor.fontFamily": "Operator Mono, Monaco, 'Courier New', monospace",
+	"workbench.colorTheme": "CodeSandbox",
+	"editor.fontSize": 14,
+	"typescript.disableAutomaticTypeAcquisition": true,
+	"css.trace.server": "messages",
+	"javascript.updateImportsOnFileMove.enabled": "always",
+	"eslint.autoFixOnSave": true,
 	"eslint.validate": [
-		"javascript",
-		"javascriptreact",
-		"typescript",
-		"typescriptreact"
+	  "javascript",
+	  "javascriptreact",
+	  {
+		"language": "typescript",
+		"autoFix": true
+	  },
+	  {
+		"language": "typescriptreact",
+		"autoFix": true
+	  }
 	],
+	"editor.formatOnSave": true,
+	"[javascript]": {
+	  "editor.formatOnSave": false
+	},
+	"[javascriptreact]": {
+	  "editor.formatOnSave": false
+	},
+	"[typescript]": {
+	  "editor.formatOnSave": false
+	},
+	"[typescriptreact]": {
+	  "editor.formatOnSave": false
+	},
 	"typescript.tsdk": "node_modules/typescript/lib"
-}
+  }

package.json

@@ -214,5 +214,7 @@
     "url": "https://opencollective.com/verdaccio",
     "logo": "https://opencollective.com/verdaccio/logo.txt"
   },
-  "dependencies": {}
+  "dependencies": {
+    "react-hook-form": "3.28.11"
+  }
 }

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,6 +1,6 @@
 import { createContext } from 'react';
 
-import { FormError } from '../components/Login/Login';
+import { FormError } from '../components/LoginDialog/Login';
 
 export interface AppProps {
   error?: FormError;

src/App/AppContextProvider.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-import { FormError } from '../components/Login/Login';
+import { FormError } from '../components/LoginDialog/Login';
 
 import AppContext, { AppProps, User } from './AppContext';
 

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/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.tsx

@@ -5,7 +5,7 @@ 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 +17,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);
@@ -93,12 +92,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
           </Button>
         </MobileNavBar>
       )}
-      <LoginModal
-        error={error}
-        onCancel={() => setShowLoginModal(false)}
-        onSubmit={handleDoLogin}
-        visibility={showLoginModal}
-      />
+      <LoginDialog error={error} 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,