diff --git a/guacamole/src/main/webapp/app/manage/directives/connectionParameter.js b/guacamole/src/main/webapp/app/manage/directives/connectionParameter.js index 49d74d6c4..8ca090163 100644 --- a/guacamole/src/main/webapp/app/manage/directives/connectionParameter.js +++ b/guacamole/src/main/webapp/app/manage/directives/connectionParameter.js @@ -63,6 +63,51 @@ angular.module('manage').directive('guacConnectionParameter', [function connecti var $q = $injector.get('$q'); 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. + * + * @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 'MANAGE.HELP_SHOW_PASSWORD'; + + // If password is shown, togglePassword() will hide the password + return 'MANAGE.HELP_HIDE_PASSWORD'; + + }; + + /** + * Toggles visibility of the parameter contents, if this parameter + * is a password parameter. 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'; + + }; + /** * Deferred load of the parameter definition, pending availability * of the protocol definition as a whole. diff --git a/guacamole/src/main/webapp/app/manage/styles/connection-parameter.css b/guacamole/src/main/webapp/app/manage/styles/connection-parameter.css new file mode 100644 index 000000000..11c78f105 --- /dev/null +++ b/guacamole/src/main/webapp/app/manage/styles/connection-parameter.css @@ -0,0 +1,57 @@ +/* + * 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. + */ + +/* Do not stretch connection parameters to fit available area */ +.connection-parameter input[type=text], +.connection-parameter input[type=password], +.connection-parameter 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'); +} \ No newline at end of file diff --git a/guacamole/src/main/webapp/app/manage/templates/connectionParameter.html b/guacamole/src/main/webapp/app/manage/templates/connectionParameter.html index 8a5ec79b7..7cbd07c10 100644 --- a/guacamole/src/main/webapp/app/manage/templates/connectionParameter.html +++ b/guacamole/src/main/webapp/app/manage/templates/connectionParameter.html @@ -1,4 +1,4 @@ - +
+
+ +
+
+ - \ No newline at end of file +
\ No newline at end of file diff --git a/guacamole/src/main/webapp/images/action-icons/guac-hide-pass.png b/guacamole/src/main/webapp/images/action-icons/guac-hide-pass.png new file mode 100644 index 000000000..816d0b26d Binary files /dev/null and b/guacamole/src/main/webapp/images/action-icons/guac-hide-pass.png differ diff --git a/guacamole/src/main/webapp/images/action-icons/guac-show-pass.png b/guacamole/src/main/webapp/images/action-icons/guac-show-pass.png new file mode 100644 index 000000000..ce7ee2b2a Binary files /dev/null and b/guacamole/src/main/webapp/images/action-icons/guac-show-pass.png differ diff --git a/guacamole/src/main/webapp/translations/en_US.json b/guacamole/src/main/webapp/translations/en_US.json index 9055ecb36..ec73b5a31 100644 --- a/guacamole/src/main/webapp/translations/en_US.json +++ b/guacamole/src/main/webapp/translations/en_US.json @@ -135,8 +135,10 @@ "DIALOG_HEADER_ERROR" : "Error", - "HELP_CONNECTIONS" : "Click or tap on a connection below to manage that connection. Depending on your access level, connections can be added and deleted, and their properties (protocol, hostname, port, etc.) can be changed.", - "HELP_USERS" : "Click or tap on a user below to manage that user. Depending on your access level, users can be added and deleted, and their passwords can be changed.", + "HELP_CONNECTIONS" : "Click or tap on a connection below to manage that connection. Depending on your access level, connections can be added and deleted, and their properties (protocol, hostname, port, etc.) can be changed.", + "HELP_SHOW_PASSWORD" : "Click to show password", + "HELP_HIDE_PASSWORD" : "Click to hide password", + "HELP_USERS" : "Click or tap on a user below to manage that user. Depending on your access level, users can be added and deleted, and their passwords can be changed.", "SECTION_HEADER_ADMINISTRATION" : "Administration", "SECTION_HEADER_CONNECTIONS" : "Connections",