Check for group existence on landing page.

Author: jech

static/index.html

@@ -18,8 +18,10 @@ <h1 id="title" class="navbar-brand">Galène</h1>
       <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>

static/mainpage.css

@@ -4,6 +4,12 @@ body {
     flex-direction: column;
 }
 
+#errormessage {
+    color: red;
+    font-weight: bold;
+    height: 12px;
+}
+
 .groups {
 }
 

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');