0

Right on the first user login to my app I display a terms and conditions pop up. It can be easily closed in Dev Tools and the app can be freely used. How can I possible watch a sessionStorage variable requireTerms? requireTerms changes from true to false depending on whether the terms and conditions have been accepted.

I want to detect a click if the modal has been closed in html editor and re-open pop-up again.

Is there an AngularJS way of setting up a config to do that?

I've got this function in one of my services

var service = this;
service.showTerms = function() {
    $uibModal.open({
        templateUrl: 'app/terms/terms.html',
        controller: 'tsAndCs as vm',
        size: 'md',
        backdrop: false,
        keyboard: false
    }).result.then(function(response) {
    }, function() {
    });
};

so I can basically call appState.showTerms(); however I am trying to figure out how to detect that window has been forced to be closed and call the function.

@edit I thought of having a variable requireTermsOpened (which will be set to false only when user actually clicks on 'Accept') when the modal is displayed and writing something like

var requireTerms = sessionStorage.getItem('requireTerms');
var requireTermsOpened = sessionStorage.getItem('requireTermsOpened');
if(requireTerms && requireTermsOpened) {
   appState.showTerms();
}
LazioTibijczyk
  • 1,701
  • 21
  • 48

2 Answers2

0
$uibModal.open({
        templateUrl: 'app/terms/terms.html',
        controller: 'tsAndCs as vm',
        size: 'md',
        backdrop: false,
        keyboard: false
    }).result.then(function(response) {
      })
      .catch(function() {
         // Here you can add your code, its the event that gets called when the modal is dimissed
    });

Please test it, I am quite sure it will help you, sorry if its bad formatted, I believe you got the idea, right?

TiagoM
  • 3,458
  • 4
  • 42
  • 83
  • Window is not dismissed, it's removed from the DOM with dev tools. – LazioTibijczyk Nov 27 '18 at 10:55
  • Then you need an event listener to handle the element removal from the DOM, check this https://stackoverflow.com/questions/33312948/prototype-trigger-event-when-an-element-is-removed-from-the-dom – TiagoM Nov 27 '18 at 10:58
0

You can try something like the below code. Also check this plunker for your given example scenario.

Controller:

  $scope.modelFn = function() {
    var modalInstance = $uibModal.open({
        templateUrl: 'confirmationWindow.html',
        windowClass: 'modal',
        controller: function ($scope, $uibModalInstance) {
          $scope.confirm = function(userAgreement) {
            $uibModalInstance.close(userAgreement);
          };
          $scope.cancel = function() {
            $uibModalInstance.dismiss('cancel');
          };
        },
        size: 'md',
        backdrop: false,
        keyboard: false
    });
    modalInstance.result.then(function(selectedItem) {
      if (selectedItem) {
        alert('Selected check box and clicked OK!');
      }else{
        alert('Clicked OK Button without Selecting Checkbox!');
      }
    }, function() {
        alert('Clicked Cancel button or Considered cancel on click of outside the Model popup window!');
    });
  };

Template:

   <div ng-controller="MainCtrl">
      <script type="text/ng-template" id="confirmationWindow.html">
        <div class="modal-header">
          <h3 class="modal-title">Terms & Conditions</h3>
        </div>
        <div class="modal-body">
          <p>...........</p>
          <p>
          <input type="checkbox" ng-model="userAgreement"/>
          Are you agreed with all terms and conditions?</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-warning" ng-click="confirm(userAgreement)">Confirm</button>
          <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        </div>
      </script>

      <button class="btn" ng-click="modelFn()">Open Modal</button>
    </div>
Immanuel Kirubaharan
  • 1,094
  • 1
  • 11
  • 17
  • Removed it from the DOM and were able to click on Open Modal again, meaning I can still use the app even after dropping this uibmodal element from the DOM. I've already got similar logic in my app but want to improve it so it's more difficult to bypass that. – LazioTibijczyk Nov 27 '18 at 12:30
  • You can do whatever you want to do on confirm/cancel button click event which you will be detecting now as you described in your question. – Immanuel Kirubaharan Nov 27 '18 at 12:34
  • I have buttons to confirm or cancel on my modal. The thing is if I just drop it from DOM using dev tools I can bypass clicking on any button and continue using the app without either cancelling or accepting. If I'm wrong please tell me in which block of your code I should call a function to re-open the modal. – LazioTibijczyk Nov 27 '18 at 14:50