feat: add back button and i18n support on 404 page (#1700)

src/app/not-found/not-found.component.html

@@ -1,5 +1,9 @@
-  <div id="particles-js"></div>
+  <div class="not-found-container">
-  <div class="text">
+    <div id="title">404</div>
-    <h1 id="title">404</h1>
+    <div id="subtitle" class="f30">{{'not_found_subtitle' | translate}}</div>
-    <p id="subtitle">Something went wrong.</p>
+    <div class="back-button m-t-20">
+      <button type="button" (click)="goBack()" mat-raised-button>
+        <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+        {{'labels.buttons.Back' | translate}}</button>
+    </div>
   </div>

src/app/not-found/not-found.component.scss

@@ -1,28 +1,18 @@
-#particles-js {
+@import "assets/styles/helper";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: cornflowerblue;
-}
 
-.text {
+.not-found-container {
-	position: absolute;
+  height: 100%;
-	top: 50%;
-	right: 50%;
-	transform: translate(50%,-50%);
-	max-width: 90%;
-	padding: 2em 3em;
-  color: white;
-	font-family: 'Raleway', sans-serif;
   display: flex;
   flex-direction: column;
+  justify-content: center;
   align-items: center;
+  background: $accent;
+  color: $white;
 }
 
 #title {
-  font-size: 120pt;
+  font-size: 160px;
+  font-weight: bolder;
 }
 
-#subtitle {
+
-  font-size: 12pt;
-}

src/app/not-found/not-found.component.ts

@@ -1,17 +1,17 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
-declare var particlesJS: any;
+import {Location} from '@angular/common';
 
 @Component({
   selector: 'mifosx-not-found',
   templateUrl: './not-found.component.html',
   styleUrls: ['./not-found.component.scss']
 })
-export class NotFoundComponent implements OnInit {
+export class NotFoundComponent {
 
-  constructor() { }
+constructor(private location: Location) {}
 
-  ngOnInit() {
+  goBack(): void {
-    particlesJS.load('particles-js', '/assets/particles.json');
+  this.location.back();
   }
 
 }

src/assets/particles.json

@@ -1,110 +0,0 @@
-{
-  "particles": {
-    "number": {
-      "value": 80,
-      "density": {
-        "enable": true,
-        "value_area": 800
-      }
-    },
-    "color": {
-      "value": "#ffffff"
-    },
-    "shape": {
-      "type": "circle",
-      "stroke": {
-        "width": 0,
-        "color": "#000000"
-      },
-      "polygon": {
-        "nb_sides": 5
-      },
-      "image": {
-        "src": "img/github.svg",
-        "width": 100,
-        "height": 100
-      }
-    },
-    "opacity": {
-      "value": 0.5,
-      "random": false,
-      "anim": {
-        "enable": false,
-        "speed": 1,
-        "opacity_min": 0.1,
-        "sync": false
-      }
-    },
-    "size": {
-      "value": 3,
-      "random": true,
-      "anim": {
-        "enable": false,
-        "speed": 40,
-        "size_min": 0.1,
-        "sync": false
-      }
-    },
-    "line_linked": {
-      "enable": true,
-      "distance": 150,
-      "color": "#ffffff",
-      "opacity": 0.4,
-      "width": 1
-    },
-    "move": {
-      "enable": true,
-      "speed": 6,
-      "direction": "none",
-      "random": false,
-      "straight": false,
-      "out_mode": "out",
-      "bounce": false,
-      "attract": {
-        "enable": false,
-        "rotateX": 600,
-        "rotateY": 1200
-      }
-    }
-  },
-  "interactivity": {
-    "detect_on": "canvas",
-    "events": {
-      "onhover": {
-        "enable": true,
-        "mode": "repulse"
-      },
-      "onclick": {
-        "enable": true,
-        "mode": "push"
-      },
-      "resize": true
-    },
-    "modes": {
-      "grab": {
-        "distance": 400,
-        "line_linked": {
-          "opacity": 1
-        }
-      },
-      "bubble": {
-        "distance": 400,
-        "size": 40,
-        "duration": 2,
-        "opacity": 8,
-        "speed": 3
-      },
-      "repulse": {
-        "distance": 200,
-        "duration": 0.4
-      },
-      "push": {
-        "particles_nb": 4
-      },
-      "remove": {
-        "particles_nb": 2
-      }
-    }
-  },
-  "retina_detect": true
-}

src/assets/translations/en-US.json

@@ -2,6 +2,7 @@
   "APP_NAME": "Mifos X",
   "Logged in as": "Logged in as",
   "Remember me": "Remember me",
+  "not_found_subtitle": "Oops.. Looks like this page doesn't exist.",
   "languages": {
     "en-US": "English",
     "fr-FR": "French",

src/assets/translations/es-MX.json

@@ -2,6 +2,7 @@
   "APP_NAME": "Mifos X",
   "Logged in as": "Sesión activa como",
   "Remember me": "Recordarme",
+  "not_found_subtitle": "Vaya... Parece que esta página no existe.",
   "languages": {
     "en-US": "Inglés",
     "fr-FR": "Francés",

src/assets/translations/fr-FR.json

@@ -2,6 +2,7 @@
   "APP_NAME": "Mifos X",
   "Logged in as": "Logged in as",
   "Remember me": "Remember me",
+  "not_found_subtitle": "Oups.. Il semble que cette page n'existe pas.",
   "languages": {
     "en-US": "English",
     "fr-FR": "French",

src/index.html

@@ -15,7 +15,6 @@
 
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:300" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
   <!-- Load environment variables -->
   <script src="assets/env.js"></script>
 </head>
@@ -48,7 +47,6 @@
     </div>
   </mifosx-web-app>
 
-  <!-- ParticlesJS -->
+
-  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
 </body>
 </html>