safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 13:17:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-1176: Migrate all field types to the new field registration service. Use field registration service within guacFormField directive.

Browse Source
This commit is contained in:
Michael Jumper
2015-06-05 00:09:52 -07:00
parent d292eb94ea
commit 48e10ab69a
13 changed files with 330 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
guacamole/src/main/webapp/app/form/controllers/checkboxFieldController.js Normal file
View File

@@ -0,0 +1,40 @@
/*
* 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.
*/
/**
* Controller for checkbox fields.
*/
angular.module('form').controller('checkboxFieldController', ['$scope',
function checkboxFieldController($scope) {
// Update typed value when model is changed
$scope.$watch('model', function modelChanged(model) {
$scope.typedValue = (model === $scope.field.value);
});
// Update string value in model when typed value is changed
$scope.$watch('typedValue', function typedValueChanged(typedValue) {
$scope.model = (typedValue ? $scope.field.value : '');
});
}]);

40
guacamole/src/main/webapp/app/form/controllers/numberFieldController.js Normal file
View File

@@ -0,0 +1,40 @@
/*
* 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.
*/
/**
* Controller for number fields.
*/
angular.module('form').controller('numberFieldController', ['$scope',
function numberFieldController($scope) {
// Update typed value when model is changed
$scope.$watch('model', function modelChanged(model) {
$scope.typedValue = (model ? Number(model) : null);
});
// Update string value in model when typed value is changed
$scope.$watch('typedValue', function typedValueChanged(typedValue) {
$scope.model = (typedValue ? typedValue.toString() : '');
});
}]);

75
guacamole/src/main/webapp/app/form/controllers/passwordFieldController.js Normal file
View File

@@ -0,0 +1,75 @@
/*
* 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.
*/
/**
* Controller for password fields.
*/
angular.module('form').controller('passwordFieldController', ['$scope',
function passwordFieldController($scope) {
/**
* The type to use for the input field. By default, the input field will
* have the type 'password', and thus will be masked.
*
* @type String
* @default 'password'
*/
$scope.passwordInputType = 'password';
/**
* Returns a string which describes the action the next call to
* togglePassword() will have.
*
* @return {String}
* A string which describes the action the next call to
* togglePassword() will have.
*/
$scope.getTogglePasswordHelpText = function getTogglePasswordHelpText() {
// If password is hidden, togglePassword() will show the password
if ($scope.passwordInputType === 'password')
return 'FORM.HELP_SHOW_PASSWORD';
// If password is shown, togglePassword() will hide the password
return 'FORM.HELP_HIDE_PASSWORD';
};
/**
* Toggles visibility of the field contents, if this field is a
* password field. Initially, password contents are masked
* (invisible).
*/
$scope.togglePassword = function togglePassword() {
// If password is hidden, show the password
if ($scope.passwordInputType === 'password')
$scope.passwordInputType = 'text';
// If password is shown, hide the password
else
$scope.passwordInputType = 'password';
};
}]);

64
guacamole/src/main/webapp/app/form/controllers/selectFieldController.js Normal file
View File

@@ -0,0 +1,64 @@
/*
* 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.
*/
/**
* Controller for select fields.
*/
angular.module('form').controller('selectFieldController', ['$scope', '$injector',
function selectFieldController($scope, $injector) {
// Required services
var translationStringService = $injector.get('translationStringService');
/**
* Produces the translation string for the given field option
* value. The translation string will be of the form:
*
* <code>NAMESPACE.FIELD_OPTION_NAME_VALUE<code>
*
* where <code>NAMESPACE</code> is the namespace provided to the
* directive, <code>NAME</code> is the field name transformed
* via translationStringService.canonicalize(), and
* <code>VALUE</code> is the option value transformed via
* translationStringService.canonicalize()
*
* @param {String} value
* The name of the option value.
*
* @returns {String}
* The translation string which produces the translated name of the
* value specified.
*/
$scope.getFieldOption = function getFieldOption(value) {
// If no field, or no value, then no corresponding translation string
if (!$scope.field || !$scope.field.name || !value)
return '';
return translationStringService.canonicalize($scope.namespace || 'MISSING_NAMESPACE')
+ '.FIELD_OPTION_' + translationStringService.canonicalize($scope.field.name)
+ '_' + translationStringService.canonicalize(value || 'EMPTY');
};
}]);

163
guacamole/src/main/webapp/app/form/directives/formField.js
View File

@@ -1,5 +1,5 @@
/*
* Copyright (C) 2014 Glyptodon LLC
* 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
@@ -60,55 +60,19 @@ angular.module('form').directive('guacFormField', [function formField() {
},
templateUrl: 'app/form/templates/formField.html',
controller: ['$scope', '$injector', function formFieldController($scope, $injector) {
controller: ['$scope', '$injector', '$element', function formFieldController($scope, $injector, $element) {
// Required services
var formService = $injector.get('formService');
var translationStringService = $injector.get('translationStringService');
/**
* The type to use for password input fields. By default, password
* input fields have type 'password', and are thus masked.
*
* @type String
* @default 'password'
*/
$scope.passwordInputType = 'password';
/**
* Returns a string which describes the action the next call to
* togglePassword() will have.
* The element which should contain any compiled field content. The
* actual content of a field is dynamically determined by its type.
*
* @return {String}
* A string which describes the action the next call to
* togglePassword() will have.
* @type Element[]
*/
$scope.getTogglePasswordHelpText = function getTogglePasswordHelpText() {
// If password is hidden, togglePassword() will show the password
if ($scope.passwordInputType === 'password')
return 'FORM.HELP_SHOW_PASSWORD';
// If password is shown, togglePassword() will hide the password
return 'FORM.HELP_HIDE_PASSWORD';
};
/**
* Toggles visibility of the field contents, if this field is a
* password field. Initially, password contents are masked
* (invisible).
*/
$scope.togglePassword = function togglePassword() {
// If password is hidden, show the password
if ($scope.passwordInputType === 'password')
$scope.passwordInputType = 'text';
// If password is shown, hide the password
else
$scope.passwordInputType = 'password';
};
var fieldContent = $element.find('.form-field');
/**
* Produces the translation string for the header of the current
@@ -135,113 +99,20 @@ angular.module('form').directive('guacFormField', [function formField() {
};
/**
* Produces the translation string for the given field option
* value. The translation string will be of the form:
*
* <code>NAMESPACE.FIELD_OPTION_NAME_VALUE<code>
*
* where <code>NAMESPACE</code> is the namespace provided to the
* directive, <code>NAME</code> is the field name transformed
* via translationStringService.canonicalize(), and
* <code>VALUE</code> is the option value transformed via
* translationStringService.canonicalize()
*
* @param {String} value
* The name of the option value.
*
* @returns {String}
* The translation string which produces the translated name of the
* value specified.
*/
$scope.getFieldOption = function getFieldOption(value) {
// Update field contents when field definition is changed
$scope.$watch('field', function setField(field) {
// If no field, or no value, then no corresponding translation string
if (!$scope.field || !$scope.field.name || !value)
return '';
// Reset contents
fieldContent.innerHTML = '';
return translationStringService.canonicalize($scope.namespace || 'MISSING_NAMESPACE')
+ '.FIELD_OPTION_' + translationStringService.canonicalize($scope.field.name)
+ '_' + translationStringService.canonicalize(value || 'EMPTY');
};
/**
* Translates the given string field value into an appropriately-
* typed value as dictated by the attributes of the field,
* exposing that typed value within the scope as
* <code>$scope.typedValue<code>.
*
* @param {String} modelValue
* The current string value of the field.
*/
var setTypedValue = function setTypedValue(modelValue) {
// Don't bother if the model is not yet defined
if (!$scope.field)
return;
// Coerce numeric strings to numbers
if ($scope.field.type === 'NUMERIC')
$scope.typedValue = (modelValue ? Number(modelValue) : null);
// Coerce boolean strings to boolean values
else if ($scope.field.type === 'BOOLEAN')
$scope.typedValue = (modelValue === $scope.field.value);
// All other field types are represented internally as strings
else
$scope.typedValue = modelValue || '';
};
/**
* Translates the given typed field value into a string as dictated
* by the attributes of the field, assigning that string value to
* the model.
*
* @param {String|Number|Boolean} typedValue
* The current value of the field, as an appropriate JavaScript
* type.
*/
var setModelValue = function setModelValue(typedValue) {
// Don't bother if the model is not yet defined
if (!$scope.field)
return;
// Convert numeric values back into strings
if ($scope.field.type === 'NUMERIC') {
if (!typedValue)
$scope.model = '';
else
$scope.model = typedValue.toString();
// Append field content
if (field) {
formService.createFieldElement(field.type, $scope)
.then(function fieldElementCreated(element) {
fieldContent.append(element);
});
}
// Convert boolean values back into strings based on field description
else if ($scope.field.type === 'BOOLEAN')
$scope.model = (typedValue ? $scope.field.value : '');
// All other field types are already strings
else
$scope.model = typedValue || '';
};
// Update string value and re-assign to model when field is changed
$scope.$watch('field', function setField(field) {
setTypedValue($scope.model);
setModelValue($scope.typedValue);
});
// Update typed value when model is changed
$scope.$watch('model', function setModel(model) {
setTypedValue(model);
});
// Update string value in model when typed value is changed
$scope.$watch('typedValue', function typedValueChanged(typedValue) {
setModelValue(typedValue);
});
}] // end controller

85
guacamole/src/main/webapp/app/form/services/formService.js
View File

@@ -85,7 +85,90 @@ angular.module('form').factory('formService', ['$injector',
*
* @type Object.<String, FieldType>
*/
service.fieldTypes = {};
service.fieldTypes = {
/**
* Text field type.
*
* @see {@link Field.Type.TEXT}
* @type FieldType
*/
'TEXT' : {
templateUrl : 'app/form/templates/textField.html'
},
/**
* Numeric field type.
*
* @see {@link Field.Type.NUMERIC}
* @type FieldType
*/
'NUMERIC' : {
module : 'form',
controller : 'numberFieldController',
templateUrl : 'app/form/templates/numberField.html'
},
/**
* Boolean field type.
*
* @see {@link Field.Type.BOOLEAN}
* @type FieldType
*/
'BOOLEAN' : {
module : 'form',
controller : 'checkboxFieldController',
templateUrl : 'app/form/templates/checkboxField.html'
},
/**
* Username field type. Identical in principle to a text field, but may
* have different semantics.
*
* @see {@link Field.Type.USERNAME}
* @type FieldType
*/
'USERNAME' : {
templateUrl : 'app/form/templates/textField.html'
},
/**
* Password field type. Similar to a text field, but the contents of
* the field are masked.
*
* @see {@link Field.Type.PASSWORD}
* @type FieldType
*/
'PASSWORD' : {
module : 'form',
controller : 'passwordFieldController',
templateUrl : 'app/form/templates/passwordField.html'
},
/**
* Enumerated field type. The user is presented a finite list of values
* to choose from.
*
* @see {@link Field.Type.ENUM}
* @type FieldType
*/
'ENUM' : {
module : 'form',
controller : 'selectFieldController',
templateUrl : 'app/form/templates/selectField.html'
},
/**
* Multiline field type. The user may enter multiple lines of text.
*
* @see {@link Field.Type.MULTILINE}
* @type FieldType
*/
'MULTILINE' : {
templateUrl : 'app/form/templates/textAreaField.html'
}
};
/**
* Registers a new field type under the given name.

1
guacamole/src/main/webapp/app/form/templates/checkboxField.html Normal file
View File

@@ -0,0 +1 @@
<input type="checkbox" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>

18
guacamole/src/main/webapp/app/form/templates/formField.html
View File

@@ -24,24 +24,8 @@
<!-- Field header -->
<span class="field-header">{{getFieldHeader() | translate}}</span>
<!-- Generic input types -->
<!-- Field content -->
<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"/>
<input ng-show="field.type === 'BOOLEAN'" type="checkbox" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
<!-- Password field -->
<div ng-show="field.type === 'PASSWORD'" class="password-field">
<input type="{{passwordInputType}}" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
<div class="icon toggle-password" ng-click="togglePassword()" title="{{getTogglePasswordHelpText() | translate}}"></div>
</div>
<!-- Multiline field -->
<textarea ng-show="field.type === 'MULTILINE'" ng-model="typedValue" autocorrect="off" autocapitalize="off"></textarea>
<!-- 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>

1
guacamole/src/main/webapp/app/form/templates/numberField.html Normal file
View File

@@ -0,0 +1 @@
<input type="number" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>

4
guacamole/src/main/webapp/app/form/templates/passwordField.html Normal file
View File

@@ -0,0 +1,4 @@
<div class="password-field">
<input type="{{passwordInputType}}" ng-model="model" autocorrect="off" autocapitalize="off"/>
<div class="icon toggle-password" ng-click="togglePassword()" title="{{getTogglePasswordHelpText() | translate}}"></div>
</div>

1
guacamole/src/main/webapp/app/form/templates/selectField.html Normal file
View File

@@ -0,0 +1 @@
<select ng-model="model" ng-options="option.value as getFieldOption(option.value) | translate for option in field.options | orderBy: value"></select>

1
guacamole/src/main/webapp/app/form/templates/textAreaField.html Normal file
View File

@@ -0,0 +1 @@
<textarea ng-model="model" autocorrect="off" autocapitalize="off"></textarea>

1
guacamole/src/main/webapp/app/form/templates/textField.html Normal file
View File

@@ -0,0 +1 @@
<input type="text" ng-model="model" autocorrect="off" autocapitalize="off"/>