GUACAMOLE-96: Clean up enrollment interface. Provide help text for user.

This commit is contained in:
Michael Jumper
2017-11-20 15:51:06 -08:00
parent a422fdf9c2
commit 2a894c487c
5 changed files with 61 additions and 11 deletions

View File

@@ -17,4 +17,16 @@
* under the License.
*/
/* STUB */
.totp-enroll p {
font-size: 0.8em;
}
.totp-qr-code {
text-align: center;
}
.totp-qr-code img {
margin: 1em;
border: 1px solid rgba(0,0,0,0.25);
box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}

View File

@@ -1,13 +1,18 @@
<div class="totp-code-field">
<!-- QR Code (if available) -->
<div class="totp-qr-code" ng-show="field.qrCode">
<img ng-src="{{field.qrCode}}">
<!-- Enroll user if necessary -->
<div class="totp-enroll" ng-show="field.qrCode">
<p translate="TOTP.HELP_ENROLL_BARCODE"></p>
<div class="totp-qr-code"><img ng-src="{{field.qrCode}}"></div>
<p translate="TOTP.HELP_ENROLL_VERIFY"
translate-values="{ DIGITS : field.digits }"></p>
</div>
<!-- Field for entry of the current TOTP code -->
<div class="totp-code">
<input type="text" ng-model="model" autocorrect="off" autocapitalize="off"/>
<input type="text"
placeholder="{{'TOTP.FIELD_PLACEHOLDER_CODE' |translate}}"
ng-model="model" autocorrect="off" autocapitalize="off"/>
</div>
</div>

View File

@@ -5,9 +5,20 @@
},
"LOGIN" : {
"FIELD_HEADER_GUAC_TOTP" : "Authentication Code",
"INFO_TOTP_REQUIRED" : "Please enter your authentication code to verify your identity.",
"INFO_TOTP_VERIFICATION_FAILED" : "Verification failed. Please try again."
"FIELD_HEADER_GUAC_TOTP" : ""
},
"TOTP" : {
"FIELD_PLACEHOLDER_CODE" : "Authentication Code",
"INFO_CODE_REQUIRED" : "Please enter your authentication code to verify your identity.",
"INFO_ENROLL_REQUIRED" : "Multi-factor authentication has been enabled on your account.",
"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."
}
}