Add federation settings

ui/src/lib/components/FederationSettings.svelte

@@ -0,0 +1,68 @@
+<script>
+ import { createEventDispatcher } from 'svelte';
+
+ import {
+     Col,
+     Input,
+     Row,
+ } from '@sveltestrap/sveltestrap';
+
+ const dispatch = createEventDispatcher();
+
+ export let id = "";
+ export let value = { };
+
+ function changeKey(bak, to) {
+     if (bak === null && to.target.value) {
+         if (!value) value = { };
+         value[to.target.value] = { url:"" };
+         to.target.value = "";
+         value = value;
+     } else {
+         value[to.target.value] = value[bak];
+         delete value[bak];
+     }
+ }
+</script>
+
+{#if value}
+{#each Object.keys(value) as key}
+    <Row>
+        <Col>
+            <Input
+                type="string"
+                value={key}
+                on:change={() => dispatch("input")}
+                on:input={(e) => changeKey(key, e)}
+            />
+        </Col>
+        <Col>
+            <Input
+                type="string"
+                placeholder="https://reveil.fr/"
+                bind:value={value[key].url}
+                on:change={() => dispatch("input")}
+            />
+        </Col>
+    </Row>
+{/each}
+{/if}
+<Row>
+    <Col>
+        <Input
+            type="string"
+            {id}
+            placeholder="name"
+            value=""
+            on:input={(e) => changeKey(null, e)}
+        />
+    </Col>
+    <Col>
+        <Input
+            type="string"
+            placeholder="https://reveil.fr/"
+            disabled
+            value=""
+        />
+    </Col>
+</Row>