#619 Improve 404 handling (#620)

NASA-AMMOS · Jan 24, 2025 · 32716fc · 32716fc
1 parent c07c07a
commit 32716fc
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 86 deletions.
diff --git a/public/images/fallingastronaut.jpg b/public/images/fallingastronaut.jpg
diff --git a/scripts/server.js b/scripts/server.js
@@ -532,21 +532,6 @@ app.use(cookieParser());
 app.use(cors());
 // app.set('Origin', false);
 
-// catch 404 and forward to error handler
-app.use(function (req, res, next) {
-  next(); //next(createError(404))
-});
-
-// error handler
-app.use(function (err, req, res, next) {
-  // set locals, only providing error in development
-  res.locals.message = err.message;
-  res.locals.error = req.app.get("env") === "development" ? err : {};
-  // render the error page
-  res.status(err.status || 500);
-  res.render("error");
-});
-
 /*Require all dynamic backend setup scripts
 and return functions that bulk run their functions
 */
@@ -954,6 +939,12 @@ setups.getBackendSetups(function (setups) {
     //////Setups Started//////
     setups.started(s);
 
+    // error handler
+    app.all("*", (req, res, next) => {
+      // render the error page
+      res.status(404).render("error");
+    });
+
     logger(
       "success",
       "MMGIS successfully started! It's listening on port: " + port,

diff --git a/src/essence/LandingPage/LandingPage.js b/src/essence/LandingPage/LandingPage.js
@@ -373,7 +373,7 @@ export const makeMissionNotFoundDiv = () => {
         .style('background', '#efefef')
         .style('color', '#757575')
         .style('opacity', 0)
-        .style('cursor', 'default')
+        .style('cursor', 'pointer')
         .style('z-index', 1000)
         .on('click', function () {
             document.location.href = window.location.href.split('?')[0]
@@ -392,6 +392,19 @@ export const makeMissionNotFoundDiv = () => {
         .style('transform', 'translateX(-50%)')
         .text(window.mmgisglobal.name || 'MMGIS')
 
+    notfounddiv
+        .append('p')
+        .attr('id', 'returnmmgis')
+        .style('font-family', 'lato')
+        .style('font-size', '14px')
+        .style('margin', '125px 0 90px 0')
+        .style('text-align', 'center')
+        .style('position', 'absolute')
+        .style('top', '50%')
+        .style('left', '50%')
+        .style('transform', 'translateX(-50%)')
+        .text('Click anywhere to return home...')
+
     notfounddiv
         .append('div')
         .attr('id', 'nf404')

diff --git a/views/error.pug b/views/error.pug
@@ -3,86 +3,61 @@ head
   title MMGIS
   meta(charset='utf-8')
   meta(name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0')
-  link(rel='shortcut icon' href='../resources/logo.png')
+  link(rel='shortcut icon' href='../public/images/logos/logo.png')
   style.
-    @font-face {
-    font-family: venus;
-    src: url("../public/fonts/venus-rising/Venus-Rising-Regular.ttf");
-    }
-    @font-face {
-    font-family: roboto;
-    src: url("../public/fonts/roboto/Roboto-Regular.ttf");
-    }
     @keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
+      from { opacity: 0; }
+      to   { opacity: 1; }
     }
     body, html {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    background: white;
-    user-select: none;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      background: rgb(239, 239, 239);
+      color: rgb(117, 117, 117);
+      user-select: none;
+      font-family: sans-serif;
     }
     #main-container {
-    width: 100%;
-    height: 100%;
-    animation: fadein 3.5s;
-    }
-    .background {
-    background-image: url("../public/images/fallingastronaut.jpg");
-    width: 100%;
-    height: 100%;
-    background-position: center top;
-    background-repeat: no-repeat;
-    background-size: 100% auto;
-    }
-    #top {
-    width: 100%;
-    height: 90px;
-    }
-    #middle {
-    width: 100%;
-    height: 100px;
-    }
-    #bottom {
-    width: 100%;
-    height: 50%;
+      width: 100%;
+      height: 100%;
+      animation: fadein 1.5s;
+      cursor: pointer;
     }
     #title {
-    font-family: venus;
-    font-size: 20px;
-    padding-left: 4px;
-    color: #c9d5de;
+      font-size: 20px;
+      margin: 90px 0px;
+      text-align: center;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    #code {
+      font-family: monospace;
+      font-size: 200px;
+      margin-top: 5px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      color: #555555;
     }
     #message {
-    text-align: center;
-    font-family: monospace;
-    font-size: 20px;
-    color: #eee;
-    padding-top: 37px;
-    }
-    #button {
-    text-align: center;
-    width: 100%;
-    }
-    #link {
-    text-decoration: none;
-    font-family: monospace;
-    color: #444;
-    border-bottom: 1px solid rgba(68,68,68,0);
-    transition: border-bottom 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-    }
-    #link:hover {
-    border-bottom: 1px solid rgba(68,68,68,1);
-    }
-#main-container.background
-  #top
+      font-size: 14px;
+      margin: 125px 0px 90px;
+      text-align: center;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+#main-container
+    #code 404
     #title MMGIS
-  #middle
-    #message Something went wrong.
-#bottom
+    #message Click anywhere to return home...
 footer
   script.
+    document.addEventListener('click', function() { document.location.href = window.location.origin })