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 81cc07d63..54bb56c08 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' }); 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 000000000..27881f8e5 --- /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; + }; + +}]); 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 6db7729da..6d2d89f22 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; +} 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 5a39be7a4..0837b74c9 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 @@ -
+
+

+ +
+

+ {{'TOTP.SECTION_HEADER_DETAILS' | translate}} + {{'TOTP.ACTION_SHOW_DETAILS' | translate}} + {{'TOTP.ACTION_HIDE_DETAILS' | translate}} +

+ + + + + + + + + + + + + + + + + +
{{'TOTP.FIELD_HEADER_SECRET_KEY' | translate}}{{ group }}
{{'TOTP.FIELD_HEADER_DIGITS' | translate}}{{ field.digits }}
{{'TOTP.FIELD_HEADER_ALGORITHM' | translate}}{{ field.mode }}
{{'TOTP.FIELD_HEADER_INTERVAL' | translate}}{{ field.period }}
+

+
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 bd0e9e204..6f73aa02d 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:" }