implemented user impersonization

frontend/src/routes/user/List.svelte

@@ -13,12 +13,24 @@
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             const json = await resp.json();
-            for (let user of json) users.push(user);
+            for (let u of json) users.push(u);
         }
     });
+
+    async function impersonate(userId){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/${userId}/impersonate`;
+        const resp = await fetch(url,{
+            method: 'POST',
+            credentials: 'include'
+        });
+        if (resp.ok){
+            const json = await resp.json();
+            for (let key of Object.keys(json)) user[key] = json[key];
+        }
+    }
 </script>
 
-<fieldset>
+<fieldset tabindex="0">
     <legend>{t('user.list')}</legend>
     <table>
         <thead>
@@ -38,6 +50,9 @@
                 <td>{u.email}</td>
                 <td>{u.language}</td>
                 <td>
+                    {#if user.permissions.includes('IMPERSONATE')}
+                    <button onclick={() => impersonate(u.id)}>{t('user.impersonate')}</button>
+                    {/if}
                     {#if user.permissions.includes('UPDATE_USERS')}
                     <button onclick={() => router.navigate(`/user/${u.id}/edit`)}>{t('user.edit')}</button>
                     {/if}

frontend/src/routes/user/LoginServices.svelte

@@ -0,0 +1,45 @@
+<script>
+    import { onMount } from 'svelte';
+    import { t } from '../../translations.svelte.js';
+    import { useTinyRouter } from 'svelte-tiny-router';
+    import { user } from '../../user.svelte.js';
+
+    const router = useTinyRouter();
+
+    let services = $state([]);
+
+    onMount(async () => {
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/service/buttons`;
+        const resp = await fetch(url,{credentials:'include'});
+        if (resp.ok){
+            const json = await resp.json();
+            for (let service of json) services.push(service);
+        }
+    });
+</script>
+
+<fieldset tabindex="0">
+    <legend>{t('user.login_services')} <button>{t('user.add_login_service')}</button></legend>
+    <table>
+        <thead>
+            <tr>
+                <th>{t('user.service')}</th>
+                <th>{t('user.actions')}</th>
+            </tr>
+        </thead>
+        <tbody>
+        {#each services as service,i}
+            <tr>
+                <td>{service}</td>
+                <td>
+                    <button>{t('user.connect_service')}</button>
+                    {#if user.permissions.includes('MANAGE_LOGIN_SERVICES')}
+                    <button>{t('user.edit')}</button>
+                    <button>{t('user.delete')}</button>
+                    {/if}
+                </td>
+            </tr>
+        {/each}
+        </tbody>
+    </table>
+</fieldset>

frontend/src/routes/user/User.svelte

@@ -5,6 +5,7 @@
 
     import EditPassword from './EditPassword.svelte';
     import UserList from './List.svelte';
+    import LoginServiceList from './LoginServices.svelte';
 
     const router = useTinyRouter();
 
@@ -90,4 +91,5 @@
 {#if user.permissions.includes('LIST_USERS')}
 <UserList />
 {/if}
+<LoginServiceList />