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 @@ + + + + + + Storage service v0.01 + + + Логин пользователя: + + + + + Пароль пользователя: + + + + + + Оставаться в системе + + Войти + + + + + 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;