GUAC-1176: Provide user with help text during login. Style continuation dialog differently. Add continue button.

guacamole/src/main/webapp/app/auth/service/authenticationService.js

@@ -36,7 +36,8 @@
  * Failed logins may also result in guacInsufficientCredentials or
  * guacInvalidCredentials events, if the provided credentials were rejected for
  * being insufficient or invalid respectively. Both events will be provided
- * the set of parameters originally given to authenticate() and the set of
+ * the set of parameters originally given to authenticate() and the error that
+ * rejected the credentials. The Error object provided will contain set of
  * expected credentials returned by the REST endpoint. This set of credentials
  * will be in the form of a Field array.
  */
@@ -154,11 +155,11 @@ angular.module('auth').factory('authenticationService', ['$injector',
 
             // Request credentials if provided credentials were invalid
             if (error.type === Error.Type.INVALID_CREDENTIALS)
-                $rootScope.$broadcast('guacInvalidCredentials', parameters, error.expected);
+                $rootScope.$broadcast('guacInvalidCredentials', parameters, error);
 
             // Request more credentials if provided credentials were not enough 
             else if (error.type === Error.Type.INSUFFICIENT_CREDENTIALS)
-                $rootScope.$broadcast('guacInsufficientCredentials', parameters, error.expected);
+                $rootScope.$broadcast('guacInsufficientCredentials', parameters, error);
 
             authenticationProcess.reject(error);
         });

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

@@ -36,6 +36,14 @@ angular.module('index').controller('indexController', ['$scope', '$injector',
      */
     $scope.guacNotification = guacNotification;
 
+    /**
+     * The message to display to the user as instructions for the login
+     * process.
+     *
+     * @type String
+     */
+    $scope.loginHelpText = null;
+
     /**
      * The credentials that the authentication service is has already accepted,
      * pending additional credentials, if any. If the user is logged in, or no
@@ -120,23 +128,26 @@ angular.module('index').controller('indexController', ['$scope', '$injector',
     };
 
     // Display login screen if a whole new set of credentials is needed
-    $scope.$on('guacInvalidCredentials', function loginInvalid(event, parameters, expected) {
+    $scope.$on('guacInvalidCredentials', function loginInvalid(event, parameters, error) {
         $scope.page.title = 'APP.NAME';
         $scope.page.bodyClassName = '';
+        $scope.loginHelpText = null;
         $scope.acceptedCredentials = {};
-        $scope.expectedCredentials = expected;
+        $scope.expectedCredentials = error.expected;
     });
 
     // Prompt for remaining credentials if provided credentials were not enough
-    $scope.$on('guacInsufficientCredentials', function loginInsufficient(event, parameters, expected) {
+    $scope.$on('guacInsufficientCredentials', function loginInsufficient(event, parameters, error) {
         $scope.page.title = 'APP.NAME';
         $scope.page.bodyClassName = '';
+        $scope.loginHelpText = error.message;
         $scope.acceptedCredentials = parameters;
-        $scope.expectedCredentials = expected;
+        $scope.expectedCredentials = error.expected;
     });
 
     // Clear login screen if login was successful
     $scope.$on('guacLogin', function loginSuccessful() {
+        $scope.loginHelpText = null;
         $scope.acceptedCredentials = null;
         $scope.expectedCredentials = null;
     });

guacamole/src/main/webapp/app/login/directives/login.js

@@ -35,6 +35,14 @@ angular.module('login').directive('guacLogin', [function guacLogin() {
     // Login directive scope
     directive.scope = {
 
+        /**
+         * An optional instructional message to display within the login
+         * dialog.
+         *
+         * @type String
+         */
+        helpText : '=',
+
         /**
          * The login form or set of fields. This will be displayed to the user
          * to capture their credentials.

guacamole/src/main/webapp/app/login/styles/dialog.css

@@ -86,3 +86,15 @@
     max-width: 3em;
     margin: 0.5em auto;
 }
+
+.login-ui.continuation div.login-dialog {
+    border-right: none;
+    border-left: none;
+    box-shadow: none;
+    max-width: 6in;
+}
+
+.login-ui.continuation .login-dialog .logo,
+.login-ui.continuation .login-dialog .version {
+    display: none;
+}

guacamole/src/main/webapp/app/login/styles/input.css

@@ -38,4 +38,13 @@
 .login-ui .login-dialog .buttons input[type="submit"] {
     width: 100%;
     margin: 0;
-}
+}
+
+.login-ui.continuation .login-dialog .buttons input[type="submit"] {
+    width: auto;
+}
+
+.login-ui.initial .login-dialog input.continue-login,
+.login-ui.continuation .login-dialog input.login {
+    display: none;
+}

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

@@ -34,6 +34,9 @@
                 <img class="logo" src="images/guac-tricolor.png" alt=""/>
                 <div class="version">{{'APP.NAME' | translate}}</div>
 
+                <!-- Login message/instructions -->
+                <p ng-show="helpText">{{helpText | translate}}</p>
+
                 <!-- Login fields -->
                 <div class="login-fields">
                     <guac-form namespace="'LOGIN'" content="remainingFields" model="enteredValues"></guac-form>
@@ -42,6 +45,7 @@
                 <!-- Submit button -->
                 <div class="buttons">
                     <input type="submit" name="login" class="login" value="{{'LOGIN.ACTION_LOGIN' | translate}}"/>
+                    <input type="submit" name="login" class="continue-login" value="{{'LOGIN.ACTION_CONTINUE' | translate}}"/>
                 </div>
 
             </form>

guacamole/src/main/webapp/index.html

@@ -50,7 +50,9 @@
         </div>
 
         <!-- Login screen for logged-out users -->
-        <guac-login ng-show="expectedCredentials" form="expectedCredentials"
+        <guac-login ng-show="expectedCredentials"
+                    help-text="loginHelpText"
+                    form="expectedCredentials"
                     values="acceptedCredentials"></guac-login>
         
         <script type="text/javascript" src="app.js"></script>

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

@@ -7,6 +7,7 @@
         "ACTION_ACKNOWLEDGE"        : "OK",
         "ACTION_CANCEL"             : "Cancel",
         "ACTION_CLONE"              : "Clone",
+        "ACTION_CONTINUE"           : "Continue",
         "ACTION_DELETE"             : "Delete",
         "ACTION_DELETE_SESSIONS"    : "Kill Sessions",
         "ACTION_LOGIN"              : "Login",
@@ -145,6 +146,7 @@
     "LOGIN": {
 
         "ACTION_ACKNOWLEDGE" : "@:APP.ACTION_ACKNOWLEDGE",
+        "ACTION_CONTINUE"    : "@:APP.ACTION_CONTINUE",
         "ACTION_LOGIN"       : "@:APP.ACTION_LOGIN",
 
         "DIALOG_HEADER_ERROR" : "@:APP.DIALOG_HEADER_ERROR",