From c26cf7361e92911dfecf929d309de3eea56befe3 Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Tue, 6 Jan 2015 02:41:35 -0800 Subject: [PATCH] GUAC-340: Add password show/hide button. --- .../manage/directives/connectionParameter.js | 45 ++++++++++++++ .../manage/styles/connection-parameter.css | 57 ++++++++++++++++++ .../manage/templates/connectionParameter.html | 11 +++- .../images/action-icons/guac-hide-pass.png | Bin 0 -> 721 bytes .../images/action-icons/guac-show-pass.png | Bin 0 -> 709 bytes .../src/main/webapp/translations/en_US.json | 6 +- 6 files changed, 114 insertions(+), 5 deletions(-) create mode 100644 guacamole/src/main/webapp/app/manage/styles/connection-parameter.css create mode 100644 guacamole/src/main/webapp/images/action-icons/guac-hide-pass.png create mode 100644 guacamole/src/main/webapp/images/action-icons/guac-show-pass.png 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 0000000000000000000000000000000000000000..816d0b26d027202004bc976d77426643a40ba4ba GIT binary patch literal 721 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=EX7WqAsj$Z!;#Vf2?p zUk71ECym(^Ktah8*NBqf{Irtt#G+J&^73-M%)IR44VurvPr4`*AVO>oE&I%k_Vq%(?xWuA){=NN?)4O{+7-JahnBx-HFclxj z2-GdzEG;F^{4PAF=5Yq|U&7FtK%_g6|E6;ddxZVGG($wn4u%v%`ck7Eksh&2&ehPQiBF6RH zpZ9v4Sso_2z%(H|>7RSzzW1F!FUDNBkl%ioVJm}aVgoc_d?gl$El~UIc;rmffs3=U z zGGAf3(!!X2?p zUk71ECym(^Ktah8*NBqf{Irtt#G+J&^73-M%)IR4w+b`xCNy=f=F^7kYxWcyV`ujj%-wt7FXg&~i z`sjLj@ld9m9Sf4$+V3(aY`fT7d96YD-M>ADXSrUnVO=*d{!eX!Tm{n}hB5}@1BMT3 z7Ckq6Fm2}Cg75O8Ghb!y_`3Y(-}>L%bN?{z_|X45y`lBUU%nX0m&Ob`W^(+KwTOyH zw%#yj#b%pVOmV7B=S|lXTW#j%%U{y)X#JtIZTvST@2FY4g|A`veP%gTJ^B2g)w;g- zSlK#%PJg#A>f-Ojq`G|9wOP9aK5W_a{qd2Stm$8!gc+lSKhM{$uJ=0QA9iiEQe1nn z_}Lr=8Hs