Add 404 page with styling

client/src/main.js

@@ -141,7 +141,7 @@ function networkErrorCallback(statusCode) {
 }
 
 function joiningClass(to) {
-  return (to.name === 'join-class' || to.name === 'licenseActivation');
+  return to.name && (to.name === 'join-class' || to.name === 'licenseActivation');
 }
 
 router.beforeEach(async (to, from, next) => {
@@ -157,7 +157,7 @@ router.beforeEach(async (to, from, next) => {
     return;
   }
 
-  if (to.name !== 'licenseActivation' && loginRequired(to) && await redirectUsersWithoutValidLicense()) {
+  if (to.name && to.name !== 'licenseActivation' && loginRequired(to) && await redirectUsersWithoutValidLicense()) {
     next({name: 'licenseActivation'});
     return;
   }
@@ -167,7 +167,7 @@ router.beforeEach(async (to, from, next) => {
     return;
   }
 
-  if ((to.name.indexOf('onboarding') === -1) && !joiningClass(to) && loginRequired(to) && await redirectUsersToOnboarding()) {
+  if ((to.name && to.name.indexOf('onboarding') === -1) && !joiningClass(to) && loginRequired(to) && await redirectUsersToOnboarding()) {
     next({name: 'onboarding-start'});
     return;
   }

client/src/pages/p404.vue

@@ -1,5 +1,16 @@
 <template>
-  <div>
-    <p>404 - Not Found</p>
+  <div class="page-not-found">
+    <h2 class="">Leider können wir die gewünschte Seite nicht finden.</h2>
+    <router-link
+      :to="'/'"
+      class="button button--primary">Zur Startseite</router-link>
   </div>
 </template>
+
+<style scoped lang="scss">
+  @import "@/styles/_helpers.scss";
+
+  .page-not-found {
+    padding: $medium-spacing;
+  }
+</style>

client/src/router/index.js

@@ -247,7 +247,13 @@ const routes = [
     ]
   },
   {path: '/styleguide', component: styleGuidePage},
-  {path: '*', component: p404}
+  {
+    path: '*',
+    component: p404,
+    meta: {
+      layout: 'blank'
+    }
+  }
 ];
 
 Vue.use(Router);