GUACAMOLE-96: Open "otpauth" link when user clicks on barcode.

extensions/guacamole-auth-totp/src/main/resources/controllers/authenticationCodeFieldController.js

@@ -21,8 +21,8 @@
  * Controller for the "GUAC_TOTP_CODE" field which prompts the user to enter
  * the code generated by their authentication device.
  */
-angular.module('guacTOTP').controller('authenticationCodeFieldController', ['$scope',
-    function authenticationCodeFieldController($scope) {
+angular.module('guacTOTP').controller('authenticationCodeFieldController', ['$scope', '$window',
+    function authenticationCodeFieldController($scope, $window) {
 
     /**
      * The secret key split into groups of at most four characters each, or
@@ -56,4 +56,13 @@ angular.module('guacTOTP').controller('authenticationCodeFieldController', ['$sc
         $scope.detailsShown = false;
     };
 
+    /**
+     * Attempts to open the "otpauth" URI containing the user's TOTP key,
+     * invoking whichever application may be installed locally for handling
+     * multi-factor authentication.
+     */
+    $scope.openKeyURI = function openKeyURI() {
+        $window.open($scope.field.keyUri);
+    };
+
 }]);

extensions/guacamole-auth-totp/src/main/resources/styles/totp.css

@@ -29,6 +29,7 @@
     margin: 1em;
     border: 1px solid rgba(0,0,0,0.25);
     box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
+    cursor: pointer;
 }
 
 h3.totp-details-header {

extensions/guacamole-auth-totp/src/main/resources/templates/authenticationCodeField.html

@@ -6,7 +6,7 @@
         <p translate="TOTP.HELP_ENROLL_BARCODE"></p>
 
         <!-- Barcode and key details -->
-        <div class="totp-qr-code"><img ng-src="{{field.qrCode}}"></div>
+        <div class="totp-qr-code"><img ng-src="{{field.qrCode}}" ng-click="openKeyURI()"></div>
         <h3 class="totp-details-header">
             {{'TOTP.SECTION_HEADER_DETAILS' | translate}}
             <a class="totp-show-details" ng-click="showDetails()">{{'TOTP.ACTION_SHOW_DETAILS' | translate}}</a>