getting token / error

src/containers/App.tsx

@@ -6,7 +6,6 @@ import { ConnectedRouter } from "connected-react-router";
 import { history } from "~/redux/store";
 import { NavLink, Switch, Route, Redirect } from "react-router-dom";
 import { FlowLayout } from "~/containers/flow/FlowLayout";
-import { LoginLayout } from "~/containers/login/LoginLayout";
 import { MainLayout } from "~/containers/main/MainLayout";
 import { ImageExample } from "~/containers/examples/ImageExample";
 import { EditorExample } from "~/containers/examples/EditorExample";
@@ -15,7 +14,7 @@ import { Sprites } from "~/sprites/Sprites";
 import { URLS } from "~/constants/urls";
 import { Modal } from "~/containers/dialogs/Modal";
 import { selectModal } from "~/redux/modal/selectors";
-import { BlurWrapper } from "../components/containers/BlurWrapper/index";
+import { BlurWrapper } from "~/components/containers/BlurWrapper";
 
 const mapStateToProps = selectModal;
 const mapDispatchToProps = {};
@@ -37,8 +36,6 @@ class Component extends React.Component<IProps, {}> {
               <Route path="/examples/horizontal" component={HorizontalExample} />
               <Route exact path={URLS.BASE} component={FlowLayout} />
 
-              <Route path={URLS.AUTH.LOGIN} component={LoginLayout} />
-
               <Redirect to="/" />
             </Switch>
           </MainLayout>

src/containers/dialogs/LoginDialog/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, {FC, FormEvent, useCallback, useEffect, useState} from 'react';
 import { ScrollDialog } from '../ScrollDialog';
 import { IDialogProps } from '~/redux/modal/constants';
 import { useCloseOnEscape } from '~/utils/hooks';
@@ -7,12 +7,32 @@ import { InputText } from '~/components/input/InputText';
 import { Button } from '~/components/input/Button';
 import { Padder } from '~/components/containers/Padder';
 import * as styles from './styles.scss';
-type IProps = IDialogProps & {};
+import {selectAuthLogin} from "~/redux/auth/selectors";
+import * as ACTIONS from '~/redux/auth/actions';
+import {connect} from "react-redux";
 
-const LoginDialog: FC<IProps> = ({ onRequestClose }) => {
+const mapStateToProps = selectAuthLogin;
+
+const mapDispatchToProps = {
+  userSendLoginRequest: ACTIONS.userSendLoginRequest,
+  userSetLoginError: ACTIONS.userSetLoginError,
+};
+
+type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & IDialogProps & {};
+
+const LoginDialogUnconnected: FC<IProps> = ({ onRequestClose, error , userSendLoginRequest, userSetLoginError }) => {
   const [username, setUserName] = useState('');
   const [password, setPassword] = useState('');
 
+  const onSubmit = useCallback((event: FormEvent) => {
+    event.preventDefault();
+    userSendLoginRequest({ username, password });
+  }, [userSendLoginRequest, username, password]);
+
+  useEffect(() => {
+    if (error) userSetLoginError(null);
+  }, [username, password]);
+
   const buttons = (
     <Padder>
       <Group horizontal>
@@ -23,23 +43,29 @@ const LoginDialog: FC<IProps> = ({ onRequestClose }) => {
 
   useCloseOnEscape(onRequestClose);
 
+  console.log({ error });
+
   return (
-    <ScrollDialog buttons={buttons} width={260}>
-      <Padder>
-        <div className={styles.wrap}>
-          <Group>
-            <h2>РЕШИТЕЛЬНО ВОЙТИ</h2>
+    <form onSubmit={onSubmit}>
+      <ScrollDialog buttons={buttons} width={260}>
+        <Padder>
+          <div className={styles.wrap}>
+            <Group>
+              <h2>РЕШИТЕЛЬНО ВОЙТИ</h2>
 
-            <div />
-            <div />
+              <div />
+              <div />
 
-            <InputText title="Логин" handler={setUserName} value={username} />
-            <InputText title="Пароль" handler={setPassword} value={password} />
-          </Group>
-        </div>
-      </Padder>
-    </ScrollDialog>
+              <InputText title="Логин" handler={setUserName} value={username} error={error} />
+              <InputText title="Пароль" handler={setPassword} value={password} />
+            </Group>
+          </div>
+        </Padder>
+      </ScrollDialog>
+    </form>
   );
 };
 
+const LoginDialog = connect(mapStateToProps, mapDispatchToProps)(LoginDialogUnconnected);
+
 export { LoginDialog };

src/containers/login/LoginLayout/index.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { LoginForm } from '~/components/login/LoginForm';
-import { Header } from "~/components/main/Header";
-import { GodRays } from "~/components/main/GodRays";
-
-import * as styles from './styles.scss';
-
-export const LoginLayout: React.FunctionComponent<{}> = () => (
-  <div className={styles.wrapper}>
-    <GodRays />
-    <div className={styles.header}>
-      <Header />
-    </div>
-    <div className={styles.container}>
-      <LoginForm />
-    </div>
-  </div>
-);

src/containers/login/LoginLayout/styles.scss

@@ -1,30 +0,0 @@
-.wrapper {
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.header {}
-
-.container {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  justify-self: stretch;
-}
-
-.form {
-  width: $content_width;
-  min-height: $cell * 2;
-  box-sizing: border-box;
-  border-radius: $panel_radius;
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  // background: rgba(0,0,0,0.1);
-
-  // @include outer_shadow();
-}