added page titles

Author: nicoknoll

Diff for: package.json

@@ -51,6 +51,7 @@
     "mocha": "^3.1.2",
     "node-sass": "^4.0.0",
     "postcss-loader": "^1.0.0",
+    "redux-thunk": "^2.2.0",
     "request": "^2.76.0",
     "resolve-url-loader": "^1.6.0",
     "sass-loader": "^4.0.2",

Diff for: src/modules/challenges/routes.jsx

@@ -5,11 +5,17 @@ export default [
 	{
 		path: '/challenges/',
 		name: 'challenges',
-		component: Challenges
+		component: Challenges,
+		meta: {
+			title: 'Challanges'
+		}
 	},
 	{
 		path: '/challenges/:slug',
 		name: 'challenge',
-		component: Challenge
+		component: Challenge,
+		meta: {
+			title: 'Challenge'
+		}
 	}
 ];

Diff for: src/modules/core/components/error-page.jsx

@@ -0,0 +1,41 @@
+import LayoutStatic from '../../static/components/layout';
+
+require('../styles/error-page.scss');
+
+class ErrorPage extends React.Component {
+
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		return (
+			<LayoutStatic className="error-page">
+				<section className="details">
+					<div className="container">
+						<div className="row">
+							<div className="col-xs-12">
+								<div className="error-code">
+									{this.props.error.code}
+								</div>
+								<div className="error-title">
+									{this.props.error.title}
+								</div>
+								<div className="error-description">
+									{this.props.error.description}
+								</div>
+							</div>
+						</div>
+					</div>
+				</section>
+				<div className="bg-graphic bg-graphic-right" />
+			</LayoutStatic>
+		);
+	}
+}
+
+ErrorPage.defaultProps = {
+	error: {}
+};
+
+export default ErrorPage;

Diff for: src/modules/core/containers/error-page.js

@@ -0,0 +1,53 @@
+import {compose} from 'react-komposer';
+
+import component from '../components/error-page';
+
+const composer = (props, onData) => {
+	let error;
+
+	switch(props.errorCode) {
+		case '403': {
+			error = {
+				code: 403,
+				title: 'Forbidden :(',
+				description: `Ups! Da ist etwas schief gelaufen. 
+					Du verfügst nicht über die Berechtigungen,
+					um auf diese Seite zuzugreifen.`
+			};
+		}
+		break;
+		case '404': {
+			error = {
+				code: 404,
+				title: 'Not Found :(',
+				description: `Ups! Da ist etwas schief gelaufen. 
+					Diese Seite existiert (noch) nicht,
+					bitte versuche es nochmal auf einem anderen Weg.`
+			};
+		}
+		break;
+		case '500': {
+			error = {
+				code: 500,
+				title: 'Server Error :(',
+				description: `Ups! Da ist etwas schief gelaufen.
+					Aber unser Team kümmert sich wahrscheinlich gerade schon darum,
+					dass die Schul-Cloud gleich wieder funktioniert.`
+			};
+		}
+		break;
+		default: {
+			error = {
+				code: props.errorCode,
+				title: 'Unknown Error :(',
+				description: `Ups! Da ist etwas schief gelaufen.`
+			};
+		}
+		break;
+	}
+
+	onData(null, {error});
+};
+
+export default compose(composer)(component);
+

Diff for: src/modules/core/helpers/app.js

@@ -1,7 +1,23 @@
 import { applyRouterMiddleware, browserHistory, hashHistory, Router, Route, Link } from 'react-router';
 import { useScroll } from 'react-router-scroll';
 
-import Layout from '../components/layout';
+import ErrorPage from '../containers/error-page';
+
+const _forceTrailingSlash = (prevState, nextState, replace) => {
+	const path = nextState.location.pathname;
+	if (path.slice(-1) !== '/') {
+		replace(Object.assign(nextState.location, {
+			pathname: `${path}/`
+		}));
+	}
+};
+
+const _getErrorPageUI = (errorCode) => {
+	return (
+		<ErrorPage errorCode={errorCode} />
+	);
+};
+
 
 export default class App {
 	constructor(context) {
@@ -87,9 +103,22 @@ export default class App {
 				delete route.path;
 			}
 
+			route.onEnter = () => {
+				const title = (route.meta || {}).title;
+				document.title = title ? `${title} - Project Secure` : 'Project Secure';
+			};
+
 			return route;
 		});
 
+		// force trailing slashes with redirect or not found
+		routes.push({
+			path:'*',
+			component: _getErrorPageUI.bind(this, '404'),
+			onEnter: _forceTrailingSlash.bind(this, null),
+			onUpdate: _forceTrailingSlash
+		});
+
 		this.__initialized = true;
 
 		return (

Diff for: src/modules/core/styles/error-page.scss

@@ -0,0 +1,42 @@
+@import 'colors';
+
+.error-page {
+	background: #dac9b7 url(../../../static/images/bgtmp.png) center bottom no-repeat;
+	background-size: 100% auto;
+	width: 100%;
+	height: 100%;
+	color: #fff;
+
+	h3 {
+		color: #123;
+		float: left;
+		width: 100%;
+		text-align: center;
+		font-weight: bold;
+		margin: 100px 0px;
+	}
+
+
+	.details {
+		padding: 100px 0px;
+		width: 100%;
+
+		.error-code {
+			font-size: 800%;
+			font-weight: bold;
+		}
+
+		.error-title {
+			font-weight: bold;
+			font-size: 500%;
+			text-transform: uppercase;
+		}
+
+		.error-description {
+			margin-top: 50px;
+			font-size: 200%;
+			max-width: 500px;
+		}
+	}
+
+}

Diff for: src/modules/dashboard/routes.jsx

@@ -4,6 +4,9 @@ export default [
 	{
 		path: '/dashboard/',
 		name: 'dashboard',
-		component: Dashboard
+		component: Dashboard,
+		meta: {
+			title: 'Dashboard'
+		}
 	}
 ];

Diff for: src/modules/settings/routes.jsx

@@ -4,6 +4,9 @@ export default [
 	{
 		path: '/settings/',
 		name: 'settings',
-		component: Settings
+		component: Settings,
+		meta: {
+			title: 'Settings'
+		}
 	}
 ];

Diff for: src/modules/static/routes.jsx

@@ -11,15 +11,24 @@ export default [
 	{
 		path: '/partner/',
 		name: 'partner',
-		component: Partner
+		component: Partner,
+		meta: {
+			title: 'Partner'
+		}
 	},
 	{
 		path: '/contact/',
 		name: 'contact',
-		component: Contact
+		component: Contact,
+		meta: {
+			title: 'Contact'
+		}
 	},{
 		path: '/imprint/',
 		name: 'imprint',
-		component: Imprint
+		component: Imprint,
+		meta: {
+			title: 'Imprint'
+		}
 	}
 ];

Diff for: src/modules/user/routes.jsx

@@ -5,11 +5,17 @@ export default [
 	{
 		path: '/login/',
 		name: 'login',
-		component: Login
+		component: Login,
+		meta: {
+			title: 'Login'
+		}
 	},
 	{
 		path: '/signup/',
 		name: 'signup',
-		component: Signup
+		component: Signup,
+		meta: {
+			title: 'Signup'
+		}
 	}
 ];

Diff for: src/static/index.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Project Secure Client</title>
+    <title>Project Secure</title>
 	  <link rel="stylesheet" type="text/css" href="/styles.css">
 	  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   </head>