Show login form when restricted layers in permalink

camptocamp · Sep 27, 2018 · 8dfea68 · 8dfea68
1 parent dfad709
commit 8dfea68
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 3 deletions.
diff --git a/contribs/gmf/apps/desktop/index.html.ejs b/contribs/gmf/apps/desktop/index.html.ejs
@@ -100,7 +100,9 @@
                 {{'Login' | translate}}
                 <a class="btn close" ng-click="mainCtrl.loginActive = false">&times;</a>
               </div>
-              <gmf-authentication></gmf-authentication>
+              <gmf-authentication
+                gmf-authentication-info-message="mainCtrl.loginInfoMessage"
+              ></gmf-authentication>
             </div>
           </div>
           <div ng-show="mainCtrl.printPanelActive" class="row">

diff --git a/contribs/gmf/src/authentication/component.html b/contribs/gmf/src/authentication/component.html
@@ -107,6 +107,11 @@ <h4 class="modal-title">
 </div>
 
 <div ng-if="!$ctrl.gmfUser.username">
+
+  <div class="alert alert-warning" ng-show="$ctrl.infoMessage">
+    <span>{{ $ctrl.infoMessage }}</span>
+  </div>
+
   <form
       name="loginForm"
       role="form"

diff --git a/contribs/gmf/src/authentication/component.js b/contribs/gmf/src/authentication/component.js
@@ -64,6 +64,7 @@ function gmfAuthenticationTemplateUrl($element, $attrs, gmfAuthenticationTemplat
  * Example:
  *
  *      <gmf-authentication
+ *        gmf-authentication-info-message="mainCtrl.loginInfoMessage"
  *        gmf-authentication-allow-password-change="::true">
  *      </gmf-authentication>
  *
@@ -80,6 +81,7 @@ function gmfAuthenticationTemplateUrl($element, $attrs, gmfAuthenticationTemplat
  *     should also allow the user to change its password. Don't add this option alone, use
  *     it in a dedicated authentication component, in a ngeo-modal, directly in
  *     your index.html (see example 2.)
+ * @htmlAttribute {string} gmf-authentication-info-message Message to show above the authentication form.
  *
  * Example 2:
  *
@@ -107,7 +109,8 @@ exports.component_ = {
     'allowPasswordReset': '<?gmfAuthenticationAllowPasswordReset',
     'allowPasswordChange': '<?gmfAuthenticationAllowPasswordChange',
     'passwordValidator': '<?gmfAuthenticationPasswordValidator',
-    'forcePasswordChange': '<?gmfAuthenticationForcePasswordChange'
+    'forcePasswordChange': '<?gmfAuthenticationForcePasswordChange',
+    'infoMessage': '=?gmfAuthenticationInfoMessage'
   },
   controller: 'GmfAuthenticationController',
   templateUrl: gmfAuthenticationTemplateUrl
@@ -190,6 +193,12 @@ exports.AuthenticationController_ = class {
      */
     this.forcePasswordChange;
 
+    /**
+     * @type {?string}
+     * @export
+     */
+    this.infoMessage = null;
+
     /**
      * @type {boolean}
      * @export

diff --git a/contribs/gmf/src/controllers/AbstractAppController.js b/contribs/gmf/src/controllers/AbstractAppController.js
@@ -117,10 +117,50 @@ const exports = function(config, $scope, $injector) {
     });
   };
 
+  /**
+   * Url to redirect to after login success.
+   * @type {?string}
+   */
+  this.loginRedirectUrl = null;
+
+  /**
+   * Information message for the login form.
+   * @type {?string}
+   */
+  this.loginInfoMessage = null;
+
+  /**
+   * @param {gmfx.AuthenticationRequiredEvent} evt Event.
+   */
+  const showLoginForm = (evt) => {
+    $scope.$apply(() => {
+      /** @type {angularGettext.Catalog} */
+      const gettextCatalog = $injector.get('gettextCatalog');
+      this.loginInfoMessage = gettextCatalog.getString(
+        'Some layers in this link are not accessible to unauthenticated users. ' +
+        'Please log in to see whole data.');
+      this.loginRedirectUrl = evt.detail.url;
+      this.loginActive = true;
+    });
+
+    const unbind = $scope.$watch(() => this.loginActive, () => {
+      if (!this.loginActive) {
+        this.loginInfoMessage = null;
+        this.loginRedirectUrl = null;
+        unbind();
+      }
+    });
+  };
+  olEvents.listen(this.permalink_, 'authenticationrequired', showLoginForm);
+
   /**
    * @param {gmfx.AuthenticationEvent} evt Event.
    */
   const userChange = (evt) => {
+    if (this.loginRedirectUrl) {
+      window.location = this.loginRedirectUrl;
+      return;
+    }
     const user = evt.detail.user;
     const roleId = (user.username !== null) ? user.role_id : undefined;
 

diff --git a/contribs/gmf/src/permalink/Permalink.js b/contribs/gmf/src/permalink/Permalink.js
@@ -36,6 +36,9 @@ import olStyleRegularShape from 'ol/style/RegularShape.js';
 import olStyleStyle from 'ol/style/Style.js';
 import olLayerGroup from 'ol/layer/Group.js';
 
+import ngeoCustomEvent from 'ngeo/CustomEvent.js';
+import olEventsEventTarget from 'ol/events/EventTarget.js';
+
 /**
  * The Permalink service for GMF, which uses the `ngeo.statemanager.Service` to
  * manage the GMF application state. Here's the list of states are are managed:
@@ -62,12 +65,15 @@ import olLayerGroup from 'ol/layer/Group.js';
  * @param {ngeo.misc.EventHelper} ngeoEventHelper Ngeo event helper service
  * @param {ngeo.statemanager.Service} ngeoStateManager The ngeo statemanager service.
  * @param {ngeo.statemanager.Location} ngeoLocation ngeo location service.
+ * @param {gmfx.User} gmfUser User.
  * @ngInject
  * @ngdoc service
  * @ngname gmfPermalink
  */
 const exports = function($q, $timeout, $rootScope, $injector, ngeoDebounce, gettextCatalog,  ngeoEventHelper,
-  ngeoStateManager, ngeoLocation) {
+  ngeoStateManager, ngeoLocation, gmfUser) {
+
+  olEventsEventTarget.call(this);
 
   /**
    * @type {!angular.$q}
@@ -216,6 +222,12 @@ const exports = function($q, $timeout, $rootScope, $injector, ngeoDebounce, gett
   this.gmfTreeManager_ = $injector.has('gmfTreeManager') ?
     $injector.get('gmfTreeManager') : null;
 
+  /**
+   * @type {gmfx.User}
+   * @private
+   */
+  this.user_ = gmfUser;
+
   // == other properties ==
 
   /**
@@ -464,9 +476,18 @@ const exports = function($q, $timeout, $rootScope, $injector, ngeoDebounce, gett
     });
   }
 
+  /**
+   * @type {string}
+   * @private
+   */
+  this.initialUri_ = window.location.href;
+
   this.initLayers_();
 };
 
+olBase.inherits(exports, olEventsEventTarget);
+
+
 // === Map X, Y, Z ===
 
 /**
@@ -939,6 +960,8 @@ exports.prototype.initLayers_ = function() {
         const group = gmfThemeThemes.findGroupByName(themes, groupName);
         if (group) {
           firstLevelGroups.push(group);
+        } else {
+          this.requireAuthentication();
         }
       });
     }
@@ -984,9 +1007,15 @@ exports.prototype.initLayers_ = function() {
             treeCtrl.traverseDepthFirst((treeCtrl) => {
               if (treeCtrl.node.children === undefined) {
                 const enable = olArray.includes(groupLayersArray, treeCtrl.node.name);
+                if (enable) {
+                  groupLayersArray.splice(groupLayersArray.indexOf(treeCtrl.node.name), 1);
+                }
                 treeCtrl.setState(enable ? 'on' : 'off', false);
               }
             });
+            if (groupLayersArray.length > 0) {
+              this.requireAuthentication();
+            }
           }
         }
       });
@@ -1004,6 +1033,21 @@ exports.prototype.initLayers_ = function() {
 };
 
 
+/**
+ * Called when some groups or layers do not exist in theme service.
+ * In such case, if user is not already authenticated, we send an
+ * "authenticationrequired" event with initial url.
+ * @private
+ */
+exports.prototype.requireAuthentication = function() {
+  if (this.user_.role_id === null) {
+    /** @type {gmfx.AuthenticationRequiredEvent} */
+    const event = new ngeoCustomEvent('authenticationrequired', {url: this.initialUri_});
+    this.dispatchEvent(event);
+  }
+};
+
+
 // === ngeoFeatures, A.K.A features from the DrawFeature, RedLining  ===