added nowhere motel scene

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

@@ -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<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

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

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<LoginStaticSceneProps> = () => (
-  <div className={styles.scene} />
+const LoginStaticScene: FC<LoginStaticSceneProps> = ({ scene = 'login' }) => (
+  <div className={classNames(styles.scene, styles[scene])} />
 );
 
 export { LoginStaticScene };

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;
+  }
 }

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<LoginDialogProps> = ({ 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<LoginDialogProps> = ({ onRequestClose }) => {
     showRestoreDialog({});
   }, [showRestoreDialog]);
 
+  const backdrop = <LoginStaticScene scene={feature} />;
+
+  const { values, errors, handleSubmit, handleChange } = useLoginForm(
+    login,
+    onRequestClose,
+  );
+
   return (
-    <div>
+    <form onSubmit={handleSubmit}>
       <BetterScrollDialog
         width={300}
         onClose={onRequestClose}
         footer={<LoginDialogButtons openOauthWindow={openOauthWindow} />}
-        backdrop={<LoginStaticScene />}
+        backdrop={backdrop}
       >
         <Padder>
           <div className={styles.wrap}>
             <Group>
               <DialogTitle>Решительно войти</DialogTitle>
 
-              <LoginForm
-                login={login}
-                onRestoreRequest={onRestoreRequest}
-                onSuccess={onRequestClose}
+              <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>
             </Group>
           </div>
         </Padder>
       </BetterScrollDialog>
-    </div>
+    </form>
   );
 };
 

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

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