GUI improvements

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

de.srsoftware.oidc.web/src/main/resources/de/edit_client.html

@@ -43,6 +43,28 @@
                 </tr>
             </table>
         </fieldset>
+        <fieldset class="wide">
+            <legend>Client-Konfiguration</legend>
+            <p>Nutzen Sie die folgenden Daten, um ihren Client einzurichten:</p>
+            <table>
+                <tr>
+                    <th>Autodiscovery-URL:</th>
+                    <td><code id="autodiscover"></code></td>
+                </tr>
+                <tr>
+                    <th>Autorization-Endpunkt:</th>
+                    <td><code id="authorization"></code></td>
+                </tr>
+                <tr>
+                    <th>Token-Endpunkt:</th>
+                    <td><code id="token"></code></td>
+                </tr>
+                <tr>
+                    <th>Userinfo-Endpunkt:</th>
+                    <td><code id="userinfo"></code></td>
+                </tr>
+            </table>
+        </fieldset>
     </div>
 </body>
 </html>

de.srsoftware.oidc.web/src/main/resources/de/new_client.html

@@ -42,6 +42,28 @@
                     </tr>
                 </table>
             </fieldset>
+            <fieldset class="wide">
+                <legend>Client-Konfiguration</legend>
+                <p>Nutzen Sie die folgenden Daten, um ihren Client einzurichten:</p>
+                <table>
+                    <tr>
+                        <th>Autodiscovery-URL:</th>
+                        <td><code id="autodiscover"></code></td>
+                    </tr>
+                    <tr>
+                        <th>Autorization-Endpunkt:</th>
+                        <td><code id="authorization"></code></td>
+                    </tr>
+                    <tr>
+                        <th>Token-Endpunkt:</th>
+                        <td><code id="token"></code></td>
+                    </tr>
+                    <tr>
+                        <th>Userinfo-Endpunkt:</th>
+                        <td><code id="userinfo"></code></td>
+                    </tr>
+                </table>
+            </fieldset>
         </div>
     </body>
 </html>

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

@@ -43,6 +43,28 @@
                 </tr>
             </table>
         </fieldset>
+        <fieldset class="wide">
+            <legend>Client configuration</legend>
+            <p>User the following data to set up your client:</p>
+            <table>
+                <tr>
+                    <th>Autodiscovery URL:</th>
+                    <td><code id="autodiscover"></code></td>
+                </tr>
+                <tr>
+                    <th>Autorization endpoint:</th>
+                    <td><code id="authorization"></code></td>
+                </tr>
+                <tr>
+                    <th>Token endpoint:</th>
+                    <td><code id="token"></code></td>
+                </tr>
+                <tr>
+                    <th>Userinfo endpoint:</th>
+                    <td><code id="userinfo"></code></td>
+                </tr>
+            </table>
+        </fieldset>
     </div>
 </body>
 </html>

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

@@ -42,6 +42,28 @@
                     </tr>
                 </table>
             </fieldset>
+            <fieldset class="wide">
+                <legend>Client configuration</legend>
+                <p>User the following data to set up your client:</p>
+                <table>
+                    <tr>
+                        <th>Autodiscovery URL:</th>
+                        <td><code id="autodiscover"></code></td>
+                    </tr>
+                    <tr>
+                        <th>Autorization endpoint:</th>
+                        <td><code id="authorization"></code></td>
+                    </tr>
+                    <tr>
+                        <th>Token endpoint:</th>
+                        <td><code id="token"></code></td>
+                    </tr>
+                    <tr>
+                        <th>Userinfo endpoint:</th>
+                        <td><code id="userinfo"></code></td>
+                    </tr>
+                </table>
+            </fieldset>
         </div>
     </body>
 </html>

de.srsoftware.oidc.web/src/main/resources/en/scripts/edit_client.js

@@ -1,7 +1,16 @@
 var params = new URLSearchParams(window.location.search);
 var id = params.get('id');
 
-
+function handleAutoDiscover(response){
+    if (response.ok){
+        response.json().then(json => {
+            console.log(json);
+            setText('authorization',json.authorization_endpoint);
+            setText('token',json.token_endpoint);
+            setText('userinfo',json.userinfo_endpoint);
+        });
+    }
+}
 function handleLoadResponse(response){
     if (response.ok){
         response.json().then(json => {
@@ -48,11 +57,17 @@ function updateClient(){
     setTimeout(resetButton,4000);
 }
 
-fetch(api+'/client',
+document.addEventListener("DOMContentLoaded", function(event) { // wait until page loaded
-    {
+    fetch(api+'/client', {
         method: 'POST',
         body: JSON.stringify({
             client_id : id
         }),
         credentials:'include'
     }).then(handleLoadResponse);
+    var autodiscover = window.location.origin+'/.well-known/openid-configuration';
+    setText('autodiscover',autodiscover);
+    fetch(autodiscover).then(handleAutoDiscover);
+});
+
+

de.srsoftware.oidc.web/src/main/resources/en/scripts/new_client.js

@@ -14,7 +14,7 @@ function addClient(){
         },
         body : JSON.stringify(newData),
         credentials:'include'
-    }).then(handleClientdResponse);
+    }).then(handleClientResponse);
 
     setText('button','sent…');
     setTimeout(function(){
@@ -23,7 +23,18 @@ function addClient(){
     },10000);
 }
 
-function handleClientdResponse(response){
+function handleAutoDiscover(response){
+    if (response.ok){
+        response.json().then(json => {
+            console.log(json);
+            setText('authorization',json.authorization_endpoint);
+            setText('token',json.token_endpoint);
+            setText('userinfo',json.userinfo_endpoint);
+        });
+    }
+}
+
+function handleClientResponse(response){
     if (response.ok){
         redirect("clients.html");
     } else {
@@ -36,4 +47,10 @@ function checkPermissions(){
     if (user && !user.permissions.includes('MANAGE_CLIENTS')) redirect("index.html");
 }
 
+
+document.addEventListener("DOMContentLoaded", function(event) { // wait until page loaded
 setTimeout(checkPermissions,100);
+    var autodiscover = window.location.origin+'/.well-known/openid-configuration';
+    setText('autodiscover',autodiscover);
+    fetch(autodiscover).then(handleAutoDiscover);
+});

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

@@ -67,11 +67,18 @@ body fieldset {
     display: inline-block;
 }
 
+code {
+    font-weight: bold;
+    color: orange;
+}
+
 .wide input, textarea{
     width: 600px;
 }
 
-
+th {
+    padding: 10px;
+}
 input:-webkit-autofill{
     filter: none;
     box-shadow: 0 0 0 100px rgb(38, 103, 152) inset;