From b7fbbfd134311cef8766501a18dd0aed66e5ec8a Mon Sep 17 00:00:00 2001
From: Maud Royer <hello@maudroyer.fr>
Date: Mon, 24 Jun 2024 15:42:36 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20url=20du=20serveur=20d'API=20en=20param?=
 =?UTF-8?q?=C3=A8tre?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                  | 6 +++++-
 src/FormComponent.svelte   | 4 +++-
 src/components/Form.svelte | 7 ++++---
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index df60723..52cc6a7 100644
--- a/README.md
+++ b/README.md
@@ -23,9 +23,13 @@ import ResinFormulaire from '@medialab/resin-formulaire';
 <!-- mypage.html -->
 <script src="mybundle.js"></script>
 
-<resin-formulaire />
+<resin-formulaire apiServer="http://locahost:8000" />
 ```
 
+`apiServer` doit contenir la base d'URL [du serveur
+de l'API de Résin](https://github.com/medialab/resin-api),
+sous la forme `protocol://domain[:port]`.
+
 Par défaut, le formulaire affiché est le formulaire d'inscription.
 Si les paramètres `uid` et `token` sont passés en querystring,
 le formulaire affiché est le formulaire de modification de profil.
diff --git a/src/FormComponent.svelte b/src/FormComponent.svelte
index ddbda26..b32e0c6 100644
--- a/src/FormComponent.svelte
+++ b/src/FormComponent.svelte
@@ -8,6 +8,8 @@
 <script lang="ts">
   import SubscribeForm from "./components/Form.svelte";
 
+  export let apiServer = "http://localhost:8000";
+
   // Get uid and token params
   const urlParams = new URLSearchParams(window.location.search);
   const uid = urlParams.get("uid");
@@ -20,7 +22,7 @@
 
     let res;
     try {
-      res = await fetch(`http://localhost:8000/api/members/${uid}/`, {
+      res = await fetch(`${apiServer}/api/members/${uid}/`, {
         headers: {
           "Content-Type": "application/json",
           ...(token ? { Authorization: `Token ${token}` } : {}),
diff --git a/src/components/Form.svelte b/src/components/Form.svelte
index 1e2868e..4eb1857 100644
--- a/src/components/Form.svelte
+++ b/src/components/Form.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Autocomplete from "./Autocomplete.svelte";
 
+  export let apiServer = "http://localhost:8000";
   export let success = false;
   export let initialData: Record<string, any> = {};
   export let token: string | null;
@@ -27,7 +28,7 @@
   const getFormFields = async (): Promise<Map<string, FormField>> =>
     (
       await (
-        await fetch("http://localhost:8000/api/members/", {
+        await fetch(`${apiServer}/api/members/`, {
           headers: {
             "Content-Type": "application/json",
           },
@@ -43,7 +44,7 @@
   ].map(
     (endpoint) => async () =>
       await (
-        await fetch("http://localhost:8000/api/" + endpoint + "/", {
+        await fetch(`${apiServer}/api/` + endpoint + "/", {
           headers: {
             "Content-Type": "application/json",
           },
@@ -86,7 +87,7 @@
     }
 
     const response = await fetch(
-      `http://localhost:8000/api/members/${isUpdate ? `${initialData.id}/` : ""}`,
+      `${apiServer}/api/members/${isUpdate ? `${initialData.id}/` : ""}`,
       {
         method: isUpdate ? "PATCH" : "POST",
         body: formData,