Component modals

app/assets/javascripts/app/frontend/models/api/mfa.js

@@ -6,16 +6,11 @@ class Mfa extends Item {
 
   mapContentToLocalProperties(content) {
     super.mapContentToLocalProperties(content)
-    this.name = content.name;
+    this.serverContent = content;
   }
 
   structureParams() {
-    var params = {
-      name: this.name,
-    };
-
-    _.merge(params, super.structureParams());
-    return params;
+    return _.merge(this.serverContent, super.structureParams());
   }
 
   toJSON() {
@@ -23,7 +18,7 @@ class Mfa extends Item {
   }
 
   get content_type() {
-    return "SN|MFA";
+    return "SF|MFA";
   }
 
   doNotEncrypt() {

app/assets/javascripts/app/services/componentManager.js

@@ -654,7 +654,7 @@ class ComponentManager {
 
       setSize(iframe, data);
     } else {
-      var container = document.getElementById("room-" + component.uuid);
+      var container = document.getElementById("component-" + component.uuid);
       setSize(container, data);
     }
   }

app/assets/javascripts/app/services/directives/views/componentModal.js

@@ -10,17 +10,18 @@ class ComponentModal {
     };
   }
 
-  link($scope, el, attrs, componentManager) {
+  link($scope, el, attrs) {
     $scope.el = el;
   }
 
-  controller($scope, componentManager) {
+  controller($scope, $timeout, componentManager) {
     'ngInject';
 
     let identifier = "modal-" + $scope.component.uuid;
 
     $scope.dismiss = function() {
       componentManager.deregisterHandler(identifier);
+      componentManager.deactivateComponent($scope.component);
       $scope.el.remove();
     }
 
@@ -28,12 +29,27 @@ class ComponentModal {
       return componentManager.urlForComponent($scope.component);
     }
 
-    componentManager.registerHandler({identifier: identifier, areas: ["modal"],
-     actionHandler: function(component, action, data){
+    componentManager.registerHandler({identifier: identifier, areas: ["modal"], activationHandler: (component) => {
+      if(component.active) {
+        $timeout(function(){
+          var iframe = componentManager.iframeForComponent(component);
+          console.log("iframe", iframe, component);
+          if(iframe) {
+            iframe.onload = function() {
+              componentManager.registerComponentWindow(component, iframe.contentWindow);
+            }.bind(this);
+          }
+        }.bind(this));
+      }
+    },
+    actionHandler: function(component, action, data) {
        if(action == "set-size") {
+         console.log("componentModalReceivedAction SetSize", component);
          componentManager.handleSetSizeEvent(component, data);
        }
     }.bind(this)});
+
+    componentManager.activateComponent($scope.component);
   }
 
 }

app/assets/templates/frontend/directives/room-bar.html.haml

@@ -1,4 +1,4 @@
 .room-item{"ng-repeat" => "room in rooms", "ng-click" => "selectRoom(room)"}
   %span {{room.name}}
-  .room-container.panel-right{"ng-if" => "room.show && room.active", "ng-attr-id" => "room-{{room.uuid}}"}
+  .room-container.panel-right{"ng-if" => "room.show && room.active", "ng-attr-id" => "component-{{room.uuid}}"}
     %iframe.room-iframe{"ng-src" => "{{componentManager.urlForComponent(room) | trusted}}", "frameBorder" => "0", "sandbox" => "allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-modals", "data-component-id" => "{{room.uuid}}"}