externalisation config

src/App.vue

@@ -135,6 +135,7 @@
 </template>
 
 <script>
+import { configuration } from "@/assets/config/config.js";
 import frag from "vue-frag";
 import { mapState } from "vuex";
 import { mapGetters } from "vuex";
@@ -157,7 +158,7 @@ export default {
     ...mapState(["projects", "user", "SSO_SETTED", "USER_LEVEL_PROJECTS"]),
     ...mapGetters(["project"]),
     //LOGO_PATH: () => process.env.VUE_APP_LOGO_PATH,
-    APPLICATION_NAME: () => process.env.VUE_APP_APPLICATION_NAME,
+    APPLICATION_NAME: () => configuration.VUE_APP_APPLICATION_NAME,
     PACKAGE_VERSION: () => process.env.PACKAGE_VERSION || "0",
     userFullname: function () {
       if (this.user.first_name || this.user.last_name)

src/assets/config/config.js

+var configuration = {
+    BASE_URL:"/",
+    DOMAIN:"http://localhost:8010/",
+    NODE_ENV:"development",
+    VUE_APP_LOCALE:"fr-FR",
+    VUE_APP_APPLICATION_NAME:"GéoContrib",
+    VUE_APP_APPLICATION_ABSTRACT:"Application de saisie d'informations géographiques contributive",
+    VUE_APP_LOGO_PATH:"@/assets/img/logo-neogeo-circle.png",
+    VUE_APP_DJANGO_BASE:"http://localhost:8010/",
+    VUE_APP_DJANGO_API_BASE:"http://localhost:8010/api/",
+    DEFAULT_BASE_MAP:{
+        'SERVICE': 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
+        'OPTIONS': {
+            'attribution': '&copy; contributeurs d\'<a href="https://osm.org/copyright">OpenStreetMap</a>',
+            'maxZoom': 20
+        }
+    },
+    DEFAULT_MAP_VIEW : {
+        'center': [47.0, 1.0],
+        'zoom': 4
+    },
+    GEOCODER_PROVIDERS : {
+        'ADDOK': 'addok',
+        'NOMINATIM': 'nominatim',
+        'PHOTON': 'photon'
+    },
+    SELECTED_GEOCODER : {
+        'PROVIDER': 'addok'
+    }
+    
+};
+
+export { configuration }
\ No newline at end of file

src/store/index.js

@@ -7,6 +7,7 @@ import router from '../router'
 import feature_type from "./modules/feature_type"
 import feature from "./modules/feature"
 import map from "./modules/map"
+import { configuration } from "@/assets/config/config.js";
 
 Vue.use(Vuex);
 
@@ -22,7 +23,7 @@ function updateAxiosHeader() {
 // ! À vérifier s'il y a un changement de token pendant l'éxécution de l'appli
 updateAxiosHeader();
 
-const DJANGO_API_BASE = process.env.VUE_APP_DJANGO_API_BASE;
+const DJANGO_API_BASE = configuration.VUE_APP_DJANGO_API_BASE;
 
 export default new Vuex.Store({
   modules: {
@@ -174,7 +175,7 @@ export default new Vuex.Store({
 
     GET_PROJECT_LAST_MESSAGES({ commit }, project_slug) {
       axios
-        .get(`${DJANGO_API_BASE}projects/${project_slug}/comments`)
+        .get(`${DJANGO_API_BASE}projects/${project_slug}/comments/`)
         .then((response) => commit("SET_PROJECT_COMMENTS", response.data.last_comments))
         .catch((error) => {
           throw error;
@@ -183,7 +184,7 @@ export default new Vuex.Store({
 
     GET_PROJECT_FEATURE_TYPES({ commit }, project_slug) {
       axios
-        .get(`${DJANGO_API_BASE}projects/${project_slug}/feature-types`)
+        .get(`${DJANGO_API_BASE}projects/${project_slug}/feature-types/`)
         .then((response) => commit("feature_type/SET_FEATURE_TYPES", response.data.feature_types))
         .catch((error) => {
           throw error;

src/store/modules/feature.js

 const axios = require("axios");
-const DJANGO_API_BASE = process.env.VUE_APP_DJANGO_API_BASE;
+import { configuration } from "@/assets/config/config.js";
+
+const DJANGO_API_BASE = configuration.VUE_APP_DJANGO_API_BASE;
 
 const feature = {
   namespaced: true,
@@ -46,8 +48,9 @@ const feature = {
   },
   actions: {
     GET_PROJECT_FEATURES({ commit }, project_slug) {
+      const url=`${DJANGO_API_BASE}projects/${project_slug}/feature/`;
       axios
-        .get(`${DJANGO_API_BASE}projects/${project_slug}/feature`)
+        .get(url)
         .then((response) => {
           const features = response.data.features;
           commit("SET_FEATURES", features);

src/store/modules/feature_type.js

 import axios from "axios"
+import { configuration } from "@/assets/config/config.js";
 
 const feature_type = {
   namespaced: true,
@@ -76,7 +77,7 @@ const feature_type = {
 
       if (requestType === "post") {
         return axios
-          .post(`${process.env.VUE_APP_DJANGO_API_BASE}feature-types/`, data)
+          .post(`${configuration.VUE_APP_DJANGO_API_BASE}feature-types/`, data)
           .then((response) => {
             if (response) {
               const feature_type_slug = response.data.slug;
@@ -89,7 +90,7 @@ const feature_type = {
           });
       } else if (requestType === "put") {
         return axios
-          .put(`${process.env.VUE_APP_DJANGO_API_BASE}feature-types/${getters.feature_type.slug}/`, data)
+          .put(`${configuration.VUE_APP_DJANGO_API_BASE}feature-types/${getters.feature_type.slug}/`, data)
           .then((response) => {
             if (response) {
               const feature_type_slug = response.data.slug;
@@ -111,7 +112,7 @@ const feature_type = {
         formData.append("json_file", state.fileToImport);
         formData.append("feature_type_slug", feature_type_slug);
         let url =
-          process.env.VUE_APP_DJANGO_API_BASE +
+        configuration.VUE_APP_DJANGO_API_BASE +
           'import-tasks/'
         return axios
           .post(url, formData, {
@@ -134,7 +135,7 @@ const feature_type = {
 
     GET_IMPORTS({ commit }, feature_type) {
       let url =
-        process.env.VUE_APP_DJANGO_API_BASE +
+      configuration.VUE_APP_DJANGO_API_BASE +
         "import-tasks?feature_type_slug=" +
         feature_type;
       axios

src/store/modules/map.js

@@ -75,7 +75,7 @@ const map = {
   },
 
   actions: {
-    INITIATE_MAP({ state, rootGetters, dispatch }) {
+    INITIATE_MAP({ state, rootGetters }) {
       const project = rootGetters.project
       let mapDefaultViewCenter = [46, 2]; // defaultMapView.center;
       let mapDefaultViewZoom = 5; // defaultMapView.zoom;
@@ -113,8 +113,6 @@ const map = {
       }
       mapUtil.addLayers(layersToLoad, state.serviceMap, state.optionsMap);
 
-      // Add the features
-      dispatch("ADD_FEATURES");
 
       // Remove multiple interactions with the map
       //mapUtil.getMap().dragging.disable();
@@ -123,17 +121,6 @@ const map = {
 
     },
 
-    ADD_FEATURES({ rootState }, features) {
-      const featuresToAdd = features || rootState.feature.features
-      const featureGroup = mapUtil.addFeatures(featuresToAdd.map(el => {
-        const geometry = el.geom; // * map features as geoJSON format
-        const properties = { ...el }
-        return { geometry, properties }
-      }));
-      if (featureGroup && featureGroup.getLayers().length > 0) {
-        mapUtil.getMap().fitBounds(featureGroup.getBounds());
-      }
-    },
 
     //SAVE_BASEMAPS({ state }) {
     // const data = JSON.stringify(state.basemaps);

src/views/Index.vue

@@ -108,15 +108,16 @@
 
 <script>
 import { mapState } from "vuex";
+import { configuration } from "@/assets/config/config.js";
 
 export default {
   name: "Index",
   computed: {
     ...mapState(["projects", "user", "USER_LEVEL_PROJECTS"]),
-    //LOGO_PATH: () => process.env.VUE_APP_LOGO_PATH,
-    APPLICATION_NAME: () => process.env.VUE_APP_APPLICATION_NAME,
-    APPLICATION_ABSTRACT: () => process.env.VUE_APP_APPLICATION_ABSTRACT,
-    DJANGO_BASE_URL: () => process.env.VUE_APP_DJANGO_BASE,
+    //LOGO_PATH: () => configuration.VUE_APP_LOGO_PATH,
+    APPLICATION_NAME: () => configuration.VUE_APP_APPLICATION_NAME,
+    APPLICATION_ABSTRACT: () => configuration.VUE_APP_APPLICATION_ABSTRACT,
+    DJANGO_BASE_URL: () => configuration.VUE_APP_DJANGO_BASE,
   },
   created() {
     if (this.$store.getters.project) {

src/views/feature/Feature_edit.vue

@@ -270,6 +270,11 @@ import FeatureAttachmentForm from "@/components/feature/FeatureAttachmentForm";
 import FeatureLinkedForm from "@/components/feature/FeatureLinkedForm";
 import Dropdown from "@/components/Dropdown.vue";
 import SidebarLayers from "@/components/map-layers/SidebarLayers";
+import { configuration } from "@/assets/config/config.js";
+import L from "leaflet";
+import "leaflet-draw";
+import { mapUtil } from "@/assets/js/map-util.js";
+const axios = require("axios");
 
 export default {
   name: "Feature_edit",
@@ -403,6 +408,206 @@ export default {
         this.form.title.errors = "Veuillez compléter ce champ.";
       }
     },
+
+    initMap(){
+      var geomLeaflet = {
+        'point': 'circlemarker',
+        'linestring': 'polyline',
+        'polygon': 'polygon'
+      }
+      var geomType = "{{ feature_type.geom_type }}"
+      var drawConfig = {
+        polygon: false,
+        marker: false,
+        polyline: false,
+        rectangle: false,
+        circle: false,
+        circlemarker: false,
+      }
+      drawConfig[geomLeaflet[geomType]] = true
+
+      L.drawLocal = {
+        draw: {
+          toolbar: {
+            actions: {
+              title: 'Annuler le dessin',
+              text: 'Annuler'
+            },
+            finish: {
+              title: 'Terminer le dessin',
+              text: 'Terminer'
+            },
+            undo: {
+              title: 'Supprimer le dernier point dessiné',
+              text: 'Supprimer le dernier point'
+            },
+            buttons: {
+              polyline: 'Dessiner une polyligne',
+              polygon: 'Dessiner un polygone',
+              rectangle: 'Dessiner un rectangle',
+              circle: 'Dessiner un cercle',
+              marker: 'Dessiner une balise',
+              circlemarker: 'Dessiner un point'
+            }
+          },
+          handlers: {
+            circle: {
+              tooltip: {
+                start: 'Cliquer et glisser pour dessiner le cercle.'
+              },
+              radius: 'Rayon'
+            },
+            circlemarker: {
+              tooltip: {
+                start: 'Cliquer sur la carte pour placer le point.'
+              }
+            },
+            marker: {
+              tooltip: {
+                start: 'Cliquer sur la carte pour placer la balise.'
+              }
+            },
+            polygon: {
+              tooltip: {
+                start: 'Cliquer pour commencer à dessiner.',
+                cont: 'Cliquer pour continuer à dessiner.',
+                end: 'Cliquer sur le premier point pour terminer le dessin.'
+              }
+            },
+            polyline: {
+              error: '<strong>Error:</strong> shape edges cannot cross!',
+              tooltip: {
+                start: 'Cliquer pour commencer à dessiner.',
+                cont: 'Cliquer pour continuer à dessiner.',
+                end: 'Cliquer sur le dernier point pour terminer le dessin.'
+              }
+            },
+            rectangle: {
+              tooltip: {
+                start: 'Cliquer et glisser pour dessiner le rectangle.'
+              }
+            },
+            simpleshape: {
+              tooltip: {
+                end: 'Relâcher la souris pour terminer de dessiner.'
+              }
+            }
+          }
+        },
+        edit: {
+          toolbar: {
+            actions: {
+              save: {
+                title: 'Sauver les modifications',
+                text: 'Sauver'
+              },
+              cancel: {
+                title: 'Annuler la modification, annule toutes les modifications',
+                text: 'Annuler'
+              },
+              clearAll: {
+                title: 'Effacer l\'objet',
+                text: 'Effacer'
+              }
+            },
+            buttons: {
+              edit: 'Modifier l\'objet',
+              editDisabled: 'Aucun objet à modifier',
+              remove: 'Supprimer l\'objet',
+              removeDisabled: 'Aucun objet à supprimer'
+            }
+          },
+          handlers: {
+            edit: {
+              tooltip: {
+                text: 'Faites glisser les marqueurs ou les balises pour modifier l\'élément.',
+                subtext: 'Cliquez sur Annuler pour annuler les modifications..'
+              }
+            },
+            remove: {
+              tooltip: {
+                text: 'Cliquez sur un élément pour le supprimer.'
+              }
+            }
+          }
+        }
+      };
+
+
+      var drawnItems = new L.FeatureGroup();
+      console.log(drawnItems);
+      console.log(configuration);
+      var mapDefaultViewCenter = configuration.DEFAULT_MAP_VIEW.center;
+      var mapDefaultViewZoom = configuration.DEFAULT_MAP_VIEW.zoom;
+
+      // Create the map, then init the layers and features
+      this.map = mapUtil.createMap({
+          mapDefaultViewCenter,
+          mapDefaultViewZoom
+        });
+
+      // mapUtil.addLayers(layers, serviceMap, optionsMap);
+      const currentFeatureId="12";
+      const url=configuration.BASE_URL+"/test_data/features.json";
+      axios.get(url)
+        .then((response) => {
+          const features = response.data.features;
+          if (features) {
+            const allFeaturesExceptCurrent = features.filter(feat => feat.id !== currentFeatureId);
+            mapUtil.addFeatures(allFeaturesExceptCurrent);
+          }
+        })
+        .catch((error) => {
+          throw error;
+        });
+      
+      let self=this;
+    // ------   Listen Sidebar events ---------- //
+    // Listen custom events triggered by the sidebar-layers
+    document.addEventListener('add-layers', (event) => {
+      mapUtil.removeLayers(self.map);
+      // Reverse is done because the first layer in order has to be added in the map in last.
+      // Slice is done because reverse() changes the original array, so we make a copy first
+      mapUtil.addLayers(event.detail.slice().reverse(), configuration.DEFAULT_BASE_MAP.SERVICE, configuration.DEFAULT_BASE_MAP.OPTIONS);
+    });
+
+    document.addEventListener('update-opacity', (event) => {
+      mapUtil.updateOpacity(event.detail.layerId, event.detail.opacity);
+    });
+
+    document.addEventListener('change-layers-order', (event) => {
+      // Reverse is done because the first layer in order has to be added in the map in last.
+      // Slice is done because reverse() changes the original array, so we make a copy first
+      mapUtil.updateOrder(event.detail.layers.slice().reverse());
+    });
+
+    // --------- End sidebar events ----------
+    // Check if at least one basemap exist. If not, use the default application
+      const basemaps = undefined;//JSON.parse(document.getElementById('basemaps').textContent);
+      if (!basemaps || basemaps && basemaps.length === 0) {
+        mapUtil.addLayers(null, configuration.DEFAULT_BASE_MAP.SERVICE, configuration.DEFAULT_BASE_MAP.OPTIONS);
+      }
+  this.map.addLayer(drawnItems);
+
+  var drawControlFull = new L.Control.Draw({
+    position: 'topright',
+    edit: {
+      featureGroup: drawnItems
+    },
+    draw: drawConfig,
+  })
+
+  /*var drawControlEditOnly = new L.Control.Draw({
+    position: 'topright',
+    edit: {
+      featureGroup: drawnItems
+    },
+    draw: false
+  })*/
+  this.map.addControl(drawControlFull);
+
+
+    }
   },
   created() {
     if (!this.project) {
@@ -419,7 +624,8 @@ export default {
         if (el && this.form[el]) this.form[el].value = this.feature[el];
       }
     }
-    this.$store.dispatch("map/INITIATE_MAP");
+    this.initMap();
+   
   },
 };
 

src/views/feature/Feature_list.vue

 <template>
   <div class="fourteen wide column">
+    <script type="application/javascript" src="./resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js"></script>
     <div class="feature-list-container ui grid">
       <div class="four wide column">
         <h1>Signalements</h1>
@@ -110,9 +111,9 @@
         </div>
       </div>
       <!-- map params, updated on map move // todo : brancher sur la carte probablement -->
-      <!--  <input type="hidden" name="zoom" :value="request.GET.zoom || ''" />
-      <input type="hidden" name="lat" :value="request.GET.lat || ''" />
-      <input type="hidden" name="lng" :value="request.GET.lng || ''" /> -->
+        <input type="hidden" name="zoom" v-model="zoom" />
+      <input type="hidden" name="lat" v-model="lat" />
+      <input type="hidden" name="lng" v-model="lng" /> 
     </form>
 
     <div v-show="showMap" class="ui tab active map-container" data-tab="map">
@@ -250,8 +251,13 @@
 
 <script>
 import { mapGetters, mapState } from "vuex";
+import { configuration } from "@/assets/config/config.js";
+import L from "leaflet";
+import { mapUtil } from "@/assets/js/map-util.js";
 import SidebarLayers from "@/components/map-layers/SidebarLayers";
 import Dropdown from "@/components/Dropdown.vue";
+const axios = require("axios");
+
 
 export default {
   name: "Feature_list",
@@ -298,6 +304,10 @@ export default {
         start: 0,
         end: 14,
       },
+      map:null,
+      zoom:null,
+      lat:null,
+      lng:null,
       showMap: true,
       showAddSignal: false,
     };
@@ -347,6 +357,28 @@ export default {
         this.pagination.end = this.pagination.end - 15;
       }
     },
+    addGeocoders(){
+      let geocoder;
+
+      // Get the settings.py variable SELECTED_GEOCODER_PROVIDER. This way avoids XCC attacks
+      const geocoderLabel = configuration.SELECTED_GEOCODER.PROVIDER;
+      if (geocoderLabel) {
+        const LIMIT_RESULTS = 5;
+        if (geocoderLabel === configuration.GEOCODER_PROVIDERS.ADDOK) {
+          geocoder = L.Control.Geocoder.addok({limit: LIMIT_RESULTS});
+        } else if (geocoderLabel === configuration.GEOCODER_PROVIDERS.PHOTON) {
+          geocoder = L.Control.Geocoder.photon();
+        } else if (geocoderLabel === configuration.GEOCODER_PROVIDERS.NOMINATIM) {
+          geocoder = L.Control.Geocoder.nominatim();
+        }
+
+        L.Control.geocoder({
+          placeholder: 'Chercher une adresse...',
+          geocoder: geocoder,
+        }).addTo(this.map);
+      }
+
+  },
   },
 
   created() {
@@ -356,7 +388,89 @@ export default {
     }
   },
   mounted() {
-    this.$store.dispatch("map/INITIATE_MAP");
+    //this.$store.dispatch("map/INITIATE_MAP");
+    this.zoom = this.$route.query.zoom||'';
+    this.lat = this.$route.query.lat||'';
+    this.lng = this.$route.query.lng||'';
+    var mapDefaultViewCenter = configuration.DEFAULT_MAP_VIEW.center;
+    var mapDefaultViewZoom = configuration.DEFAULT_MAP_VIEW.zoom;
+
+    this.map=mapUtil.createMap({
+      zoom:this.zoom,
+      lat:this.lat,
+      lng:this.lng,
+      mapDefaultViewCenter,
+      mapDefaultViewZoom,
+    });
+    let self=this;
+    // ------   Listen Sidebar events ---------- //
+    // Listen custom events triggered by the sidebar-layers
+    document.addEventListener('add-layers', (event) => {
+      mapUtil.removeLayers(self.map);
+      // Reverse is done because the first layer in order has to be added in the map in last.
+      // Slice is done because reverse() changes the original array, so we make a copy first
+      mapUtil.addLayers(event.detail.slice().reverse(), configuration.DEFAULT_BASE_MAP.SERVICE, configuration.DEFAULT_BASE_MAP.OPTIONS);
+    });
+
+    document.addEventListener('update-opacity', (event) => {
+      mapUtil.updateOpacity(event.detail.layerId, event.detail.opacity);
+    });
+
+    document.addEventListener('change-layers-order', (event) => {
+      // Reverse is done because the first layer in order has to be added in the map in last.
+      // Slice is done because reverse() changes the original array, so we make a copy first
+      mapUtil.updateOrder(event.detail.layers.slice().reverse());
+    });
+
+    // --------- End sidebar events ----------
+
+      const url=`${configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
+      //const url=configuration.BASE_URL+"/test_data/features.json";?output=geojson
+      axios.get(url)
+        .then((response) => {
+          const features = response.data.features;
+
+          const urlParams = new URLSearchParams(window.location.search);
+          const featureType = urlParams.get('feature_type');
+          const featureStatus = urlParams.get('status');
+          const featureTitle = urlParams.get('title');
+          const featureGroup = mapUtil.addFeatures(features, {featureType, featureStatus, featureTitle});
+          // Fit the map to bound only if no initial zoom and center are defined
+          if ((this.lat === "" || this.lng === "" || this.zoom === "") && features.length > 0) {
+            mapUtil.getMap().fitBounds(featureGroup.getBounds())
+          }
+
+
+        })
+        .catch((error) => {
+          throw error;
+        });
+
+
+      
+      // Update zoom and center on each move
+      mapUtil.addMapEventListener("moveend", () => {
+        self.zoom=mapUtil.getMap().getZoom();
+        self.lat=mapUtil.getMap().getCenter().lat;
+        self.lng=mapUtil.getMap().getCenter().lng;
+        //$formFilters.find("input[name=zoom]").val(mapUtil.getMap().getZoom())
+        //$formFilters.find("input[name=lat]").val(mapUtil.getMap().getCenter().lat)
+        //$formFilters.find("input[name=lng]").val(mapUtil.getMap().getCenter().lng)
+      });
+
+      // Check if at least one basemap exist. If not, use the default application
+      const basemaps = undefined;//JSON.parse(document.getElementById('basemaps').textContent);
+      if (!basemaps || basemaps && basemaps.length === 0) {
+        mapUtil.addLayers(null, configuration.DEFAULT_BASE_MAP.SERVICE, configuration.DEFAULT_BASE_MAP.OPTIONS);
+      }
+      setTimeout(function () { 
+        console.log(this);
+        this.addGeocoders();
+      }.bind(this), 1000)
+
+
+
+
     this.form.type.choices = [
       //* convert Set to an Array with spread "..."
       ...new Set(this.features.map((el) => el.feature_type.title)), //* use Set to eliminate duplicate values
@@ -371,6 +485,7 @@ export default {
 #map {
   width: 100%;
   min-height: 300px;
+  height: calc( 100vh - 300px );
   border: 1px solid grey;
   /* To not hide the filters */
   z-index: 1;

src/views/project/Project_detail.vue

@@ -450,7 +450,10 @@
 
 <script>
 import frag from "vue-frag";
+import { mapUtil } from "@/assets/js/map-util.js";
 import { mapGetters, mapState } from "vuex";
+import { configuration } from "@/assets/config/config.js";
+const axios = require("axios");
 
 export default {
   name: "Project_details",
@@ -491,14 +494,14 @@ export default {
   computed: {
     ...mapGetters(["project"]),
     ...mapState("feature_type", ["feature_types"]),
+    ...mapState("feature", ["features"]),
     ...mapState(["last_comments", "user"]),
-    DJANGO_BASE_URL: () =>  process.env.VUE_APP_DJANGO_BASE,
+    DJANGO_BASE_URL: () =>  configuration.VUE_APP_DJANGO_BASE,
     last_features: function () {
       // * limit to last five element of array (looks sorted chronologically, but not sure...)
       return this.$store.state.feature.features.slice(-5);
     },
   },
-
   methods: {
     refreshId() {
       return "?ver="+ Math.random()
@@ -544,7 +547,20 @@ export default {
   mounted() {
     if (this.project) {
       this.$store.dispatch("map/INITIATE_MAP");
+      const url=`${configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
+      axios.get(url)
+        .then((response) => {
+          const features = response.data.features;
+          const featureGroup = mapUtil.addFeatures(features);
+          if (featureGroup && featureGroup.getLayers().length > 0) {
+            mapUtil.getMap().fitBounds(featureGroup.getBounds());
+          }
+        })
+        .catch((error) => {
+          throw error;
+        });
     }
+
     if (this.message) {
       this.tempMessage = this.message;
       document

src/views/project/Project_edit.vue

@@ -159,6 +159,7 @@
 <script>
 const axios = require("axios");
 import Dropdown from "@/components/Dropdown.vue";
+import { configuration } from "@/assets/config/config.js";
 import { mapGetters } from "vuex";
 
 export default {
@@ -207,7 +208,7 @@ export default {
 
   computed: {
     ...mapGetters(["project"]),
-    DJANGO_BASE_URL: () => process.env.VUE_APP_DJANGO_BASE,
+    DJANGO_BASE_URL: () => configuration.VUE_APP_DJANGO_BASE,
   },
 
   methods: {
@@ -263,7 +264,7 @@ export default {
         let formData = new FormData();
         formData.append("file", this.fileToImport);
         const url =
-          process.env.VUE_APP_DJANGO_API_BASE +
+          configuration.VUE_APP_DJANGO_API_BASE +
           "projects/" +
           projectSlug +
           "/thumbnail/";
@@ -287,7 +288,7 @@ export default {
 
     async postForm() {
       // todo: check form
-      //let url = `${process.env.VUE_APP_DJANGO_API_BASE}projects/`;
+      //let url = `${configuration.VUE_APP_DJANGO_API_BASE}projects/`;
       const projectData = {
         title: this.form.title,
         description: this.form.description,
@@ -301,7 +302,7 @@ export default {
 
       if (this.action === "create" || this.action === "duplicate") {
         await axios
-          .post(`${process.env.VUE_APP_DJANGO_API_BASE}projects/`, projectData)
+          .post(`${configuration.VUE_APP_DJANGO_API_BASE}projects/`, projectData)
           .then((response) => {
             if (response && response.status === 201 && response.data) {
               //* send thumbnail after feature_type was created
@@ -317,7 +318,7 @@ export default {
       } else if (this.action === "edit") {
         await axios
           .put(
-            `${process.env.VUE_APP_DJANGO_API_BASE}projects/${this.project.slug}/`,
+            `${configuration.VUE_APP_DJANGO_API_BASE}projects/${this.project.slug}/`,
             projectData
           )
           .then((response) => {
@@ -344,7 +345,7 @@ export default {
       }
       this.form = this.project;
       /* this.form.thumbnail = //* add api base to display image src
-        process.env.VUE_APP_DJANGO_BASE + this.form.thumbnail; */
+        configuration.VUE_APP_DJANGO_BASE + this.form.thumbnail; */
       //* transform string values to objects for dropdowns display (could be in a computed)
       this.form.access_level_pub_feature = {
         name: this.project.access_level_pub_feature,

src/views/project/Project_members.vue

@@ -58,6 +58,7 @@ import axios from "axios";
 import frag from "vue-frag";
 import { mapGetters } from "vuex";
 import Dropdown from "@/components/Dropdown.vue";
+import { configuration } from "@/assets/config/config.js";
 
 export default {
   name: "Project_members",
@@ -92,7 +93,7 @@ export default {
       // };
       // console.log("validateMembers", data);
       /* axios
-        .post(`${DJANGO_API_BASE}projects/${payload.slug}/utilisateurs/`, payload.data)
+        .post(`${DJANGO_API_BASE}projet/${payload.slug}/utilisateurs/`, payload.data)
         .then((response) => {
           const user = response.data.user;
         })
@@ -103,7 +104,7 @@ export default {
     async fetchMembers() {
       return axios
         .get(
-          `${process.env.VUE_APP_DJANGO_API_BASE}projet/${this.$route.params.slug}/utilisateurs`
+          `${configuration.VUE_APP_DJANGO_API_BASE}projet/${this.$route.params.slug}/utilisateurs`
         )
         .then((response) => response.data.members)
         .catch((error) => {

src/views/registration/Login.vue

@@ -61,6 +61,8 @@
 </template>
 
 <script>
+import { configuration } from "@/assets/config/config.js";
+
 export default {
   name: "Login",
   data() {
@@ -74,9 +76,9 @@ export default {
     };
   },
   computed: {
-    LOGO_PATH: () => process.env.VUE_APP_LOGO_PATH,
-    APPLICATION_NAME: () => process.env.VUE_APP_APPLICATION_NAME,
-    APPLICATION_ABSTRACT: () => process.env.VUE_APP_APPLICATION_ABSTRACT,
+    LOGO_PATH: () => configuration.VUE_APP_LOGO_PATH,
+    APPLICATION_NAME: () => configuration.VUE_APP_APPLICATION_NAME,
+    APPLICATION_ABSTRACT: () => configuration.VUE_APP_APPLICATION_ABSTRACT,
   },
   methods: {
     login() {