GUAC-932: Move connection editor to own page.

guacamole/src/main/webapp/app/index/config/indexRouteConfig.js

@@ -29,31 +29,37 @@ angular.module('index').config(['$routeProvider', '$locationProvider',
     // Disable HTML5 mode (use # for routing)
     $locationProvider.html5Mode(false);
     
-    $routeProvider.
+    $routeProvider
-        when('/', {
+        .when('/', {
             title: 'application.title',
             bodyClassName: 'home',
             templateUrl: 'app/home/templates/home.html',
             controller: 'homeController'
-        }).
+        })
-        when('/manage/', {
+        .when('/manage/', {
             title: 'application.title',
             bodyClassName: 'manage',
             templateUrl: 'app/manage/templates/manage.html',
             controller: 'manageController'
-        }).
+        })
-        when('/login/', {
+        .when('/manage/connections/:id?', {
+            title: 'application.title',
+            bodyClassName: 'manage-connection',
+            templateUrl: 'app/manage/templates/manageConnection.html',
+            controller: 'manageConnectionController'
+        })
+        .when('/login/', {
             title: 'application.title',
             bodyClassName: 'login',
             templateUrl: 'app/login/templates/login.html',
             controller: 'loginController'
-        }).
+        })
-        when('/client/:type/:id/:params?', {
+        .when('/client/:type/:id/:params?', {
             bodyClassName: 'client',
             templateUrl: 'app/client/templates/client.html',
             controller: 'clientController'
-        }).
+        })
-        otherwise({
+        .otherwise({
             redirectTo: '/'
         });
 }]);

guacamole/src/main/webapp/app/index/styles/dialog.css

@@ -92,23 +92,6 @@
     z-index: 1;
 }
 
-.dialog .dropdown {
-
-    position: absolute;
-    z-index: 2;
-    margin-top: -1px;
-
-    width: 3in;
-    max-height: 2in;
-    overflow: auto;
-
-    border: 1px solid rgba(0, 0, 0, 0.5);
-    background: white;
-
-    font-size: 10pt;
-
-}
-
 .dialog .footer {
     text-align: center;
 }

guacamole/src/main/webapp/app/manage/controllers/manageConnectionController.js

@@ -23,51 +23,65 @@
 /**
  * The controller for the connection edit modal.
  */
-angular.module('manage').controller('connectionEditModalController', ['$scope', '$injector', 
+angular.module('manage').controller('manageConnectionController', ['$scope', '$injector',
-        function connectionEditModalController($scope, $injector) {
+        function manageConnectionController($scope, $injector) {
 
-    var connectionEditModal             = $injector.get('connectionEditModal');
+    var $routeParams                    = $injector.get('$routeParams');
     var connectionService               = $injector.get('connectionService');
+    var connectionGroupService          = $injector.get('connectionGroupService');
+    var protocolService                 = $injector.get('protocolService');
     var Connection                      = $injector.get('Connection');
+    var ConnectionGroup                 = $injector.get('ConnectionGroup');
+    var PermissionSet                   = $injector.get('PermissionSet');
     var HistoryEntryWrapper             = $injector.get('HistoryEntryWrapper');
    
+    var identifier = $routeParams.id;
+
     // Make a copy of the old connection so that we can copy over the changes when done
     var oldConnection = $scope.connection;
 
-    // Copy data into a new conection object in case the user doesn't want to save
+    connectionGroupService.getConnectionGroupTree(ConnectionGroup.ROOT_IDENTIFIER, PermissionSet.ObjectPermissionType.UPDATE)
-    $scope.connection = new Connection($scope.connection);
+    .success(function connectionGroupReceived(rootGroup) {
+        $scope.rootGroup = rootGroup;
+        $scope.loadingConnections = false; 
+    });
    
-    var newConnection = !$scope.connection.identifier;
+    // Get the protocol information from the server and copy it into the scope
-    
+    protocolService.getProtocols().success(function fetchProtocols(protocols) {
-    // Set it to VNC by default
+        $scope.protocols = protocols;
-    if(!$scope.connection.protocol)
+    });
-        $scope.connection.protocol = "vnc";
    
     // Wrap all the history entries
-    if (!newConnection) {
+    if (identifier) {
 
-        connectionService.getConnectionHistory($scope.connection.identifier).success(function wrapHistoryEntries(historyEntries) {
+        // Copy data into a new conection object in case the user doesn't want to save
+        connectionService.getConnection(identifier).success(function connectionRetrieved(connection) {
+            $scope.connection = connection;
+        });
+     
+        connectionService.getConnectionHistory(identifier).success(function wrapHistoryEntries(historyEntries) {
             $scope.historyEntryWrappers = [];
             historyEntries.forEach(function wrapHistoryEntry(historyEntry) {
                $scope.historyEntryWrappers.push(new HistoryEntryWrapper(historyEntry)); 
             });
         });
 
-        connectionService.getConnectionParameters($scope.connection.identifier).success(function setParameters(parameters) {
+        connectionService.getConnectionParameters(identifier).success(function setParameters(parameters) {
-            $scope.connection.parameters = parameters;
+            $scope.parameters = parameters;
         });
 
     }
     else {
+        $scope.connection = new Connection({ protocol: 'vnc' });
         $scope.historyEntryWrappers = [];
-        $scope.connection.parameters = {};
+        $scope.parameters = {};
     }
     
     /**
      * Close the modal.
      */
     $scope.close = function close() {
-        connectionEditModal.deactivate();
+        //connectionEditModal.deactivate();
     };
     
     /**
@@ -95,7 +109,7 @@ angular.module('manage').controller('connectionEditModalController', ['$scope',
                 }
             
             // Close the modal
-            connectionEditModal.deactivate();
+            //connectionEditModal.deactivate();
         });
     };
     
@@ -108,7 +122,7 @@ angular.module('manage').controller('connectionEditModalController', ['$scope',
         var newConnection = !$scope.connection.identifier;
         if(newConnection) {
             // Close the modal
-            connectionEditModal.deactivate();
+            //connectionEditModal.deactivate();
             return;
         }
         
@@ -119,7 +133,7 @@ angular.module('manage').controller('connectionEditModalController', ['$scope',
             $scope.moveItem($scope.connection, oldParentID);
             
             // Close the modal
-            connectionEditModal.deactivate();
+            //connectionEditModal.deactivate();
         });
     };
 

guacamole/src/main/webapp/app/manage/controllers/manageController.js

@@ -32,7 +32,6 @@ angular.module('manage').controller('manageController', ['$scope', '$injector',
 
     // Required services
     var connectionGroupService      = $injector.get('connectionGroupService');
-    var connectionEditModal         = $injector.get('connectionEditModal');
     var connectionGroupEditModal    = $injector.get('connectionGroupEditModal');
     var userEditModal               = $injector.get('userEditModal');
     var protocolService             = $injector.get('protocolService');

guacamole/src/main/webapp/app/manage/directives/locationChooser.js

@@ -72,13 +72,6 @@ angular.module('manage').directive('locationChooser', [function locationChooser(
 
             };
 
-            // Map all known groups
-            mapConnectionGroups($scope.rootGroup);
-
-            // If no value is specified, default to the root identifier
-            if (!$scope.value || !($scope.value in connectionGroups))
-                $scope.value = $scope.rootGroup.identifier;
-
             /**
              * Whether the group list menu is currently open.
              * 
@@ -92,7 +85,7 @@ angular.module('manage').directive('locationChooser', [function locationChooser(
              * 
              * @type String
              */
-            $scope.chosenConnectionGroupName = connectionGroups[$scope.value].name; 
+            $scope.chosenConnectionGroupName = null;
             
             /**
              * Toggle the current state of the menu listing connection groups.
@@ -125,6 +118,24 @@ angular.module('manage').directive('locationChooser', [function locationChooser(
 
             };
 
+            $scope.$watch('rootGroup', function setRootGroup(rootGroup) {
+
+                connectionGroups = {};
+
+                if (!rootGroup)
+                    return;
+
+                // Map all known groups
+                mapConnectionGroups(rootGroup);
+
+                // If no value is specified, default to the root identifier
+                if (!$scope.value || !($scope.value in connectionGroups))
+                    $scope.value = rootGroup.identifier;
+
+                $scope.chosenConnectionGroupName = connectionGroups[$scope.value].name; 
+
+            });
+
         }]
     };
     

guacamole/src/main/webapp/app/manage/styles/buttons.css

@@ -31,7 +31,7 @@ button.add-user {
 
 }
 
-button.add-connection {
+a.button.add-connection {
 
     background-image: url('images/action-icons/guac-monitor-add.png');
     background-repeat: no-repeat;

guacamole/src/main/webapp/app/manage/styles/locationChooser.css

@@ -20,16 +20,19 @@
  * THE SOFTWARE.
  */
 
-/**
+.location-chooser .dropdown {
- * A modal for editing a connection.
- */
-angular.module('manage').factory('connectionEditModal', ['btfModal', 
-        function connectionEditModal(btfModal) {
 
-    // Create the modal object to be used later to actually create the modal
+    position: absolute;
-    return btfModal({
+    z-index: 2;
-        controller: 'connectionEditModalController',
+    margin-top: -1px;
-        controllerAs: 'modal',
+
-        templateUrl: 'app/manage/templates/editableConnection.html',
+    width: 3in;
-    });
+    max-height: 2in;
-}]);
+    overflow: auto;
+
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    background: white;
+
+    font-size: 10pt;
+
+}

guacamole/src/main/webapp/app/manage/styles/manageConnection.css

@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2014 Glyptodon LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+.manage-connection .info table,
+.manage-connection .parameters table {
+    margin: 1em;
+}
+
+.manage-connection .info table th,
+.manage-connection .parameters table th {
+    text-align: left;
+    font-weight: normal;
+    padding-right: 1em;
+}
+
+.manage-connection .action-buttons {
+    text-align: center;
+    margin-bottom: 1em;
+}

guacamole/src/main/webapp/app/manage/templates/connection.html

@@ -1,4 +1,4 @@
-<div ng-click="context.editConnection(item.wrappedItem)">
+<a ng-href="#/manage/connections/{{item.identifier}}">
     <!--
        Copyright (C) 2014 Glyptodon LLC
 
@@ -32,4 +32,4 @@
         <span class="name">{{item.name}}</span>
 
     </div>
-</div>
+</a>

guacamole/src/main/webapp/app/manage/templates/editableConnection.html

@@ -1,117 +0,0 @@
-<!--
-Copyright 2014 Glyptodon LLC.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
--->
-
-
-<!-- Dialog container for the modal -->
-<div class="dialog-container">
-  <div class="dialog edit">
-      
-    <!-- Connection name -->
-    <div class="header">
-      <h2>{{connection.name}}</h2>
-    </div>
-
-    <!-- Main connection edit section -->
-    <div class="body">
-      <div class="form">
-        <div class="settings section">
-          <dl>
-            <dd>
-              <table class="fields section">
-                  
-                <!-- Edit connection name -->
-                <tr>
-                  <th>{{'manage.edit.connection.name' | translate}}</th>
-
-                  <td><input type="text" ng-model="connection.name"/></td>
-                </tr>
-
-                <!-- Edit connection location -->
-                <tr>
-                  <th>{{'manage.edit.connection.location' | translate}}</th>
-
-                  <td>
-                    <location-chooser value="connection.parentIdentifier" root-group="rootGroup"/>
-                  </td>
-                </tr>
-
-                  
-                <!-- Edit connection protocol -->
-                <tr>
-                  <th>{{'manage.edit.connection.protocol' | translate}}</th>
-                  <td>
-                      <select ng-model="connection.protocol" ng-options="name as 'protocol.' + protocol.name + '.label' | translate for (name, protocol) in protocols | orderBy: name"></select>
-                  </td>
-                </tr>
-              </table>
-            </dd>
-
-            <!-- Connection parameters -->
-            <dt>{{'manage.edit.connection.parameters' | translate}}</dt>
-
-            <dd ng-class="{loading: !connection.parameters}">
-              <table class="fields section">
-                  
-                <!-- All the different possible editable field types -->
-                <tr ng-repeat="parameter in protocols[connection.protocol].parameters">
-                  <th>{{'protocol.' + connection.protocol + '.parameters.' + parameter.name + '.label' | translate}}:</th>
-                  <td>
-                      <guac-connection-parameter protocol="protocols[connection.protocol]" name="parameter.name" parameters="connection.parameters"/>
-                  </td>
-                </tr>
-              </table>
-            </dd>
-
-            <!-- History connection area -->
-            <dt>{{'manage.edit.connection.history.usageHistory' | translate}}</dt>
-
-            <!-- History connection list -->
-            <dd ng-class="{loading: !historyEntryWrappers}">
-                <p ng-hide="historyEntryWrappers.length">{{'manage.edit.connection.history.connectionNotUsed' | translate}}</p>
-                <table class="history section" ng-show="historyEntryWrappers.length">
-                    <tr>
-                        <th>{{'manage.edit.connection.history.username' | translate}}</th>
-                        <th>{{'manage.edit.connection.history.startTime' | translate}}</th>
-                        <th>{{'manage.edit.connection.history.duration' | translate}}</th>
-                    </tr>
-                    <tbody>
-                        <tr ng-repeat="wrapper in historyEntryWrappers">
-                            <td class="username">{{wrapper.entry.username}}</td>
-                            <td class="start">{{wrapper.entry.startDate | date:'short'}}</td>
-                            <td class="duration">{{wrapper.durationText | translate:"{VALUE: wrapper.duration.value, UNIT: wrapper.duration.unit}"}}</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </dd>
-          </dl>
-        </div>
-      </div>
-    </div>
-
-    <!-- Control buttons -->
-    <div class="footer">
-      <button ng-click="save()">{{'manage.edit.connection.save' | translate}}</button>
-      <button ng-click="close()">{{'manage.edit.connection.cancel' | translate}}</button>
-      <button ng-click="delete()" class="danger">{{'manage.edit.connection.delete' | translate}}</button>
-    </div>
-  </div>
-</div>

guacamole/src/main/webapp/app/manage/templates/locationChooser.html

@@ -1,4 +1,4 @@
-<div>
+<div class="location-chooser">
     <!--
     Copyright 2014 Glyptodon LLC.
 
@@ -21,10 +21,10 @@
     THE SOFTWARE.
     -->
 
-    <!-- Open the dropdown -->
+    <!-- Chosen group name -->
     <div ng-click="toggleMenu()" class="location">{{chosenConnectionGroupName}}</div>
 
-    
+    <!-- Dropdown hierarchical menu of groups -->
     <div ng-show="menuOpen" class="dropdown">
         <guac-group-list
             context="groupListContext"
@@ -32,4 +32,5 @@
             connection-group="rootGroup"
             connection-group-template="'app/manage/templates/locationChooserConnectionGroup.html'"/>
     </div>
+
 </div>

guacamole/src/main/webapp/app/manage/templates/manage.html

@@ -57,7 +57,7 @@ THE SOFTWARE.
 
         <!-- Control to create a new connection or group -->
         <div class="connection-add-form">
-            <button ng-click="newConnection()" class="add-connection">{{'manage.newConnection' | translate}}</button>
+            <a class="add-connection button" href="#/manage/connections/">{{'manage.newConnection' | translate}}</a>
             <button ng-click="newConnectionGroup()" class="add-connection-group">{{'manage.newGroup' | translate}}</button>
         </div>
 

guacamole/src/main/webapp/app/manage/templates/manageConnection.html

@@ -0,0 +1,107 @@
+<!--
+Copyright 2014 Glyptodon LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+-->
+
+<div class="logout-panel">
+    <a class="back button" href="#/manage/">{{'manage.back' | translate}}</a>
+    <a class="logout button" ng-click="logout()">{{'home.logout' | translate}}</a>
+</div>
+
+<!-- Connection name -->
+<h2>{{'manage.edit.connection.title' | translate}}</h2>
+
+<!-- Main connection edit section -->
+<div class="info">
+        <table>
+        
+        <!-- Edit connection name -->
+        <tr>
+            <th>{{'manage.edit.connection.name' | translate}}</th>
+          
+            <td><input type="text" ng-model="connection.name"/></td>
+        </tr>
+        
+        <!-- Edit connection location -->
+        <tr>
+            <th>{{'manage.edit.connection.location' | translate}}</th>
+          
+            <td>
+                <location-chooser value="connection.parentIdentifier" root-group="rootGroup"></location-chooser>
+            </td>
+        </tr>
+        
+        
+        <!-- Edit connection protocol -->
+        <tr>
+            <th>{{'manage.edit.connection.protocol' | translate}}</th>
+            <td>
+                <select ng-model="connection.protocol" ng-options="name as 'protocol.' + protocol.name + '.label' | translate for (name, protocol) in protocols | orderBy: name"></select>
+            </td>
+        </tr>
+    </table>
+</div>
+
+<!-- Connection parameters -->
+<h2>{{'manage.edit.connection.parameters' | translate}}</h2>
+
+<div class="parameters" ng-class="{loading: !parameters}">
+  <table class="fields">
+      
+    <!-- All the different possible editable field types -->
+    <tr ng-repeat="parameter in protocols[connection.protocol].parameters">
+      <th>{{'protocol.' + connection.protocol + '.parameters.' + parameter.name + '.label' | translate}}:</th>
+      <td>
+          <guac-connection-parameter protocol="protocols[connection.protocol]" name="parameter.name" parameters="parameters"/>
+      </td>
+    </tr>
+  </table>
+</div>
+
+<!-- Form action buttons -->
+<div class="action-buttons">
+  <button ng-click="save()">{{'manage.edit.connection.save' | translate}}</button>
+  <button ng-click="close()">{{'manage.edit.connection.cancel' | translate}}</button>
+  <button ng-click="delete()" class="danger">{{'manage.edit.connection.delete' | translate}}</button>
+</div>
+
+<!-- History connection area -->
+<h2>{{'manage.edit.connection.history.usageHistory' | translate}}</h2>
+
+<!-- History connection list -->
+<div class="history" ng-class="{loading: !historyEntryWrappers}">
+    <p ng-hide="historyEntryWrappers.length">{{'manage.edit.connection.history.connectionNotUsed' | translate}}</p>
+    <table ng-show="historyEntryWrappers.length">
+        <thead>
+            <tr>
+                <th>{{'manage.edit.connection.history.username' | translate}}</th>
+                <th>{{'manage.edit.connection.history.startTime' | translate}}</th>
+                <th>{{'manage.edit.connection.history.duration' | translate}}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr ng-repeat="wrapper in historyEntryWrappers">
+                <td class="username">{{wrapper.entry.username}}</td>
+                <td class="start">{{wrapper.entry.startDate | date:'short'}}</td>
+                <td class="duration">{{wrapper.durationText | translate:"{VALUE: wrapper.duration.value, UNIT: wrapper.duration.unit}"}}</td>
+            </tr>
+        </tbody>
+    </table>
+</div>

guacamole/src/main/webapp/translations/en_US.json

@@ -39,6 +39,7 @@
         "newGroup"               : "New Group",
         "edit": {
             "connection": {
+                "title"             : "Edit Connection",
                 "cancel"            : "Cancel",
                 "save"              : "Save",
                 "delete"            : "Delete",
@@ -46,10 +47,10 @@
                 "root"              : "ROOT",
                 "location"          : "Location:",
                 "name"              : "Name:",
-                "parameters"        : "Parameters:",
+                "parameters"        : "Parameters",
                 "history"           : {
                     "connectionNotUsed" : "This connection has not yet been used.",
-                    "usageHistory"      : "Usage History:",
+                    "usageHistory"      : "Usage History",
                     "username"          : "Username",
                     "startTime"         : "Start Time",
                     "duration"          : "Duration",