Init `public/config.js` with `requiredFields`, `hiddenFields`

public/config.js

+export default {
+  forms: {
+    signup: {
+      hiddenFields: [],
+      requiredFields: [
+        'first_name',
+        'last_name',
+        'email'
+      ]
+    },
+    organisation: {
+      hiddenFields: [],
+      requiredFields: [
+        'name',
+        'type'
+      ]
+    }
+  }
+};

public/config/config.json.sample

-{
-  "NODE_ENV": "development",
-  "LOCALE": "fr-FR",
-  "DOMAIN": "http://127.0.0.1",
-  "BASE_PATH": "/",
-  "ROOT_PATH": "",
-  "NEXT_DEFAULT": "/",
-  "VUE_APP_LOGIN_API": "http://127.0.0.1/login",
-  "VUE_APP_ORGANISATION_API": "http://127.0.0.1/organisation/",
-  "VUE_APP_USERGROUP_API": "http://127.0.0.1/usergroup/",
-  "VUE_APP_LOGIN_API_USERNAME": "admin",
-  "VUE_APP_LOGIN_API_PASSWORD": "CHANGE_ME"
-}

src/app.less

@@ -160,3 +160,23 @@ label.required:after {
   }
   background-color: #dc3545;
 }
+
+.not-found {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  h1 {
+    color: @blue;
+    font-size: 5em;
+  }
+  p {
+    color: @blue;
+    font-size: 1.5em;
+  }
+  .btn {
+    margin-top: 2em;
+    .b-icon {
+      margin-right: 0.5em;
+    }
+  }
+}

src/assets/locales/en.json

@@ -191,5 +191,9 @@
     "clickHere": "Click here"
   },
   "footer": "Powered by",
-  "403": "Access Denied"
+  "403": "Access Denied",
+  "notFound": {
+    "title": "Page not found",
+    "text": "The page you are trying to access doesn't exist."
+  }
 }
\ No newline at end of file

src/assets/locales/fr.json

@@ -192,5 +192,9 @@
     "clickHere": "Cliquez ici"
   },
   "footer": "Propulsé par",
-  "403": "Page non accessible"
+  "403": "Page non accessible",
+  "notFound": {
+    "title": "Page introuvable",
+    "text": "La page à laquelle vous essayez d'accéder n'existe pas."
+  }
 }
\ No newline at end of file

src/components/OrganisationCreation.vue

@@ -4,11 +4,23 @@
     <h6>{{ $t('organisationCreation.title') }}</h6>
     <br>
     <form>
-      <div class="form-row">
+
+      <!-- NAME -->
+      <div
+        v-if="isFieldVisible('name', formConfig.hiddenFields)"
+        class="form-row"
+      >
         <div class="form-group col-11">
-          <ValidationProvider rules="required" v-slot="{ classes, errors }">
+          <ValidationProvider
+            :rules="isFieldRequired('name', formConfig.requiredFields)"
+            v-slot="{ classes, errors }"
+          >
             <div class="control" :class="classes">
-              <label class="required">{{ $t('organisationCreation.form.name') }}</label>
+              <label
+                :class="isFieldRequired('name', formConfig.requiredFields)"
+              >
+                {{ $t('organisationCreation.form.name') }}
+              </label>
               <p>{{ $t('organisationCreation.form.nameHelp') }}</p>
               <input
                 v-model="formData.name"
@@ -21,7 +33,12 @@
           </ValidationProvider>
         </div>
       </div>
-      <div class="form-row">
+
+      <!-- ACRONYM -->
+      <div
+        v-if="isFieldVisible('acronym', formConfig.hiddenFields)"
+        class="form-row"
+      >
         <div class="form-group col-6">
           <div class="control">
             <label>{{ $t('organisationCreation.form.acronym') }}</label>
@@ -34,7 +51,12 @@
           </div>
         </div>
       </div>
-      <div class="form-row">
+
+      <!-- SIRET -->
+      <div
+        v-if="isFieldVisible('siret', formConfig.hiddenFields)"
+        class="form-row"
+      >
         <div class="form-group col-6">
           <label>{{ $t('organisationCreation.form.siret') }}</label>
           <input
@@ -45,11 +67,23 @@
           >
         </div>
       </div>
-      <div class="form-row">
+
+      <!-- TYPE -->
+      <div
+        v-if="isFieldVisible('type', formConfig.hiddenFields)"
+        class="form-row"
+      >
         <div class="form-group col-6">
-          <ValidationProvider rules="required" v-slot="{ classes, errors }">
+          <ValidationProvider
+            :rules="isFieldRequired('type', formConfig.requiredFields)"
+            v-slot="{ classes, errors }"
+          >
             <div class="control" :class="classes">
-              <label class="required">{{ $t('organisationCreation.form.type') }}</label>
+              <label
+                :class="isFieldRequired('type', formConfig.requiredFields)"
+              >
+                {{ $t('organisationCreation.form.type') }}
+              </label>
               <Multiselect
                 v-model="formData.type"
                 :options="organisationsTypes"
@@ -66,7 +100,12 @@
           </ValidationProvider>
         </div>
       </div>
-      <div class="form-row">
+
+      <!-- LOGO -->
+      <div
+        v-if="isFieldVisible('logo', formConfig.hiddenFields)"
+        class="form-row"
+      >
         <div class="form-group col-6">
           <label>{{ $t('organisationCreation.form.logo') }}</label>
           <p>{{ $t('organisationCreation.form.logoHelp') }}</p>
@@ -83,6 +122,8 @@
           </ValidationProvider>
         </div>
       </div>
+
+      <!-- WEBSITE -->
       <div class="form-row">
         <div class="form-group col-9">
           <label>{{ $t('organisationCreation.form.web') }}</label>
@@ -96,6 +137,8 @@
           >
         </div>
       </div>
+
+      <!-- PHONE -->
       <div class="form-row">
         <div class="form-group col-6">
           <label>{{ $t('organisationCreation.form.phone') }}</label>
@@ -107,6 +150,8 @@
           >
         </div>
       </div>
+
+      <!-- ADDRESS -->
       <div class="form-row">
         <div class="form-group col-11">
           <label>{{ $t('organisationCreation.form.address') }}</label>
@@ -116,6 +161,8 @@
           />
         </div>
       </div>
+
+      <!-- DESCRIPTION -->
       <div class="form-row">
         <div class="form-group col-11">
           <label>{{ $t('organisationCreation.form.description') }}</label>
@@ -125,6 +172,7 @@
           />
         </div>
       </div>
+
       <div class="form-row">
         <div class="form-group col-11">
           <label>
@@ -226,7 +274,11 @@ export default {
     ]),
     ...mapState('sign-up', [
       'error'
-    ])
+    ]),
+
+    formConfig() {
+      return this.$config.forms.organisation;
+    },
   },
 
   watch: {

src/main.js

@@ -19,6 +19,20 @@ import store from '@/store';
 
 Vue.config.productionTip = false;
 
+import config from '../public/config.js';
+
+Vue.mixin({
+  methods: {
+    isFieldVisible(field, hiddenFields) {
+      return !hiddenFields.includes(field);
+    },
+    isFieldRequired(field, requiredFields) {
+      return requiredFields.includes(field) ? 'required' : '';
+    }
+  }
+});
+
+Vue.prototype.$config = config;
 new Vue({
   i18n,
   router,

src/store/modules/terms-of-use.store.js

@@ -40,6 +40,7 @@ const actions = {
         message: ''
       });
       window.location.href = router.currentRoute.query.next;
+
     }
     if (response.status === 404) {
       commit('SET_ERROR', {

src/views/NotFound.vue

 <template>
-  <div>
-
+  <div class="page not-found">
+    <h1>
+      {{ $t('notFound.title') }}
+    </h1>
+    <p>
+      {{ $t('notFound.text') }}
+    </p>
   </div>
 </template>