From b9dba7ddf4eaa9c291035c706bfc6b32408544e8 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mjumper@apache.org>
Date: Fri, 24 Nov 2017 13:54:26 -0800
Subject: [PATCH] GUACAMOLE-96: Open "otpauth" link when user clicks on
 barcode.

---
 .../authenticationCodeFieldController.js            | 13 +++++++++++--
 .../src/main/resources/styles/totp.css              |  1 +
 .../templates/authenticationCodeField.html          |  2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/extensions/guacamole-auth-totp/src/main/resources/controllers/authenticationCodeFieldController.js b/extensions/guacamole-auth-totp/src/main/resources/controllers/authenticationCodeFieldController.js
index 27881f8e5..8f19c9f6c 100644
--- a/extensions/guacamole-auth-totp/src/main/resources/controllers/authenticationCodeFieldController.js
+++ b/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);
+    };
+
 }]);
diff --git a/extensions/guacamole-auth-totp/src/main/resources/styles/totp.css b/extensions/guacamole-auth-totp/src/main/resources/styles/totp.css
index 6d2d89f22..e578e6a04 100644
--- a/extensions/guacamole-auth-totp/src/main/resources/styles/totp.css
+++ b/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 {
diff --git a/extensions/guacamole-auth-totp/src/main/resources/templates/authenticationCodeField.html b/extensions/guacamole-auth-totp/src/main/resources/templates/authenticationCodeField.html
index 0837b74c9..c493a2050 100644
--- a/extensions/guacamole-auth-totp/src/main/resources/templates/authenticationCodeField.html
+++ b/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>