titles and admin page html

config/passport.config.js

@@ -5,14 +5,14 @@ function initialize(passport, getUserByEmail, getUserById) {
     const authenticateUser = async (email, password, done) => {
         const user = getUserByEmail(email);
         if (user == null) {
-            return done(null, false, { message: 'Пользователь с такой почтой не найден' });
+            return done(null, false, { message: 'Администратор с такой почтой не найден!' });
         }
 
         try {
             if (await bcrypt.compare(password, user.password)) {
                 return done(null, user);
             } else {
-                return done(null, false, { message: 'Неверный пароль' });
+                return done(null, false, { message: 'Неверный пароль!' });
             }
         } catch (error) {
             return done(error);

config/routes/admin.js

@@ -11,8 +11,9 @@ function checkNotAuthenticated(req, res, next) {
 }
 
 function loginRoute(req, res) {
-    res.render('admin')
-    
+    res.render('admin/admin', {
+        title: 'Digital-Store | Вход в панель управления сайтом'
+    })
 }
 
 // function registerRoute(req, res) {

config/routes/routes.js

@@ -13,6 +13,7 @@ function indexRoute(req, res, dbo) {
         const categories = result.map(category => category.title[0].toUpperCase() + category.title.slice(1));
         res.render('index', {
             pageName: 'index',
+            title: 'Digital-Store | Главная',
             categories
         });
     });
@@ -134,30 +135,37 @@ function onePageItemRoute(req, res, dbo) {
 
 function howToBuyRoute(req, res) {
     res.render('how-to-buy', {
-        pageName: 'how-to-buy'
+        pageName: 'how-to-buy',
+        title: 'Digital-Store | Как купить товар'
     });
 }
 
 function contactsRoute(req, res) {
     res.render('contacts', {
-        pageName: 'contacts'
+        pageName: 'contacts',
+        title: 'Digital-Store | Контакты'
     });
 }
 
 function commentsRoute(req, res) {
     res.render('comments', {
-        pageName: 'comments'
+        pageName: 'comments',
+        title: 'Digital-Store | Отзывы'
     });
 }
 
 function myOrdersRoute(req, res) {
     res.render('my-orders', {
-        pageName: 'my-orders'
+        pageName: 'my-orders',
+        title: 'Digital-Store | Мои покупки'
     });
 }
 
 function controlPanelRoute(req, res) {
-    res.render('control-panel', {name: req.user.name});
+    res.render('admin/control-panel', {
+        name: req.user.name,
+        title: 'Digital-Store | Панель управления сайтом'
+    });
 }
 
 module.exports = function (server, db) {

dist/public/css/style.css

@@ -49,7 +49,7 @@ hr {
     width: 300px;
     position: fixed;
     right: 30px;
-    z-index: 1;
+    z-index: 2;
 }
 
 .block-title {
@@ -655,3 +655,19 @@ footer {
     justify-content: center;
     align-items: center;
 }
+
+/* Control Panel login */
+.login-form {
+    margin-top: 7rem;
+}
+.login-form__title h1 {
+    text-align: center;
+    font-weight: 400;
+    font-size: 18px;
+}
+.login-form__content {
+    margin-top: 2rem;
+}
+.login-form__content button {
+    width: 100%;
+}

dist/public/js/materialize.config.js

@@ -2,4 +2,5 @@ document.addEventListener('DOMContentLoaded', function () {
     // Nav-mobile menu init
     M.Sidenav.init(document.querySelectorAll('.sidenav'))
     M.FormSelect.init(document.querySelectorAll('select'))
+    M.updateTextFields();
 });

dist/views/admin.pug

@@ -1,11 +0,0 @@
-if messages.error
-    h3 #{messages.error}
-h1 Login Page
-form(action="/admin" method="POST")
-    div
-        label(for="email") Email
-        input(type="email" id="email" name="email" required)
-    div
-        label(for="password") Password
-        input(type="password" id="password" name="password" required)
-    button(type="submit") Login

dist/views/admin/admin.pug

@@ -0,0 +1,25 @@
+include ../assets/head.pug
+main
+    if messages.error
+        #notification
+            .card-panel(style="background-color: #f34d53;")
+                span.white-text #{messages.error}
+    .container
+        .row
+            .col.m6.offset-m3.s12
+                .login-form            
+                    .login-form__content
+                        .login-form__title
+                            h1 Вход в панель управления
+                        .login-form__content
+                            form(action="/admin" method="POST")
+                                div.input-field
+                                    i.material-icons.prefix email
+                                    label(for="email") Почта
+                                    input(type="email" id="email" name="email" required)
+                                div.input-field
+                                    i.material-icons.prefix lock
+                                    label(for="password") Пароль
+                                    input(type="password" id="password" name="password" required)
+                                button(class="waves-light btn-large" type="submit") Вход
+include ../assets/scripts.pug

dist/views/admin/control-panel.pug

@@ -1,3 +1,4 @@
+include ../assets/head.pug
 h1 Control-Panel
 h3 Привет #{name}
 form(action="/logout?_method=DELETE" method="POST")

dist/views/assets/head.pug

@@ -3,7 +3,7 @@ html(lang='ru')
     head
         meta(charset='utf-8')
         meta(http-equiv='Cоntent-Type' cоntent='text/html;' charset='utf-8')
-        title Digital Shop
+        title #{title}
         // Materialize CSS
         link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css")
         // Style CSS

dist/views/assets/scripts.pug

@@ -0,0 +1,5 @@
+// Maretialize JS
+script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js')
+// Script JS
+script(src='../js/bundle.js')
+script(src='../js/materialize.config.js')

dist/views/assets/templates/footer.pug

@@ -3,8 +3,4 @@ footer
     .waves-effect.waves-light.pulse.cart-btn(id="cartOpen")
         i.material-icons shopping_cart
         span#counter.counter 0
-// Maretialize JS
-script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js')
-// Script JS
-script(src='../js/bundle.js')
-script(src='../js/materialize.config.js')
+include ../scripts.pug

src/components/header.component.js

@@ -7,6 +7,7 @@ export class HeaderComponent extends Component {
     }
 
     init() {
+        if (this.$el) {
             const currentPage = this.$el.querySelector('#desktop-nav');
             const pages = Array.from(this.$el.querySelectorAll('#page'));
             pages.forEach(li => li.dataset.page === currentPage.dataset.current ? li.classList.add('active') : false);
@@ -14,3 +15,4 @@ export class HeaderComponent extends Component {
             localStorage.getItem('cart') ? insertCount('counter', JSON.parse(localStorage.getItem('cart'))) : false;
         }
     }
+}

src/core/modal.js

@@ -24,7 +24,7 @@ export class Modal {
     }
 }
 
-function openHandler(e) {
+function openHandler() {
     this.show();
 }
 

src/modals/cart.modal.js

@@ -5,10 +5,12 @@ export class CartModal extends Modal {
     constructor(id, open, close, {items}) {
         super(id, open, close);
         this.items = items;
+        if (this.$el) {
             this.open.addEventListener('click', this.openHandler.bind(this));
             this.close.addEventListener('click', this.closeHandler.bind(this));
             this.list = this.$el.querySelector('#modalList');   
         }
+    }
 
     closeHandler() {
         this.removeItem = null;