Check for group existence on landing page.

Author: jech

static/index.html

@@ -20,6 +20,8 @@ <h1 id="title" class="navbar-brand">Galène</h1>
         <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/>
       </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,50 @@
 
 'use strict';
 
-document.getElementById('groupform').onsubmit = function(e) {
+document.getElementById('groupform').onsubmit = async function(e) {
     e.preventDefault();
+    clearError();
     let group = document.getElementById('group').value.trim();
-    if(group !== '')
-        location.href = '/group/' + group + '/';
+    if(group === '')
+        return;
+    let url = '/group/' + group + '/';
+    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()}`);
+    }
+    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');