Resolves issue:

* REDMINE_ISSUE-12237 | Fix "TypeError: Cannot read properties of null (reading 'id')"
* REDMINE_ISSUE-11758 | Use new api service from onegeo-login for usergroups

Co-authored-by: Florent <florent@Air-de-neogeo.neogeo.local>

src/api/usergroupsAPI.js

@@ -11,6 +11,7 @@ const AUTH = {
 const path = require('path');
 const DOMAIN = process.env.VUE_APP_DOMAIN;
 const USERGROUP_API_PATH = process.env.VUE_APP_USERGROUP_API_PATH;
+const LOGIN_API_PATH = process.env.VUE_APP_LOGIN_API_PATH;
 
 if (!DEV_AUTH) {
   axios.defaults.headers.common['X-CSRFToken'] = (name => {
@@ -23,7 +24,7 @@ if (!DEV_AUTH) {
 const usergroupsAPI = {
 
   async getFilteredUsergroupsList(type = 'group-of-organisation', page = 1) {
-    const url = new URL(path.join(USERGROUP_API_PATH, `user-groups/?page=${page}&usergroup_types=${type}`), DOMAIN);
+    const url = new URL(path.join(LOGIN_API_PATH, `user-groups/?page=${page}&usergroup_types=${type}`), DOMAIN);
     const response = await axios.get(url, { ...DEV_AUTH && { auth: AUTH } });
     if (response.status === 200) {
       return response.data;

src/views/UserProfile.vue

@@ -132,7 +132,7 @@
               </div>
               <div class="row g-2 align-items-center" style="margin-bottom: 0.5em;">
                 <div class="col-3">
-                  <label class="col-form-label">Organisation(s)</label>
+                  <label class="col-form-label" style="font-size: 0.87em;">Organisation(s)/Groupe(s)</label>
                 </div>
                 <div v-if="userData" class="col">
                   <div v-if="userData.usergroup_roles.length === 0">
@@ -143,10 +143,12 @@
                   >
                     <b-list-group-item
                       v-for="usergroup of userData.usergroup_roles"
-                      :key="usergroup.organisation.id"
+                      :key="usergroup.usergroup.id"
                       disabled
                     >
-                      {{ usergroup.organisation.display_name }} <em>en tant que</em> {{ organisationsRoles.find(el => el.choice === usergroup.role).label }}
+                      <b>{{ usergroup.usergroup.display_name }}</b>
+                      <em> en tant que </em>
+                      <b>{{ organisationsRoles.find(el => el.choice === usergroup.role).label }}</b>
                     </b-list-group-item>
                   </b-list-group>
                 </div>