Component modals wip

app/assets/javascripts/app/services/authManager.js

@@ -95,9 +95,9 @@ angular.module('app.frontend')
         return supportedVersions.includes(version);
       }
 
-      this.getAuthParamsForEmail = function(url, email, callback) {
+      this.getAuthParamsForEmail = function(url, email, extraParams, callback) {
         var requestUrl = url + "/auth/params";
-        httpManager.getAbsolute(requestUrl, {email: email}, function(response){
+        httpManager.getAbsolute(requestUrl, _.merge({email: email}, extraParams), function(response){
           callback(response);
         }, function(response){
           console.error("Error getting auth params", response);
@@ -121,7 +121,7 @@ angular.module('app.frontend')
       }
 
       this.login = function(url, email, password, ephemeral, extraParams, callback) {
-        this.getAuthParamsForEmail(url, email, function(authParams){
+        this.getAuthParamsForEmail(url, email, extraParams, function(authParams){
 
           if(authParams.error) {
             callback(authParams);

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

@@ -210,6 +210,7 @@ class ComponentManager {
       save-context-client-data
       get-context-client-data
       install-local-component
+      open-component
     */
 
     if(message.action === "stream-items") {
@@ -291,6 +292,12 @@ class ComponentManager {
       })
     }
 
+    else if(message.action === "open-component") {
+      let openComponent = this.modelManager.findItem(message.data.uuid);
+      console.log("Received open-component event", openComponent);
+      this.openModalComponent(openComponent);
+    }
+
     for(let handler of this.handlers) {
       if(handler.areas.includes(component.area)) {
         this.timeout(function(){
@@ -449,6 +456,13 @@ class ComponentManager {
     }
   }
 
+  openModalComponent(component) {
+    var scope = this.$rootScope.$new(true);
+    scope.component = component;
+    var el = this.$compile( "<component-modal component='component' class='component-modal'></component-modal>" )(scope);
+    angular.element(document.body).append(el);
+  }
+
   replyToMessage(component, originalMessage, replyData) {
     var reply = {
       action: "reply",
@@ -511,6 +525,11 @@ class ComponentManager {
     this.handlers.push(handler);
   }
 
+  deregisterHandler(identifier) {
+    var handler = _.find(this.handlers, {identifier: identifier});
+    this.handlers.splice(this.handlers.indexOf(handler), 1);
+  }
+
   // Called by other views when the iframe is ready
   registerComponentWindow(component, componentWindow) {
     if(component.window === componentWindow) {
@@ -619,6 +638,27 @@ class ComponentManager {
     }
   }
 
+  handleSetSizeEvent(component, data) {
+    var setSize = function(element, size) {
+      var widthString = typeof size.width === 'string' ? size.width : `${data.width}px`;
+      var heightString = typeof size.height === 'string' ? size.height : `${data.height}px`;
+      element.setAttribute("style", `width:${widthString}; height:${heightString}; `);
+    }
+
+    if(data.type === "content") {
+      var iframe = this.iframeForComponent(component);
+      var width = data.width;
+      var height = data.height;
+      iframe.width  = width;
+      iframe.height = height;
+
+      setSize(iframe, data);
+    } else {
+      var container = document.getElementById("room-" + component.uuid);
+      setSize(container, data);
+    }
+  }
+
 
 }
 

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

@@ -117,6 +117,10 @@ class AccountMenu {
                   $scope.formData.mfa = error;
                 })
               } else if(!response || (response && !response.didDisplayAlert)) {
+                $timeout(() => {
+                  $scope.formData.showLogin = true;
+                  $scope.formData.mfa = null;
+                })
                 alert(error.message);
               }
             } else {

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

@@ -0,0 +1,41 @@
+class ComponentModal {
+
+  constructor() {
+    this.restrict = "E";
+    this.templateUrl = "frontend/directives/component-modal.html";
+    this.scope = {
+      show: "=",
+      component: "=",
+      callback: "="
+    };
+  }
+
+  link($scope, el, attrs, componentManager) {
+    $scope.el = el;
+  }
+
+  controller($scope, componentManager) {
+    'ngInject';
+
+    let identifier = "modal-" + $scope.component.uuid;
+
+    $scope.dismiss = function() {
+      componentManager.deregisterHandler(identifier);
+      $scope.el.remove();
+    }
+
+    $scope.url = function() {
+      return componentManager.urlForComponent($scope.component);
+    }
+
+    componentManager.registerHandler({identifier: identifier, areas: ["modal"],
+     actionHandler: function(component, action, data){
+       if(action == "set-size") {
+         componentManager.handleSetSizeEvent(component, data);
+       }
+    }.bind(this)});
+  }
+
+}
+
+angular.module('app.frontend').directive('componentModal', () => new ComponentModal);

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

@@ -21,10 +21,10 @@ class EditorMenu {
     $scope.selectEditor = function($event, editor) {
       if(editor) {
         editor.conflict_of = null; // clear conflict if applicable
-      }
-      if(editor.local && !isDesktopApplication()) {
-        alert("This editor is installed ")
-        return;
+        if(editor.local && !isDesktopApplication()) {
+          alert("This editor is installed ")
+          return;
+        }
       }
       $scope.callback()(editor);
     }

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

@@ -15,7 +15,6 @@ class RoomBar {
     $rootScope.$on("initial-data-loaded", () => {
       $timeout(() => {
         $scope.rooms = componentManager.componentsForArea("rooms");
-        console.log("Rooms:", $scope.rooms);
       })
     });
 
@@ -31,26 +30,8 @@ class RoomBar {
         }.bind(this));
       }
     }.bind(this), actionHandler: function(component, action, data){
-      if(action === "set-size") {
-        console.log("Set size event", data);
-        var setSize = function(element, size) {
-          var widthString = typeof size.width === 'string' ? size.width : `${data.width}px`;
-          var heightString = typeof size.height === 'string' ? size.height : `${data.height}px`;
-          element.setAttribute("style", `width:${widthString}; height:${heightString}; `);
-        }
-
-        if(data.type === "content") {
-          var iframe = componentManager.iframeForComponent(component);
-          var width = data.width;
-          var height = data.height;
-          iframe.width  = width;
-          iframe.height = height;
-
-          setSize(iframe, data);
-        } else {
-          var container = document.getElementById("room-" + component.uuid);
-          setSize(container, data);
-        }
+      if(action == "set-size") {
+        componentManager.handleSetSizeEvent(component, data);
       }
     }.bind(this)});
 

app/assets/stylesheets/app/_modals.scss

@@ -1,4 +1,4 @@
-.permissions-modal {
+.permissions-modal, .component-modal {
   position: fixed;
   margin-left: auto;
   margin-right: auto;
@@ -82,5 +82,13 @@
       border: 1px solid gray;
     }
   }
+}
+
+.modal-iframe-container {
+
+  .modal-iframe {
+    width: 100%;
+    height: 100%;
+  }
 
 }

app/assets/stylesheets/frontend.css.scss

@@ -9,7 +9,7 @@ $dark-gray: #2e2e2e;
 @import "app/editor";
 @import "app/extensions";
 @import "app/menus";
-@import "app/permissions-modal";
+@import "app/modals";
 @import "app/lock-screen";
 
 @import "ionicons";

app/assets/templates/frontend/directives/account-menu.html.haml

@@ -43,7 +43,7 @@
 
         %form.mt-5{"ng-if" => "formData.mfa"}
           %p {{formData.mfa.message}}
-          %input.form-control.mt-10{:autofocus => 'autofocus', :name => 'mfa', :required => true, 'ng-model' => 'formData.userMfaCode'}
+          %input.form-control.mt-10{:autofocus => "true", :name => 'mfa', :required => true, 'ng-model' => 'formData.userMfaCode'}
           %button.ui-button.block.mt-10{"ng-click" => "submitMfaForm()"} {{"Sign In"}}
 
         .mt-15{"ng-if" => "formData.showRegister"}

app/assets/templates/frontend/directives/component-modal.html.haml

@@ -0,0 +1,5 @@
+.background{"ng-click" => "dismiss()"}
+
+.content
+  .modal-iframe-container{"ng-attr-id" => "component-{{component.uuid}}"}
+    %iframe.modal-iframe{"ng-src" => "{{url() | trusted}}", "frameBorder" => "0", "sandbox" => "allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-modals", "data-component-id" => "{{component.uuid}}"}