diff --git a/public/images/nowhere_motel.svg b/public/images/nowhere_motel.svg new file mode 100644 index 00000000..0219d15d --- /dev/null +++ b/public/images/nowhere_motel.svg @@ -0,0 +1,5294 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + +   + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/auth/login/LoginForm/index.tsx b/src/components/auth/login/LoginForm/index.tsx deleted file mode 100644 index 67476f2f..00000000 --- a/src/components/auth/login/LoginForm/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -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 deleted file mode 100644 index b1882d0b..00000000 --- a/src/components/auth/login/LoginForm/styles.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.forgot_button { - opacity: 0.5; -} diff --git a/src/components/auth/login/LoginStaticScene/index.tsx b/src/components/auth/login/LoginStaticScene/index.tsx index 55145ed4..205e02a8 100644 --- a/src/components/auth/login/LoginStaticScene/index.tsx +++ b/src/components/auth/login/LoginStaticScene/index.tsx @@ -1,11 +1,15 @@ import React, { FC } from 'react'; +import classNames from 'classnames'; + import styles from './styles.module.scss'; -interface LoginStaticSceneProps {} +interface LoginStaticSceneProps { + scene?: 'clouds' | 'nowhere'; +} -const LoginStaticScene: FC = () => ( -
+const LoginStaticScene: FC = ({ scene = 'login' }) => ( +
); export { LoginStaticScene }; diff --git a/src/components/auth/login/LoginStaticScene/styles.module.scss b/src/components/auth/login/LoginStaticScene/styles.module.scss index f168dc5b..8cffd95d 100644 --- a/src/components/auth/login/LoginStaticScene/styles.module.scss +++ b/src/components/auth/login/LoginStaticScene/styles.module.scss @@ -4,6 +4,13 @@ position: absolute; inset: 0; - background: url('/images/clouds.svg') no-repeat 50% 50%; - background-size: cover; + &.clouds { + background: url('/images/clouds.svg') no-repeat 50% 50%; + background-size: cover; + } + + &.nowhere { + background: url('/images/nowhere_motel.svg') no-repeat 50% 50%; + background-size: cover; + } } diff --git a/src/containers/dialogs/LoginDialog/index.tsx b/src/containers/dialogs/LoginDialog/index.tsx index 0d475b17..8abe8bad 100644 --- a/src/containers/dialogs/LoginDialog/index.tsx +++ b/src/containers/dialogs/LoginDialog/index.tsx @@ -1,15 +1,17 @@ -import { FC, useCallback } from 'react'; +import { FC, useCallback, useRef } 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'; @@ -19,6 +21,10 @@ import styles from './styles.module.scss'; type LoginDialogProps = DialogComponentProps & {}; const LoginDialog: FC = ({ onRequestClose }) => { + const feature = useRef<'clouds' | 'nowhere'>( + Math.random() <= 0.5 ? 'clouds' : 'nowhere', + ).current; + useCloseOnEscape(onRequestClose); const { login } = useAuth(); @@ -28,29 +34,55 @@ const LoginDialog: FC = ({ onRequestClose }) => { showRestoreDialog({}); }, [showRestoreDialog]); + const backdrop = ; + + const { values, errors, handleSubmit, handleChange } = useLoginForm( + login, + onRequestClose, + ); + return ( -
+
} - backdrop={} + backdrop={backdrop} >
Решительно войти - + + + +
-
+ ); }; diff --git a/src/containers/dialogs/LoginDialog/styles.module.scss b/src/containers/dialogs/LoginDialog/styles.module.scss index 174e39d5..1b35d3e4 100644 --- a/src/containers/dialogs/LoginDialog/styles.module.scss +++ b/src/containers/dialogs/LoginDialog/styles.module.scss @@ -10,3 +10,7 @@ text-align: left; } } + +.forgot_button { + opacity: 0.5; +}