Merge pull request #330 from goteo/feat/implement-validation-aboutyou-form

feat: implement validation aboutyou form + format

src/components/project/edit/OwnerInfoStep.svelte

@@ -18,7 +18,12 @@
 
     let { project: _project, onPublish }: { project: Project; onPublish?: () => void } = $props();
 
-    type ContactEntry = { type: "email" | "phone" | "text"; value: string; preferred: boolean };
+    type ContactEntry = {
+        id: string;
+        type: "email" | "phone" | "text";
+        value: string;
+        preferred: boolean;
+    };
 
     let legalEntityType = $state<"individual" | "organization">("individual");
     // let prefill = $state("");
@@ -28,8 +33,8 @@
     // let country = $state("");
     // let teamDescription = $state("");
     let privateContacts = $state<ContactEntry[]>([
-        { type: "email", value: "", preferred: true },
-        { type: "phone", value: "", preferred: false },
+        { id: crypto.randomUUID(), type: "email", value: "", preferred: true },
+        { id: crypto.randomUUID(), type: "phone", value: "", preferred: false },
     ]);
     let preferredIndex = $state(0);
     let iban = $state("");
@@ -55,7 +60,10 @@
     }
 
     function addContact() {
-        privateContacts = [...privateContacts, { type: "text", value: "", preferred: false }];
+        privateContacts = [
+            ...privateContacts,
+            { id: crypto.randomUUID(), type: "text", value: "", preferred: false },
+        ];
     }
 
     function deleteContact(i: number) {
@@ -216,9 +224,9 @@
                 </p>
             </div>
             <div class="flex flex-col gap-3">
-                {#each privateContacts as contact, i}
+                {#each privateContacts as contact, i (contact.id)}
                     <div class="flex items-center gap-3">
-                        <div class="flex-1" onfocusout={() => touch(`contact-${i}`)}>
+                        <div class="flex-1" onfocusout={() => touch(contact.id)}>
                             <TextInput
                                 bind:value={contact.value}
                                 type={contact.type === "email"
@@ -232,7 +240,7 @@
                                       ? $t("pages.project.edit.aboutYou.phone")
                                       : $t("common.textPlaceholder")}
                                 name={`contact-${i}`}
-                                error={contact.preferred && touched.has(`contact-${i}`)
+                                error={contact.preferred && touched.has(contact.id)
                                     ? errors.contacts
                                     : undefined}
                             />