Added 404 page

TODO

@@ -20,7 +20,6 @@ first major release.
 - misc: add README - apache2 has good README:
   http://svn.apache.org/repos/asf/httpd/httpd/trunk/README
 - misc: add spinner to forms such as registration, login, settings...
-- misc: add 404 pages
 - misc: improve throbber appearance
 - misc: try not to fade in images that are already in browser cache
 

public_html/.htaccess

@@ -1,8 +1,12 @@
 DirectoryIndex app.min.html
 DirectoryIndex index.html
 
+ErrorDocument 404 /404.html
+
 RewriteEngine On
 
+RewriteRule  ^/?404.html$ /#/404 [NE,R,L]
+
 #RewriteCond %{REQUEST_FILENAME} !-f
 RewriteRule ^/?data/posts/([^/]+)/? /api/posts/$1/content [L]
 

public_html/css/http-error.css

@@ -0,0 +1,6 @@
+.http-error {
+	text-align: center;
+}
+.http-error img {
+	margin: 0 auto;
+}

public_html/index.html

@@ -46,6 +46,7 @@
 	<link rel="stylesheet" type="text/css" href="/css/tags.css"/>
 	<link rel="stylesheet" type="text/css" href="/css/tag-list.css"/>
 	<link rel="stylesheet" type="text/css" href="/css/help.css"/>
+	<link rel="stylesheet" type="text/css" href="/css/http-error.css"/>
 	<!-- /build -->
 
 	<!-- build:remove -->
@@ -105,6 +106,7 @@
 	<script type="text/javascript" src="/js/Presenters/TopNavigationPresenter.js"></script>
 	<script type="text/javascript" src="/js/Presenters/PagerPresenter.js"></script>
 	<script type="text/javascript" src="/js/Presenters/MessagePresenter.js"></script>
+	<script type="text/javascript" src="/js/Presenters/HttpErrorPresenter.js"></script>
 
 	<script type="text/javascript" src="/js/Presenters/LoginPresenter.js"></script>
 	<script type="text/javascript" src="/js/Presenters/LogoutPresenter.js"></script>

public_html/js/Presenters/HttpErrorPresenter.js

@@ -0,0 +1,48 @@
+var App = App || {};
+App.Presenters = App.Presenters || {};
+
+App.Presenters.HttpErrorPresenter = function(
+	jQuery,
+	promise,
+	util,
+	topNavigationPresenter) {
+
+	var $el = jQuery('#content');
+	var templates = {};
+
+	function init(params, loaded) {
+		topNavigationPresenter.changeTitle('Error ' + params.error);
+
+		if (params.error === 404) {
+			promise.wait(util.promiseTemplate('404'))
+				.then(function(template) {
+					templates.errorPage = template;
+					reinit(params, loaded);
+				}).fail(function() {
+					console.log(arguments);
+					loaded();
+				});
+		} else {
+			console.log('Not supported.');
+			loaded();
+		}
+	}
+
+	function reinit(params, loaded) {
+		render();
+		loaded();
+	}
+
+	function render() {
+		$el.html(templates.errorPage());
+	}
+
+	return {
+		init: init,
+		reinit: reinit,
+		render: render,
+	};
+
+};
+
+App.DI.register('httpErrorPresenter', ['jQuery', 'promise', 'util', 'topNavigationPresenter'], App.Presenters.HttpErrorPresenter);

public_html/js/Router.js

@@ -11,6 +11,7 @@ App.Router = function(_, jQuery, promise, util, appState, presenterManager) {
 	function injectRoutes() {
 		inject('', 'homePresenter');
 		inject('#/', 'homePresenter');
+		inject('#/404', 'httpErrorPresenter', {error: 404});
 		inject('#/home', 'homePresenter');
 		inject('#/login', 'loginPresenter');
 		inject('#/logout', 'logoutPresenter');
@@ -28,20 +29,29 @@ App.Router = function(_, jQuery, promise, util, appState, presenterManager) {
 		inject('#/help(/:tab)', 'helpPresenter');
 	}
 
-	function navigate(url) {
+	function navigate(url, useBrowserDispatcher) {
+		if (('pushState' in history) && !useBrowserDispatcher) {
+			history.pushState('', '', url);
+			dispatch();
+		} else {
 			window.location.href = url;
 		}
+	}
 
 	function navigateToMainPage() {
 		navigate(root);
 	}
 
-	function navigateInplace(url) {
+	function navigateInplace(url, useBrowserDispatcher) {
 		if ('replaceState' in history) {
 			history.replaceState('', '', url);
+			if (!useBrowserDispatcher) {
 				dispatch();
 			} else {
-			navigate(url);
+				location.reload();
+			}
+		} else {
+			navigate(url, useBrowserDispatcher);
 		}
 	}
 
@@ -90,8 +100,7 @@ App.Router = function(_, jQuery, promise, util, appState, presenterManager) {
 				return true;
 			}
 		}
-		//todo: 404
+		navigateInplace('#/404', true);
-		console.log(new Error('Unhandled route: ' + url));
 		return false;
 	}
 

public_html/templates/404.tpl

@@ -0,0 +1,5 @@
+<div class="http-error">
+	<img src="/img/404.png" alt="404 Not found"/>
+	<br/>
+	<a href="#/">Back to main page</a>
+</div>