united table of connected services with table of connectable services

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

frontend/src/routes/user/ConnectedServices.svelte

@@ -1,61 +0,0 @@
-<script>
-    import { onMount } from 'svelte';
-
-    import { api }     from '../../urls.svelte.js';
-    import { t }       from '../../translations.svelte.js';
-    import { user }    from '../../user.svelte.js';
-
-    let connections = $state([]);
-
-    async function loadConnections(){
-        const url  = api('user/oidc/connected');
-        const resp = await fetch(url,{credentials:'include'});
-        if (resp.ok){
-            const arr = await resp.json();
-            while (connections.length) connections.pop();
-            for (let entry of arr) connections.push(entry);
-        }
-    }
-
-    onMount(loadConnections);
-
-    async function unlink(connection){
-        const url  = api('user/oidc/connected');
-        const resp = await fetch(url,{
-            method      : 'DELETE',
-            credentials : 'include',
-            body        : JSON.stringify(connection)
-        });
-        if (resp.ok){
-            loadConnections();
-        } else {
-            alert('failed');
-        }
-    }
-</script>
-
-{#if connections.length>0}
-<fieldset tabindex="0">
-    <legend>{t('connected_services')}</legend>
-    <table>
-        <thead>
-        <tr>
-            <th>{t('service')}</th>
-            <th>{t('foreign_id')}</th>
-            <th>{t('actions')}</th>
-        </tr>
-        </thead>
-        <tbody>
-        {#each connections as connection,i}
-        <tr>
-            <td>{connection.service_id}</td>
-            <td>{connection.foreign_id}</td>
-            <td>
-                <button onclick={() => unlink(connection)}>{t('unlink')}</button>
-            </td>
-        </tr>
-        {/each}
-        </tbody>
-    </table>
-</fieldset>
-{/if}

frontend/src/routes/user/LoginServices.svelte

@@ -1,17 +1,19 @@
 <script>
-    import { onMount }       from 'svelte';
-    import { useTinyRouter } from 'svelte-tiny-router';
+    import { onMount }        from 'svelte';
+    import { useTinyRouter }  from 'svelte-tiny-router';
 
-    import { api }           from '../../urls.svelte.js';
-    import { t }             from '../../translations.svelte.js';
-    import { user }          from '../../user.svelte.js';
+    import { api, drop, get } from '../../urls.svelte.js';
+    import { t }              from '../../translations.svelte.js';
+    import { user }           from '../../user.svelte.js';
 
     const router = useTinyRouter();
+
+    let connections = $state({});
     let services = $state([]);
 
     async function connect(service){
         const url  = api(`user/oidc/redirect/${service}`);
-        const resp = await fetch(url,{credentials:'include'});
+        const resp = await get(url);
         if (resp.ok){
             var json = await resp.json();
             if (json.authorization_endpoint) {
@@ -22,26 +24,48 @@
         }
     }
 
+    async function dropConn(service){
+        const url = api(`user/oidc/${service}`);
+        const resp = await drop(url);
+        if (resp.ok) loadConnections();
+    }
+
+    async function load(){
+        await loadButtons();
+        loadConnections();
+    }
+
     async function loadButtons(){
         const url  = api(`user/oidc/buttons`);
-        const resp = await fetch(url,{credentials:'include'});
-        if (resp.ok){
+        const resp = await get(url);
+        if (resp.ok) services = await resp.json();
+    }
+
+    async function loadConnections(){
+        const url  = api('user/oidc/connected');
+        const resp = await get(url);
+        if (resp.ok) {
             const json = await resp.json();
-            while (services.length) services.pop();
-            for (let service of json) services.push(service);
+            connections = {};
+            for (let conn of json) connections[conn.service_id] = conn;
         }
     }
 
-    async function drop(service){
-        const url = api(`user/oidc/${service}`);
+    async function unlink(connection){
+        const url  = api('user/oidc/connected');
         const resp = await fetch(url,{
+            method      : 'DELETE',
             credentials : 'include',
-            method      : 'DELETE'
+            body        : JSON.stringify(connection)
         });
-        if (resp.ok) loadButtons();
+        if (resp.ok){
+            loadConnections();
+        } else {
+            alert('failed');
+        }
     }
 
-    onMount(loadButtons);
+    onMount(load);
 </script>
 
 <fieldset tabindex="0">
@@ -55,6 +79,7 @@
         <thead>
             <tr>
                 <th>{t('service')}</th>
+                <th>{t('foreign_id')}</th>
                 <th>{t('actions')}</th>
             </tr>
         </thead>
@@ -62,13 +87,23 @@
         {#each services as service,i}
             <tr>
                 <td>{service}</td>
+                {#if connections[service]}
+                <td>
+                    {connections[service].foreign_id}
+                </td>
+                <td>
+                    <button onclick={() => unlink(connections[service])}>{t('unlink')}</button>
+                </td>
+                {:else}
+                <td></td>
                 <td>
                     <button onclick={() => connect(service)}>{t('connect_service')}</button>
                     {#if user.permissions.includes('MANAGE_LOGIN_SERVICES')}
                     <button onclick={() => router.navigate(`/user/oidc/edit/${service}`)}>{t('edit')}</button>
-                    <button onclick={() => drop(service)}>{t('delete')}</button>
+                    <button onclick={() => dropConn(service)}>{t('delete')}</button>
                     {/if}
                 </td>
+                {/if}
             </tr>
         {/each}
         </tbody>

frontend/src/routes/user/User.svelte

@@ -2,7 +2,6 @@
     import { user }         from '../../user.svelte.js';
     import { t }            from '../../translations.svelte.js';
 
-    import Services         from './ConnectedServices.svelte';
     import LoginServiceList from './LoginServices.svelte';
     import Profile          from './Profile.svelte';
     import UserList         from './List.svelte';
@@ -19,7 +18,6 @@
 <h1>{t('user_module')}</h1>
 
 <Profile />
-<Services />
 
 {#if user.permissions.includes('LIST_USERS')}
 <UserList />