GUAC-1160: Move generalized parameter directive into own "form" module as "guacFormField".

guacamole/src/main/webapp/app/form/directives/formField.js

@@ -22,9 +22,9 @@
 
 
 /**
- * A directive that allows editing of a connection parameter.
+ * A directive that allows editing of a field.
  */
-angular.module('manage').directive('guacConnectionParameter', [function connectionParameter() {
+angular.module('form').directive('guacFormField', [function formField() {
     
     return {
         // Element only
@@ -48,8 +48,8 @@ angular.module('manage').directive('guacConnectionParameter', [function connecti
             model : '='
 
         },
-        templateUrl: 'app/manage/templates/connectionParameter.html',
+        templateUrl: 'app/form/templates/formField.html',
-        controller: ['$scope', '$injector', function connectionParameterController($scope, $injector) {
+        controller: ['$scope', '$injector', function formFieldController($scope, $injector) {
 
             /**
              * The type to use for password input fields. By default, password
@@ -80,9 +80,9 @@ angular.module('manage').directive('guacConnectionParameter', [function connecti
             };
 
             /**
-             * Toggles visibility of the parameter contents, if this parameter
+             * Toggles visibility of the field contents, if this field is a 
-             * is a password parameter. Initially, password contents are
+             * password field. Initially, password contents are masked
-             * masked (invisible).
+             * (invisible).
              */
             $scope.togglePassword = function togglePassword() {
 
@@ -119,7 +119,7 @@ angular.module('manage').directive('guacConnectionParameter', [function connecti
                 else if ($scope.field.type === 'BOOLEAN')
                     $scope.typedValue = (modelValue === $scope.field.value);
 
-                // All other parameter types are represented internally as strings
+                // All other field types are represented internally as strings
                 else
                     $scope.typedValue = modelValue || '';
 
@@ -152,7 +152,7 @@ angular.module('manage').directive('guacConnectionParameter', [function connecti
                 else if ($scope.field.type === 'BOOLEAN')
                     $scope.model = (typedValue ? $scope.field.value : '');
 
-                // All other parameter types are already strings
+                // All other field types are already strings
                 else
                     $scope.model = typedValue || '';
 
@@ -164,12 +164,12 @@ angular.module('manage').directive('guacConnectionParameter', [function connecti
                 setModelValue($scope.typedValue);
             });
 
-            // Update typed value when parameter set is changed
+            // Update typed value when model is changed
             $scope.$watch('model', function setModel(model) {
                 setTypedValue(model);
             });
 
-            // Update string value in parameter set when typed value is changed
+            // Update string value in model when typed value is changed
             $scope.$watch('typedValue', function typedValueChanged(typedValue) {
                 setModelValue(typedValue);
             });

guacamole/src/main/webapp/app/form/formModule.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (C) 2015 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.
+ */
+
+/**
+ * Module for displaying dynamic forms.
+ */
+angular.module('form', []);

guacamole/src/main/webapp/app/form/styles/form.css

@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2015 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.
+ */
+
+/* Keep toggle-password icon on same line */
+.form-field .password-field {
+    white-space: nowrap;
+}
+
+/* Generic 1x1em icon/button */
+.form-field .password-field .icon.toggle-password {
+
+    display: inline-block;
+    opacity: 0.5;
+    cursor: default;
+
+    background-repeat: no-repeat;
+    background-size: 1em;
+    width: 1em;
+    height: 1em;
+
+}
+
+/* Icon for unmasking passwords */
+.form-field .password-field input[type=password] ~ .icon.toggle-password {
+    background-image: url('images/action-icons/guac-show-pass.png');
+}
+
+/* Icon for masking passwords */
+.form-field .password-field input[type=text] ~ .icon.toggle-password {
+    background-image: url('images/action-icons/guac-hide-pass.png');
+}

guacamole/src/main/webapp/app/form/templates/formField.html

@@ -1,4 +1,4 @@
-<div class="connection-parameter">
+<div class="form-field">
     <!--
         Copyright 2014 Glyptodon LLC.
 

guacamole/src/main/webapp/app/manage/manageModule.js

@@ -24,6 +24,7 @@
  * The module for the administration functionality.
  */
 angular.module('manage', [
+    'form',
     'groupList',
     'list',
     'locale',

guacamole/src/main/webapp/app/manage/styles/connection-parameter.css

@@ -21,37 +21,8 @@
  */
 
 /* Do not stretch connection parameters to fit available area */
-.connection-parameter input[type=text],
+.connection-parameters input[type=text],
-.connection-parameter input[type=password],
+.connection-parameters input[type=password],
-.connection-parameter input[type=number] {
+.connection-parameters input[type=number] {
     width: auto;
 }
-
-/* Keep toggle-password icon on same line */
-.connection-parameter .password-field {
-    white-space: nowrap;
-}
-
-/* Generic 1x1em icon/button */
-.connection-parameter .password-field .icon.toggle-password {
-
-    display: inline-block;
-    opacity: 0.5;
-    cursor: default;
-
-    background-repeat: no-repeat;
-    background-size: 1em;
-    width: 1em;
-    height: 1em;
-
-}
-
-/* Icon for unmasking passwords */
-.connection-parameter .password-field input[type=password] ~ .icon.toggle-password {
-    background-image: url('images/action-icons/guac-show-pass.png');
-}
-
-/* Icon for masking passwords */
-.connection-parameter .password-field input[type=text] ~ .icon.toggle-password {
-    background-image: url('images/action-icons/guac-hide-pass.png');
-}

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

@@ -60,13 +60,13 @@ THE SOFTWARE.
     <!-- Connection parameters -->
     <h2 class="header">{{'MANAGE_CONNECTION.SECTION_HEADER_PARAMETERS' | translate}}</h2>
     <div class="section" ng-class="{loading: !parameters}">
-        <table class="properties">
+        <table class="properties connection-parameters">
             
             <!-- All the different possible editable field types -->
             <tr ng-repeat="parameter in protocols[connection.protocol].parameters">
                 <th>{{parameter.title | translate}}</th>
                 <td>
-                    <guac-connection-parameter field="parameter" model="parameters[parameter.name]"></guac-connection-parameter>
+                    <guac-form-field field="parameter" model="parameters[parameter.name]"></guac-form-field>
                 </td>
             </tr>
         </table>