GSLUX-749: Use new v4 auth form component

geoportal/geoportailv3_geoportal/static-ngeo/js/UserManager.js

@@ -11,6 +11,8 @@ import appModule from './module.js';
 import appNotifyNotificationType from './NotifyNotificationType.js';
 import ngeoOfflineServiceManager from 'ngeo/offline/ServiceManager.js';
 
+import { useUserManagerStore, storeToRefs } from "luxembourg-geoportail/bundle/lux.dist.js";
+
 /**
  * @constructor
  * @param {angular.$http} $http Angular http service.
@@ -25,6 +27,11 @@ import ngeoOfflineServiceManager from 'ngeo/offline/ServiceManager.js';
 const exports = function($http, $rootScope, loginUrl, logoutUrl,
     getuserinfoUrl, appNotify, gettextCatalog) {
 
+  // v4 authentication
+  const userManagerStore = useUserManagerStore()
+  const { currentUser } = storeToRefs(userManagerStore)
+  this.currentUser = currentUser
+
   /**
    * @type {ngeo.offline.Mode}
    * @private
@@ -236,12 +243,7 @@ exports.prototype.isAuthenticated = function() {
     return true;
   }
 
-  if (this.getUsername()) {
-    return this.username.length > 0;
-  }
-
-  this.clearUserInfo();
-  return false;
+  return useUserManagerStore().isAuthenticated();
 };
 
 
@@ -284,50 +286,50 @@ exports.prototype.setUserInfo = function(
  * @return {string} The username.
  */
 exports.prototype.getUsername = function() {
-  return this.username;
+  return this.currentUser.value ? this.currentUser.value.login : null;
 };
 
 /**
  * @return {string|undefined} The Email.
  */
 exports.prototype.getEmail = function() {
-  return this.email;
+  return this.currentUser.value ? this.currentUser.value.mail : null;
 };
 
 /**
  * @return {string|undefined} The user type.
  */
 exports.prototype.getUserType = function() {
-  return this.typeUtilisateur;
+  return this.currentUser.value ? this.currentUser.value.typeUtilisateur : null;
 };
 
 /**
  * @return {string|undefined} The Role.
  */
 exports.prototype.getRole = function() {
-  return this.role;
+  return this.currentUser.value ? this.currentUser.value.role : null;
 };
 
 
 /**
  * @return {?number} The Role Id.
  */
 exports.prototype.getRoleId = function() {
-  return this.roleId;
+  return this.currentUser.value ? this.currentUser.value.roleId : null;
 };
 
 /**
  * @return {?number} The Role Id.
  */
 exports.prototype.getMymapsRole = function() {
-  return this.mymapsRole;
+  return this.currentUser.value ? this.currentUser.value.mymapsRole : null;
 };
 
 /**
  * @return {boolean} True if is a mymaps admin.
  */
 exports.prototype.getMymapsAdmin = function() {
-  return this.isMymapsAdmin;
+  return this.currentUser.value ? this.currentUser.value.isAdmin : null;
 };
 
 

geoportal/geoportailv3_geoportal/static-ngeo/js/apps/MainController.js

@@ -29,6 +29,7 @@ import useLuxLib, {
   storeToRefs,
   watch,
   AlertNotifications,
+  AuthForm,
   LayerPanel,
   MapContainer,
   BackgroundSelector,
@@ -125,6 +126,8 @@ customElements.define('slider-comparator', SliderComparatorElement)
 const AlertNotificationsElement = createElementInstance(AlertNotifications, app)
 customElements.define('alert-notifications', AlertNotificationsElement)
 
+customElements.define('auth-form', createElementInstance(AuthForm, app))
+
 import i18next from 'i18next';
 
 import * as Sentry from '@sentry/browser';
@@ -1097,7 +1100,7 @@ const MainController = function(
    * @private
    */
   this.appMymaps_ = appMymaps;
-  this.appUserManager_.getUserInfo();
+  // this.appUserManager_.getUserInfo(); // Deactivated as this is now handled by lux v4 in the AuthForm component
 
   /**
    * @type {boolean}

geoportal/geoportailv3_geoportal/static-ngeo/js/apps/main.html.ejs

@@ -74,11 +74,8 @@
 
           <li class="user icon" ng-class="mainCtrl.userOpen ? 'active': ''">
             <a href translate ngeo-btn ng-model="mainCtrl.userOpen" ng-click="mainCtrl.languageOpen = false">user</a>
-            <app-authentication app-authentication-lang="mainCtrl.lang"
-                app-authentication-useropen="mainCtrl.userOpen"></app-authentication>
           </li>
 
-
           <li class="lang icon" ng-class="mainCtrl.languageOpen ? 'active': ''">
             <a href translate ngeo-btn ng-model="mainCtrl.languageOpen"  ng-click="mainCtrl.userOpen = false">lang</a>
             <ul class="nav toolbox-panel toolbox-panel-top">
@@ -105,6 +102,11 @@
                     app-search-routing-open="mainCtrl.routingOpen"></app-search>
       </div>
     </header>
+
+    <div ng-show="mainCtrl.userOpen" class="ng-hide" style="width:320px; position: absolute; right: 0; z-index: 9;">
+      <auth-form></auth-form>
+    </div>
+
     <div class="routing-goto-route" ng-if="mainCtrl.hasRoutingResult">
       <button class="routing-rounded-button" ng-click="mainCtrl.routingOpen=true;" translate>Itinéraire en détail</button>
     </div>

geoportal/package.json

@@ -14,7 +14,7 @@
     "url": "https://github.com/Geoportail-Luxembourg/geoportailv3/issues"
   },
   "devDependencies": {
-    "luxembourg-geoportail": "https://github.com/Geoportail-Luxembourg/luxembourg-geoportail/releases/download/GSLUX-759-Fix-metadata_CI_79a8686/luxembourg-geoportail-lib-0.0.0-dev.tgz",
+    "luxembourg-geoportail": "https://github.com/Geoportail-Luxembourg/luxembourg-geoportail/releases/download/GSLUX-749-auth-finalize_CI_dac4327/luxembourg-geoportail-lib-0.0.0-dev.tgz",
     "@babel/core": "7.16.0",
     "@babel/plugin-proposal-class-properties": "7.16.0",
     "@babel/plugin-proposal-decorators": "7.16.0",