GUAC-340: Add password show/hide button.

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.

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');
+}

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

@@ -1,4 +1,4 @@
-<span class="connectionParameter">
+<div class="connection-parameter">
     <!--
         Copyright 2014 Glyptodon LLC.
 
@@ -25,13 +25,18 @@
     <input    ng-show="parameter.type === 'TEXT'"     type="text"     ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
     <input    ng-show="parameter.type === 'NUMERIC'"  type="number"   ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
     <input    ng-show="parameter.type === 'USERNAME'" type="text"     ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
-    <input    ng-show="parameter.type === 'PASSWORD'" type="password" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
     <input    ng-show="parameter.type === 'BOOLEAN'"  type="checkbox" ng-model="typedValue" autocorrect="off" autocapitalize="off"/>
 
+    <!-- Password parameter -->
+    <div ng-show="parameter.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 parameter -->
     <textarea ng-show="parameter.type === 'MULTILINE'" ng-model="typedValue" autocorrect="off" autocapitalize="off"></textarea>
 
     <!-- Enumerated parameter -->
     <select   ng-show="parameter.type === 'ENUM'" ng-model="typedValue" ng-options="option.value as getProtocolParameterOption(protocol.name, parameter.name, option.value) | translate for option in parameter.options | orderBy: value"></select>
 
-</span>
+</div>

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",