Fixes KEYCLOAK-7689 Authenticator - Mobile Setup HTML
This commit is contained in:
June Zhang
Stan Silvert
parent
742a280f5d
commit
fc0d510e85
7 changed files with 282 additions and 3 deletions
|
|
@ -284,6 +284,39 @@ authenticatorBackupCodesTitle=Backup Codes
|
|||
authenticatorBackupCodesMessage=Get your 8-digit backup codes
|
||||
authenticatorBackupCodesFinishSetUpMessage=12 backup codes was generated at this time. Each one can be used once.
|
||||
|
||||
#Authenticator - Mobile Authenticator setup
|
||||
authenticatorMobileSetupTitle=Mobile Authenticator Setup
|
||||
smscodeIntroMessage=Enter your phone number and a verification code will be sent to your phone.
|
||||
mobileSetupStep1=Install an authenticator application on your phone. The applications listed here are supported.
|
||||
mobileSetupStep2=Open the application and scan the barcode.
|
||||
mobileSetupStep3=Enter the one-time code provided by the application and click Save to finish the setup.
|
||||
scanBarCode=Want to scan the barcode?
|
||||
enterBarCode=Enter the one-time code
|
||||
doCopy=Copy
|
||||
doFinish=Finish
|
||||
|
||||
#Authenticator - SMS Code setup
|
||||
authenticatorSMSCodeSetupTitle=SMS Code Setup
|
||||
smscodeIntroMessage=Enter your phone number and a verification code will be sent to your phone.
|
||||
chooseYourCountry=Choose your country
|
||||
enterYourPhoneNumber=Enter your phone number
|
||||
sendVerficationCode=Send Verification Code
|
||||
enterYourVerficationCode=Enter your verification code
|
||||
|
||||
#Authenticator - backup Code setup
|
||||
authenticatorBackupCodesSetupTitle=Backup Codes Setup
|
||||
backupcodesIntroMessage=If you lose access to your phone, you can still log into your account through backup codes. Keep them somewhere safe and accessible.
|
||||
realmName=Realm
|
||||
doDownload=Download
|
||||
doPrint=Print
|
||||
doCopy=Copy
|
||||
backupCodesTips-1=Each backup code can be used once.
|
||||
backupCodesTips-2=These codes were generated on
|
||||
generateNewBackupCodes=Generate New Backup Codes
|
||||
backupCodesTips-3=When you generate new backup codes, the current codes will not work anymore.
|
||||
backtoAuthenticatorPage=Back to Authenticator Page
|
||||
|
||||
|
||||
#Resources
|
||||
resources=Resources
|
||||
myResources=My Resources
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -1,2 +1,66 @@
|
|||
<h1>Placeholder for Backup Code Setup</h1>
|
||||
<ol class="breadcrumb">
|
||||
<li>{{'accountSecurityTitle' | translate}}</li>
|
||||
<li>
|
||||
<a href="#">{{'authenticatorTitle' | translate}}</a>
|
||||
</li>
|
||||
<li><strong>{{'authenticatorBackupCodesSetupTitle' | translate}}</strong></li>
|
||||
</ol>
|
||||
|
||||
<div class="col-sm-12 card-pf ">
|
||||
<div class="card-pf-body row">
|
||||
<div class="col-sm-12 col-md-4">
|
||||
<div class="card-pf-subtitle">
|
||||
{{'authenticatorBackupCodesSetupTitle' | translate}}
|
||||
</div>
|
||||
<div class="introMessage">
|
||||
<p>{{'backupcodesIntroMessage' | translate}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-8">
|
||||
<div class="backup-codes-box">
|
||||
<div class="backup-codes-box-header">
|
||||
<div class="header-text">
|
||||
<b>{{'realmName' | translate}}:</b> Admin
|
||||
</div>
|
||||
</div>
|
||||
<!--Backup Codes Box Header-->
|
||||
<div class="backup-codes-box-body">
|
||||
<ol class="backup-codes-list">
|
||||
<li>7890 7327</li>
|
||||
<li>0000 7347</li>
|
||||
<li>7890 1227</li>
|
||||
<li>7870 9065</li>
|
||||
<li>1234 1232</li>
|
||||
<li>3232 2323</li>
|
||||
<li>7890 7327</li>
|
||||
<li>0000 7347</li>
|
||||
<li>7890 1227</li>
|
||||
<li>7870 9065</li>
|
||||
<li>1234 1232</li>
|
||||
<li>3232 2323</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<!--Backup Codes Box Body-->
|
||||
<div class="top-margin-m">
|
||||
<button type="button" class="btn btn-default">{{'doDownload' | translate}}</button>
|
||||
<button type="button" class="btn btn-default">{{'doPrint' | translate}}</button>
|
||||
<button type="button" class="btn btn-default">{{'doCopy' | translate}}</button>
|
||||
</div>
|
||||
<!--Buttons Group-->
|
||||
<div class="top-margin-m">
|
||||
<ul class="left-padding-m">
|
||||
<li>{{'backupCodesTips-1' | translate}}</li>
|
||||
<li>{{'backupCodesTips-2' | translate}} Jan 11, 2018.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--Annotations-->
|
||||
<hr>
|
||||
<button type="button" class="btn btn-default">{{'generateNewBackupCodes' | translate}}</button>
|
||||
<div class="generate-annotation">
|
||||
{{'backupCodesTips-3' | translate}}
|
||||
</div>
|
||||
<div class="top-margin-m">
|
||||
<a href="">< {{'backtoAuthenticatorPage' | translate}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,2 +1,64 @@
|
|||
<h1>Placeholder for Mobile Authenticator Setup</h1>
|
||||
<ol class="breadcrumb">
|
||||
<li>{{'accountSecurityTitle' | translate}}</li>
|
||||
<li>
|
||||
<a href="#">{{'authenticatorTitle' | translate}}</a>
|
||||
</li>
|
||||
<li><strong>{{'authenticatorMobileSetupTitle' | translate}}</strong></li>
|
||||
</ol>
|
||||
|
||||
<div class="col-sm-12 card-pf ">
|
||||
<div class="card-pf-body row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card-pf-subtitle">
|
||||
{{'authenticatorMobileSetupTitle' | translate}}
|
||||
</div>
|
||||
<div class="introMessage">
|
||||
<ol class="setup-message">
|
||||
<li>{{'mobileSetupStep1' | translate}}
|
||||
<ul>
|
||||
<li><a href="javascript:void(0)">FreeOTP</a></li>
|
||||
<li><a href="javascript:void(0)">Google Authenticator</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>{{'mobileSetupStep2' | translate}}</li>
|
||||
<li>{{'mobileSetupStep3' | translate}}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-4">
|
||||
<div class="qrcode-img">
|
||||
<img src="${resourceUrl}/app/assets/img/QRCode.png">
|
||||
</div>
|
||||
<div class="qrcode-code">
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text" value="2AEB 293G OQ3D 1O23 09UW WOIE WO30 FAL2" disabled>
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">{{'doCopy' | translate}}</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="link-right">
|
||||
<a href="#">{{'scanBarCode' | translate}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-8">
|
||||
<form role="form">
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="input11">{{'enterBarCode' | translate}}</label>
|
||||
<input class="form-control" type="text" id="input11">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-default" disabled="">{{'doFinish' | translate}}</button>
|
||||
<button type="submit" class="btn btn-default">{{'doCancel' | translate}}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@
|
|||
*/
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
|
||||
declare const resourceUrl: string;
|
||||
|
||||
@Component({
|
||||
selector: 'app-mobile-authenticator-setup-page',
|
||||
templateUrl: './mobile-authenticator-setup-page.component.html',
|
||||
|
|
@ -23,6 +25,8 @@ import {Component, OnInit} from '@angular/core';
|
|||
})
|
||||
export class MobileAuthenticatorSetupPageComponent implements OnInit {
|
||||
|
||||
private resourceUrl: string = resourceUrl;
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,48 @@
|
|||
<h1>Placeholder for SMS Code Setup</h1>
|
||||
<ol class="breadcrumb">
|
||||
<li>{{'accountSecurityTitle' | translate}}</li>
|
||||
<li>
|
||||
<a href="#">{{'authenticatorTitle' | translate}}</a>
|
||||
</li>
|
||||
<li><strong>{{'authenticatorSMSCodeSetupTitle' | translate}}</strong></li>
|
||||
</ol>
|
||||
|
||||
<div class="col-sm-12 card-pf ">
|
||||
<div class="card-pf-body row">
|
||||
<div class="col-sm-12 col-md-4">
|
||||
<div class="card-pf-subtitle">
|
||||
{{'authenticatorSMSCodeSetupTitle' | translate}}
|
||||
</div>
|
||||
<div class="introMessage">
|
||||
<p>{{'smscodeIntroMessage' | translate}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-8">
|
||||
<div class="form-group">
|
||||
<label>{{'chooseYourCountry' | translate}}</label>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-default dropdown-toggle sms-dropdown" type="button" id="dropdownMenu-lan" data-toggle="dropdown">
|
||||
China +86
|
||||
<span class="caret dropdown-caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu-lan">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Argentina +54</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Brazil +55</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Canada +1</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">China +86</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">United States +1</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="InputPhoneNumber">{{'enterYourPhoneNumber' | translate}}</label>
|
||||
<input class="form-control" id="InputPhoneNumber">
|
||||
</div>
|
||||
<button class="btn btn-default">{{'sendVerficationCode' | translate}}</button>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label for="EnterVerificationCode">{{'enterYourVerficationCode' | translate}}</label>
|
||||
<input class="form-control" id="EnterVerificationCode">
|
||||
</div>
|
||||
<button class="btn btn-primary">Finish</button>
|
||||
<button class="btn btn-default">Cancel</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -588,3 +588,73 @@ p.description {
|
|||
font-size: 75%;
|
||||
margin-left: 4px;
|
||||
}
|
||||
ol.setup-message li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
ol.setup-message li ul li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
.qrcode-code {
|
||||
display: none;
|
||||
}
|
||||
.link-right {
|
||||
text-align: right;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.qrcode-img {
|
||||
display: none;
|
||||
}
|
||||
.qrcode-code {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* backup codes setup style*/
|
||||
.backup-codes-box {
|
||||
background-color: #fdf2e5;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 1px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
padding-top: 8px;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.backup-codes-box-body {
|
||||
font-size: 14px;
|
||||
margin-left: 24px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.backup-codes-list {
|
||||
columns: 2;
|
||||
-webkit-columns: 2;
|
||||
-moz-columns: 2;
|
||||
counter-reset: list;
|
||||
list-style: none;
|
||||
padding-left: 0px;
|
||||
}
|
||||
.backup-codes-list > li:before {
|
||||
content: counter(list)". ";
|
||||
color: lightgrey;
|
||||
counter-increment: list;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
margin-left: -16px;
|
||||
margin-right: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
.left-padding-m {
|
||||
padding-left: 16px;
|
||||
}
|
||||
.generate-annotation {
|
||||
max-width: 320px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.header-text {
|
||||
margin-left: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue