First working version

cms/templates/cms/home_page.html

@@ -128,7 +128,7 @@ <h3>MicroMasters</h3>
     </section>
   </div>
 
-  {% include "cms/footer.html" %}
+  {% include "footer.html" %}
 
   <div class="modal fade modal-fade-in-scale-up" id="modal-about" aria-hidden="true" aria-labelledby="modal-about"
                                                                                      role="dialog" tabindex="-1">

cms/templates/cms/program_page.html

@@ -184,7 +184,7 @@ <h3>Courses</h3>
         </div>
       </section>
     </div>
-    {% include "cms/footer.html" %}
+    {% include "footer.html" %}
 
     <div class="modal fade modal-fade-in-scale-up" id="modal-about" aria-hidden="true" aria-labelledby="modal-about"
          role="dialog" tabindex="-1">

micromasters/urls.py

@@ -30,3 +30,5 @@
     url(r'^documents/', include(wagtaildocs_urls)),
     url(r'', include(wagtail_urls)),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+
+handler404 = 'ui.views.page_404'

static/js/dashboard.js

@@ -8,7 +8,6 @@ import { browserHistory } from 'react-router';
 import { makeDashboardRoutes } from './dashboard_routes';
 
 // requirements for react-mdl which uses a modified version of material-design-lite
-import 'style!css!react-mdl/extra/material.css';
 import 'react-mdl/extra/material.js';
 
 // Object.entries polyfill

static/js/style.js

@@ -1,2 +1,3 @@
 __webpack_public_path__ = `http://${SETTINGS.host}:8078/`;  // eslint-disable-line no-undef, camelcase
 import '../scss/layout.scss';
+import 'style!css!react-mdl/extra/material.css';

ui/templates/404.html

@@ -0,0 +1,20 @@
+{% extends "base_error.html" %}
+{% load i18n static %}
+
+{% block title %}{% trans "MIT MicroMasters" %}{% endblock %}
+
+{% block error_header %}
+PAGE NOT FOUND
+{% endblock %}
+
+{% block error_content %}
+<div id="page-not-found">
+	<p>The page you requested is unavailable. Please check the URL and try again.</p>
+	<p>Maybe you were looking for one of these pages:</p>
+	<ul>
+		<li><a href="/">Home page</a></li>
+	</ul>
+	<p>If you think there is a problem, please send an email to
+	<a href="mailto:[email protected]">[email protected]</a></p>
+</div>
+{% endblock %}

ui/templates/base_error.html

@@ -0,0 +1,69 @@
+{% extends "base.html" %}
+{% load i18n static %}
+{% block body_class %}template-programpage{% endblock %}
+
+{% block title %}{% trans "MIT MicroMasters" %}{% endblock %}
+
+{% block extrahead %}
+<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
+	integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
+{% endblock %}
+
+{% block content %}
+
+<div class="app-media layout-boxed">
+
+  <nav class="navbar navbar-default" role="navigation">
+    <div class="container-fluid">
+      <div class="navbar-header">
+	  	<a href="/" class="navbar-brand" href="javascript:void(0)"><img src="/static/images/[email protected]" width="215" height="40" alt="MIT MicroMasters" /></a>
+	  	<div class="nav-utility pull-right">
+	  		{% if authenticated %}
+	  		<div class="dropdown btn-group">
+              <a class="btn btn-danger" href="/dashboard"><span>{{ name }}</span></a>
+			  <button aria-label="logout_label" id="logout-button" role="button" class="dropdown-toggle btn btn-danger"
+			  	data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">
+				<span><span class="caret"></span></span>
+			  </button>
+			  <ul class="dropdown-menu" aria-labelledby="logout-button">
+			    <li role="presentation" class=""><a role="menuitem" href="/logout" tabindex="-1">Logout</a></li>
+			  </ul>
+			</div>
+	  		{% else %}
+            <span>Get Started Today!</span>
+            <a class="btn btn-danger" href="{% url 'social:begin' 'edxorg' %}">
+              Sign in with edX.org
+            </a>
+            {% endif %}
+	  	</div>
+	  	{% if authenticated %}
+        <ul class="nav navbar-toolbar navbar-left">
+          <li class="active">
+            <a href="/dashboard">Dashboard</a>
+          </li>
+        </ul>
+        {% endif %}
+	  </div>
+    </div>
+  </nav>
+
+<div class="main-content">
+  <div class="card">
+
+     <div>
+       <div class="card-header">
+       	{% block error_header %}
+       	{% endblock %}
+       </div>
+       <div class="card-copy">
+         {% block error_content %}
+         {% endblock %}
+       </div>
+     </div>
+   </div>
+ </div>
+
+  {% include "footer.html" %}
+</div>
+{% endblock %}

ui/urls.py

@@ -9,7 +9,10 @@
     TERMS_OF_SERVICE_URL,
     USERS_URL,
 )
-from ui.views import dashboard
+from ui.views import (
+    dashboard,
+    page_404,
+)
 
 dashboard_urlpatterns = [
     url(r'^{}'.format(dashboard_url.lstrip("/")), dashboard, name='ui-dashboard')
@@ -22,6 +25,6 @@
 ]
 
 urlpatterns = [
-    url(r'^logout/$', 'django.contrib.auth.views.logout',
-        {'next_page': '/'})
+    url(r'^logout/$', 'django.contrib.auth.views.logout', {'next_page': '/'}),
+    url(r'^404/$', page_404, name='ui-404'),
 ] + dashboard_urlpatterns

ui/views.py

@@ -5,9 +5,11 @@
 import logging
 
 from django.conf import settings
-from django.contrib.staticfiles.templatetags.staticfiles import static
-from django.shortcuts import render
 from django.contrib.auth.decorators import login_required
+from django.contrib.staticfiles.templatetags.staticfiles import static
+from django.shortcuts import (
+    render,
+)
 
 from backends.edxorg import EdxOrgOAuth2
 from micromasters.utils import webpack_dev_server_host, webpack_dev_server_url
@@ -52,10 +54,32 @@ def dashboard(request, *args):  # pylint: disable=unused-argument
     }
 
     return render(
-        request, "dashboard.html",
+        request,
+        "dashboard.html",
         context={
             "style_src": get_bundle_url(request, "style.js"),
             "dashboard_src": get_bundle_url(request, "dashboard.js"),
             "js_settings_json": json.dumps(js_settings),
         }
     )
+
+
+def page_404(request):
+    """
+    Overridden handler for the 404 error pages.
+    """
+    name = request.user.profile.preferred_name if not request.user.is_anonymous() else ""
+
+    response = render(
+        request,
+        "404.html",
+        context={
+            "style_src": get_bundle_url(request, "style.js"),
+            "dashboard_src": get_bundle_url(request, "dashboard.js"),
+            "js_settings_json": "{}",
+            "authenticated": not request.user.is_anonymous(),
+            "name": name,
+        }
+    )
+    response.status_code = 404
+    return response

ui/views_test.py

@@ -8,6 +8,7 @@
 from django.test.client import Client
 from factory.django import mute_signals
 from factory.fuzzy import FuzzyText
+from rest_framework import status
 
 from cms.models import HomePage, ProgramPage
 from courses.models import Program
@@ -213,6 +214,44 @@ def test_webpack_url(self):
                 js_settings = json.loads(response.context['js_settings_json'])
                 assert js_settings['host'] == 'foo_server'
 
+    def test_404_error_context_logged_in(self):
+        """
+        Assert context values for 404 error page when logged in
+        """
+        with mute_signals(post_save):
+            profile = ProfileFactory.create()
+            self.client.force_login(profile.user)
+
+        # case with specific page
+        response = self.client.get('/404/')
+        assert response.status_code == status.HTTP_404_NOT_FOUND
+        assert response.context['authenticated'] is True
+        assert response.context['name'] == profile.preferred_name
+
+        # case with a fake page
+        with self.settings(DEBUG=False):
+            response = self.client.get('/gfh0o4n8741387jfmnub134fn348fr38f348f/')
+            assert response.status_code == status.HTTP_404_NOT_FOUND
+            assert response.context['authenticated'] is True
+            assert response.context['name'] == profile.preferred_name
+
+    def test_404_error_context_logged_out(self):
+        """
+        Assert context values for 404 error page when logged out
+        """
+        # case with specific page
+        response = self.client.get('/404/')
+        assert response.status_code == status.HTTP_404_NOT_FOUND
+        assert response.context['authenticated'] is False
+        assert response.context['name'] == ""
+
+        # case with a fake page
+        with self.settings(DEBUG=False):
+            response = self.client.get('/gfh0o4n8741387jfmnub134fn348fr38f348f/')
+            assert response.status_code == status.HTTP_404_NOT_FOUND
+            assert response.context['authenticated'] is False
+            assert response.context['name'] == ""
+
 
 class TestProgramPage(TestCase):
     """