From 3d857120dbbf5122bbe5fa32de5f6ed1f5174f2d Mon Sep 17 00:00:00 2001
From: Juliusz Chroboczek <jch@irif.fr>
Date: Wed, 31 Aug 2022 17:04:02 +0200
Subject: [PATCH] Check for group existence on landing page.

---
 static/index.html   |  4 +++-
 static/mainpage.css |  6 +++++
 static/mainpage.js  | 58 +++++++++++++++++++++++++++++++++++++++++----
 3 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/static/index.html b/static/index.html
index e5d9d7f..6de8e94 100644
--- a/static/index.html
+++ b/static/index.html
@@ -18,8 +18,10 @@
       <form id="groupform">
         <label for="group">Group:</label>
         <input id="group" type="text" name="group" class="form-control form-control-inline"/>
-        <input type="submit" value="Join" class="btn btn-default btn-large"/><br/>
+        <input id='submitbutton' type="submit" value="Join" class="btn btn-default btn-large"/><br/>
       </form>
+
+      <p id="errormessage"></p>
   
       <div id="public-groups" class="groups">
         <h2>Public groups</h2>
diff --git a/static/mainpage.css b/static/mainpage.css
index 4c38e1c..d94bc7b 100644
--- a/static/mainpage.css
+++ b/static/mainpage.css
@@ -4,6 +4,12 @@ body {
     flex-direction: column;
 }
 
+#errormessage {
+    color: red;
+    font-weight: bold;
+    height: 12px;
+}
+
 .groups {
 }
 
diff --git a/static/mainpage.js b/static/mainpage.js
index bc68a40..73da379 100644
--- a/static/mainpage.js
+++ b/static/mainpage.js
@@ -20,13 +20,63 @@
 
 'use strict';
 
-document.getElementById('groupform').onsubmit = function(e) {
+document.getElementById('groupform').onsubmit = async function(e) {
     e.preventDefault();
-    let group = document.getElementById('group').value.trim();
-    if(group !== '')
-        location.href = '/group/' + group + '/';
+    clearError();
+    let groupinput = document.getElementById('group')
+    let button = document.getElementById('submitbutton');
+
+    let group = groupinput.value.trim();
+    if(group === '')
+        return;
+    let url = '/group/' + group + '/';
+
+    try {
+        groupinput.disabled = true;
+        button.disabled = true;
+        try {
+            let resp = await fetch(url, {
+                method: 'HEAD',
+            });
+            if(!resp.ok) {
+                if(resp.status === 404)
+                    displayError('No such group');
+                else
+                    displayError(`The server said: ${resp.status} ${resp.statusText}`);
+                return;
+            }
+        } catch(e) {
+            displayError(`Coudln't connect: ${e.toString()}`);
+            return;
+        }
+    } finally {
+        groupinput.disabled = false;
+        button.disabled = false;
+    }
+
+    location.href = url;
 };
 
+var clearErrorTimeout = null;
+
+function displayError(message) {
+    clearError();
+    let p = document.getElementById('errormessage');
+    p.textContent = message;
+    clearErrorTimeout = setTimeout(() => {
+        let p = document.getElementById('errormessage');
+        p.textContent = '';
+        clearErrorTimeout = null;
+    }, 2500);
+}
+
+function clearError() {
+    if(clearErrorTimeout != null) {
+        clearTimeout(clearErrorTimeout);
+        clearErrorTimeout = null;
+    }
+}
+
 async function listPublicGroups() {
     let div = document.getElementById('public-groups');
     let table = document.getElementById('public-groups-table');