implemented oidc management

frontend/src/App.svelte

@@ -33,7 +33,8 @@
             <Menu />
             <Route path="/user" component={User} />
             <Route path="/user/:user_id/edit" component={UserEdit} />
-            <Route path="/user/oidc/:serviceName" component={EditService} />
+            <Route path="/user/oidc/add" component={EditService} />
+            <Route path="/user/oidc/edit/:serviceName" component={EditService} />
             <Route>
                 <p>Page not found</p>
             </Route>

frontend/src/routes/user/ConnectedServices.svelte

@@ -11,10 +11,8 @@
         let resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             const arr = await resp.json();
-            for (let entry of arr){
-                connections.push(entry)
-                console.log(entry);
-            }
+            while (connections.length) connections.pop();
+            for (let entry of arr) connections.push(entry);
         }
     }
 
@@ -22,13 +20,13 @@
 
     async function unlink(connection){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/oidc/connected`;
-        const resp = fetch(url,{
+        const resp = await fetch(url,{
             method: 'DELETE',
             credentials: 'include',
             body: JSON.stringify(connection)
         });
         if (resp.ok){
-            alert('succeeded');
+            loadConnections();
         } else {
             alert('failed');
         }

frontend/src/routes/user/EditService.svelte

@@ -11,7 +11,7 @@
     let disabled = $state(false);
 
     onMount(async () => {
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/service/${serviceName}`;
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/oidc/${serviceName}`;
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             const json = await resp.json();
@@ -24,7 +24,7 @@
 
     async function update(){
         caption = t('user.data_sent');
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/service/${serviceName}`;
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/oidc/${serviceName}`;
         const resp = await fetch(url,{
             credentials: 'include',
             method: 'PATCH',
@@ -42,7 +42,7 @@
 
 <fieldset>
     <legend>{t('user.edit_service',serviceName)}</legend>
-    {#if service.name}
+    {#if service.name || !serviceName}
     <table>
         <tbody>
             <tr>

frontend/src/routes/user/LoginServices.svelte

@@ -8,22 +8,48 @@
 
     let services = $state([]);
 
-    onMount(async () => {
+    async function loadButtons(){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/oidc/buttons`;
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             const json = await resp.json();
+            while (services.length) services.pop();
             for (let service of json) services.push(service);
         }
-    });
+    }
 
+    onMount(loadButtons);
+
+    async function connect(service){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/oidc/redirect/${service}`;
+        const resp = await fetch(url,{credentials:'include'});
+        if (resp.ok){
+            var json = await resp.json();
+            if (json.authorization_endpoint) {
+                var endpoint = json.authorization_endpoint;
+                delete json.authorization_endpoint;
+                location.href = endpoint + '?' + new URLSearchParams(json);
+            }
+        }
+    }
+
+    async function drop(service){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/oidc/${service}`;
+        const resp = await fetch(url,{
+            credentials: 'include',
+            method: 'DELETE'
+        });
+        if (resp.ok) loadButtons();
+    }
 </script>
 
 <fieldset tabindex="0">
     <legend>
         {t('user.login_services')}
-        <button>{t('user.add_login_service')}</button>
-        </legend>
+        {#if user.permissions.includes('MANAGE_LOGIN_SERVICES')}
+        <button onclick={() => router.navigate('/user/oidc/add')}>{t('user.add_login_service')}</button>
+        {/if}
+    </legend>
     <table>
         <thead>
             <tr>
@@ -36,10 +62,10 @@
             <tr>
                 <td>{service}</td>
                 <td>
-                    <button>{t('user.connect_service')}</button>
+                    <button onclick={() => connect(service)}>{t('user.connect_service')}</button>
                     {#if user.permissions.includes('MANAGE_LOGIN_SERVICES')}
-                    <button onclick={() => router.navigate(`/user/oidc/${service}`)}>{t('user.edit')}</button>
-                    <button>{t('user.delete')}</button>
+                    <button onclick={() => router.navigate(`/user/oidc/edit/${service}`)}>{t('user.edit')}</button>
+                    <button onclick={() => drop(service)}>{t('user.delete')}</button>
                     {/if}
                 </td>
             </tr>