diff --git a/src/components/auth/login/LoginForm/index.tsx b/src/components/auth/login/LoginForm/index.tsx new file mode 100644 index 00000000..67476f2f --- /dev/null +++ b/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; + onSuccess: () => void; + onRestoreRequest: () => void; +} + +const LoginForm: FC = ({ + login, + onSuccess, + onRestoreRequest, +}) => { + const { values, errors, handleSubmit, handleChange } = useLoginForm( + login, + onSuccess, + ); + + return ( + +
+ + + + + + +
+ ); +}; +export { LoginForm }; diff --git a/src/components/auth/login/LoginForm/styles.module.scss b/src/components/auth/login/LoginForm/styles.module.scss new file mode 100644 index 00000000..b1882d0b --- /dev/null +++ b/src/components/auth/login/LoginForm/styles.module.scss @@ -0,0 +1,3 @@ +.forgot_button { + opacity: 0.5; +} diff --git a/src/containers/dialogs/LoginDialog/index.tsx b/src/containers/dialogs/LoginDialog/index.tsx index 3a8337b2..0d475b17 100644 --- a/src/containers/dialogs/LoginDialog/index.tsx +++ b/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 = ({ onRequestClose }) => { const { login } = useAuth(); const { openOauthWindow } = useOAuth(); const showRestoreDialog = useShowModal(Dialog.RestoreRequest); - const onRestoreRequest = useCallback( - (event) => { - event.preventDefault(); - showRestoreDialog({}); - }, - [showRestoreDialog], - ); - - const { values, errors, handleSubmit, handleChange } = useLoginForm( - login, - onRequestClose, - ); + const onRestoreRequest = useCallback(() => { + showRestoreDialog({}); + }, [showRestoreDialog]); return ( -
-
- } - backdrop={} - > - -
- - Решительно войти +
+ } + backdrop={} + > + +
+ + Решительно войти - - - - - - -
-
-
-
- + +
+
+
+
+
); }; diff --git a/src/containers/dialogs/LoginDialog/styles.module.scss b/src/containers/dialogs/LoginDialog/styles.module.scss index 1b35d3e4..174e39d5 100644 --- a/src/containers/dialogs/LoginDialog/styles.module.scss +++ b/src/containers/dialogs/LoginDialog/styles.module.scss @@ -10,7 +10,3 @@ text-align: left; } } - -.forgot_button { - opacity: 0.5; -} diff --git a/src/hooks/auth/useLoginForm.ts b/src/hooks/auth/useLoginForm.ts index eba42bad..12ca04b3 100644 --- a/src/hooks/auth/useLoginForm.ts +++ b/src/hooks/auth/useLoginForm.ts @@ -17,7 +17,7 @@ export type LoginFormData = Asserts; export const useLoginForm = ( fetcher: (username: string, password: string) => Promise, - onSuccess: () => void + onSuccess: () => void, ) => { const onSubmit = useCallback['onSubmit']>( async (values, { setErrors }) => { @@ -33,7 +33,7 @@ export const useLoginForm = ( } } }, - [fetcher, onSuccess] + [fetcher, onSuccess], ); return useFormik({