Merge pull request #38 from obeliss-nlesc/37-create-404-html-file

adding 404 webpage
obeliss-nlesc · Mar 13, 2024 · 0ef0c7a · 0ef0c7a
2 parents e31e8c8 + ddf5d26
commit 0ef0c7a
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 1 deletion.
diff --git a/server.js b/server.js
@@ -282,10 +282,19 @@ async function main() {
   app.get('/room/:experimentId', validateToken, async (req, res) => {
     const params = req.user
     const userId = params.userId
+    // Check if token parameter matches url
+    if (params.experimentId != req.params.experimentId) {
+      console.log('[WARN] token experimentId and url do not match!')
+      res.status(404).sendFile(__dirname + '/webpage_templates/404.html')
+      return
+    }
+
+    // Check if experiment exists
     params.experimentId = req.params.experimentId
     const exp = experiments[params.experimentId]
     if (!exp || !exp.enabled){
-      res.status(404).send()
+      console.log(`[WARN] experiment ${params.experimentId} not found!`)
+      res.status(404).sendFile(__dirname + '/webpage_templates/404.html')
       return
     }
     const user = usersDb.get(userId) || new User(userId, params.experimentId)

diff --git a/webpage_templates/404.html b/webpage_templates/404.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<title>Waiting Room</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<style>
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loader {
+  border: 16px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 16px solid #3498db;
+  width: 120px;
+  height: 120px;
+  -webkit-animation: spin 2s linear infinite; /* Safari */
+  animation: spin 2s linear infinite;
+}
+
+.timer {
+ text-align: center;
+ font-size: 60px;
+ margin-top: 0px;
+}
+
+/* Safari */
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>
+
+<body>
+  <div class="w3-container">
+    <div id="404Div" class="w3-center w3-margin">
+      <p>Oops something went wrong!!!</p>
+    </div>
+  </div>
+</body>
+</html>
+