GUACAMOLE-96: Allow user's raw TOTP key details to be exposed within UI during enrollment.

extensions/guacamole-auth-totp/src/main/resources/config/totpConfig.js

@@ -26,6 +26,7 @@ angular.module('guacTOTP').config(['formServiceProvider',
     // Define field for the TOTP code provided by the user
     formServiceProvider.registerFieldType('GUAC_TOTP_CODE', {
         module      : 'guacTOTP',
+        controller  : 'authenticationCodeFieldController',
         templateUrl : 'app/ext/totp/templates/authenticationCodeField.html'
     });
 

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

@@ -0,0 +1,59 @@
+/*
+ * 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.
+ */
+
+/**
+ * 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) {
+
+    /**
+     * The secret key split into groups of at most four characters each, or
+     * null if the secret key is not exposed.
+     *
+     * @type String[]
+     */
+    $scope.groupedSecret = $scope.field.secret && $scope.field.secret.match(/.{1,4}/g);
+
+    /**
+     * Whether the raw details of the secret key and TOTP configuration should
+     * be shown. By default, such details are hidden. If the secret key is not
+     * exposed, this property has no effect.
+     */
+    $scope.detailsShown = false;
+
+    /**
+     * Shows the raw details of the secret key and TOTP configuration. If the
+     * secret key is not exposed, or the details are already shown, this
+     * function has no effect.
+     */
+    $scope.showDetails = function showDetails() {
+        $scope.detailsShown = true;
+    };
+
+    /**
+     * Hides the raw details of the secret key and TOTP configuration. If the
+     * details are already hidden, this function has no effect.
+     */
+    $scope.hideDetails = function hideDetails() {
+        $scope.detailsShown = false;
+    };
+
+}]);

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

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-.totp-enroll p {
+.totp-enroll p, .totp-details {
     font-size: 0.8em;
 }
 
@@ -30,3 +30,57 @@
     border: 1px solid rgba(0,0,0,0.25);
     box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
 }
+
+h3.totp-details-header {
+    font-size: 0.8em;
+}
+
+h3.totp-details-header::before {
+    content: '▸ ';
+}
+
+.totp-details-visible h3.totp-details-header::before {
+    content: '▾ ';
+}
+
+.totp-details,
+.totp-hide-details {
+    display: none;
+}
+
+.totp-details-visible .totp-details {
+    display: table;
+}
+
+.totp-details-visible .totp-hide-details {
+    display: inline;
+}
+
+.totp-details-visible .totp-show-details {
+    display: none;
+}
+
+.totp-hide-details, .totp-show-details {
+    color: blue;
+    text-decoration: underline;
+    cursor: pointer;
+    margin: 0 0.25em;
+    font-weight: normal;
+}
+
+.totp-details {
+    margin: 0 auto;
+}
+
+.totp-details th {
+    padding-right: 0.25em;
+}
+
+.totp-details td {
+    font-family: monospace;
+}
+
+.totp-detail {
+    display: inline-block;
+    margin: 0 0.25em;
+}

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

@@ -1,11 +1,40 @@
-<div class="totp-code-field">
+<div class="totp-code-field" ng-class="{ 'totp-details-visible' : detailsShown }">
 
     <!-- Enroll user if necessary -->
     <div class="totp-enroll" ng-show="field.qrCode">
+
         <p translate="TOTP.HELP_ENROLL_BARCODE"></p>
+
+        <!-- Barcode and key details -->
         <div class="totp-qr-code"><img ng-src="{{field.qrCode}}"></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>
+            <a class="totp-hide-details" ng-click="hideDetails()">{{'TOTP.ACTION_HIDE_DETAILS' | translate}}</a>
+        </h3>
+        <table class="totp-details">
+            <tr>
+                <th>{{'TOTP.FIELD_HEADER_SECRET_KEY' | translate}}</th>
+                <td><span ng-repeat="group in groupedSecret"
+                          class="totp-detail">{{ group }}</span></td>
+            </tr>
+            <tr>
+                <th>{{'TOTP.FIELD_HEADER_DIGITS' | translate}}</th>
+                <td><span class="totp-detail">{{ field.digits }}</span></td>
+            </tr>
+            <tr>
+                <th>{{'TOTP.FIELD_HEADER_ALGORITHM' | translate}}</th>
+                <td><span class="totp-detail">{{ field.mode }}</span></td>
+            </tr>
+            <tr>
+                <th>{{'TOTP.FIELD_HEADER_INTERVAL' | translate}}</th>
+                <td><span class="totp-detail">{{ field.period }}</span></td>
+            </tr>
+        </table>
+
         <p translate="TOTP.HELP_ENROLL_VERIFY"
            translate-values="{ DIGITS : field.digits }"></p>
+
     </div>
 
     <!-- Field for entry of the current TOTP code -->

extensions/guacamole-auth-totp/src/main/resources/translations/en.json

@@ -10,6 +10,14 @@
 
     "TOTP" : {
 
+        "ACTION_HIDE_DETAILS" : "Hide",
+        "ACTION_SHOW_DETAILS" : "Show",
+
+        "FIELD_HEADER_ALGORITHM"  : "Algorithm:",
+        "FIELD_HEADER_DIGITS"     : "Digits:",
+        "FIELD_HEADER_INTERVAL"   : "Interval:",
+        "FIELD_HEADER_SECRET_KEY" : "Secret Key:",
+
         "FIELD_PLACEHOLDER_CODE" : "Authentication Code",
 
         "INFO_CODE_REQUIRED"       : "Please enter your authentication code to verify your identity.",
@@ -17,7 +25,9 @@
         "INFO_VERIFICATION_FAILED" : "Verification failed. Please try again.",
 
         "HELP_ENROLL_BARCODE" : "To complete the enrollment process, scan the barcode below with the two-factor authentication app on your phone or device.",
-        "HELP_ENROLL_VERIFY"  : "After scanning the barcode, enter the {DIGITS}-digit authentication code displayed to verify that enrollment was successful."
+        "HELP_ENROLL_VERIFY"  : "After scanning the barcode, enter the {DIGITS}-digit authentication code displayed to verify that enrollment was successful.",
+
+        "SECTION_HEADER_DETAILS" : "Details:"
 
     }