404 page

src/index.html

@@ -21,6 +21,11 @@
       name="keywords"
       content="{{metaService.data.keywords}}"
       >
+    <meta
+      ng-if="metaService.data.statusCode != 200"
+      name="prerender-status-code"
+      content="{{metaService.data.statusCode}}"
+      >
     <meta name="language" content="en">
     <meta name="application-name" content="PaperHive">
     <meta name="viewport" content="width=device-width, initial-scale=1">

src/js/config/pageTitleUpdate.js

@@ -7,16 +7,13 @@ module.exports = function(app) {
     ) {
       // event listener for title change
       $rootScope.$on('routeSegmentChange', function(event, current, previous) {
-        if ($routeSegment.chain &&
-            $routeSegment.chain[$routeSegment.chain.length - 1] &&
-            $routeSegment.chain[$routeSegment.chain.length - 1].params.title
-           ) {
-          metaService.set({
-            title:
-            $routeSegment.chain[$routeSegment.chain.length - 1].params.title ||
-            'PaperHive'
-          });
-        }
+        var params = $routeSegment.chain &&
+          $routeSegment.chain[$routeSegment.chain.length - 1] &&
+          $routeSegment.chain[$routeSegment.chain.length - 1].params;
+        metaService.set({
+          title: params.title || 'PaperHive',
+          statusCode: params.statusCode || 200
+        });
       });
     }
   ]);

src/js/config/routes.js

@@ -5,6 +5,7 @@ module.exports = function(app) {
     function($routeSegmentProvider, $routeProvider) {
       $routeSegmentProvider
         .when('/', 'main')
+        .when('/404', '404')
         .when('/articles/new', 'articles_new')
         .when('/articles/:articleId', 'articles')
         .when('/articles/:articleId/activity', 'articles.activity')
@@ -35,6 +36,12 @@ module.exports = function(app) {
           templateUrl: 'templates/main/main.html',
           title: 'PaperHive'
         })
+        // 404 page not found
+        .segment('404', {
+          templateUrl: 'templates/shared/404.html',
+          title: '404 – page not found',
+          statusCode: 404
+        })
         .segment('articles', {
           templateUrl: 'templates/articles/index.html',
           dependencies: ['articleId'],
@@ -150,7 +157,7 @@ module.exports = function(app) {
         })
         ;
 
-      $routeProvider.otherwise({redirectTo: '/'});
+      $routeProvider.otherwise({redirectTo: '/404'});
     }
   ]);
 };

src/templates/shared/404.html

@@ -0,0 +1,13 @@
+<div class="container ph-lg-margin-top">
+  <div class="row">
+    <div class="col-md-12 text-center">
+      <h1>
+        404 – page not found!
+        <small class="ph-newline">I'm sorry, Dave. I'm afraid I can't do that.</small>
+      </h1>
+      <p>
+        The page you requested does not exist.
+      </p>
+    </div>
+  </div>
+</div>

src/templates/shared/navbar_user.html

@@ -1,20 +1,20 @@
 <ul class="nav navbar-nav" ng-controller="NavbarUserCtrl">
-  <li ng-show="!auth.user && !auth.inProgress">
+  <li ng-if="!auth.user && !auth.inProgress">
     <p class="navbar-btn ph-md-margin-left ph-md-margin-right">
     <a href="{{auth.orcidUrl}}" class="btn btn-default"
       title="Sign in with your ORCID iD">
       <img class="ph-orcid-icon" src="img/orcid.svg"> Sign in
     </a>
     </p>
   </li>
-  <li ng-show="!auth.user && auth.inProgress">
+  <li ng-if="!auth.user && auth.inProgress">
     <p class="navbar-text">
       <progressbar class="progress-striped active ph-no-margin" value="100">
         <span class="ph-lg-padding-left ph-lg-padding-right">Signing in...</span>
       </progressbar>
     </p>
   </li>
-  <li ng-show="auth.user" class="dropdown" is-open="dropdown_open" dropdown>
+  <li ng-if="auth.user" class="dropdown" is-open="dropdown_open" dropdown>
     <a href="" class="dropdown-toggle" dropdown-toggle>
       <img
         gravatar-user="auth.user"
@@ -25,12 +25,12 @@
       <i class="fa fa-fw fa-caret-down"></i>
     </a>
     <ul class="dropdown-menu">
-      <li ng-show="auth.user.username">
+      <li ng-if="auth.user.username">
         <a href="./articles/new">
           <i class="fa fa-fw fa-plus"></i> Add article
         </a>
       </li>
-      <li ng-show="auth.user.username">
+      <li ng-if="auth.user.username">
         <a href="./users/{{auth.user.username}}">
           <i class="fa fa-fw fa-user"></i> Profile
         </a>