From 82e7c6ebe9ba443f56a5660612a384cc0abcb721 Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Thu, 31 Mar 2016 22:33:49 +0200
Subject: [PATCH] front: add basic home placeholder

---
 static/css/home.css                      |  9 +++++++++
 static/css/main.css                      | 15 ++++++++++++++-
 static/html/home.tpl                     |  4 ++++
 static/js/controllers/auth_controller.js | 12 +++++++-----
 static/js/controllers/home_controller.js |  4 +++-
 static/js/main.js                        |  4 +++-
 static/js/views/base_view.js             | 18 ++++++++++++++----
 static/js/views/home_view.js             | 19 +++++++++++++++++++
 static/js/views/login_view.js            |  5 ++---
 static/js/views/registration_view.js     |  5 ++---
 10 files changed, 77 insertions(+), 18 deletions(-)
 create mode 100644 static/css/home.css
 create mode 100644 static/html/home.tpl
 create mode 100644 static/js/views/home_view.js

diff --git a/static/css/home.css b/static/css/home.css
new file mode 100644
index 00000000..d4ee6d72
--- /dev/null
+++ b/static/css/home.css
@@ -0,0 +1,9 @@
+#home {
+    text-align: center !important;
+}
+#home h1 {
+    margin-top: 0;
+}
+#home .message {
+    margin-bottom: 2em;
+}
diff --git a/static/css/main.css b/static/css/main.css
index bcabaabb..c161a6a4 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -6,6 +6,8 @@
     --line-color: #DDD;
     --message-error-border-color: #FCC;
     --message-error-background-color: #FFF5F5;
+    --message-success-border-color: #D3E3D3;
+    --message-success-background-color: #F5FFF5;
     --input-bad-border-color: #FCC;
     --input-bad-background-color: #FFF5F5;
     --input-good-border-color: #D3E3D3;
@@ -39,6 +41,8 @@ a {
     text-align: left;
     display: inline-block;
     margin: 0 auto;
+}
+#content-holder>.content-wrapper:not(.transparent) {
     background: var(--top-nav-color);
     padding: 2em;
 }
@@ -106,10 +110,19 @@ nav.text-nav ul li.active a {
     text-decoration: underline;
 }
 
+.messages {
+    width: 30em;
+}
 .messages .message {
-    padding: 0.5em;
+    display: inline-block;
+    text-align: left;
+    padding: 0.5em 1em;
 }
 .message.error {
     border: 1px solid var(--message-error-border-color);
     background: var(--message-error-background-color);
 }
+.message.success {
+    border: 1px solid var(--message-success-border-color);
+    background: var(--message-success-background-color);
+}
diff --git a/static/html/home.tpl b/static/html/home.tpl
new file mode 100644
index 00000000..3ac7cdf2
--- /dev/null
+++ b/static/html/home.tpl
@@ -0,0 +1,4 @@
+<div class='content-wrapper transparent' id='home'>
+    <div class='messages'></div>
+    <h1>{{name}}</h1>
+</div>
diff --git a/static/js/controllers/auth_controller.js b/static/js/controllers/auth_controller.js
index 5c513f14..908e7f40 100644
--- a/static/js/controllers/auth_controller.js
+++ b/static/js/controllers/auth_controller.js
@@ -2,7 +2,6 @@
 
 const cookies = require('js-cookie');
 const page = require('page');
-const config = require('../config.js');
 
 class AuthController {
     constructor(api, topNavigationController, loginView) {
@@ -12,9 +11,12 @@ class AuthController {
 
         const auth = cookies.getJSON('auth');
         if (auth && auth.user && auth.password) {
-            this.api.login(auth.user, auth.password).catch(() => {
+            this.api.login(auth.user, auth.password).catch(errorMessage => {
                 cookies.remove('auth');
-                /* TODO: notify the user what just happened */
+                page('/');
+                this.loginView.notifyError(
+                    'An error happened while trying to log you in: ' +
+                    errorMessage);
             });
         }
     }
@@ -36,7 +38,7 @@ class AuthController {
                                 options);
                             resolve();
                             page('/');
-                            /* TODO: notify about login */
+                            this.loginView.notifySuccess('Logged in');
                         }).catch(errorMessage => { reject(errorMessage); });
                 });
             }});
@@ -46,7 +48,7 @@ class AuthController {
         this.api.logout();
         cookies.remove('auth');
         page('/');
-        /* TODO: notify about logout */
+        this.loginView.notifySuccess('Logged out');
     }
 }
 
diff --git a/static/js/controllers/home_controller.js b/static/js/controllers/home_controller.js
index 1b913fad..85a6ad60 100644
--- a/static/js/controllers/home_controller.js
+++ b/static/js/controllers/home_controller.js
@@ -1,12 +1,14 @@
 'use strict';
 
 class HomeController {
-    constructor(topNavigationController) {
+    constructor(topNavigationController, homeView) {
         this.topNavigationController = topNavigationController;
+        this.homeView = homeView;
     }
 
     indexRoute() {
         this.topNavigationController.activate('home');
+        this.homeView.render();
     }
 
     notFoundRoute() {
diff --git a/static/js/main.js b/static/js/main.js
index 3977b49f..50fc2956 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -4,6 +4,7 @@
 // - import objects -
 // ------------------
 const Api = require('./api.js');
+const HomeView = require('./views/home_view.js');
 const HelpView = require('./views/help_view.js');
 const LoginView = require('./views/login_view.js');
 const RegistrationView = require('./views/registration_view.js');
@@ -26,6 +27,7 @@ const TagsController = require('./controllers/tags_controller.js');
 const api = new Api();
 
 const topNavigationView = new TopNavigationView();
+const homeView = new HomeView();
 const helpView = new HelpView();
 const loginView = new LoginView();
 const registrationView = new RegistrationView();
@@ -34,7 +36,7 @@ const topNavigationController
     = new TopNavigationController(topNavigationView, api);
 const authController = new AuthController(
     api, topNavigationController, loginView);
-const homeController = new HomeController(topNavigationController);
+const homeController = new HomeController(topNavigationController, homeView);
 const postsController = new PostsController(topNavigationController);
 const usersController = new UsersController(
     api,
diff --git a/static/js/views/base_view.js b/static/js/views/base_view.js
index 4f23e848..1a0f7d0c 100644
--- a/static/js/views/base_view.js
+++ b/static/js/views/base_view.js
@@ -20,16 +20,26 @@ class BaseView {
         return handlebars.compile(templateText);
     }
 
-    showError(messagesHolder, errorMessage) {
+    notifyError(message) {
+        this.notify(message, 'error');
+    }
+
+    notifySuccess(message) {
+        this.notify(message, 'success');
+    }
+
+    notify(message, className) {
+        const messagesHolder = this.contentHolder.querySelector('.messages');
         /* TODO: animate this */
         const node = document.createElement('div');
-        node.innerHTML = errorMessage;
+        node.innerHTML = message;
         node.classList.add('message');
-        node.classList.add('error');
+        node.classList.add(className);
         messagesHolder.appendChild(node);
     }
 
-    clearMessages(messagesHolder) {
+    clearMessages() {
+        const messagesHolder = this.contentHolder.querySelector('.messages');
         /* TODO: animate that */
         while (messagesHolder.lastChild) {
             messagesHolder.removeChild(messagesHolder.lastChild);
diff --git a/static/js/views/home_view.js b/static/js/views/home_view.js
new file mode 100644
index 00000000..0847f731
--- /dev/null
+++ b/static/js/views/home_view.js
@@ -0,0 +1,19 @@
+'use strict';
+
+const config = require('../config.js');
+const BaseView = require('./base_view.js');
+
+class HomeView extends BaseView {
+    constructor() {
+        super();
+        this.template = this.getTemplate('home-template');
+    }
+
+    render(section) {
+        this.showView(this.template({
+            'name': config.basic.name,
+        }));
+    }
+}
+
+module.exports = HomeView;
diff --git a/static/js/views/login_view.js b/static/js/views/login_view.js
index 3082cda8..6ea29fe3 100644
--- a/static/js/views/login_view.js
+++ b/static/js/views/login_view.js
@@ -11,7 +11,6 @@ class LoginView extends BaseView {
 
     render(options) {
         this.showView(this.template());
-        const messagesHolder = this.contentHolder.querySelector('.messages');
         const form = this.contentHolder.querySelector('form');
         this.decorateValidator(form);
 
@@ -23,7 +22,7 @@ class LoginView extends BaseView {
 
         form.addEventListener('submit', e => {
             e.preventDefault();
-            this.clearMessages(messagesHolder);
+            this.clearMessages();
             form.setAttribute('disabled', true);
             options
                 .login(
@@ -35,7 +34,7 @@ class LoginView extends BaseView {
                 })
                 .catch(errorMessage => {
                     form.setAttribute('disabled', false);
-                    this.showError(messagesHolder, errorMessage);
+                    this.notifyError(errorMessage);
                 });
         });
     }
diff --git a/static/js/views/registration_view.js b/static/js/views/registration_view.js
index b2dcd36a..ad08e60f 100644
--- a/static/js/views/registration_view.js
+++ b/static/js/views/registration_view.js
@@ -11,7 +11,6 @@ class RegistrationView extends BaseView {
 
     render(options) {
         this.showView(this.template());
-        const messagesHolder = this.contentHolder.querySelector('.messages');
         const form = document.querySelector('#content-holder form');
         this.decorateValidator(form);
 
@@ -23,7 +22,7 @@ class RegistrationView extends BaseView {
 
         form.addEventListener('submit', e => {
             e.preventDefault();
-            this.clearMessages(messagesHolder);
+            this.clearMessages();
             form.setAttribute('disabled', true);
             options
                 .register(
@@ -35,7 +34,7 @@ class RegistrationView extends BaseView {
                 })
                 .catch(errorMessage => {
                     form.setAttribute('disabled', false);
-                    this.showError(messagesHolder, errorMessage);
+                    this.notifyError(errorMessage);
                 });
         });
     }