Merge branch 'redmine-issues/20748' into '1.1'

REDMINE_ISSUE-20748

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

src/assets/locales/en.json

@@ -114,6 +114,7 @@
       "organisation": {
         "title": "Organisation",
         "subtitle": "Select your organisation from the list below.",
+        "info": "The list might only offers some of the organizations present, it will be updated as you search",
         "placeholder": "Search for an organisation...",
         "noOptions": "Enter an organisation's first characters to start the search",
         "help": {

src/assets/locales/fr.json

@@ -115,6 +115,7 @@
       "organisation": {
         "title": "Organisation",
         "subtitle": "Sélectionnez votre organisation dans la liste ci-dessous.",
+        "info": "La liste ne propose peut-être qu'une partie des organisations présentes, elle se mettra à jour au fur et à mesure de votre saisie",
         "placeholder": "Recherchez une organisation ...",
         "noOptions": "Saississez les premiers caractères d'une organisation pour lancer la recherche",
         "help": {

src/components/OrganisationSelector.vue

@@ -4,7 +4,11 @@
     <hr class="divider" />
     <div v-if="!showCreationForm">
       <label>{{ $tc('signup.form.organisation.subtitle') }}</label>
-      <Multiselect data-test="organisationSelector-organisation"
+      <div class="infos">
+        {{ $tc('signup.form.organisation.info') }}
+      </div>
+      <Multiselect
+        data-test="organisationSelector-organisation"
         v-model="organisation"
         style="margin-top: 0.5em;"
         class="search-usergroups"
@@ -44,9 +48,12 @@
       </Multiselect>
       <label>
         {{ $t('signup.form.organisation.help.text') }}
-        <b-link data-test="organisationSelector-showCreationFormTrue" @click="showCreationForm = true">
+        <a
+          data-test="organisationSelector-showCreationFormTrue"
+          @click="showCreationForm = true"
+        >
           {{ $t('signup.form.organisation.help.link') }}
-        </b-link>
+        </a>
       </label>
     </div>
     <OrganisationCreation
@@ -217,5 +224,17 @@ export default {
 label {
   font-size: 1rem;
   font-weight: normal;
+  a {
+    color: #105182 !important;
+  }
+  a:hover {
+    cursor: pointer;
+    text-decoration: underline !important;
+  }
+}
+.infos {
+  font-size: 0.8em;
+  font-style: italic;
+  margin-right: 1em;
 }
 </style>

src/store/modules/organisations.store.js

@@ -10,12 +10,11 @@ const state = {
 
 const getters = { };
 
-export const GET_ORGANISATIONS_LIST = 'GET_ORGANISATIONS_LIST';
 export const GET_ORGANISATIONS_TYPES = 'GET_ORGANISATIONS_TYPES';
 export const GET_ORGANISATIONS_ROLES = 'GET_ORGANISATIONS_ROLES';
 
 const actions = {
-  [GET_ORGANISATIONS_LIST]: async ({ commit }) => {
+  GET_ORGANISATIONS_LIST: async ({ commit }) => {
     const organisations = await client.getOrganisationsList();
     commit('SET_ORGANISATIONS_LIST', organisations);
   },
@@ -29,13 +28,17 @@ const actions = {
   }
 };
 
-export const SET_ORGANISATIONS_LIST = 'SET_ORGANISATIONS_LIST';
 export const SET_ORGANISATIONS_TYPES = 'SET_ORGANISATIONS_TYPES';
 export const SET_ORGANISATIONS_ROLES = 'SET_ORGANISATIONS_ROLES';
 
 const mutations = {
-  [SET_ORGANISATIONS_LIST]: (state, payload) => {
-    state.organisationsList = payload ? payload.results ? payload.results : payload : [];
+  SET_ORGANISATIONS_LIST: (state, payload) => {
+    console.log(payload);
+    if (payload && payload.length) {
+      state.organisationsList = payload.sort((a, b) => a.display_name.localeCompare(b.display_name));
+    } else {
+      state.organisationsList = [];
+    }
   },
   [SET_ORGANISATIONS_TYPES]: (state, payload) => {
     state.organisationsTypes = payload;

src/views/SignUp.vue

@@ -12,8 +12,7 @@
         :blur="'2px'"
         rounded="sm"
         no-wrap
-      >
-      </b-overlay>
+      />
       <div class="signup-form">
         <h4 class="title">
           {{ $t('signup.title') }}
@@ -390,7 +389,7 @@ export default {
   },
   data() {
     return {
-      loading: false,
+      loading: true,
       form: {
         first_name: null,
         last_name: null,
@@ -570,6 +569,7 @@ export default {
 
 <style lang="less" scoped>
 .signup-container {
+  position: relative;
   margin: 1rem auto auto;
   width: 800px;
   height: fit-content;