working on login service management

frontend/src/App.svelte

@@ -3,6 +3,7 @@
     import { loadTranslation } from './translations.svelte.js';
     import { user } from './user.svelte.js';
     import { Router, Route } from 'svelte-tiny-router';
+    import EditService from "./routes/user/EditService.svelte";
     import Footer   from "./Components/Footer.svelte";
     import Login    from "./Components/Login.svelte";
     import Menu     from "./Components/Menu.svelte";
@@ -31,6 +32,7 @@
             <Menu />
             <Route path="/user" component={User} />
             <Route path="/user/:user_id/edit" component={UserEdit} />
+            <Route path="/user/service/:serviceName" component={EditService} />
             <Route>
                 <p>Page not found</p>
             </Route>

frontend/src/routes/user/EditService.svelte

@@ -0,0 +1,79 @@
+<script>
+    import { onMount } from 'svelte';
+    import { t } from '../../translations.svelte.js';
+    import { useTinyRouter } from 'svelte-tiny-router';
+
+    let { serviceName } = $props();
+    let service = $state({})
+    let caption = $state(t('user.save_service'));
+    let message = $state(t('user.loading_data'));
+    let router = useTinyRouter();
+    let disabled = $state(false);
+
+    onMount(async () => {
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/service/${serviceName}`;
+        const resp = await fetch(url,{credentials:'include'});
+        if (resp.ok){
+            const json = await resp.json();
+            for (let key of Object.keys(json)) service[key] = json[key];
+        } else {
+            message = await resp.text();
+            if (!message) message = t(resp);
+        }
+    });
+
+    async function update(){
+        caption = t('user.data_sent');
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/service/${serviceName}`;
+        const resp = await fetch(url,{
+            credentials: 'include',
+            method: 'PATCH',
+            body: JSON.stringify(service)
+        });
+        if (resp.ok){
+            caption = t('user.saved');
+            router.navigate('/user');
+        } else {
+            caption = await resp.text();
+            if (!caption) caption = t(resp);
+        }
+    }
+</script>
+
+<fieldset>
+    <legend>{t('user.edit_service',serviceName)}</legend>
+    {#if service.name}
+    <table>
+        <tbody>
+            <tr>
+                <th>{t('user.name')}</th>
+                <td>
+                    <input type="text" bind:value={service.name} />
+                </td>
+            </tr>
+            <tr>
+                <th>{t('user.client_id')}</th>
+                <td>
+                    <input type="text" bind:value={service.client_id} />
+                </td>
+            </tr>
+            <tr>
+                <th>{t('user.client_secret')}</th>
+                <td>
+                    <input type="text" bind:value={service.client_secret} />
+                </td>
+            </tr>
+            <tr>
+                <th>{t('user.base_url')}</th>
+                <td>
+                    <input type="text" bind:value={service.url} />
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <button onclick={update} {disabled}>{caption}</button>
+    <button onclick={() => router.navigate('/user')} {disabled}>{t('user.abort')}</button>
+    {:else}
+    {message}
+    {/if}
+</fieldset>

frontend/src/routes/user/LoginServices.svelte

@@ -16,6 +16,7 @@
             for (let service of json) services.push(service);
         }
     });
+
 </script>
 
 <fieldset tabindex="0">
@@ -34,7 +35,7 @@
                 <td>
                     <button>{t('user.connect_service')}</button>
                     {#if user.permissions.includes('MANAGE_LOGIN_SERVICES')}
-                    <button>{t('user.edit')}</button>
+                    <button onclick={() => router.navigate(`/user/service/${service}`)}>{t('user.edit')}</button>
                     <button>{t('user.delete')}</button>
                     {/if}
                 </td>