check unique custom form names, display errors & fix leaflet background color

src/App.vue

@@ -264,6 +264,11 @@ footer {
   flex-direction: column;
   justify-content: center;
 }
+
+.leaflet-container {
+  background: white !important;
+}
+
 @media screen and (min-width: 560px) {
   .mobile {
     display: none !important;

src/components/feature_type/FeatureTypeCustomForm.vue

@@ -283,6 +283,28 @@ export default {
       return true;
     },
 
+    checkUniqueName() {
+      console.log(this.$store);
+      console.log(this.$store.state);
+      console.log(this.$store.state.feature_type);
+      if (this.form.name.value) {
+        const occurences = this.$store.state.feature_type.customForms
+          .map((el) => el.name)
+          .filter((el) => el === this.form.name.value);
+        console.log("occurences", occurences);
+        console.log(occurences.length);
+        if (occurences.length > 1) {
+          console.log("duplicate", this.form.name.value);
+          this.form.name.errors = [
+            "Les champs personnalisés ne peuvent pas avoir des noms similaires.",
+          ];
+          return false;
+        }
+      }
+      this.form.name.errors = [];
+      return true;
+    },
+
     checkCustomForm() {
       if (this.form.label.value === null) {
         this.form.label.errors = ["Veuillez compléter ce champ."];
@@ -297,10 +319,11 @@ export default {
         ];
         this.form.label.errors = [];
         return false;
+      } else if (this.checkUniqueName()) {
+        this.form.label.errors = [];
+        this.form.name.errors = [];
+        return true;
       }
-      this.form.label.errors = [];
-      this.form.name.errors = [];
-      return true;
     },
   },