From 281ec56288984f7c259b6757b16e4fb9c8910f96 Mon Sep 17 00:00:00 2001
From: mrPadre <51297778+mrPadre@users.noreply.github.com>
Date: Thu, 30 Jul 2020 23:55:09 +0300
Subject: [PATCH] =?UTF-8?q?HM-78=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=83=20?=
 =?UTF-8?q?=D0=BB=D0=BE=D0=B3=D0=B8=D0=BD=D0=B0=20(#39)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.html                           | 27 ++++++++++++++++
 src/app.js                             |  2 ++
 src/components/loginPage/LoginPage.css | 43 ++++++++++++++++++++++++++
 src/components/loginPage/LoginPage.js  | 38 +++++++++++++++++++++++
 4 files changed, 110 insertions(+)
 create mode 100644 src/components/loginPage/LoginPage.css
 create mode 100644 src/components/loginPage/LoginPage.js

diff --git a/src/app.html b/src/app.html
index f7786c3..6448a37 100644
--- a/src/app.html
+++ b/src/app.html
@@ -79,6 +79,33 @@
         </div>
     </template>
 
+    <!-- Шаблон страницы логина-->
+    <template id="login-page">
+        <div class="Login__page">
+            <div class="Login__page-container btn-prymary">
+                <div class="Login__logo-box"></div>
+                <h3 class="Login__title">Storage service v0.01</h3>
+                <form class="Login__form">
+                    <div class="form-group Login__input">
+                        <label for="login  btn-primary">Логин пользователя:</label>
+                        <input type="text" class="form-control" id="login" aria-describedby="loginError">
+                        <small id="loginError" class="form-text text-muted"></small>
+                      </div>
+                      <div class="form-group Login__input">
+                        <label for="password">Пароль пользователя:</label>
+                        <input type="password" class="form-control" id="password" aria-describedby="passwordError">
+                        <small id="passwordError" class="form-text text-muted"></small>
+                      </div>
+                      <div class="form-group form-check Login__check">
+                        <input type="checkbox" class="form-check-input" id="check">
+                        <label class="form-check-label" for="check">Оставаться в системе</label>
+                      </div>
+                      <button type="submit" class="btn btn-primary Login__submit">Войти</button>
+                </form>
+            </div>
+        </div>
+    </template>
+
     <!-- Шаблон контейнера страниц-->
     <template id="page-container">
         <div class="PageContainer"></div>
diff --git a/src/app.js b/src/app.js
index eaeaf92..b397b5c 100644
--- a/src/app.js
+++ b/src/app.js
@@ -10,6 +10,7 @@ import {NAV_MENU} from './components/navigation-buttons-component/constants';
 import routeService from './services/RouteService';
 import RouterPagesContainer from './components/router-pages-container/index';
 import LogsPage from './components/logs-page/index';
+import LoginPage from './components/loginPage/LoginPage';
 
 navMenuButtons.render(NAV_MENU);
 
@@ -27,6 +28,7 @@ routerPagesContainer.addRoutes([
     {url: '/', pageComponent: MainPage},
     {url: '/api', pageComponent: ApiPage},
     {url: '/logs', pageComponent: LogsPage},
+    {url: '/login', pageComponent: LoginPage},
 ]);
 
 /**
diff --git a/src/components/loginPage/LoginPage.css b/src/components/loginPage/LoginPage.css
new file mode 100644
index 0000000..9cba99c
--- /dev/null
+++ b/src/components/loginPage/LoginPage.css
@@ -0,0 +1,43 @@
+.Login__page {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.Login__page-container {
+    max-width: 700px;
+    margin: 10px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+.Login__title {
+    text-align: center;
+}
+.Login__input {
+    margin: 10px;
+}
+.Login__check {
+    margin: 0 10px;
+}
+.Login__submit {
+    align-self: center;
+    margin: 10px;
+}
+.Login__form {
+    display: flex;
+    flex-direction: column;
+}
+.Login__logo {
+    max-width: 100px;
+    margin: 20px auto;
+}
+.Login__logo-box {
+    display: flex;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/src/components/loginPage/LoginPage.js b/src/components/loginPage/LoginPage.js
new file mode 100644
index 0000000..2b40861
--- /dev/null
+++ b/src/components/loginPage/LoginPage.js
@@ -0,0 +1,38 @@
+import Component from '../component/index';
+import './LoginPage.css';
+import {createElement} from '../../utils/elementUtils';
+import Image from '../../img/logo.svg';
+
+class LoginPage extends Component {
+    constructor () {
+        super('#login-page', document.body);
+
+        this.logoBox = this.mainNode.querySelector('.Login__logo-box');
+        this.form = this.mainNode.querySelector('.Login__form');
+        this.submitBtn = this.mainNode.querySelector('.Login__submit');
+        this.logoImg = createElement({
+            tagName: 'img',
+            parentNode: this.logoBox,
+            options: {
+                className: 'Login__logo',
+            },
+            args: {
+                src: Image,
+                alt: 'logo'
+            }
+        });
+
+        this.addEventListener(this.form, 'submit', (evt) => {
+            this.send(evt);
+        });
+        this.addEventListener(this.submitBtn, 'click', (evt) => {
+            this.send(evt);
+        });
+
+    }
+
+    send = (evt) => {
+        evt.preventDefault();
+    }
+}
+export default LoginPage;