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 @@
-
+
+ +

Public groups

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