Добавил валидацию кода подключения

Добавил код ошибки 404 при подключении к несуществующей комнате

src/routes/index.svelte

@@ -9,10 +9,15 @@
     }
 
     let id;
+    let invalidId = false;
 
     function connect() {
+        if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(id)) {
             const url=`${process.env.URL}/room/?id=${id}`;
             window.location.href = url;
+        } else {
+            invalidId = true;
+        }
     }
 
     const plcType = ['Лабораторная работа', 'Лаба', 'Практическая работа', 'Практика', 'Лабораторная', 'Доклад'];
@@ -60,6 +65,7 @@
                 <div class="inputWrap">
                     Код подключения:<br>
                     <input type="text" size="45" placeholder="43d0505c-d695-4323-9140-5d7744ec95e7" bind:value={id}>
+                    {#if invalidId}<span class="error-hint">Неверный формат кода :(</span>{/if}
                 </div>
                 <span style="text-align: center;">
                     <input class="btn" type="button" value="Подключиться" on:click={connect}>
@@ -83,6 +89,10 @@
         width: 100%;
     }
 
+    .error-hint {
+        color: indianred;
+    }
+
     .btn {
         width: 15ch;
     }

src/routes/room.svelte

@@ -10,9 +10,10 @@
     import { onMount } from 'svelte';
 
     let room;
+    let res;
     async function getRoom() {
         var url = `${process.env.URL}/api/join/?id=${parsed.id}`;
-		const res = await fetch(url);
+		res = await fetch(url);
         room = await res.json();
     }
 
@@ -106,8 +107,14 @@
         </ol>
 
         <span class="footer">Код подключения: <code>{parsed.id}</code></span>
-    {:else}
+    {:else if res==undefined}
-        Loading...
+        <div class="status">Загрузка...</div>
+    {:else if res.status==404}
+        <div class="status">
+            <h1>404</h1>
+            Такой комнаты не существует :(<br>
+            <a href={process.env.URL}>Вернуться на главную</a>
+        </div>
     {/if}
 </list>
 
@@ -198,15 +205,16 @@
         display: inline-block;
     }
 
-    /*
+    .status {
-    .individual:before {
+        width: 100%;
-        background-color: #2196F3;
+        text-align: center;
+        margin-top: 250px;
     }
 
-    .group:before {
+    .status > h1 {
-        background-color: #f57323;
+        font-size: 128px;
+        font-weight: bold;
     }
-    */
 
     @media only screen and (max-width: 1024px) {
         ol {

src/server.js

@@ -53,8 +53,12 @@ MongoClient.connect(process.env.DB_CONNECTION, { useUnifiedTopology: true })
         // id
         app.get('/api/join/', (req, res) => {
             rooms.findOne({ "id": req.query.id }).then(room => {
+                if (room !== null) {
                     res.writeHead(200, { 'Content-Type': 'application/json' });
                     res.write(JSON.stringify(room));
+                } else {
+                    res.writeHead(404, { 'Content-Type': 'application/json' });
+                }
                 res.end();
             });
         });