apps/web: use react-hook-form

.vscode/settings.json

@@ -13,9 +13,8 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.fixAll.eslint": true
-    // "source.removeUnusedImports": true
+    "source.fixAll": "explicit",
+    "source.fixAll.eslint": "explicit"
   },
   "workbench.editor.labelFormat": "short",
   "eslint.workingDirectories": [

apps/web/components/Form.jsx

@@ -2,38 +2,45 @@ import styles from './Form.module.scss';
 import { publicRuntimeConfig } from '@/config/runtime';
 import axios from 'axios';
 import { useState } from 'react';
+import { useForm } from 'react-hook-form';
 
 const { APP_BASE_PATH } = publicRuntimeConfig;
 
 export function Form() {
   const [hasError, setHasError] = useState(false);
+  const { handleSubmit, register } = useForm();
 
   return (
     <form
       className={styles.form}
-      onSubmit={(e) => {
-        e.preventDefault();
-
-        const login = e.target[0].value;
-        const password = e.target[1].value;
-        const data = { login, password };
-
+      onSubmit={handleSubmit((data) => {
         axios
           .post('/login', data)
           .then(() => {
             const url =
               (window.location.pathname.replace(APP_BASE_PATH, '') || '/') +
               (window.location.search || '');
-
             window.location.replace(url);
           })
           .catch(() => {
             setHasError(true);
           });
-      }}
+      })}
     >
-      <input name="login" type="text" placeholder="Логин" required autoComplete="on" />
-      <input name="password" type="password" placeholder="Пароль" required autoComplete="on" />
+      <input
+        type="text"
+        placeholder="Логин"
+        required
+        autoComplete="on"
+        {...register('login', { required: true })}
+      />
+      <input
+        type="password"
+        placeholder="Пароль"
+        required
+        autoComplete="on"
+        {...register('password', { required: true })}
+      />
       {hasError ? <span className="error">Неверный логин или пароль</span> : null}
       <button type="submit">Войти</button>
     </form>

apps/web/package.json

@@ -19,6 +19,7 @@
     "next": "^14.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.3",
     "sass": "^1.69.3",
     "typescript": "5.3.2",
     "zod": "^3.22.4"

pnpm-lock.yaml

@@ -189,6 +189,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
+      react-hook-form:
+        specifier: ^7.51.3
+        version: 7.51.3(react@18.2.0)
       sass:
         specifier: ^1.69.3
         version: 1.69.5
@@ -7787,6 +7790,15 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-hook-form@7.51.3(react@18.2.0):
+    resolution: {integrity: sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==}
+    engines: {node: '>=12.22.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: true