implemented client removal

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

de.srsoftware.oidc.web/src/main/resources/en/clients.html

@@ -11,19 +11,25 @@
 <nav>
     <a id="clients" href="clients.html">Clients</a>
 </nav>
-<h1>Welcome!</h1>
-<h2>Clients</h2>
+<h1>Clients</h1>
+
 These are clients that are registered with LightOIDC:
 <table>
     <tr>
         <th>Client</th>
+        <th>ID</th>
+        <th>Redirect URLs</th>
         <th>Actions</th>
     </tr>
-    <tr>
+    <tr id="bottom">
+        <td></td>
+        <td></td>
+        <td></td>
         <td>
             <button onclick="window.location.href='newclient.html';">Add new client…</button>
         </td>
     </tr>
 </table>
+<span class="hidden" id="message">Really remove client "{}"?</span>
 </body>
 </html>

de.srsoftware.oidc.web/src/main/resources/en/clients.js

@@ -1,11 +1,30 @@
-
 async function handleClients(response){
     if (response.status == UNAUTHORIZED) {
         redirect('login.html?return_to='+encodeURI(window.location.href))
         return;
     }
     var clients = await response.json();
-    get()
+    var bottom = document.getElementById('bottom');
+    for (let id in clients){
+        var row = document.createElement("tr");
+        var client = clients[id];
+        row.innerHTML = "<td>"+client.name+"</td>\n<td>"+id+"</td>\n<td>"+client.redirect_uris.join("<br/>")+'</td>\n<td><button onclick="remove(\''+id+'\')" type="button">remove '+client.name+'</button></td>';
+        bottom.parentNode.insertBefore(row,bottom);
+    }
+}
+
+function handleRemove(response){
+    redirect("clients.html");
+}
+
+function remove(clientId){
+    var message = document.getElementById('message').innerHTML;
+    if (confirm(message.replace("{}",clientId))) {
+        fetch(api+"/client",{
+            method: 'DELETE',
+            body : JSON.stringify({ client_id : clientId })
+        }).then(handleRemove);
+    }
 }
 
 fetch(api+"/clients",{method:'POST'}).then(handleClients);

de.srsoftware.oidc.web/src/main/resources/en/style.css

@@ -14,4 +14,8 @@ a {
 fieldset th,
 form th{
     text-align: right;
+}
+
+.hidden{
+    display: none;
 }