From 6066c91060834340ffc9e0a1877a52848d1ba975 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Fri, 2 Aug 2019 18:13:23 +0700
Subject: [PATCH] logindialog initial

---
 src/containers/dialogs/LoginDialog/index.tsx  | 42 +++++++++++++++++++
 .../dialogs/LoginDialog/styles.scss           |  6 +++
 .../dialogs/ScrollDialog/styles.scss          |  3 +-
 src/redux/modal/constants.ts                  |  7 +++-
 src/redux/modal/reducer.ts                    |  2 +-
 5 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 src/containers/dialogs/LoginDialog/index.tsx
 create mode 100644 src/containers/dialogs/LoginDialog/styles.scss

diff --git a/src/containers/dialogs/LoginDialog/index.tsx b/src/containers/dialogs/LoginDialog/index.tsx
new file mode 100644
index 00000000..e913bf69
--- /dev/null
+++ b/src/containers/dialogs/LoginDialog/index.tsx
@@ -0,0 +1,42 @@
+import React, { FC, useState } from "react";
+import { ScrollDialog } from "../ScrollDialog";
+import { IDialogProps } from "~/redux/modal/constants";
+import { useCloseOnEscape } from "~/utils/hooks";
+import { Group } from "~/components/containers/Group";
+import { InputText } from "~/components/input/InputText";
+import { Button } from "../../../components/input/Button/index";
+import { Padder } from "~/components/containers/Padder";
+import * as styles from "./styles.scss";
+type IProps = IDialogProps & {};
+
+const LoginDialog: FC<IProps> = ({ onRequestClose }) => {
+  const [username, setUserName] = useState("");
+  const [password, setPassword] = useState("");
+
+  const title = <div>title</div>;
+
+  const buttons = (
+    <Padder>
+      <Group horizontal>
+        <Button title="ВОЙТИ" stretchy />
+      </Group>
+    </Padder>
+  );
+
+  useCloseOnEscape(onRequestClose);
+
+  return (
+    <ScrollDialog buttons={buttons} width={300}>
+      <Padder>
+        <div className={styles.wrap}>
+          <Group>
+            <InputText title="Логин" handler={setUserName} value={username} />
+            <InputText title="Пароль" handler={setPassword} value={password} />
+          </Group>
+        </div>
+      </Padder>
+    </ScrollDialog>
+  );
+};
+
+export { LoginDialog };
diff --git a/src/containers/dialogs/LoginDialog/styles.scss b/src/containers/dialogs/LoginDialog/styles.scss
new file mode 100644
index 00000000..73eedaf9
--- /dev/null
+++ b/src/containers/dialogs/LoginDialog/styles.scss
@@ -0,0 +1,6 @@
+.wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+}
diff --git a/src/containers/dialogs/ScrollDialog/styles.scss b/src/containers/dialogs/ScrollDialog/styles.scss
index c9fc3af3..0005eea1 100644
--- a/src/containers/dialogs/ScrollDialog/styles.scss
+++ b/src/containers/dialogs/ScrollDialog/styles.scss
@@ -56,6 +56,7 @@
 
   .pan {
     border-radius: 0 0 $radius $radius;
+    box-shadow: transparentize($color: black, $amount: 0.8) 0 8px 0;
   }
 }
 
@@ -88,7 +89,7 @@
 
 .pan {
   background: darken($content_bg, 4%);
-  height: 64px;
+  max-height: 64px;
 }
 
 .children {
diff --git a/src/redux/modal/constants.ts b/src/redux/modal/constants.ts
index 8bc6f91a..204e1d78 100644
--- a/src/redux/modal/constants.ts
+++ b/src/redux/modal/constants.ts
@@ -1,6 +1,7 @@
 import { ValueOf } from "~/redux/types";
 import { HorizontalExample } from "~/containers/examples/HorizontalExample";
 import { ExampleDialog } from "~/containers/dialogs/ExampleDialog";
+import { LoginDialog } from "~/containers/dialogs/LoginDialog";
 
 export const MODAL_ACTIONS = {
   SET_SHOWN: "MODAL.SET_SHOWN",
@@ -9,11 +10,13 @@ export const MODAL_ACTIONS = {
 };
 
 export const DIALOGS = {
-  TEST: "TEST"
+  TEST: "TEST",
+  LOGIN: "LOGIN"
 };
 
 export const DIALOG_CONTENT = {
-  [DIALOGS.TEST]: ExampleDialog
+  [DIALOGS.TEST]: ExampleDialog,
+  [DIALOGS.LOGIN]: LoginDialog
 };
 
 export interface IDialogProps {
diff --git a/src/redux/modal/reducer.ts b/src/redux/modal/reducer.ts
index 9fd3de2c..3bbf6b41 100644
--- a/src/redux/modal/reducer.ts
+++ b/src/redux/modal/reducer.ts
@@ -10,7 +10,7 @@ export interface IModalState {
 
 const INITIAL_STATE: IModalState = {
   is_shown: true,
-  dialog: DIALOGS.TEST
+  dialog: DIALOGS.LOGIN
 };
 
 export default createReducer(INITIAL_STATE, MODAL_HANDLERS);