HM-78 Добавил страницу логина (#39)

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>

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},
 ]);
 
 /**

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

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;