GUAC-1161: Move field header within guacFormField directive.

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

@@ -113,34 +113,6 @@ angular.module('form').directive('guacForm', [function form() {
 
             };
 
-            /**
-             * Produces the translation string for the header of the given
-             * field. The translation string will be of the form:
-             *
-             * <code>NAMESPACE.FIELD_HEADER_NAME<code>
-             *
-             * where <code>NAMESPACE</code> is the namespace provided to the
-             * directive and <code>NAME</code> is the field name transformed
-             * via translationStringService.canonicalize().
-             *
-             * @param {Field} field
-             *     The field for which to produce the translation string.
-             *
-             * @returns {String}
-             *     The translation string which produces the translated header
-             *     of the field.
-             */
-            $scope.getFieldHeader = function getFieldHeader(field) {
-
-                // If no field, or no name, then no header
-                if (!field || !field.name)
-                    return '';
-
-                return translationStringService.canonicalize($scope.namespace || 'MISSING_NAMESPACE')
-                        + '.FIELD_HEADER_' + translationStringService.canonicalize(field.name);
-
-            };
-
             /**
              * Determines whether the given object is a form, under the
              * assumption that the object is either a form or a field.

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

@@ -110,6 +110,31 @@ angular.module('form').directive('guacFormField', [function formField() {
 
             };
 
+            /**
+             * Produces the translation string for the header of the current
+             * field. The translation string will be of the form:
+             *
+             * <code>NAMESPACE.FIELD_HEADER_NAME<code>
+             *
+             * where <code>NAMESPACE</code> is the namespace provided to the
+             * directive and <code>NAME</code> is the field name transformed
+             * via translationStringService.canonicalize().
+             *
+             * @returns {String}
+             *     The translation string which produces the translated header
+             *     of the field.
+             */
+            $scope.getFieldHeader = function getFieldHeader() {
+
+                // If no field, or no name, then no header
+                if (!$scope.field || !$scope.field.name)
+                    return '';
+
+                return translationStringService.canonicalize($scope.namespace || 'MISSING_NAMESPACE')
+                        + '.FIELD_HEADER_' + translationStringService.canonicalize($scope.field.name);
+
+            };
+
             /**
              * Produces the translation string for the given field option
              * value. The translation string will be of the form:

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

@@ -26,10 +26,8 @@
 
     <!-- All fields in form -->
     <div class="fields">
-        <label ng-repeat="field in form.fields" class="labeled-field">
+        <guac-form-field ng-repeat="field in form.fields" namespace="namespace"
-            <span class="field-header">{{getFieldHeader(field) | translate}}</span>
+                         field="field" model="values[field.name]"></guac-form-field>
-            <guac-form-field namespace="namespace" field="field" model="values[field.name]"></guac-form-field>
-        </label>
     </div>
 
 </div>

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

@@ -1,4 +1,4 @@
-<div class="form-field" ng-class="{empty: !model}">
+<label class="labeled-field" ng-class="{empty: !model}">
     <!--
         Copyright 2014 Glyptodon LLC.
 
@@ -21,7 +21,11 @@
         THE SOFTWARE.
     -->
 
+    <!-- Field header -->
+    <span class="field-header">{{getFieldHeader() | translate}}</span>
+
     <!-- Generic input types -->
+    <div class="form-field">
         <input ng-show="field.type === 'TEXT'"     type="text"     ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
         <input ng-show="field.type === 'NUMERIC'"  type="number"   ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
         <input ng-show="field.type === 'USERNAME'" type="text"     ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
@@ -38,5 +42,6 @@
 
         <!-- Enumerated field -->
         <select ng-show="field.type === 'ENUM'" ng-model="typedValue" ng-options="option.value as getFieldOption(option.value) | translate for option in field.options | orderBy: value"></select>
-
     </div>
+
+</label>

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

@@ -64,7 +64,7 @@ p.login-error {
     position: relative;
 }
 
-.login-fields .field-header {
+.login-fields .labeled-field .field-header {
 
   display: block;
   position: absolute;
@@ -79,10 +79,10 @@ p.login-error {
 
 }
 
-.login-fields .form-field.empty input {
+.login-fields .labeled-field.empty input {
     background: transparent;
 }
 
-.login-fields .form-field input:focus {
+.login-fields .labeled-field input:focus {
     background: white;
 }

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

@@ -39,4 +39,5 @@
 .connection-parameters .form .fields .form-field {
     display: table-cell;
     padding: 0.125em;
+    vertical-align: top;
 }