GUACAMOLE-5: Merge new connection sharing UI.

guacamole/src/main/webapp/app/client/controllers/clientController.js

@@ -36,6 +36,7 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
     var guacClientManager     = $injector.get('guacClientManager');
     var guacNotification      = $injector.get('guacNotification');
     var preferenceService     = $injector.get('preferenceService');
+    var tunnelService         = $injector.get('tunnelService');
     var userPageService       = $injector.get('userPageService');
 
     /**
@@ -235,6 +236,15 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
      */
     $scope.client = guacClientManager.getManagedClient($routeParams.id, $routeParams.params);
 
+    /**
+     * Map of all available sharing profiles for the current connection by
+     * their identifiers. If this information is not yet available, or no such
+     * sharing profiles exist, this will be an empty object.
+     *
+     * @type Object.<String, SharingProfile>
+     */
+    $scope.sharingProfiles = {};
+
     /**
      * Map of all currently pressed keys by keysym. If a particular key is
      * currently pressed, the value stored under that key's keysym within this
@@ -406,6 +416,63 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
 
     });
 
+    // Pull sharing profiles once the tunnel UUID is known
+    $scope.$watch('client.tunnel.uuid', function retrieveSharingProfiles(uuid) {
+
+        // Only pull sharing profiles if tunnel UUID is actually available
+        if (!uuid)
+            return;
+
+        // Pull sharing profiles for the current connection
+        tunnelService.getSharingProfiles(uuid)
+        .success(function sharingProfilesRetrieved(sharingProfiles) {
+            $scope.sharingProfiles = sharingProfiles;
+        });
+
+    });
+
+    /**
+     * Produces a sharing link for the current connection using the given
+     * sharing profile. The resulting sharing link, and any required login
+     * information, will be displayed to the user within the Guacamole menu.
+     *
+     * @param {SharingProfile} sharingProfile
+     *     The sharing profile to use to generate the sharing link.
+     */
+    $scope.share = function share(sharingProfile) {
+        ManagedClient.createShareLink($scope.client, sharingProfile);
+    };
+
+    /**
+     * Returns whether the current connection has any associated share links.
+     *
+     * @returns {Boolean}
+     *     true if the current connection has at least one associated share
+     *     link, false otherwise.
+     */
+    $scope.isShared = function isShared() {
+        return ManagedClient.isShared($scope.client);
+    };
+
+    /**
+     * Returns the total number of share links associated with the current
+     * connection.
+     *
+     * @returns {Number}
+     *     The total number of share links associated with the current
+     *     connection.
+     */
+    $scope.getShareLinkCount = function getShareLinkCount() {
+
+        // Count total number of links within the ManagedClient's share link map
+        var linkCount = 0;
+        for (var dummy in $scope.client.shareLinks)
+            linkCount++;
+
+        return linkCount;
+
+    };
+
     // Track pressed keys, opening the Guacamole menu after Ctrl+Alt+Shift
     $scope.$on('guacKeydown', function keydownListener(event, keysym, keyboard) {
 
@@ -762,6 +829,26 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams
 
     };
 
+    /**
+     * Returns whether the current user can share the current connection with
+     * other users. A connection can be shared if and only if there is at least
+     * one associated sharing profile.
+     *
+     * @returns {Boolean}
+     *     true if the current user can share the current connection with other
+     *     users, false otherwise.
+     */
+    $scope.canShareConnection = function canShareConnection() {
+
+        // If there is at least one sharing profile, the connection can be shared
+        for (var dummy in $scope.sharingProfiles)
+            return true;
+
+        // Otherwise, sharing is not possible
+        return false;
+
+    };
+
     // Clean up when view destroyed
     $scope.$on('$destroy', function clientViewDestroyed() {
 

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

@@ -116,7 +116,11 @@ body.client {
 
 }
 
-.client .user-menu .options li a.disconnect {
+.client .menu .header h2 {
+    text-transform: none;
+}
+
+.client .user-menu .menu-contents li a.disconnect {
     background-repeat: no-repeat;
     background-size: 1em;
     background-position: 0.75em center;

guacamole/src/main/webapp/app/client/styles/guac-menu.css

@@ -171,3 +171,31 @@
 #guac-menu #devices .device.filesystem {
     background-image: url('images/drive.png');
 }
+
+#guac-menu #share-links {
+
+    padding: 1em;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    background: rgba(0, 0, 0, 0.04);
+
+    font-size: 0.8em;
+
+}
+
+#guac-menu #share-links h3 {
+    padding-bottom: 0;
+}
+
+#guac-menu #share-links th {
+    white-space: nowrap;
+}
+
+#guac-menu #share-links a[href] {
+
+    display: block;
+    padding: 0 1em;
+
+    font-family: monospace;
+    font-weight: bold;
+
+}

guacamole/src/main/webapp/app/client/styles/share-menu.css

@@ -0,0 +1,58 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.share-menu {
+
+    /* IE10 */
+    display: -ms-flexbox;
+    -ms-flex-align: stretch;
+    -ms-flex-direction: row;
+
+    /* Ancient Mozilla */
+    display: -moz-box;
+    -moz-box-align: stretch;
+    -moz-box-orient: horizontal;
+
+    /* Ancient WebKit */
+    display: -webkit-box;
+    -webkit-box-align: stretch;
+    -webkit-box-orient: horizontal;
+
+    /* Old WebKit */
+    display: -webkit-flex;
+    -webkit-align-items: stretch;
+    -webkit-flex-direction: row;
+
+    /* W3C */
+    display: flex;
+    align-items: stretch;
+    flex-direction: row;
+
+}
+
+.share-menu .menu-dropdown .menu-title {
+
+    padding-left: 2em;
+
+    background-repeat: no-repeat;
+    background-size: 1em;
+    background-position: 0.5em center;
+    background-image: url('images/share.png');
+
+}

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

@@ -43,12 +43,35 @@
             <!-- Stationary header -->
             <div class="header">
                 <h2>{{client.name}}</h2>
+                <div class="share-menu" ng-show="canShareConnection()">
+                    <guac-menu menu-title="'CLIENT.ACTION_SHARE' | translate">
+                        <ul ng-repeat="sharingProfile in sharingProfiles">
+                            <li><a ng-click="share(sharingProfile)">{{sharingProfile.name}}</a></li>
+                        </ul>
+                    </guac-menu>
+                </div>
                 <guac-user-menu local-actions="clientMenuActions"></guac-user-menu>
             </div>
 
             <!-- Scrollable body -->
             <div class="menu-body" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">
 
+                <!-- Connection sharing -->
+                <div class="menu-section" id="share-links" ng-show="isShared()">
+                    <div class="content">
+                        <h3>{{'CLIENT.INFO_CONNECTION_SHARED' | translate}}</h3>
+                        <p class="description"
+                           translate="CLIENT.HELP_SHARE_LINK"
+                           translate-values="{LINKS : getShareLinkCount()}"></p>
+                        <table>
+                            <tr ng-repeat="link in client.shareLinks | orderBy: name">
+                                <th>{{link.name}}</th>
+                                <td><a href="{{link.href}}" target="_blank">{{link.href}}</a></td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+
                 <!-- Clipboard -->
                 <div class="menu-section" id="clipboard-settings">
                     <h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>

guacamole/src/main/webapp/app/client/types/ManagedClient.js

@@ -31,6 +31,7 @@ angular.module('client').factory('ManagedClient', ['$rootScope', '$injector',
     var ManagedDisplay       = $injector.get('ManagedDisplay');
     var ManagedFilesystem    = $injector.get('ManagedFilesystem');
     var ManagedFileUpload    = $injector.get('ManagedFileUpload');
+    var ManagedShareLink     = $injector.get('ManagedShareLink');
 
     // Required services
     var $document              = $injector.get('$document');
@@ -125,6 +126,15 @@ angular.module('client').factory('ManagedClient', ['$rootScope', '$injector',
          */
         this.filesystems = template.filesystems || [];
 
+        /**
+         * All available share links generated for the this ManagedClient via
+         * ManagedClient.createShareLink(). Each resulting share link is stored
+         * under the identifier of its corresponding SharingProfile.
+         *
+         * @type Object.<String, ManagedShareLink>
+         */
+        this.shareLinks = template.shareLinks || {};
+
         /**
          * The current state of the Guacamole client (idle, connecting,
          * connected, terminated with error, etc.).
@@ -585,6 +595,62 @@ angular.module('client').factory('ManagedClient', ['$rootScope', '$injector',
 
     };
 
+    /**
+     * Produces a sharing link for the given ManagedClient using the given
+     * sharing profile. The resulting sharing link, and any required login
+     * information, can be retrieved from the <code>shareLinks</code> property
+     * of the given ManagedClient once the various underlying service calls
+     * succeed.
+     *
+     * @param {ManagedClient} client
+     *     The ManagedClient which will be shared via the generated sharing
+     *     link.
+     *
+     * @param {SharingProfile} sharingProfile
+     *     The sharing profile to use to generate the sharing link.
+     *
+     * @returns {Promise}
+     *     A Promise which is resolved once the sharing link has been
+     *     successfully generated, and rejected if generating the link fails.
+     */
+    ManagedClient.createShareLink = function createShareLink(client, sharingProfile) {
+
+        // Retrieve sharing credentials for the sake of generating a share link
+        var credentialRequest = tunnelService.getSharingCredentials(
+                client.tunnel.uuid, sharingProfile.identifier);
+
+        // Add a new share link once the credentials are ready
+        credentialRequest.success(function sharingCredentialsReceived(sharingCredentials) {
+            client.shareLinks[sharingProfile.identifier] =
+                ManagedShareLink.getInstance(sharingProfile, sharingCredentials);
+        });
+
+        return credentialRequest;
+
+    };
+
+    /**
+     * Returns whether the given ManagedClient is being shared. A ManagedClient
+     * is shared if it has any associated share links.
+     *
+     * @param {ManagedClient} client
+     *     The ManagedClient to check.
+     *
+     * @returns {Boolean}
+     *     true if the ManagedClient has at least one associated share link,
+     *     false otherwise.
+     */
+    ManagedClient.isShared = function isShared(client) {
+
+        // The connection is shared if at least one share link exists
+        for (var dummy in client.shareLinks)
+            return true;
+
+        // No share links currently exist
+        return false;
+
+    };
+
     return ManagedClient;
 
 }]);

guacamole/src/main/webapp/app/client/types/ManagedShareLink.js

@@ -0,0 +1,105 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Provides the ManagedShareLink class used by ManagedClient to represent
+ * generated connection sharing links.
+ */
+angular.module('client').factory('ManagedShareLink', ['$injector',
+    function defineManagedShareLink($injector) {
+
+    // Required types
+    var UserCredentials = $injector.get('UserCredentials');
+
+    /**
+     * Object which represents a link which can be used to gain access to an
+     * active Guacamole connection.
+     * 
+     * @constructor
+     * @param {ManagedShareLink|Object} [template={}]
+     *     The object whose properties should be copied within the new
+     *     ManagedShareLink.
+     */
+    var ManagedShareLink = function ManagedShareLink(template) {
+
+        // Use empty object by default
+        template = template || {};
+
+        /**
+         * The human-readable display name of this share link.
+         *
+         * @type String
+         */
+        this.name = template.name;
+
+        /**
+         * The actual URL of the link which can be used to access the shared
+         * connection.
+         *
+         * @type String
+         */
+        this.href = template.href;
+
+        /**
+         * The sharing profile which was used to generate the share link.
+         *
+         * @type SharingProfile
+         */
+        this.sharingProfile = template.sharingProfile;
+
+        /**
+         * The credentials from which the share link was derived.
+         *
+         * @type UserCredentials
+         */
+        this.sharingCredentials = template.sharingCredentials;
+
+    };
+
+    /**
+     * Creates a new ManagedShareLink from a set of UserCredentials and the
+     * SharingProfile which was used to generate those UserCredentials.
+     * 
+     * @param {SharingProfile} sharingProfile
+     *     The SharingProfile which was used, via the REST API, to generate the
+     *     given UserCredentials.
+     * 
+     * @param {UserCredentials} sharingCredentials
+     *     The UserCredentials object returned by the REST API in response to a
+     *     request to share a connection using the given SharingProfile.
+     *
+     * @return {ManagedShareLink}
+     *     A new ManagedShareLink object can be used to access the connection
+     *     shared via the given SharingProfile and resulting UserCredentials.
+     */
+    ManagedShareLink.getInstance = function getInstance(sharingProfile, sharingCredentials) {
+
+        // Generate new share link using the given profile and credentials
+        return new ManagedShareLink({
+            'name'               : sharingProfile.name,
+            'href'               : UserCredentials.getLink(sharingCredentials),
+            'sharingProfile'     : sharingProfile,
+            'sharingCredentials' : sharingCredentials
+        });
+
+    };
+
+    return ManagedShareLink;
+
+}]);

guacamole/src/main/webapp/app/index/styles/headers.css

@@ -32,7 +32,7 @@ h2 {
     font-size: 1.25em;
     font-weight: bold;
     text-transform: uppercase;
-    padding: 0.75em 0.5em;
+    padding: 0.5em;
     margin: 0;
 }
 
@@ -90,7 +90,7 @@ h2 {
 
 .header .filter {
     margin: 0;
-    padding: 0.75em 0.5em;
+    padding: 0.5em;
 }
 
 .header .filter input {

guacamole/src/main/webapp/app/manage/styles/attributes.css

@@ -49,7 +49,7 @@
     font-size: 1.25em;
     font-weight: bold;
     text-transform: uppercase;
-    padding: 0.75em 0.5em;
+    padding: 0.5em;
     margin: 1em 0;
 
     border-bottom: 1px solid rgba(0, 0, 0, 0.125);

guacamole/src/main/webapp/app/navigation/directives/guacMenu.js

@@ -0,0 +1,91 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * A directive which provides an arbitrary menu-style container. The contents
+ * of the directive are displayed only when the menu is open.
+ */
+angular.module('navigation').directive('guacMenu', [function guacMenu() {
+
+    return {
+        restrict: 'E',
+        transclude: true,
+        replace: true,
+        scope: {
+
+            /**
+             * The string which should be rendered as the menu title.
+             *
+             * @type String
+             */
+            menuTitle : '='
+
+        },
+
+        templateUrl: 'app/navigation/templates/guacMenu.html',
+        controller: ['$scope', '$injector', '$element',
+            function guacMenuController($scope, $injector, $element) {
+
+            // Get required services
+            var $document = $injector.get('$document');
+
+            /**
+             * The outermost element of the guacMenu directive.
+             *
+             * @type Element
+             */
+            var element = $element[0];
+
+            /**
+             * The main document object.
+             *
+             * @type Document
+             */
+            var document = $document[0];
+
+            /**
+             * Whether the contents of the menu are currently shown.
+             *
+             * @type Boolean
+             */
+            $scope.menuShown = false;
+
+            /**
+             * Toggles visibility of the menu contents.
+             */
+            $scope.toggleMenu = function toggleMenu() {
+                $scope.menuShown = !$scope.menuShown;
+            };
+
+            // Close menu when use clicks anywhere else
+            document.body.addEventListener('click', function clickOutsideMenu() {
+                $scope.$apply(function closeMenu() {
+                    $scope.menuShown = false;
+                });
+            }, false);
+
+            // Prevent click within menu from triggering the outside-menu handler
+            element.addEventListener('click', function clickInsideMenu(e) {
+                e.stopPropagation();
+            }, false);
+
+        }] // end controller
+
+    };
+}]);

guacamole/src/main/webapp/app/navigation/directives/guacUserMenu.js

@@ -40,36 +40,15 @@ angular.module('navigation').directive('guacUserMenu', [function guacUserMenu()
         },
 
         templateUrl: 'app/navigation/templates/guacUserMenu.html',
-        controller: ['$scope', '$injector', '$element', function guacUserMenuController($scope, $injector, $element) {
+        controller: ['$scope', '$injector',
+            function guacUserMenuController($scope, $injector) {
 
             // Get required services
-            var $document             = $injector.get('$document');
             var $location             = $injector.get('$location');
             var $route                = $injector.get('$route');
             var authenticationService = $injector.get('authenticationService');
             var userPageService       = $injector.get('userPageService');
 
-            /**
-             * The outermost element of the user menu directive.
-             *
-             * @type Element
-             */
-            var element = $element[0];
-
-            /**
-             * The main document object.
-             *
-             * @type Document
-             */
-            var document = $document[0];
-
-            /**
-             * Whether the contents of the user menu are currently shown.
-             *
-             * @type Boolean
-             */
-            $scope.menuShown = false;
-
             /**
              * The username of the current user.
              *
@@ -90,13 +69,6 @@ angular.module('navigation').directive('guacUserMenu', [function guacUserMenu()
                 $scope.pages = pages;
             });
             
-            /**
-             * Toggles visibility of the user menu.
-             */
-            $scope.toggleMenu = function toggleMenu() {
-                $scope.menuShown = !$scope.menuShown;
-            };
-
             /**
              * Logs out the current user, redirecting them to back to the root
              * after logout completes.
@@ -125,18 +97,6 @@ angular.module('navigation').directive('guacUserMenu', [function guacUserMenu()
              */
             $scope.actions = [ LOGOUT_ACTION ];
 
-            // Close menu when use clicks anywhere else
-            document.body.addEventListener('click', function clickOutsideMenu() {
-                $scope.$apply(function closeMenu() {
-                    $scope.menuShown = false;
-                });
-            }, false);
-
-            // Prevent click within menu from triggering the outside-menu handler
-            element.addEventListener('click', function clickInsideMenu(e) {
-                e.stopPropagation();
-            }, false);
-
         }] // end controller
 
     };

guacamole/src/main/webapp/app/navigation/styles/menu.css

@@ -0,0 +1,156 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.menu-dropdown {
+
+    /* IE10 */
+    display: -ms-flexbox;
+    -ms-flex-align: center;
+    -ms-flex-direction: row;
+
+    /* Ancient Mozilla */
+    display: -moz-box;
+    -moz-box-align: center;
+    -moz-box-orient: horizontal;
+    
+    /* Ancient WebKit */
+    display: -webkit-box;
+    -webkit-box-align: center;
+    -webkit-box-orient: horizontal;
+
+    /* Old WebKit */
+    display: -webkit-flex;
+    -webkit-align-items: center;
+    -webkit-flex-direction: row;
+
+    /* W3C */
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+}
+
+.menu-dropdown {
+    position: relative;
+    border-left: 1px solid rgba(0,0,0,0.125);
+    background: rgba(0,0,0,0.04);
+}
+
+.menu-dropdown:hover {
+    background: rgba(0,0,0,0.01);
+}
+
+.menu-dropdown.open,
+.menu-dropdown.open:hover {
+    background: rgba(0,0,0,0.3);
+}
+
+.menu-dropdown .menu-title {
+
+    cursor: default;
+    margin: 0;
+    padding: 0.5em;
+    padding-right: 2em;
+
+    -ms-flex: 0 0 auto;
+    -moz-box-flex: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
+   
+}
+
+.menu-dropdown .menu-indicator {
+
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+
+    width: 2em;
+    background-repeat: no-repeat;
+    background-size: 1em;
+    background-position: center center;
+    background-image: url('images/arrows/down.png');
+
+}
+
+.menu-dropdown .menu-contents {
+
+    visibility: hidden;
+
+    position: absolute;
+    top: 100%;
+    right: 0;
+    min-width: 100%;
+    white-space: nowrap;
+
+    background: #EEE;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.125);
+    border-left: 1px solid rgba(0,0,0,0.125);
+    border-bottom: 1px solid rgba(0,0,0,0.125);
+
+    z-index: 5;
+    
+}
+
+.menu-dropdown .menu-contents ul {
+    margin: 0;
+    padding: 0;
+}
+
+.menu-dropdown.open .menu-contents {
+    visibility: visible;
+}
+
+.menu-dropdown .menu-contents li {
+    padding: 0;
+    list-style-type: none;
+}
+
+.menu-dropdown .menu-contents li a {
+
+    display: block;
+    cursor: pointer;
+    color: black;
+    text-decoration: none;
+    padding: 0.75em;
+
+}
+
+.menu-dropdown .menu-contents li a:hover {
+    background-color: #CDA;
+}
+
+.menu-dropdown .menu-contents li a.current,
+.menu-dropdown .menu-contents li a.current:hover {
+    background-color: transparent;
+    cursor: default;
+    opacity: 0.25;
+}
+
+.menu-dropdown .menu-contents li a.danger {
+    color: white;
+    font-weight: bold;
+    background-color: #A43;
+}
+
+.menu-dropdown .menu-contents li a.danger:hover {
+    background-color: #C54;
+}

guacamole/src/main/webapp/app/navigation/styles/user-menu.css

@@ -46,127 +46,19 @@
 
 }
 
-.user-menu .user-menu-dropdown {
+.user-menu .menu-dropdown .menu-title {
 
-    /* IE10 */
-    display: -ms-flexbox;
-    -ms-flex-align: center;
-    -ms-flex-direction: row;
-
-    /* Ancient Mozilla */
-    display: -moz-box;
-    -moz-box-align: center;
-    -moz-box-orient: horizontal;
-    
-    /* Ancient WebKit */
-    display: -webkit-box;
-    -webkit-box-align: center;
-    -webkit-box-orient: horizontal;
-
-    /* Old WebKit */
-    display: -webkit-flex;
-    -webkit-align-items: center;
-    -webkit-flex-direction: row;
-
-    /* W3C */
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-
-}
-
-.user-menu .user-menu-dropdown {
-    position: relative;
-    border-left: 1px solid rgba(0,0,0,0.125);
-    background: rgba(0,0,0,0.04);
-}
-
-.user-menu .user-menu-dropdown:hover {
-    background: rgba(0,0,0,0.01);
-}
-
-.user-menu .user-menu-dropdown.open,
-.user-menu .user-menu-dropdown.open:hover {
-    background: rgba(0,0,0,0.3);
-}
-
-.user-menu .username {
-
-    cursor: default;
-    margin: 0;
-    min-width: 2in;
-
-    font-size: 1.25em;
     font-weight: bold;
-    padding: 0.5em 2em;
+    padding-left: 2em;
 
     background-repeat: no-repeat;
     background-size: 1em;
     background-position: 0.5em center;
     background-image: url('images/user-icons/guac-user.png');
 
-    -ms-flex: 0 0 auto;
-    -moz-box-flex: 0;
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 auto;
-    flex: 0 0 auto;
-   
 }
 
-.user-menu .menu-indicator {
+.user-menu .menu-dropdown .menu-contents li a {
-
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-
-    width: 2em;
-    background-repeat: no-repeat;
-    background-size: 1em;
-    background-position: center center;
-    background-image: url('images/arrows/down.png');
-
-}
-
-.user-menu .options {
-
-    visibility: hidden;
-
-    position: absolute;
-    top: 100%;
-    right: 0;
-    left: -1px;
-
-    background: #EEE;
-    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.125);
-    border-left: 1px solid rgba(0,0,0,0.125);
-    border-bottom: 1px solid rgba(0,0,0,0.125);
-
-    z-index: 5;
-    
-}
-
-.user-menu .options ul {
-    margin: 0;
-    padding: 0;
-}
-
-.user-menu .user-menu-dropdown.open .options {
-    visibility: visible;
-}
-
-.user-menu .options li {
-    padding: 0;
-    list-style-type: none;
-}
-
-.user-menu .options li a {
-
-    display: block;
-    cursor: pointer;
-    color: black;
-    text-decoration: none;
-    padding: 0.75em;
 
     background-repeat: no-repeat;
     background-size: 1em;
@@ -176,38 +68,17 @@
 
 }
 
-.user-menu .options li a:hover {
+.user-menu .menu-dropdown .menu-contents li a[href="#/"] {
-    background-color: #CDA;
-}
-
-.user-menu .options li a.current,
-.user-menu .options li a.current:hover {
-    background-color: transparent;
-    cursor: default;
-    opacity: 0.25;
-}
-
-.user-menu .options li a[href="#/"] {
     background-image: url('images/action-icons/guac-home-dark.png');
 }
 
-.user-menu .options li a[href="#/settings/users"],
+.user-menu .menu-dropdown .menu-contents li a[href="#/settings/users"],
-.user-menu .options li a[href="#/settings/connections"],
+.user-menu .menu-dropdown .menu-contents li a[href="#/settings/connections"],
-.user-menu .options li a[href="#/settings/sessions"],
+.user-menu .menu-dropdown .menu-contents li a[href="#/settings/sessions"],
-.user-menu .options li a[href="#/settings/preferences"] {
+.user-menu .menu-dropdown .menu-contents li a[href="#/settings/preferences"] {
     background-image: url('images/action-icons/guac-config-dark.png');
 }
 
-.user-menu .options li a.logout {
+.user-menu .menu-dropdown .menu-contents li a.logout {
     background-image: url('images/action-icons/guac-logout-dark.png');
 }
-
-.user-menu .options li a.danger {
-    color: white;
-    font-weight: bold;
-    background-color: #A43;
-}
-
-.user-menu .options li a.danger:hover {
-    background-color: #C54;
-}

guacamole/src/main/webapp/app/navigation/templates/guacMenu.html

@@ -0,0 +1,7 @@
+<div class="menu-dropdown" ng-class="{open: menuShown}" ng-click="toggleMenu()">
+    <div class="menu-title">{{menuTitle}}</div>
+    <div class="menu-indicator"></div>
+
+    <!-- Menu contents -->
+    <div class="menu-contents" ng-transclude></div>
+</div>

guacamole/src/main/webapp/app/navigation/templates/guacUserMenu.html

@@ -1,34 +1,26 @@
 <div class="user-menu">
+    <guac-menu menu-title="username">
+           
+        <!-- Local actions -->
+        <ul class="action-list">
+            <li ng-repeat="action in localActions">
+                <a ng-class="action.className" ng-click="action.callback()">
+                    {{action.name | translate}}
+                </a>
+            </li>
+        </ul>
 
-    <div class="user-menu-dropdown" ng-class="{open: menuShown}" ng-click="toggleMenu()">
+        <!-- Navigation links -->
-        <div class="username">{{username}}</div>
+        <guac-page-list pages="pages"></guac-page-list>
-        <div class="menu-indicator"></div>
-        
-        <!-- Menu options -->
-        <div class="options">
-            
-            <!-- Local actions -->
-            <ul class="action-list">
-                <li ng-repeat="action in localActions">
-                    <a ng-class="action.className" ng-click="action.callback()">
-                        {{action.name | translate}}
-                    </a>
-                </li>
-            </ul>
 
-            <!-- Navigation links -->
+        <!-- Actions -->
-            <guac-page-list pages="pages"></guac-page-list>
+        <ul class="action-list">
-
+            <li ng-repeat="action in actions">
-            <!-- Actions -->
+                <a ng-class="action.className" ng-click="action.callback()">
-            <ul class="action-list">
+                    {{action.name | translate}}
-                <li ng-repeat="action in actions">
+                </a>
-                    <a ng-class="action.className" ng-click="action.callback()">
+            </li>
-                        {{action.name | translate}}
+        </ul>
-                    </a>
-                </li>
-            </ul>
-
-        </div>
-    </div>
 
+    </guac-menu>
 </div>

guacamole/src/main/webapp/translations/en.json

@@ -24,6 +24,7 @@
         "ACTION_NAVIGATE_HOME"      : "Home",
         "ACTION_SAVE"               : "Save",
         "ACTION_SEARCH"             : "Search",
+        "ACTION_SHARE"              : "Share",
         "ACTION_UPDATE_PASSWORD"    : "Update Password",
         "ACTION_VIEW_HISTORY"       : "History",
 
@@ -55,6 +56,7 @@
         "ACTION_NAVIGATE_HOME"             : "@:APP.ACTION_NAVIGATE_HOME",
         "ACTION_RECONNECT"                 : "Reconnect",
         "ACTION_SAVE_FILE"                 : "@:APP.ACTION_SAVE",
+        "ACTION_SHARE"                     : "@:APP.ACTION_SHARE",
         "ACTION_UPLOAD_FILES"              : "Upload Files",
 
         "DIALOG_HEADER_CONNECTING"       : "Connecting",
@@ -101,7 +103,9 @@
         "HELP_MOUSE_MODE"          : "Determines how the remote mouse behaves with respect to touches.",
         "HELP_MOUSE_MODE_ABSOLUTE" : "Tap to click. The click occurs at the location of the touch.",
         "HELP_MOUSE_MODE_RELATIVE" : "Drag to move the mouse pointer and tap to click. The click occurs at the location of the pointer.",
+        "HELP_SHARE_LINK"          : "The current connection is being shared, and can be accessed by anyone with the following {LINKS, plural, one{link} other{links}}:",
 
+        "INFO_CONNECTION_SHARED" : "This connection is now shared.",
         "INFO_NO_FILE_TRANSFERS" : "No file transfers.",
 
         "NAME_INPUT_METHOD_NONE"   : "None",