Merge branch 'redmine-issues/23565' into '1.2'

REDMINE_ISSUE-23565 | New OrganisationSignUp view (for ProConnect connection)

See merge request onegeo-suite/sites/onegeo-suite-site-login-vuejs!69

src/api/loginAPI.js

@@ -23,9 +23,21 @@ const LOGIN_API_PATH = process.env.VUE_APP_LOGIN_API_PATH;
 const loginAPI = {
 
   async signUp(data) {
-    const url = new URL(path.join(`${i18n.locale}${LOGIN_API_PATH}`, `/signup/`), DOMAIN);
-    const response = await axios.post(url, data);
-    if (response.status === 201) {
+    const hasUser = data.user_id;
+    let response;
+    let expected_status;
+    if (hasUser) {
+      const url = new URL(path.join(`${i18n.locale}${LOGIN_API_PATH}`, `/signup/`, data.user_id, '/'), DOMAIN);
+      response = await axios.patch(url, data);
+      expected_status = 200;
+    }
+    else {
+      const url = new URL(path.join(`${i18n.locale}${LOGIN_API_PATH}`, `/signup/`), DOMAIN);
+      response = await axios.post(url, data);
+      expected_status = 201;
+    }
+
+    if (response.status === expected_status) {
       return response.data;
     } else {
       console.error(response);

src/assets/locales/en.json

@@ -2,6 +2,7 @@
   "titles": {
     "forgottenpassword": "Forgotten password",
     "notfound": "Not found",
+    "organisationsignup": "Organisation Signup",
     "reinitpassword": "Password reinitialization",
     "signin": "Login",
     "signout": "Signout",
@@ -101,6 +102,12 @@
     "placeholder": "Email address",
     "confirmationButton": "Send reinitialization email"
   },
+  "organisationsignup": {
+    "title": "New organisation",
+    "subtitle": "Request an organisation",
+    "secondTitle": "A confirmation e-mail will be sent to your address",
+    "requiredFields": "* Required fields"
+  },
   "reinitPassword": {
     "title": "Set a new Password",
     "newLabel": "New password",

src/assets/locales/fr.json

@@ -2,6 +2,7 @@
   "titles": {
     "forgottenpassword": "Mot de passe oublié",
     "notfound": "Page non trouvé",
+    "organisationsignup": "Création d'organisation",
     "reinitpassword": "Réinitialisation du mot de passe",
     "signin": "Connexion",
     "signout": "Déconnexion",
@@ -102,6 +103,12 @@
     "confirmationButton": "Envoyer un e-mail de réinitialisation"
 
   },
+  "organisationsignup": {
+    "title": "Nouvelle organisation",
+    "subtitle": "Sollicitez la création d'une organisation",
+    "secondTitle": "Un e-mail de confirmation sera envoyé à l'adresse indiquée",
+    "requiredFields": "* Champs obligatoires"
+  },
   "reinitPassword": {
     "title": "Choisissez un nouveau mot de passe",
     "newLabel": "Nouveau mot de passe",

src/components/OrganisationCreation.vue

@@ -295,17 +295,29 @@ export default {
     SearchUsergroups
   },
 
+  props: {
+    name: {
+      type: String,
+      default: null
+    },
+    siret: {
+      type: String,
+      default: null
+    }
+  },
+
   data() {
     return {
       formData: {
-        name: null,
+        name: this.name || null,
         sigle: null,
-        siret: null,
+        siret: this.siret || null,
         type: null,
         web: null,
         postalAddress: null,
         tel: null,
-        description: null
+        description: null,
+        isValid: false,
       },
       thumbnail: null,
       spheres: []
@@ -394,7 +406,7 @@ export default {
     removeOrgFromSphere(e) {
       const index = this.spheres.findIndex(el => el.id === e.id);
       this.spheres.splice(index, 1);
-    }
+    },
   }
 }
 </script>

src/components/OrganisationSelector.vue

@@ -37,7 +37,7 @@
             v-if="organisation"
             class="multiselect__clear"
             data-test="organisationSelector-removeOrganisation"
-            @click.prevent.stop="organisation = null"
+            @click.prevent.stop="clearOrganisation()"
           >
             <b-icon-x font-scale="2"/>
           </div>
@@ -53,7 +53,7 @@
         {{ $t('signup.form.organisation.help.text') }}
         <a
           data-test="organisationSelector-showCreationFormTrue"
-          @click="showCreationForm = true"
+          @click="updateShowCreationForm(true)"
         >
           {{ $t('signup.form.organisation.help.link') }}
         </a>
@@ -62,8 +62,10 @@
     <OrganisationCreation
       v-if="showCreationForm"
       data-test="organisationSelector-showCreationFormFalse"
+      :name="displayName"
+      :siret="registrationNumber"
       @update="updateOrganisationToCreate"
-      @cancel="showCreationForm = false"
+      @cancel="updateShowCreationForm(false)"
     />
   </div>
 </template>
@@ -79,6 +81,20 @@ export default {
   components: {
     OrganisationCreation
   },
+  props: {
+    showCreationForm: {
+      type: Boolean,
+      default: false
+    },
+    displayName: {
+      type: String,
+      default: null
+    },
+    registrationNumber: {
+      type: String,
+      default: null
+    }
+  },
   data() {
     return {
       loading: false,
@@ -89,7 +105,6 @@ export default {
       results: [],
       organisation: null,
       role: null,
-      showCreationForm: false,
       organisationToCreate: {
         codename: null,
         display_name: null,
@@ -99,6 +114,7 @@ export default {
         phone_number: null,
         website_url: null,
         postal_address: null,
+        isValid: false,
       },
       organisationThumbnail: null,
       organisationSpheres: [],
@@ -215,9 +231,30 @@ export default {
       this.organisationToCreate.phone_number = e.form.tel;
       this.organisationToCreate.website_url = e.form.web;
       this.organisationToCreate.postal_address = e.form.postalAddress;
-
+      
       this.organisationSpheres = e.spheres;
       this.organisationThumbnail = e.thumbnail;
+      
+      if (e.form.name && e.form.type) {
+        this.organisationToCreate.isValid = true;
+      }
+      else {
+        this.organisationToCreate.isValid = false;
+      }
+    },
+
+    updateShowCreationForm(value) {
+      this.$emit('update:showCreationForm', value);
+    },
+
+    clearOrganisation() {
+      this.organisation = null;
+      this.$emit('select', {
+        selected: false,
+        orga: null,
+        thumbnail: null,
+        spheres: []
+      });
     },
   },
 };

src/router/index.js

@@ -85,6 +85,11 @@ const routes = [
           }
         }
       },
+      {
+        path: 'organisation-signup',
+        name: 'OrganisationSignUp',
+        component: () => import('@/views/OrganisationSignUp.vue'),
+      },
       {
         path: 'terms-of-use',
         name: 'TermsOfUse',

src/store/modules/sign-up.store.js

@@ -20,6 +20,7 @@ const state = {
   organisationSpheres: [],
   signed: false,
   error: null,
+  organisationSigned: false,
 };
 
 const getters = {
@@ -52,6 +53,7 @@ const actions = {
           }
           commit('SET_ERROR', undefined);
           commit('SET_SIGNED', true);
+          commit('SET_ORGANISATION_SIGNED', true);
         }
     } catch (error) {
       commit(
@@ -60,6 +62,7 @@ const actions = {
         || i18n.t('messages.error'),
       );
       commit('SET_SIGNED', false);
+      commit('SET_ORGANISATION_SIGNED', false);
     }
   },
 };
@@ -81,6 +84,9 @@ const mutations = {
     ErrorService.onError(value);
     state.error = value && value.data ? value.data : value;
   },
+  SET_ORGANISATION_SIGNED: (state, value) => {
+    state.organisationSigned = value === true;
+  },
 };
 
 export default {

src/views/OrganisationSignUp.vue

+<template>
+  <div>
+    <div class="organisation-signup-container">
+      <div class="app-header">
+        <img :alt="$config.client.name" :src="logoPath"/>
+      </div>
+      <b-overlay
+        id="overlay-background"
+        :show="loading"
+        :variant="'white'"
+        :opacity="0.7"
+        :blur="'2px'"
+        rounded="sm"
+        no-wrap
+      />
+      <div class="organisation-signup-form">
+        <h4 class="title">
+          {{ $t('organisationsignup.title') }}
+          <span class="sub-title">{{ $t('organisationsignup.subtitle') }}</span>
+        </h4>
+        <hr class="divider">
+
+        <ValidationObserver ref="form" v-slot="{ handleSubmit }">
+          <form>
+            <div class="required-help">{{ $t('organisationsignup.requiredFields')}}</div>
+
+            <div>
+              <OrganisationSelector
+								ref="organisationSelector"
+                :displayName="organisationName"
+                :registrationNumber="siret"
+                :showCreationForm="showCreationForm"
+                @select="handleOrganisationSelection"
+								@update:showCreationForm="handleShowCreationChange"/>
+            </div>
+
+            <b-button
+							:disabled="getButtonDisabledState()"
+              :pressed="btnPressed"
+							data-test="organisationSignUp-submit"
+              @click.prevent="handleSubmit(submit)"
+              variant="primary"
+            >
+              {{ $t('words.validate') }}
+            </b-button>
+
+            <b-button type="button" variant="outline-primary" data-test="organisationSignUp-signIn" @click.prevent="cancelOrganisationSignUp()">
+              {{ $t('words.cancel') }}
+            </b-button>
+          </form>
+        </ValidationObserver>
+      </div>
+    </div>
+    <small class="footer">
+      <p>
+        {{ $t('footer') }} <a href="https://www.neogeo.fr/" target="_blank" rel="noopener">Neogeo-Technologies</a>
+      </p>
+    </small>
+  </div>
+</template>
+
+<script>
+import OrganisationSelector from '@/components/OrganisationSelector';
+import i18n from '@/i18n';
+import { ValidationObserver, extend } from 'vee-validate';
+import { required } from 'vee-validate/dist/rules';
+import { mapState,mapActions, mapMutations } from 'vuex';
+
+extend('required', {
+  ...required,
+  message: () => i18n.t('errors.required'),
+});
+
+const organisationActions = [
+  'POST_SIGNUP',
+];
+
+const signOutActions = [
+  'GET_SIGNOUT',
+];
+
+export default {
+  name: 'OrganisationSignUp',
+  components: {
+    ValidationObserver,
+    OrganisationSelector,
+  },
+  data() {
+    return {
+      loading: false,
+      isOrganisationSelected: false,
+      organisation: null,
+      organisationThumbnail: null,
+      organisationSpheres: [],
+      btnPressed: false,
+      siret: '',
+      organisationName: '',
+      showCreationForm: false,
+      userId: null,
+      nextUrl: null,
+    };
+  },
+  computed: {
+    ...mapState('sign-up', [
+      'organisationSigned',
+    ]),
+    logoPath() {
+      return require(process.env.VUE_APP_LOGO);
+    },
+  },
+  watch: {
+    organisationSigned() {
+      if (this.nextUrl) {
+        window.location.href = this.nextUrl; // No email confirmation
+      }
+    },
+  },
+  methods: {
+    ...mapActions('sign-out', signOutActions),
+    ...mapActions('sign-up', organisationActions),
+    ...mapMutations('sign-up', [
+      'SET_FORM'
+    ]),
+    handleOrganisationSelection(e) {
+      this.isOrganisationSelected = e.selected;
+      this.organisation = e.orga;
+      this.organisationThumbnail = e.thumbnail;
+      this.organisationSpheres = e.spheres;
+    },
+    submit() {
+      this.loading = true;
+      this.btnPressed = true;
+      this.organisationSignUp();
+    },
+    async organisationSignUp() {
+      delete this.organisation.isValid;
+      this.SET_FORM({
+        form: {
+          user_id: this.userId,
+          ...this.isOrganisationSelected && {
+            usergroup_roles: [
+              {
+                organisation: this.organisation,
+              },
+            ],
+          }
+        },
+        thumbnail: this.organisationThumbnail,
+        spheres: this.organisationSpheres,
+      });
+      await this.POST_SIGNUP();
+      this.loading = false;
+    },
+    parseURLParams() {
+      const params = new URLSearchParams(window.location.search);
+      this.siret = params.get('registration_number');
+      this.organisationName = params.get('organisation_name');
+      this.userId = params.get('user_id');
+      this.nextUrl = params.get('next');
+      if (this.siret || this.organisationName) {
+        this.showCreationForm = true;
+      }
+    },
+    handleShowCreationChange(newValue) {
+			this.showCreationForm = newValue;
+			this.organisation = null;
+			if (this.showCreationForm) {
+				this.$refs.organisationSelector.clearOrganisation(); // Clear Selector
+				this.parseURLParams();
+			}
+    },
+		getButtonDisabledState() {
+			if (this.organisation) {
+				if (this.showCreationForm){
+					return !this.organisation.isValid;
+				}
+				return false;
+			}
+			return true;
+    },
+    cancelOrganisationSignUp() {
+      this.GET_SIGNOUT();
+      this.$router.push({ name: 'SignIn' })
+    }
+  },
+  created() {
+    this.parseURLParams();
+    if (this.organisationSigned) {
+      this.SET_SIGNED(true);
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.organisation-signup-container {
+    position: relative;
+    margin: 1rem auto auto;
+    width: 800px;
+    height: fit-content;
+
+    .organisation-signup-form {
+        margin: 5rem 1rem;
+
+        h4.title {
+            color: #373b3d;
+
+            .sub-title {
+                font-size: 75%;
+                color: #6b7479;
+            }
+        }
+
+        hr.solid {
+            border-top: 2px solid #373b3d;
+        }
+
+        h5 {
+            color: #6b7479;
+        }
+
+        form {
+            margin-top: 32px;
+
+            h5 {
+                margin-bottom: 20px;
+                margin-top: 40px;
+                color: #373b3d;
+            }
+
+            .row {
+                margin-bottom: 1.75rem;
+            }
+
+            .input-group {
+                span {
+                    cursor: pointer;
+                    border-bottom-left-radius: 0;
+                    border-top-left-radius: 0;
+                    border-left: none;
+                }
+            }
+
+            button {
+                float: right;
+                position: relative;
+                margin-left: 7px;
+                margin-top: 30px;
+            }
+
+            .infos {
+                font-size: 0.8em;
+                font-style: italic;
+                margin-right: 1em;
+                ul {
+                    padding-left: 1rem;
+                }
+            }
+        }
+    }
+}
+
+.form-errors {
+    color: #eb0600 !important;
+    margin-right: 2em;
+    line-height: 1;
+}
+
+.form-success {
+    color: #30c963 !important;
+}
+
+.footer {
+    position: relative;
+    bottom: 0;
+    font-size: small;
+    margin-top: 2rem;
+}
+
+.footer a {
+    text-decoration: none;
+}
+</style>