You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@guacamole.apache.org by vn...@apache.org on 2018/02/05 18:04:29 UTC
[11/21] guacamole-client git commit: GUACAMOLE-96: Allow user's raw
TOTP key details to be exposed within UI during enrollment.
GUACAMOLE-96: Allow user's raw TOTP key details to be exposed within UI during enrollment.
Project: http://git-wip-us.apache.org/repos/asf/guacamole-client/repo
Commit: http://git-wip-us.apache.org/repos/asf/guacamole-client/commit/78cde50d
Tree: http://git-wip-us.apache.org/repos/asf/guacamole-client/tree/78cde50d
Diff: http://git-wip-us.apache.org/repos/asf/guacamole-client/diff/78cde50d
Branch: refs/heads/master
Commit: 78cde50df96fcda535622fd9039ac0c6dc59c5ef
Parents: 5b2b633
Author: Michael Jumper <mj...@apache.org>
Authored: Fri Nov 24 13:33:39 2017 -0800
Committer: Michael Jumper <mj...@apache.org>
Committed: Sun Feb 4 19:45:18 2018 -0800
----------------------------------------------------------------------
.../src/main/resources/config/totpConfig.js | 1 +
.../authenticationCodeFieldController.js | 59 ++++++++++++++++++++
.../src/main/resources/styles/totp.css | 56 ++++++++++++++++++-
.../templates/authenticationCodeField.html | 31 +++++++++-
.../src/main/resources/translations/en.json | 12 +++-
5 files changed, 156 insertions(+), 3 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/guacamole-client/blob/78cde50d/extensions/guacamole-auth-totp/src/main/resources/config/totpConfig.js
----------------------------------------------------------------------
diff --git a/extensions/guacamole-auth-totp/src/main/resources/config/totpConfig.js b/extensions/guacamole-auth-totp/src/main/resources/config/totpConfig.js
index 81cc07d..54bb56c 100644
--- a/extensions/guacamole-auth-totp/src/main/resources/config/totpConfig.js
+++ b/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'
});
http://git-wip-us.apache.org/repos/asf/guacamole-client/blob/78cde50d/extensions/guacamole-auth-totp/src/main/resources/controllers/authenticationCodeFieldController.js
----------------------------------------------------------------------
diff --git a/extensions/guacamole-auth-totp/src/main/resources/controllers/authenticationCodeFieldController.js b/extensions/guacamole-auth-totp/src/main/resources/controllers/authenticationCodeFieldController.js
new file mode 100644
index 0000000..27881f8
--- /dev/null
+++ b/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;
+ };
+
+}]);
http://git-wip-us.apache.org/repos/asf/guacamole-client/blob/78cde50d/extensions/guacamole-auth-totp/src/main/resources/styles/totp.css
----------------------------------------------------------------------
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 6db7729..6d2d89f 100644
--- a/extensions/guacamole-auth-totp/src/main/resources/styles/totp.css
+++ b/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;
+}
http://git-wip-us.apache.org/repos/asf/guacamole-client/blob/78cde50d/extensions/guacamole-auth-totp/src/main/resources/templates/authenticationCodeField.html
----------------------------------------------------------------------
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 5a39be7..0837b74 100644
--- a/extensions/guacamole-auth-totp/src/main/resources/templates/authenticationCodeField.html
+++ b/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 -->
http://git-wip-us.apache.org/repos/asf/guacamole-client/blob/78cde50d/extensions/guacamole-auth-totp/src/main/resources/translations/en.json
----------------------------------------------------------------------
diff --git a/extensions/guacamole-auth-totp/src/main/resources/translations/en.json b/extensions/guacamole-auth-totp/src/main/resources/translations/en.json
index bd0e9e2..6f73aa0 100644
--- a/extensions/guacamole-auth-totp/src/main/resources/translations/en.json
+++ b/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:"
}