Merge pull request #1 from frontend-park-mail-ru/vls-33

Vls 33

build.sh

@@ -1,11 +1,18 @@
 #!/bin/bash
-handlebars -m public/src/pages/main-page/main-page.hbs -f public/build/main-page.js
+mkdir -p public/build
+handlebars -m public/src/pages/main/main.hbs -f public/build/main.js
 handlebars -m public/src/pages/login/login.hbs -f public/build/login.js
 handlebars -m public/src/pages/register/register.hbs -f public/build/register.js
+handlebars -m public/src/pages/profile/profile.hbs -f public/build/profile.js
+handlebars -m public/src/pages/notFound/not-found.hbs -f public/build/not-found.js
+handlebars -m public/src/components/image/image.hbs -f public/build/image.js
 handlebars -m public/src/components/header/header.hbs -f public/build/header.js
 handlebars -m public/src/components/notes/notes.hbs -f public/build/notes.js
 handlebars -m public/src/components/note/note.hbs -f public/build/note.js
 handlebars -m public/src/components/note-editor/note-editor.hbs -f public/build/note-editor.js
-handlebars -m public/src/components/avatar/avatar.hbs -f public/build/avatar.js
 handlebars -m public/src/components/link/link.hbs -f public/build/link.js
 handlebars -m public/src/components/home/home.hbs -f public/build/home.js
+handlebars -m public/src/components/input/input.hbs -f public/build/input.js
+handlebars -m public/src/components/wrapper/wrapper.hbs -f public/build/wrapper.js
+handlebars -m public/src/components/footer/footer.hbs -f public/build/footer.js
+handlebars -m public/src/components/button/button.hbs -f public/build/button.js

public/config.js

@@ -1,44 +1,135 @@
-const button = {
-    "text": "toast",
-    "id": "hehe123"
-}
-
 const mainPage = {
-    button: button
+    id: "main-page",
+    href: "/",
+    needAuth: true,
+    home: {
+        id: "home",
+        linkToLogin: {
+            text: "Попробовать"
+        }
+    }
 }
 
 const header = {
     name: "YouNote",
-    menu: [
-        {
-            href: "",
-            text: "Главная",
-            needAuth: false
+    logo: {
+        href: "/",
+        text: "YouNote"
+    },
+    avatarLink: {
+        href: "/profile"
+    },
+    avatar: {
+        id: "user-avatar"
+    },
+    menu: {
+        home: {
+            href: "/",
+            text: "Главная"
         },
-        {
-            href: "main",
-            text: "Мои заметки",
-            needAuth: true
+        main: {
+            href: "/",
+            text: "Мои заметки"
         },
-        {
-            href: "login",
-            text: "Вход",
-            needAuth: false
+        auth: {
+            id: "link-to-login",
+            href: "/login",
+            text: "Вход"
         },
-        {
-            href: "register",
-            text: "Регистрация",
-            needAuth: false
+        register: {
+            href: "/register",
+            text: "Регистрация"
         }
-    ]
+    }
 }
 
-const loginPage = {
+const footer = {
+    id: "footer"
+}
 
+const wrapper = {
+    id: "wrapper"
+}
+
+const profilePage = {
+    href: "/profile",
+    id: "profile-page",
+    logoutBtn: {
+        text: "Выйти"
+    }
+}
+
+const loginPage = {
+    id: "login-page",
+    href: "/login",
+    form: {
+        id: "login-form",
+        inputs: {
+            login: {
+                id: "login",
+                type: 'text',
+                placeholder: 'Введите логин'
+            },
+            password: {
+                id: "password",
+                type: "password",
+                placeholder: "Придумайте пароль"
+            }
+        },
+        links: {
+            registerPage: {
+                href: "/register",
+                text: "Ещё не зарегистрированы?",
+            }
+        },
+        buttons: {
+            submitBtn: {
+                text: "Войти"
+            }
+        }
+    }
 }
 
 const registerPage = {
+    href: "/register",
+    id: "register-page",
+    form: {
+        id: "register-form",
+        inputs: {
+            login: {
+                type: "text",
+                placeholder: "Введите логин"
+            },
+            password: {
+                type: "password",
+                placeholder: "Введите пароль"
+            },
+            repeatPassword: {
+                type: "password",
+                placeholder: "Повторите пароль"
+            }
+        },
+        links: {
+            loginPage: {
+                href: "/login",
+                text: "Уже есть аккаунт?",
+            }
+        },
+        buttons: {
+            submitBtn: {
+                text: "Зарегистрироваться"
+            }
+        }
+    },
+}
 
+const notFoundPage = {
+    href: "/404",
+    id: "not-found",
+    link: {
+        href: "/",
+        text: "Вернуться на главную"
+    }
 }
 
 const notes = {
@@ -62,9 +153,13 @@ export const config = {
     mainPage: mainPage,
     loginPage: loginPage,
     registerPage: registerPage,
+    profilePage: profilePage,
+    notFoundPage: notFoundPage,
     header: header,
     notes: notes,
     noteEditor: noteEditor,
     note: note,
-    avatar: avatar
+    avatar: avatar,
+    wrapper: wrapper,
+    footer: footer
 };

public/index.css

@@ -1,11 +1,19 @@
-@import './src/pages/main-page/main-page.css';
+@import 'src/pages/main/main.css';
+@import "src/pages/login/login.css";
+@import "src/pages/register/register.css";
+@import "src/pages/profile/profile.css";
+@import "src/pages/notFound/not-found.css";
 @import './src/components/header/header.css';
 @import './src/components/notes/notes.css';
 @import './src/components/note/note.css';
 @import './src/components/note-editor/note-editor.css';
-@import './src/components/avatar/avatar.css';
+@import 'src/components/image/image.css';
 @import './src/components/link/link.css';
 @import './src/components/home/home.css';
+@import './src/components/input/input.css';
+@import "src/components/button/button.css";
+@import "src/components/wrapper/wrapper.css";
+@import "src/components/footer/footer.css";
 
 *, *::before, *::after {
     box-sizing: border-box;
@@ -22,6 +30,11 @@ body {
     background: #D9D9D9;
 }
 
+html,
+body {
+    height: 100%;
+}
+
 img, picture, video, canvas, svg {
     display: block;
     max-width: 100%;
@@ -36,5 +49,12 @@ p, h1, h2, h3, h4, h5, h6 {
 }
 
 #root {
-    display: grid;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#wrapper{
+    flex: 1 0 auto;
+    padding: 50px 0;
 }

public/index.js

@@ -1,90 +1,23 @@
 import {config} from '/config.js';
-import MainPage from './src/pages/main-page/main-page.js';
 import {Header} from "./src/components/header/header.js";
-import LoginPage from "./src/pages/login/login.js";
-import RegisterPage from "./src/pages/register/register.js";
+import {Wrapper} from "./src/components/wrapper/wrapper.js";
+import {Footer} from "./src/components/footer/footer.js";
+import {AppUserStore} from "./src/stores/user/userStore.js";
+import {router} from "./src/modules/router.js";
 
 const root = document.getElementById('root');
-console.log('root');
 
-const wrapper = document.createElement("div")
-wrapper.id = "wrapper"
-root.appendChild(wrapper)
+AppUserStore.registerEvents();
 
-export const userInfo = {
-    login: '',
-    username: '',
-    isAuthorized: true,
-};
 
-let page = 'main';
+const wrapper = new Wrapper(root, config.wrapper);
+wrapper.render();
 
-function renderHeader() {
-    const header = new Header(root, config, userInfo.isAuthorized);
-    header.render();
-}
+router.init(wrapper.self, config);
 
-const renderMainPage = () => {
-    const main = new MainPage(wrapper, config, userInfo);
-    main.render();
-};
+const header = new Header(root, config.header);
+header.render();
 
-const renderLoginPage = () => {
-    const login = new LoginPage(wrapper, config);
-    login.render();
-};
-
-const renderRegisterPage = () => {
-    const register = new RegisterPage(wrapper, config);
-    register.render()
-}
-
-const changePage = (href) => {
-    switch (href) {
-        case '':
-            if (page !== 'main') {
-                renderMainPage();
-                page = 'main';
-                history.pushState(null, null, '/')
-            }
-            break;
-        case 'main':
-            if (page !== 'main') {
-                renderMainPage();
-                page = 'main';
-                history.pushState(null, null, '/' + page)
-            }
-            break;
-        case 'login':
-            if (page !== 'login') {
-                renderLoginPage();
-                page = 'login';
-                history.pushState(null, null, '/' + page)
-            }
-            break;
-        case 'register':
-            if (page !== 'register') {
-                renderRegisterPage();
-                page = 'register';
-                history.pushState(null, null, '/' + page)
-            }
-            break;
-        default:
-            console.log('undefined click');
-    }
-};
-
-const listenClick = (e) => {
-    e.preventDefault();
-    const anchor = e.target.closest('a');
-    if (!anchor) return;
-    const href = anchor.getAttribute('href').replace('/', '');
-    changePage(href);
-};
-
-window.addEventListener('click', listenClick);
-
-
-renderHeader();
-renderMainPage();
+const footer = new Footer(root, config.footer);
+footer.render()