Merge pull request #13 from glyptodon/reconnect-countdown

GUAC-605: Add reconnect countdown

guacamole/pom.xml

@@ -135,9 +135,11 @@
                                 <jsSourceFile>lib/plugins/angular-route.js</jsSourceFile>
                                 <jsSourceFile>lib/plugins/angular-translate.js</jsSourceFile>
                                 <jsSourceFile>lib/plugins/angular-translate-loader-static-files.js</jsSourceFile>
+                                <jsSourceFile>lib/plugins/angular-translate-interpolation-messageformat.js</jsSourceFile>
                                 <jsSourceFile>lib/plugins/modal.min.js</jsSourceFile>
                                 <jsSourceFile>lib/blob/blob.js</jsSourceFile>
                                 <jsSourceFile>lib/filesaver/filesaver.js</jsSourceFile>
+                                <jsSourceFile>lib/messageformat/messageformat.js</jsSourceFile>
                                 <jsSourceFile>license.txt</jsSourceFile>
                                 <jsSourceFile>guacamole-common-js/all.js</jsSourceFile>
                                 <jsSourceFile>scripts/session.js</jsSourceFile>

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

@@ -51,6 +51,18 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
         0x031D: true
     };
 
+    /**
+     * All error codes for which automatic reconnection is appropriate when a
+     * client error occurs.
+     */
+    var CLIENT_AUTO_RECONNECT = {
+        0x0200: true,
+        0x0202: true,
+        0x0203: true,
+        0x0301: true,
+        0x0308: true
+    };
+ 
     /**
      * All tunnel error codes handled and passed off for translation. Any error
      * code not present in this list will be represented by the "DEFAULT"
@@ -67,7 +79,18 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
         0x0308: true,
         0x031D: true
     };
-    
+
+    /**
+     * All error codes for which automatic reconnection is appropriate when a
+     * tunnel error occurs.
+     */
+    var TUNNEL_AUTO_RECONNECT = {
+        0x0200: true,
+        0x0202: true,
+        0x0203: true,
+        0x0308: true
+    };
+
     /**
      * The reconnect action to be provided along with the object sent to
      * showStatus.
@@ -81,6 +104,16 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
         }
     };
 
+    /**
+     * The reconnect countdown to display if an error or status warrants an
+     * automatic, timed reconnect.
+     */
+    var RECONNECT_COUNTDOWN = {
+        text: "client.action.reconnectCountdown",
+        callback: RECONNECT_ACTION.callback,
+        remaining: 15
+    };
+
     // Get DAO for reading connections and groups
     var connectionGroupDAO = $injector.get('connectionGroupDAO');
     var connectionDAO      = $injector.get('connectionDAO');
@@ -146,7 +179,7 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
         
         return true;
     }
-    
+
     $scope.$watch('menuShown', function setKeyboardEnabled(menuShown, menuShownPreviousState) {
         
         // Send clipboard data if menu is hidden
@@ -218,7 +251,10 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
         $scope.id = null;
 
         // Determine translation name of error
-        var errorName = (status in CLIENT_ERRORS) ? status.toString(16) : "DEFAULT";
+        var errorName = (status in CLIENT_ERRORS) ? status.toString(16).toUpperCase() : "DEFAULT";
+
+        // Determine whether the reconnect countdown applies
+        var countdown = (status in CLIENT_AUTO_RECONNECT) ? RECONNECT_COUNTDOWN : null;
 
         // Override any existing status
         $scope.showStatus(false);
@@ -228,6 +264,7 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
             className: "error",
             title: "client.error.connectionErrorTitle",
             text: "client.error.clientErrors." + errorName,
+            countdown: countdown,
             actions: [ RECONNECT_ACTION ]
         });
 
@@ -253,7 +290,10 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
         $scope.id = null;
 
         // Determine translation name of error
-        var errorName = (status in TUNNEL_ERRORS) ? status.toString(16) : "DEFAULT";
+        var errorName = (status in TUNNEL_ERRORS) ? status.toString(16).toUpperCase() : "DEFAULT";
+
+        // Determine whether the reconnect countdown applies
+        var countdown = (status in TUNNEL_AUTO_RECONNECT) ? RECONNECT_COUNTDOWN : null;
 
         // Override any existing status
         $scope.showStatus(false);
@@ -263,6 +303,7 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
             className: "error",
             title: "client.error.connectionErrorTitle",
             text: "client.error.tunnelErrors." + errorName,
+            countdown: countdown,
             actions: [ RECONNECT_ACTION ]
         });
 

guacamole/src/main/webapp/app/client/styles/notification-area.css

@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2013 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.
+ */
+
+#notificationArea {
+    position: fixed;
+    right: 0.5em;
+    bottom: 0.5em;
+    max-width: 25%;
+    width: 2in;
+}
+
+#notificationArea .notification {
+    font-size: 0.7em;
+    text-align: center;
+    width: 100%;
+    overflow: hidden;
+}
+
+#notificationArea .notification .text {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

guacamole/src/main/webapp/app/index/config/indexTranslationConfig.js

@@ -24,10 +24,17 @@
  * The configuration block for setting up everything having to do with i18n.
  */
 angular.module('index').config(['$translateProvider', function($translateProvider) {
+
+    // Use US English by default
     $translateProvider.preferredLanguage('en_US');
 
+    // Load translations from static JSON files
     $translateProvider.useStaticFilesLoader({
         prefix: 'translations/',
         suffix: '.json'
     });
+
+    // Provide pluralization, etc. via messageformat.js
+    $translateProvider.useMessageFormatInterpolation();
+
 }]);

guacamole/src/main/webapp/app/index/controllers/indexController.js

@@ -73,20 +73,30 @@ angular.module('index').controller('indexController', ['$scope', '$injector',
         $location.path('/login');
 
     /**
-     * Shows or hides the status. If a status is currently shown,
+     * Shows or hides the given notification as a modal status. If a status
-     * no further statuses will be shown until the current status is
+     * notification is currently shown, no further statuses will be shown
-     * hidden.
+     * until the current status is hidden.
      *
-     * @param {Boolean|Object} status The status to show, or false to hide the
+     * @param {Object} status The status notification to show.
-     *                                current status.
+     * @param {String} [status.title] The title of the notification.
-     * @param {String} [status.title] The title of the status.
+     * @param {String} [status.text] The body text of the notification.
-     * @param {String} [status.text] The body text of the status.
      * @param {String} [status.className] The CSS class name to apply.
-     * @param {Object[]} [status.actions] Array of action objects which
+     *
-     *                                    contain an action name and callback to
+     * @param {String} [status.countdown.text]
-     *                                    be executed when that action is
+     *     In the case that a countdown applies to the notification, the text to
-     *                                    invoked. 
+     *     display while the countdown is active.
-     *                                    
+     *
+     * @param {Function} [status.countdown.callback]
+     *     The callback to call when the countdown expires.
+     *
+     * @param {String} [status.countdown.remaining]
+     *     The number of seconds remaining before the countdown callback is
+     *     called.
+     *
+     * @param {Object[]} [status.actions]
+     *     Array of action objects which contain an action name and callback to
+     *     be executed when that action is invoked. 
+     *
      * @example
      * 
      * // To show a status message with actions
@@ -114,15 +124,26 @@ angular.module('index').controller('indexController', ['$scope', '$injector',
      * 
      * @param {Object} notification The notification to add.
      * @param {String} [notification.title] The title of the notification.
-     * @param {String} [notification.text] The body text of the status modal.
+     * @param {String} [notification.text] The body text of the notification.
      * @param {String} [notification.className] The CSS class name to apply.
-     * @param {Object[]} [notification.actions] Array of action objects which
+     *
-     *                                    contain an action name and callback to
+     * @param {String} [notification.countdown.text]
-     *                                    be executed when that action is
+     *     In the case that a countdown applies to the notification, the text to
-     *                                    invoked. 
+     *     display while the countdown is active.
+     *
+     * @param {Function} [notification.countdown.callback]
+     *     The callback to call when the countdown expires.
+     *
+     * @param {String} [notification.countdown.remaining]
+     *     The number of seconds remaining before the countdown callback is
+     *     called.
+     *
+     * @param {Object[]} [notification.actions]
+     *     Array of action objects which contain an action name and callback to
+     *     be executed when that action is invoked. 
+     *                                    
      * @returns {Number} A unique ID for the notification that's just been added.
      * 
-     *                        
      * @example
      * 
      * var id = $scope.addNotification({
@@ -138,7 +159,7 @@ angular.module('index').controller('indexController', ['$scope', '$injector',
      */
     $scope.addNotification = function addNotification(notification) {
         var id = ++notificationUniqueID;
-        
+
         $scope.notifications.push({
             notification    : notification,
             id              : id

guacamole/src/main/webapp/app/index/indexModule.js

@@ -23,4 +23,5 @@
 /**
  * The module for the root of the application.
  */
-angular.module('index', ['ngRoute', 'pascalprecht.translate', 'auth', 'home', 'manage', 'login', 'client']);
+angular.module('index', ['ngRoute', 'pascalprecht.translate',
+    'auth', 'home', 'manage', 'login', 'client', 'notification']);

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

@@ -20,16 +20,6 @@
  * THE SOFTWARE.
  */
 
-.status-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background: rgba(0, 0, 0, 0.5);
-    padding: 1em;
-}
-
 .status-outer {
     display: table;
     height: 100%;
@@ -48,7 +38,7 @@
     vertical-align: middle;
 }
 
-.status {
+.status-middle .notification {
 
     width: 75%;
     max-width: 5in;
@@ -56,33 +46,22 @@
     margin-right: auto;
     overflow: auto;
 
-    background: white;
-    border: 1px solid rgba(0, 0, 0, 0.25);
-    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
- 
     text-align: left;
     
 }
 
-.status .title {
+.status-middle .notification .body {
-    font-size: 1.25em;
-    font-weight: bold;
-    background: rgba(0, 0, 0, 0.04);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
-    margin: 0;
-    padding: 0.5em 1em;
-    text-transform: uppercase;
-}
-
-.status.error {
-    background: #FDD;
-}
-
-.status > * {
     margin: 1.25em;
 }
 
+.status-middle .notification .buttons {
+    margin: 1em;
+}
+
+.status-middle .notification.error {
+    background: #FDD;
+}
+
 /* Fade entire status area in/out based on shown status */
 
 .status-outer {
@@ -99,10 +78,10 @@
 
 /* Hide dialog immediately based on status */
 
-.status {
+.status-middle .notification {
     visibility: hidden;
 }
 
-.shown .status {
+.shown .status-middle .notification {
     visibility: visible;
 }

guacamole/src/main/webapp/app/notification/directives/guacNotification.js

@@ -0,0 +1,151 @@
+/*
+ * 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.
+ */
+
+/**
+ * A directive for the guacamole client.
+ */
+angular.module('notification').directive('guacNotification', [function guacNotification() {
+
+    return {
+        restrict: 'E',
+        replace: true,
+        scope: {
+
+            /**
+             * The CSS class to apply to the notification.
+             *
+             * @type String
+             */
+            className : '=',
+
+            /**
+             * The title of the notification.
+             *
+             * @type String
+             */
+            title : '=',
+
+            /**
+             * The body text of the notification.
+             *
+             * @type String
+             */
+            text : '=',
+
+            /**
+             * The text to use for displaying the countdown. For the sake of
+             * i18n, the variable REMAINING will be applied within the
+             * translation string for formatting plurals, etc.
+             *
+             * @type String
+             * @example
+             * "Only {REMAINING} {REMAINING, plural, one{second} other{seconds}} remain."
+             */
+            countdownText : '=',
+
+            /**
+             * The number of seconds to wait before automatically calling the
+             * default callback.
+             *
+             * @type Number
+             */
+            countdown : '=',
+
+            /**
+             * The function to call when timeRemaining expires. If timeRemaining
+             * is not set, this does not apply.
+             *
+             * @type Function
+             */
+            defaultCallback : '=',
+
+            /**
+             * Arbitrary value denoting how much progress has been made
+             * in some ongoing task that this notification represents.
+             *
+             * @type Number
+             */
+            progress : '=',
+
+            /**
+             * Array of name/callback pairs for each action the user is allowed
+             * to take once the notification is shown.
+             *
+             * @type Array
+             * @example
+             * [
+             *     {
+             *         name     : "Action 1 name",
+             *         callback : actionCallback1
+             *     },
+             *     {
+             *         name     : "Action 2 text",
+             *         callback : actionCallback2
+             *     }
+             * ]
+             */
+            actions : '='
+
+        },
+
+        templateUrl: 'app/notification/templates/guacNotification.html',
+        controller: ['$scope', '$interval', function guacNotificationController($scope, $interval) {
+
+            // Set countdown interval when associated property is set
+            $scope.$watch("countdown", function resetTimeRemaining(countdown) {
+
+                $scope.timeRemaining = countdown;
+
+                // Clean up any existing interval
+                if ($scope.interval)
+                    $interval.cancel($scope.interval);
+
+                // Update and handle countdown, if provided
+                if ($scope.timeRemaining) {
+
+                    $scope.interval = $interval(function updateTimeRemaining() {
+
+                        // Update time remaining
+                        $scope.timeRemaining--;
+
+                        // Call countdown callback when time remaining expires
+                        if ($scope.timeRemaining === 0 && $scope.defaultCallback)
+                            $scope.defaultCallback();
+
+                    }, 1000, $scope.timeRemaining);
+
+                }
+
+            });
+
+            // Clean up interval upon destruction
+            $scope.$on("$destroy", function destroyNotification() {
+
+                if ($scope.interval)
+                    $interval.cancel($scope.interval);
+
+            });
+
+        }]
+
+    };
+}]);

guacamole/src/main/webapp/app/notification/notificationModule.js

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+/**
+ * The module for code used to display arbitrary notifications.
+ */
+angular.module('notification', []);

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

@@ -20,34 +20,19 @@
  * THE SOFTWARE.
  */
 
-#notificationArea {
-    position: fixed;
-    right: 0.5em;
-    bottom: 0.5em;
-    max-width: 25%;
-    min-width: 10em;
-}
-
 .notification {
-
-    font-size: 0.7em;
-    text-align: center;
-    
     border: 1px solid rgba(0, 0, 0, 0.125);
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.125);
     background: white;
-
     color: black;
+}
 
-    padding: 0.5em;
+.notification .body {
-    margin: 1em;
+    margin: 0.5em;
-    width: 2in;
-    max-width: 75%;
-    overflow: hidden;
 }
 
 .notification .buttons {
-    margin: 0;
+    margin: 0.5em;
 }
 
 @keyframes notification-progress {
@@ -69,30 +54,11 @@
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
     background: rgba(0, 0, 0, 0.04);
 
+    padding: 0.5em;
     margin-bottom: 1em;
 }
 
-.notification .text {
+.notification .progress .bar {
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.notification.upload .progress {
-    float: none;
-    width: 80%;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.notification.download .progress div,
-.notification.upload .progress div {
-    position: relative;
-}
-
-.notification.download .progress .bar,
-.notification.upload .progress .bar {
     background: #A3D655;
     position: absolute;
     top: 0;
@@ -104,8 +70,7 @@
                        1px 1px  0 gray;
 }
 
-.notification.upload .progress,
+.notification .progress {
-.notification.download .progress {
 
     width: 100%;
     background: #C2C2C2 url('images/progress.png');
@@ -125,7 +90,6 @@
     -webkit-animation-iteration-count: infinite;
 
     padding: 0.25em;
-    min-width: 5em;
     
     border: 1px solid gray;
     -moz-border-radius: 0.2em;
@@ -133,27 +97,6 @@
     -khtml-border-radius: 0.2em;
     border-radius: 0.2em;
 
-    text-align: center;
-    float: right;
-
     position: relative;
     
 }
-
-.notification.download .download {
-    background: rgb(16, 87, 153);
-    cursor: pointer;
-}
-
-.notification.message {
-    background: #DFD;
-    animation: fadein 0.125s linear, fadeout 2s 3s linear;
-    -webkit-animation: fadein 0.125s linear, fadeout 2s 3s linear;
-}
-
-.notification.message .caption {
-    vertical-align: middle;
-    white-space: normal;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}

guacamole/src/main/webapp/app/notification/templates/guacNotification.html

@@ -0,0 +1,47 @@
+<div class="notification" ng-class="className">
+    <!--
+       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.
+    -->
+
+    <!-- Notification title -->
+    <div ng-show="title" class="title-bar">
+        <div class="title">{{title | translate}}</div>
+    </div>
+
+    <div class="body">
+
+        <!-- Notification text -->
+        <p ng-show="text" class="text">{{text | translate}}</p>
+
+        <!-- Current progress -->
+        <div ng-show="progress" class="progress">{{progress}}</div>
+
+        <!-- Default action countdown text -->
+        <p ng-show="countdownText" class="countdown-text">{{countdownText | translate:"{ REMAINING: timeRemaining}"}}</p>
+
+    </div>
+
+    <!-- Buttons -->
+    <div ng-show="actions && actions.length" class="buttons">
+        <button ng-repeat="action in actions" ng-click="action.callback()">{{action.name | translate}}</button>
+    </div>
+
+</div>

guacamole/src/main/webapp/index.html

@@ -37,20 +37,17 @@ THE SOFTWARE.
         <!-- Global status/error dialog -->
         <div ng-class="{shown: status}" class="status-outer">
             <div class="status-middle">
-                <div class="status" ng-class="status.className">
+
-                    
+                <guac-notification
-                    <!-- Status title -->
+                    class-name="status.className"
-                    <p ng-show="status.title" class="title">{{status.title | translate}}</p>
+                    title="status.title"
-                
+                    text="status.text"
-                    <!-- Status text -->
+                    progress="status.progress"
-                    <p ng-show="status.text" class="text">{{status.text | translate}}</p>
+                    actions="status.actions"
-                
+                    countdown-text="status.countdown.text"
-                    <!-- All action buttons, if any -->
+                    countdown="status.countdown.remaining"
-                    <div ng-show="status.actions && status.actions.length" class="buttons">
+                    default-callback="status.countdown.callback"/>
-                        <button ng-repeat="action in status.actions" ng-click="action.callback()">{{action.name | translate}}</button>
+
-                    </div>
-                
-                </div>
             </div>
         </div>
         
@@ -59,24 +56,19 @@ THE SOFTWARE.
         
         <!-- Notification area -->
         <div id="notificationArea">
-            <div ng-repeat="wrapper in notifications" ng-class="wrapper.notification.className" class="notification">
+            <div ng-repeat="wrapper in notifications">
-                
+
-                <!-- Notification title -->
+                <guac-notification
-                <div ng-show="wrapper.notification.title" class="title-bar">
+                    class-name="wrapper.notification.className"
-                    <div class="title">{{wrapper.notification.title | translate}}</div>
+                    title="wrapper.notification.title"
-                </div>
+                    text="wrapper.notification.text"
-                
+                    progress="wrapper.notification.progress"
-                <!-- Notification text -->
+                    actions="wrapper.notification.actions"
-                <p ng-show="wrapper.notification.text" class="text">{{wrapper.notification.text}}</p>
+                    countdown-text="wrapper.notification.countdown.text"
-                
+                    countdown="wrapper.notification.countdown.remaining"
-                <div ng-show="wrapper.notification.progress" class="progress">
+                    default-callback="wrapper.notification.countdown.callback"/>
-                    {{wrapper.notification.progress}}
+
-                </div>
+            <div>                
-                
-                <div ng-show="wrapper.notification.actions && wrapper.notification.actions.length" class="buttons">
-                    <button ng-repeat="action in wrapper.notification.actions" ng-click="action.callback()">{{action.name | translate}}</button>
-                </div>
-            </div>
         </div>
         
         <script type="text/javascript" src="guacamole.min.js"></script>

guacamole/src/main/webapp/lib/plugins/angular-translate-interpolation-messageformat.js

@@ -0,0 +1,62 @@
+/*!
+ * angular-translate - v2.2.0 - 2014-06-03
+ * http://github.com/PascalPrecht/angular-translate
+ * Copyright (c) 2014 ; Licensed MIT
+ */
+angular.module('pascalprecht.translate').constant('TRANSLATE_MF_INTERPOLATION_CACHE', '$translateMessageFormatInterpolation').factory('$translateMessageFormatInterpolation', [
+  '$cacheFactory',
+  'TRANSLATE_MF_INTERPOLATION_CACHE',
+  function ($cacheFactory, TRANSLATE_MF_INTERPOLATION_CACHE) {
+    var $translateInterpolator = {}, $cache = $cacheFactory.get(TRANSLATE_MF_INTERPOLATION_CACHE), $mf = new MessageFormat(), $identifier = 'messageformat', $sanitizeValueStrategy = null, sanitizeValueStrategies = {
+        escaped: function (params) {
+          var result = {};
+          for (var key in params) {
+            if (params.hasOwnProperty(key)) {
+              result[key] = angular.element('<div></div>').text(params[key]).html();
+            }
+          }
+          return result;
+        }
+      };
+    var sanitizeParams = function (params) {
+      var result;
+      if (angular.isFunction(sanitizeValueStrategies[$sanitizeValueStrategy])) {
+        result = sanitizeValueStrategies[$sanitizeValueStrategy](params);
+      } else {
+        result = params;
+      }
+      return result;
+    };
+    if (!$cache) {
+      $cache = $cacheFactory(TRANSLATE_MF_INTERPOLATION_CACHE);
+    }
+    $cache.put('en', $mf);
+    $translateInterpolator.setLocale = function (locale) {
+      $mf = $cache.get(locale);
+      if (!$mf) {
+        $mf = new MessageFormat(locale);
+        $cache.put(locale, $mf);
+      }
+    };
+    $translateInterpolator.getInterpolationIdentifier = function () {
+      return $identifier;
+    };
+    $translateInterpolator.useSanitizeValueStrategy = function (value) {
+      $sanitizeValueStrategy = value;
+      return this;
+    };
+    $translateInterpolator.interpolate = function (string, interpolateParams) {
+      interpolateParams = interpolateParams || {};
+      if ($sanitizeValueStrategy) {
+        interpolateParams = sanitizeParams(interpolateParams);
+      }
+      var interpolatedText = $cache.get(string + angular.toJson(interpolateParams));
+      if (!interpolatedText) {
+        interpolatedText = $mf.compile(string)(interpolateParams);
+        $cache.put(string + angular.toJson(interpolateParams), interpolatedText);
+      }
+      return interpolatedText;
+    };
+    return $translateInterpolator;
+  }
+]);

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

@@ -267,7 +267,8 @@
             }
         },
         "action" : {
-            "reconnect" : "Reconnect"
+            "reconnect"             : "Reconnect",
+            "reconnectCountdown"    : "Reconnecting in {REMAINING} {REMAINING, plural, one{second} other{seconds}}..."
         },
         "fileTransfer" : {
             "title"     : "File Transfer",