From 5e8b228be5f1437da5f36c8197fd56358db5c5eb Mon Sep 17 00:00:00 2001
From: Admir Sabanovic <admir_sabanovic@live.com>
Date: Thu, 18 May 2017 17:09:16 +0200
Subject: [PATCH] some refactoring and basic authentication

---
 client/auth/authentication.js          |  69 +++++++++
 client/components/article.comp.js      |  10 +-
 client/components/layout/c-nav.comp.js | 134 +++++++++++------
 client/components/popular-tags.comp.js |  80 +++++++++++
 client/index.js                        |  17 +++
 client/pages/editor.comp.js            |  29 ++++
 client/pages/home.comp.js              | 192 +++++++++++++++----------
 client/pages/login.comp.js             | 115 ++++++++++-----
 client/pages/register.comp.js          |   4 +-
 client/pages/settings.comp.js          |  35 +++++
 client/router/router-handler.js        |   8 ++
 11 files changed, 534 insertions(+), 159 deletions(-)
 create mode 100644 client/auth/authentication.js
 create mode 100644 client/components/popular-tags.comp.js
 create mode 100644 client/pages/editor.comp.js
 create mode 100644 client/pages/settings.comp.js

diff --git a/client/auth/authentication.js b/client/auth/authentication.js
new file mode 100644
index 0000000..f72bc53
--- /dev/null
+++ b/client/auth/authentication.js
@@ -0,0 +1,69 @@
+export class Authentication {
+    constructor() {
+        if (!Authentication.inst) {
+            Authentication.inst = this;
+        } else {
+            throw new Error('use instance');
+        }
+
+        var unparsedAuth = localStorage.getItem('auth');
+        if (unparsedAuth) {
+            this._auth = JSON.parse(unparsedAuth);
+        }
+        this._callbacks = [];
+        return Authentication.inst;
+    }
+
+    get auth() {
+        if (this._auth) {
+            var unparsedAuth = localStorage.getItem('auth');
+            if (unparsedAuth) {
+                this._auth = JSON.parse(unparsedAuth);
+            }
+        }
+        return JSON.parse(localStorage.getItem('auth'));
+    }
+
+    set auth(value) {
+        localStorage.setItem('auth', JSON.stringify(value));
+    }
+
+    onAuthenticate(callback) {
+        this._callbacks.push(callback);
+    }
+
+
+    doAuthentication(email, password) {
+        let user = {
+            'user': {
+                'email': email, 'password': password
+            }
+        };
+        return new Promise((resolve, reject) => {
+            fetch('https://conduit.productionready.io/api/users/login', {
+                method: 'post',
+                headers: {
+                    'Accept': 'application/json, text/plain, */*',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(user)
+            }).then(res=>res.json()).then(res => {
+                if (res.user) {
+                    this.auth = res.user;
+                    resolve(res.user);
+                    setTimeout(() => {
+                        this._callbacks.forEach(callback => callback(res.user))
+                    });
+                } else {
+                    reject(res.errors)
+                }
+            });
+        });
+
+    }
+
+    static get instance() {
+        return Authentication.inst;
+    }
+}
+Authentication.inst = null;
diff --git a/client/components/article.comp.js b/client/components/article.comp.js
index 947b17b..7300473 100644
--- a/client/components/article.comp.js
+++ b/client/components/article.comp.js
@@ -2,13 +2,14 @@ import {RouterHandler} from "../router/router-handler";
 "use strict";
 
 export class ArticleComponent extends HTMLElement {
-
+//todo generate tag list
     constructor() {
         super();
         this.model = {
             author: '',
             heart: 0
         };
+        this.updateHearts = this.updateHearts.bind(this);
     }
 
     static get observedAttributes() {
@@ -20,15 +21,14 @@ export class ArticleComponent extends HTMLElement {
     }
 
     disconnectedCallback() {
-        console.log('disconnected');
         const button = this.querySelector('#ion-heart');
-        button.removeEventListener('click', this.updateHearts.bind(this));
+        button.removeEventListener('click', this.updateHearts);
     }
 
     connectedCallback() {
         this.innerHTML = this.render();
         const button = this.querySelector('#ion-heart');
-        button.addEventListener('click', this.updateHearts.bind(this));
+        button.addEventListener('click', this.updateHearts);
 
         const authorButton = this.querySelector('#author');
         authorButton.addEventListener('click', (e) => {
@@ -70,7 +70,7 @@ export class ArticleComponent extends HTMLElement {
                 </div>
                 <a id="preview-link" href="#/article/${this.model.slug}" class="preview-link">
                     <h1>${this.model.title}</h1>
-                    <p>${this.model.description}</p>
+                    <p>${this.model.description ? this.model.description : ''}</p>
                     <span>Read more...</span>
                     <ul class="tag-list">
                         <li class="tag-default tag-pill tag-outline">
diff --git a/client/components/layout/c-nav.comp.js b/client/components/layout/c-nav.comp.js
index e17761d..f428f23 100644
--- a/client/components/layout/c-nav.comp.js
+++ b/client/components/layout/c-nav.comp.js
@@ -1,12 +1,17 @@
 "use strict";
 
 import {RouterHandler} from "../../router/router-handler";
+import {Authentication} from "../../auth/authentication";
 
 
 export class CNavComponent extends HTMLElement {
     constructor() {
         super();
-
+        this.navigate = this.navigate.bind(this);
+        this.$links = null;
+        this.$navUl = null;
+        this.$signin = null;
+        this.$signup = null;
     }
 
 
@@ -18,54 +23,69 @@ export class CNavComponent extends HTMLElement {
 
     }
 
+    disconnectedCallback() {
+        this.$links.forEach(link => {
+            link.removeEventListener('click', e => this.navigate(e, link));
+        });
+    }
+
     connectedCallback() {
-        var template = `
-           <nav class="navbar navbar-light">
-            <div class="container">
-                <a class="navbar-brand" href="/" data-navigo >conduit</a>
-                <ul class="nav navbar-nav pull-xs-right">
-                    <li class="nav-item">
-                        <!-- Add "active" class when you're on that page" -->
-                        <a href="/" data-navigo class="nav-link">Home</a>
-                    </li>
-                    <!--<li class="nav-item">-->
-                        <!--<a class="nav-link" href="">-->
-                            <!--<i class="ion-compose"></i>&nbsp;New Post-->
-                        <!--</a>-->
-                    <!--</li>-->
-                    <!--<li class="nav-item">-->
-                        <!--<a class="nav-link" href="">-->
-                            <!--<i class="ion-gear-a"></i>&nbsp;Settings-->
-                        <!--</a>-->
-                    <!--</li>-->
-                    <li class="nav-item">
-                        <a href="/login" data-navigo class="nav-link">Sign in</a>
-                    </li>
-                    <li class="nav-item">
-                        <a href="/register" data-navigo class="nav-link">Sign up</a>
-                    </li>
-                </ul>
-            </div>
-        </nav>
-        `;
+        this.innerHTML = this.render();
 
-        this.innerHTML = template;
+        this.$navUl = this.querySelector('ul.nav');
+        this.$signin = this.querySelector('#signin');
+        this.$signup = this.querySelector('#signup');
 
-        let links = this.querySelectorAll('a.nav-link');
-        links.forEach(link => {
-            link.addEventListener('click', (e) => {
-                e.preventDefault();
-                var routingTo = link.getAttribute('href');
-                RouterHandler.getInstance.router.navigate(routingTo);
-                this.updateActive(routingTo);
-            });
+
+        if (Authentication.instance.auth) {
+            this.userAuthenticated(Authentication.instance.auth);
+        }
+
+        Authentication.instance.onAuthenticate((user) => {
+            this.setCurrentActive();
+            this.userAuthenticated(user);
+        });
+
+        this.$links = this.querySelectorAll('a.nav-link');
+        this.$links.forEach(link => {
+            link.addEventListener('click', e => this.navigate(e, link));
         });
+        this.setCurrentActive();
+    }
+
+    userAuthenticated(user) {
+        this.removeGuestLinks();
+        this.createProfileLinks(user);
+    }
 
+    removeGuestLinks() {
+        this.$signin.parentNode.removeChild(this.$signin);
+        this.$signup.parentNode.removeChild(this.$signup);
+    }
+
+    createProfileLinks(user) {
+        let newArticle = this.createNavItemLink('/editor', '<i class="ion-compose"></i>&nbsp;New Post');
+        this.$navUl.appendChild(newArticle);
+
+        let settings = this.createNavItemLink('/settings', '<i class="ion-gear-a"></i>&nbsp;Settings');
+        this.$navUl.appendChild(settings);
+
+        let userProfile = this.createNavItemLink('/profile/' + user.username, user.username);
+        this.$navUl.appendChild(userProfile);
+    }
+
+    navigate(e, link) {
+        e.preventDefault();
+        var routingTo = link.getAttribute('href');
+        RouterHandler.getInstance.router.navigate(routingTo);
+        this.updateActive(routingTo);
+    }
+
+    setCurrentActive() {
         let curUrl = location.hash;
         curUrl = curUrl.substring(1);
         console.log(curUrl);
         this.updateActive(curUrl);
-
     }
 
     updateActive(route) {
@@ -79,6 +99,40 @@ export class CNavComponent extends HTMLElement {
         });
     }
 
+    createNavItemLink(href, content) {
+        const liNavItem = document.createElement('li');
+        liNavItem.className = 'nav-item';
+
+        const aNavLink = document.createElement('a');
+        aNavLink.classList = 'nav-link';
+        aNavLink.href = href;
+        aNavLink.innerHTML = content;
+
+        liNavItem.appendChild(aNavLink);
+        return liNavItem;
+    }
+
+    render() {
+        return `
+         <nav class="navbar navbar-light">
+            <div class="container">
+                <a class="navbar-brand" href="/" data-navigo >conduit</a>
+                <ul class="nav navbar-nav pull-xs-right">
+                    <li class="nav-item">
+                        <a href="/" data-navigo class="nav-link">Home</a>
+                    </li>
+                    <li id="signin" class="nav-item">
+                        <a href="/login" data-navigo class="nav-link">Sign in</a>
+                    </li>
+                    <li id="signup" class="nav-item">
+                        <a href="/register" data-navigo class="nav-link">Sign up</a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+`;
+    }
+
 
 }
 
diff --git a/client/components/popular-tags.comp.js b/client/components/popular-tags.comp.js
new file mode 100644
index 0000000..7a95d34
--- /dev/null
+++ b/client/components/popular-tags.comp.js
@@ -0,0 +1,80 @@
+"use strict";
+
+export class PopularTagsComponent extends HTMLElement {
+
+    constructor() {
+        super();
+        // var event = new CustomEvent('build', { 'detail': elem.dataset.time });
+        //
+        // // Listen for the event.
+        //         elem.addEventListener('build', function (e) { ... }, false);
+        //
+        // // Dispatch the event.
+        //         elem.dispatchEvent(event);
+    }
+
+    static get observedAttributes() {
+        return [];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+
+    }
+
+    disconnectedCallback() {
+
+    }
+
+    connectedCallback() {
+        this.innerHTML = this.render();
+        this.popularTags();
+    }
+
+    popularTags() {
+        let tagList = this.querySelector('#tagList');
+
+        fetch('https://conduit.productionready.io/api/tags').then(function (response) {
+            return response.json();
+        }).then(r => {
+            if (tagList) {
+                while (tagList.firstChild) {
+                    tagList.removeChild(tagList.firstChild);
+                }
+            }
+            r.tags.forEach(tag => {
+                let tagEl = this.createNewTagElement(tag);
+                tagEl.addEventListener('click', () => {
+                    this.tagOnClick(tag);
+                });
+                tagList.appendChild(tagEl);
+            });
+        });
+    }
+
+    tagOnClick(tag) {
+        var event = new CustomEvent('filter', { 'detail': tag });
+        this.dispatchEvent(event);
+    }
+
+    createNewTagElement(tag) {
+        const tagEl = document.createElement('a');
+        tagEl.className = 'tag-pill tag-default';
+        tagEl.innerHTML = tag;
+        tagEl.href = '#/';
+        tagEl.style = "cursor: pointer;";
+        return tagEl;
+    }
+
+
+    render() {
+        return `
+            <div class="sidebar">
+                <p>Popular Tags</p>
+                <div id="tagList" class="tag-list">
+                    Loading tags ...
+                </div>
+            </div>
+        `;
+    }
+
+}
diff --git a/client/index.js b/client/index.js
index 36293ae..2069569 100644
--- a/client/index.js
+++ b/client/index.js
@@ -9,9 +9,14 @@ import {RouterHandler} from "./router/router-handler";
 import {ProfileComponent} from "./pages/profile.comp";
 import {ArticlePreviewComponent} from "./pages/article-preview.comp";
 import {CommentPreviewComponent} from "./components/comment-preview.comp";
+import {Authentication} from "./auth/authentication";
+import {EditorComponent} from "./pages/editor.comp";
+import {SettingsComponent} from "./pages/settings.comp";
+import {PopularTagsComponent} from "./components/popular-tags.comp";
 
 class App {
     constructor() {
+        new Authentication();
         this.registerComponents();
         RouterHandler.getInstance.init();
     }
@@ -50,6 +55,18 @@ class App {
             {
                 tagName: 'comment-preview',
                 component: CommentPreviewComponent
+            },
+            {
+                tagName: 'c-editor',
+                component: EditorComponent
+            },
+            {
+                tagName: 'c-settings',
+                component: SettingsComponent
+            },
+            {
+                tagName: 'popular-tags',
+                component: PopularTagsComponent
             }
         ];
         ComponentRegistry.register(components);
diff --git a/client/pages/editor.comp.js b/client/pages/editor.comp.js
new file mode 100644
index 0000000..3452a8e
--- /dev/null
+++ b/client/pages/editor.comp.js
@@ -0,0 +1,29 @@
+"use strict";
+
+export class EditorComponent extends HTMLElement {
+    constructor(params) {
+        super();
+
+    }
+
+    static get observedAttributes() {
+        return [];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+
+    }
+
+    connectedCallback() {
+        this.innerHTML = this.render();
+    }
+
+
+    render() {
+        return `
+               editor
+        `;
+    }
+
+
+}
diff --git a/client/pages/home.comp.js b/client/pages/home.comp.js
index 90416e3..99f0b91 100644
--- a/client/pages/home.comp.js
+++ b/client/pages/home.comp.js
@@ -1,14 +1,19 @@
-import {X_Component} from "../components/component.dec";
 import {ArticleComponent} from "../components/article.comp";
+import {Authentication} from "../auth/authentication";
 "use strict";
 
-@X_Component({
-    templateUrl: 'pages/home.comp.html'
-})
+
 export class HomeComponent extends HTMLElement {
     constructor() {
         super();
-        // this.shadow = this.createShadowRoot();
+        this.auth = null;
+        if (Authentication.instance.auth) {
+            this.auth = Authentication.instance.auth;
+        }
+
+        this.$yourFeed = null;
+        this.yourFeedHandleEvent = this.yourFeedHandleEvent.bind(this);
+        this.globalFeedEventHandle = this.globalFeedEventHandle.bind(this);
     }
 
     static get observedAttributes() {
@@ -20,100 +25,109 @@ export class HomeComponent extends HTMLElement {
     }
 
     connectedCallback() {
-        location.href = '#/';
-        HomeComponent.template({}).then(el => {
-
-            this.appendChild(el());
-
-            const globalFeed = document.getElementById('globalFeed');
-            this.fetchAndGenerateGlobalFeed(globalFeed);
+        this.innerHTML = this.render();
+        this.$yourFeedButton = this.querySelector('#your-feed');
+        this.$globalFeedButton = this.querySelector('#globalFeedButton');
+
+        this.$globalFeed = this.querySelector('#globalFeed');
+
+        if (!this.auth) {
+            this.$yourFeedButton.parentNode.removeChild(this.$yourFeedButton);
+            this.$globalFeedButton.classList.add('active');
+            this.fetchArticles('');
+            console.log('NOT AUTHORIZED');
+        } else {
+            this.$yourFeedButton.addEventListener('click', this.yourFeedHandleEvent);
+            this.fetchArticles('/feed', {
+                'Accept': 'application/json, text/plain, */*',
+                'Content-Type': 'application/json',
+                'Authorization': 'Token ' + this.auth.token
+            });
+            console.log('AUTHORIZED');
+        }
 
-            this.popularTags();
+        this.$globalFeedButton.addEventListener('click', this.globalFeedEventHandle);
 
-            const globalFeedButton = this.querySelector('#globalFeedButton');
-            globalFeedButton.addEventListener('click', () => {
-                this.removeCurrentTagFilter();
-                globalFeedButton.classList.add('active');
-                this.cleanGlobalFeed();
-                this.fetchAndGenerateGlobalFeed(globalFeed);
-            });
+        let popularTags = this.querySelector('popular-tags');
+        popularTags.addEventListener('filter', (e) => {
+            this.onTagFilter(e.detail);
         });
     }
 
-    fetchAndGenerateGlobalFeed(globalFeed) {
-        fetch('https://conduit.productionready.io/api/articles').then(function (response) {
-            return response.json();
-        }).then(r => {
-            this.cleanGlobalFeed();
-            r.articles.forEach(article => {
-                this.generateArticle(article, globalFeed);
-            });
+    globalFeedEventHandle(e) {
+        e.preventDefault();
+        this.removeCurrentTagFilter();
+        this.$globalFeedButton.classList.add('active');
+        this.$yourFeedButton.classList.remove('active');
+        this.fetchArticles('');
+    }
+
+    yourFeedHandleEvent(e) {
+        e.preventDefault();
+        this.removeCurrentTagFilter();
+        this.$yourFeedButton.classList.add('active');
+        this.$globalFeedButton.classList.remove('active');
+        this.fetchArticles('/feed', {
+            'Accept': 'application/json, text/plain, */*',
+            'Content-Type': 'application/json',
+            'Authorization': 'Token ' + this.auth.token
         });
     }
 
-    generateArticle(article, globalFeed) {
+    generateArticle(article) {
         if (!article.author.image) {
             article.author.image = 'https://static.productionready.io/images/smiley-cyrus.jpg';
         }
         let articleComponent = new ArticleComponent();
         articleComponent.model = article;
-        globalFeed.appendChild(articleComponent);
+        this.$globalFeed.appendChild(articleComponent);
     }
 
-    popularTags() {
-        const tagList = document.getElementById('tagList');
-        const feedOptions = document.getElementById('feedOptions');
-        const navItems = feedOptions.querySelectorAll('li');
 
-        fetch('https://conduit.productionready.io/api/tags').then(function (response) {
-            return response.json();
-        }).then(r => {
-            while (tagList.firstChild) {
-                tagList.removeChild(tagList.firstChild);
-            }
-            r.tags.forEach(tag => {
-                const tagEl = this.createNewTagElement(tag);
-                tagEl.addEventListener('click', () => {
-                    this.removeCurrentTagFilter();
-
-                    navItems.forEach(navItem => {
-                        const navLink = navItem.querySelector('a');
-                        navLink.className = 'nav-link';
-                    });
-
-                    const newNavItem = this.creanteNewNavItem(tag);
-
-                    feedOptions.appendChild(newNavItem);
-                    this.cleanGlobalFeed();
-
-                    fetch('https://conduit.productionready.io/api/articles?limit=10&offset=0&tag=' + tag).then(function (response) {
-                        return response.json();
-                    }).then(r => {
-                        r.articles.forEach(article => {
-                            this.generateArticle(article, globalFeed);
-                        });
-                    });
-                });
-                tagList.appendChild(tagEl);
-            });
-        });
+    onTagFilter(tag) {
+        let feedOptions = this.querySelector('#feedOptions');
+
+        //clear any current state
+        this.removeCurrentTagFilter();
+        this.cleanGlobalFeed();
+        this.$yourFeedButton.classList.remove('active');
+        this.$globalFeedButton.classList.remove('active');
+        //generate new item
+        const newNavItem = this.creanteNewNavItem(tag);
+        feedOptions.appendChild(newNavItem);
+        this.fetchArticles('?limit=10&offset=0&tag=' + tag);
     }
 
     cleanGlobalFeed() {
-        const globalFeed = document.getElementById('globalFeed');
-        while (globalFeed.firstChild) {
-            globalFeed.removeChild(globalFeed.firstChild);
+        while (this.$globalFeed.firstChild) {
+            this.$globalFeed.removeChild(this.$globalFeed.firstChild);
         }
-        return globalFeed;
+        return this.$globalFeed;
     }
 
     removeCurrentTagFilter() {
-        const getCurrentTagFilter = document.getElementById('tagFilter');
+        const getCurrentTagFilter = this.querySelector('#tagFilter');
         if (getCurrentTagFilter) {
             getCurrentTagFilter.parentNode.removeChild(getCurrentTagFilter);
         }
     }
 
+
+
+    fetchArticles(params, headers) {
+        this.cleanGlobalFeed();
+        fetch('https://conduit.productionready.io/api/articles' + params, {
+            headers: headers
+        }).then(function (response) {
+            return response.json();
+        }).then(r => {
+            r.articles.forEach(article => {
+                this.generateArticle(article);
+            });
+        });
+    }
+
+
     creanteNewNavItem(tag) {
         const newNavItem = document.createElement('li');
         newNavItem.className = 'nav-item';
@@ -125,13 +139,35 @@ export class HomeComponent extends HTMLElement {
         return newNavItem;
     }
 
-    createNewTagElement(tag) {
-        const tagEl = document.createElement('a');
-        tagEl.className = 'tag-pill tag-default';
-        tagEl.innerHTML = tag;
-        tagEl.href='#/';
-        tagEl.style="cursor: pointer;";
-        return tagEl;
+
+    render() {
+        return `
+        <div>
+            <c-banner></c-banner>
+            <div class="container page">
+                <div class="row">
+                    <div class="col-md-9">
+                        <div class="feed-toggle">
+                            <ul id="feedOptions" class="nav nav-pills outline-active">
+                                <li class="nav-item">
+                                    <a id="your-feed" class="nav-link active" href="">Your Feed</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a id="globalFeedButton" href="#" class="nav-link">Global Feed</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div id="globalFeed">
+                            <span>Loading articles ...</span>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <popular-tags></popular-tags>
+                    </div>
+                </div>
+            </div>
+        </div>
+`;
     }
 
 }
diff --git a/client/pages/login.comp.js b/client/pages/login.comp.js
index 4b94e71..ea39ed9 100644
--- a/client/pages/login.comp.js
+++ b/client/pages/login.comp.js
@@ -1,8 +1,16 @@
+import {Authentication} from "../auth/authentication";
+import {RouterHandler} from "../router/router-handler";
 "use strict";
 export class CLoginComponent extends HTMLElement {
     constructor() {
         super();
-        // this.shadow = this.createShadowRoot();
+        this.$signinButton = null;
+        this.$email = null;
+        this.$password = null;
+        this.$errorMessages = null;
+
+        this.$form = null;
+        this.doAuthentication = this.doAuthentication.bind(this);
     }
 
     static get observedAttributes() {
@@ -12,44 +20,83 @@ export class CLoginComponent extends HTMLElement {
     attributeChangedCallback(name, oldValue, newValue) {
 
     }
+
     disconnectedCallback() {
-        console.log('disconnected');
+        this.$signinButton.removeEventListener('click', this.doAuthentication)
     }
 
     connectedCallback() {
-        var template = `
+        this.innerHTML = this.render();
+        this.$signinButton = this.querySelector('#signin-button');
+        this.$email = this.querySelector('#email');
+        this.$password = this.querySelector('#password');
+        this.$form = this.querySelector('form');
+        this.$errorMessages = this.querySelector('.error-messages');
+        this.$signinButton.addEventListener('click', this.doAuthentication)
+    }
+
+    doAuthentication(e) {
+        if (this.$form.checkValidity()) {
+            e.preventDefault();
+            const email = this.$email.value;
+            const password = this.$password.value;
+            Authentication.instance.doAuthentication(email, password)
+                .then(success => {
+                    RouterHandler.getInstance.router.navigate('/');
+                    console.log('success login');
+                })
+                .catch(errors => {
+                    for (var prop in errors) {
+                        // skip loop if the property is from prototype
+                        if(!errors.hasOwnProperty(prop)) continue;
+                        // your code
+                        while(this.$errorMessages.firstChild) {
+                            this.$errorMessages.removeChild(this.$errorMessages.firstChild);
+                        }
+                        errors[prop].forEach(m => {
+                            let text = prop + " " + m;
+                            let errorItem = document.createElement('li');
+                            errorItem.textContent = text;
+                            this.$errorMessages.appendChild(errorItem);
+                        });
+                    }
+                });
+        }
+    }
+
+    render() {
+        return `
              <div class="auth-page">
-  <div class="container page">
-    <div class="row">
-
-      <div class="col-md-6 offset-md-3 col-xs-12">
-        <h1 class="text-xs-center">Sign in</h1>
-        <p class="text-xs-center">
-          <a href="">Have an account?</a>
-        </p>
-
-        <!--<ul class="error-messages">-->
-          <!--<li>That email is already taken</li>-->
-        <!--</ul>-->
-
-        <form>
-          <fieldset class="form-group">
-            <input class="form-control form-control-lg" type="text" placeholder="Email">
-          </fieldset>
-          <fieldset class="form-group">
-            <input class="form-control form-control-lg" type="password" placeholder="Password">
-          </fieldset>
-          <button class="btn btn-lg btn-primary pull-xs-right">
-            Sign in
-          </button>
-        </form>
-      </div>
-
-    </div>
-  </div>
-</div>
-        `;
-        this.innerHTML = template;
+              <div class="container page">
+                <div class="row">
+            
+                  <div class="col-md-6 offset-md-3 col-xs-12">
+                    <h1 class="text-xs-center">Sign in</h1>
+                    <p class="text-xs-center">
+                      <a href="">Have an account?</a>
+                    </p>
+            
+                    <ul class="error-messages">
+                      <!--<li>That email is already taken</li>-->
+                    </ul>
+            
+                    <form>
+                      <fieldset class="form-group">
+                        <input id="email" class="form-control form-control-lg" type="email" required placeholder="Email">
+                      </fieldset>
+                      <fieldset class="form-group">
+                        <input id="password" class="form-control form-control-lg" type="password" placeholder="Password">
+                      </fieldset>
+                      <button id="signin-button" class="btn btn-lg btn-primary pull-xs-right">
+                        Sign in
+                      </button>
+                    </form>
+                  </div>
+            
+                </div>
+              </div>
+            </div>
+`;
     }
 
 
diff --git a/client/pages/register.comp.js b/client/pages/register.comp.js
index f21315b..5dcbbea 100644
--- a/client/pages/register.comp.js
+++ b/client/pages/register.comp.js
@@ -18,9 +18,9 @@ export class CRegisterComponent extends HTMLElement {
              <div class="auth-page">
   <div class="container page">
     <div class="row">
-
+        
       <div class="col-md-6 offset-md-3 col-xs-12">
-        <h1 class="text-xs-center">Sign up</h1>
+        <h1 class="text-xs-center">TODO - Sign up</h1>
         <p class="text-xs-center">
           <a href="">Have an account?</a>
         </p>
diff --git a/client/pages/settings.comp.js b/client/pages/settings.comp.js
new file mode 100644
index 0000000..dff0e10
--- /dev/null
+++ b/client/pages/settings.comp.js
@@ -0,0 +1,35 @@
+"use strict";
+
+export class SettingsComponent extends HTMLElement {
+    constructor(params) {
+        super();
+        this.$logoutButton = null;
+    }
+
+    static get observedAttributes() {
+        return [];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+
+    }
+
+    connectedCallback() {
+        this.innerHTML = this.render();
+        this.$logoutButton = this.querySelector('#logoutButton');
+        this.$logoutButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            localStorage.removeItem('auth');
+            location.href = '/';
+        });
+    }
+
+
+    render() {
+        return `
+            <a href="#" id="logoutButton">logout</a>
+        `;
+    }
+
+
+}
diff --git a/client/router/router-handler.js b/client/router/router-handler.js
index a09d381..ef70687 100644
--- a/client/router/router-handler.js
+++ b/client/router/router-handler.js
@@ -1,5 +1,7 @@
 var Navigo = require('navigo');
 import {CLoginComponent} from "../pages/login.comp";
+import {SettingsComponent} from "../pages/settings.comp";
+import {EditorComponent} from "../pages/editor.comp";
 import {ArticlePreviewComponent} from "../pages/article-preview.comp";
 import {ProfileComponent} from "../pages/profile.comp";
 import {CRegisterComponent} from "../pages/register.comp";
@@ -48,6 +50,12 @@ export class RouterHandler {
                 '/article/:slug': (params) => {
                     RouterHandler.inject(new ArticlePreviewComponent(params));
                 },
+                '/editor': () => {
+                    RouterHandler.inject(new EditorComponent())
+                },
+                '/settings': () => {
+                    RouterHandler.inject(new SettingsComponent())
+                },
                 '': () => {
                     RouterHandler.inject(new HomeComponent())
                 }