Umbrella/frontend/src/routes/user/ConnectedServices.svelte

<script>
    import { t } from '../../translations.svelte.js';
    import { user } from '../../user.svelte.js';
    import { onMount } from 'svelte';

    let connections = $state([]);

    async function loadConnections(){
        let url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/oidc/connected`;

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

    onMount(loadConnections);

    async function unlink(connection){
        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/oidc/connected`;
        const resp = fetch(url,{
            method: 'DELETE',
            credentials: 'include',
            body: JSON.stringify(connection)
        });
        if (resp.ok){
            alert('succeeded');
        } else {
            alert('failed');
        }
    }
</script>

{#if connections.length>0}
<fieldset tabindex="0">
    <legend>{t('user.connected_services')}</legend>
    <table>
        <thead>
        <tr>
            <th>{t('user.service')}</th>
            <th>{t('user.foreign_id')}</th>
            <th>{t('user.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('user.unlink')}</button>
            </td>
        </tr>
        {/each}
        </tbody>
    </table>
</fieldset>
{/if}