From f4352253c3af40e1fe1b79f3afc671e18d1f20bf Mon Sep 17 00:00:00 2001
From: Mo Bitar <me@bitar.io>
Date: Sun, 24 Dec 2017 14:46:00 -0600
Subject: [PATCH] Component modals

---
 .../app/frontend/models/api/mfa.js            | 11 +++------
 .../app/services/componentManager.js          |  2 +-
 .../directives/views/componentModal.js        | 24 +++++++++++++++----
 .../frontend/directives/room-bar.html.haml    |  2 +-
 4 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/app/frontend/models/api/mfa.js b/app/assets/javascripts/app/frontend/models/api/mfa.js
index 41e8cce5d..d3792654d 100644
--- a/app/assets/javascripts/app/frontend/models/api/mfa.js
+++ b/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() {
diff --git a/app/assets/javascripts/app/services/componentManager.js b/app/assets/javascripts/app/services/componentManager.js
index 89e2304fd..5ade3a822 100644
--- a/app/assets/javascripts/app/services/componentManager.js
+++ b/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);
     }
   }
diff --git a/app/assets/javascripts/app/services/directives/views/componentModal.js b/app/assets/javascripts/app/services/directives/views/componentModal.js
index 02748887f..d1235fea9 100644
--- a/app/assets/javascripts/app/services/directives/views/componentModal.js
+++ b/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);
   }
 
 }
diff --git a/app/assets/templates/frontend/directives/room-bar.html.haml b/app/assets/templates/frontend/directives/room-bar.html.haml
index 4d671b109..ab4c78ffa 100644
--- a/app/assets/templates/frontend/directives/room-bar.html.haml
+++ b/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}}"}