refactor login dialog

src/components/auth/login/LoginForm/index.tsx

@@ -0,0 +1,58 @@
+import { FC } from 'react';
+
+import { Group } from '~/components/containers/Group';
+import { Button } from '~/components/input/Button';
+import { InputText } from '~/components/input/InputText';
+import { useLoginForm } from '~/hooks/auth/useLoginForm';
+import { IUser } from '~/types/auth';
+
+import styles from './styles.module.scss';
+
+interface LoginFormProps {
+  login: (username: string, password: string) => Promise<IUser>;
+  onSuccess: () => void;
+  onRestoreRequest: () => void;
+}
+
+const LoginForm: FC<LoginFormProps> = ({
+  login,
+  onSuccess,
+  onRestoreRequest,
+}) => {
+  const { values, errors, handleSubmit, handleChange } = useLoginForm(
+    login,
+    onSuccess,
+  );
+
+  return (
+    <Group>
+      <form onSubmit={handleSubmit}>
+        <InputText
+          title="Логин"
+          handler={handleChange('username')}
+          value={values.username}
+          error={errors.username}
+          autoFocus
+        />
+
+        <InputText
+          title="Пароль"
+          handler={handleChange('password')}
+          value={values.password}
+          error={errors.password}
+          type="password"
+        />
+
+        <Button
+          color="link"
+          type="button"
+          onClick={onRestoreRequest}
+          className={styles.forgot_button}
+        >
+          Вспомнить пароль
+        </Button>
+      </form>
+    </Group>
+  );
+};
+export { LoginForm };

src/components/auth/login/LoginForm/styles.module.scss

@@ -0,0 +1,3 @@
+.forgot_button {
+  opacity: 0.5;
+}

src/containers/dialogs/LoginDialog/index.tsx

@@ -1,17 +1,15 @@
 import { FC, useCallback } from 'react';
 
 import { LoginDialogButtons } from '~/components/auth/login/LoginDialogButtons';
+import { LoginForm } from '~/components/auth/login/LoginForm';
 import { LoginStaticScene } from '~/components/auth/login/LoginStaticScene';
 import { Group } from '~/components/containers/Group';
 import { Padder } from '~/components/containers/Padder';
 import { BetterScrollDialog } from '~/components/dialogs/BetterScrollDialog';
 import { DialogTitle } from '~/components/dialogs/DialogTitle';
-import { Button } from '~/components/input/Button';
-import { InputText } from '~/components/input/InputText';
 import { Dialog } from '~/constants/modal';
 import { useCloseOnEscape } from '~/hooks';
 import { useAuth } from '~/hooks/auth/useAuth';
-import { useLoginForm } from '~/hooks/auth/useLoginForm';
 import { useOAuth } from '~/hooks/auth/useOAuth';
 import { useShowModal } from '~/hooks/modal/useShowModal';
 import { DialogComponentProps } from '~/types/modal';
@@ -26,63 +24,33 @@ const LoginDialog: FC<LoginDialogProps> = ({ onRequestClose }) => {
   const { login } = useAuth();
   const { openOauthWindow } = useOAuth();
   const showRestoreDialog = useShowModal(Dialog.RestoreRequest);
-  const onRestoreRequest = useCallback(
+  const onRestoreRequest = useCallback(() => {
-    (event) => {
+    showRestoreDialog({});
-      event.preventDefault();
+  }, [showRestoreDialog]);
-      showRestoreDialog({});
-    },
-    [showRestoreDialog],
-  );
-
-  const { values, errors, handleSubmit, handleChange } = useLoginForm(
-    login,
-    onRequestClose,
-  );
 
   return (
-    <form onSubmit={handleSubmit}>
+    <div>
-      <div>
+      <BetterScrollDialog
-        <BetterScrollDialog
+        width={300}
-          width={300}
+        onClose={onRequestClose}
-          onClose={onRequestClose}
+        footer={<LoginDialogButtons openOauthWindow={openOauthWindow} />}
-          footer={<LoginDialogButtons openOauthWindow={openOauthWindow} />}
+        backdrop={<LoginStaticScene />}
-          backdrop={<LoginStaticScene />}
+      >
-        >
+        <Padder>
-          <Padder>
+          <div className={styles.wrap}>
-            <div className={styles.wrap}>
+            <Group>
-              <Group>
+              <DialogTitle>Решительно войти</DialogTitle>
-                <DialogTitle>Решительно войти</DialogTitle>
 
-                <InputText
+              <LoginForm
-                  title="Логин"
+                login={login}
-                  handler={handleChange('username')}
+                onRestoreRequest={onRestoreRequest}
-                  value={values.username}
+                onSuccess={onRequestClose}
-                  error={errors.username}
+              />
-                  autoFocus
+            </Group>
-                />
+          </div>
-
+        </Padder>
-                <InputText
+      </BetterScrollDialog>
-                  title="Пароль"
+    </div>
-                  handler={handleChange('password')}
-                  value={values.password}
-                  error={errors.password}
-                  type="password"
-                />
-
-                <Button
-                  color="link"
-                  type="button"
-                  onClick={onRestoreRequest}
-                  className={styles.forgot_button}
-                >
-                  Вспомнить пароль
-                </Button>
-              </Group>
-            </div>
-          </Padder>
-        </BetterScrollDialog>
-      </div>
-    </form>
   );
 };
 

src/containers/dialogs/LoginDialog/styles.module.scss

@@ -10,7 +10,3 @@
     text-align: left;
   }
 }
-
-.forgot_button {
-  opacity: 0.5;
-}

src/hooks/auth/useLoginForm.ts

@@ -17,7 +17,7 @@ export type LoginFormData = Asserts<typeof validationSchema>;
 
 export const useLoginForm = (
   fetcher: (username: string, password: string) => Promise<IUser>,
-  onSuccess: () => void
+  onSuccess: () => void,
 ) => {
   const onSubmit = useCallback<FormikConfig<LoginFormData>['onSubmit']>(
     async (values, { setErrors }) => {
@@ -33,7 +33,7 @@ export const useLoginForm = (
         }
       }
     },
-    [fetcher, onSuccess]
+    [fetcher, onSuccess],
   );
 
   return useFormik({