Fixes KEYCLOAK-7533 Authenticator List page - HTML
This commit is contained in:
June Zhang
Stan Silvert
parent
3c9d3c2c04
commit
ca06043b00
3 changed files with 163 additions and 38 deletions
|
|
@ -264,3 +264,22 @@ socialLogin=Socail Login
|
|||
userDefined=User Defined
|
||||
removeAccess=Remove Access
|
||||
removeAccessMessage=You will need to grant access again, if you want to use this app account.
|
||||
|
||||
#Authenticator
|
||||
authenticatorStatusMessage=Two-factor authentication is currently
|
||||
authenticatorFinishSetUpTitle=Your Two-Factor Authentication
|
||||
authenticatorFinishSetUpMessage=Each time you sign in to your Keycloak account, you will be asked to provide a two-factor authentication code.
|
||||
authenticatorSubTitle=Set Up Two-Factor Authentication
|
||||
authenticatorSubMessage=To enhance the security of your account, enable at least one of the available two-factor authentication methods.
|
||||
authenticatorMobileTitle=Mobile Authenticator
|
||||
authenticatorMobileMessage=Use mobile Authenticator to get Verification codes as the two-factor authentication.
|
||||
authenticatorMobileFinishSetUpMessage=The authenticator has been bound to your phone.
|
||||
authenticatorActionSetup=Set up
|
||||
authenticatorSMSTitle=SMS Code
|
||||
authenticatorSMSMessage=Keycloak will send the Verification code to your phone as the two-factor authentication.
|
||||
authenticatorSMSFinishSetUpMessage=Text messages are sent to
|
||||
authenticatorDefaultStatus=Default
|
||||
authenticatorChangePhone=Change Phone Number
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -1,46 +1,114 @@
|
|||
<div class="page-header">
|
||||
<h1>Authenticator</h1>
|
||||
<h1>{{'authenticatorTitle' | translate}}</h1>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-9 content-area">
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<p>Install <a href="https://fedorahosted.org/freeotp/" target="_blank">FreeOTP</a> or Google Authenticator on your device. Both applications are available in <a href="https://play.google.com">Google Play</a> and Apple App Store.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Open the application and scan the barcode or enter the key.</p>
|
||||
<p><img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACiElEQVR42u2ZTa6jMBCEG7FgyRF8k+RilkDiYuEmHIGlF4ieqm7+3sxodqP2IiwQ+Eskx+4qlx3Rf16bfPmX/1++ikijYyovGbSb0dp9JKMRr1XwQXVesxTpVUuj09LpmpOBKngW9HoUeeO18Kazbkmamvg6LBhVEcUtyUtyZRz9L69eF3n1Y+L8V8Rt/nH7eH1ipJs/6yOQizdgkB+33/QVyA+nwaja+Mqw/M2f4jj6jwlv1eoTv6RVOFG7sByq4KqL7uSzTtrxl+BjqNn9Gt9Yjg7Dv/G0e33CHyn3e3yDORp8/imiwk/iScSWmyr4lmx96fZ+dH+EieM789n/YO59bc1/3B9Zp0net//E8izef1hjMn+0mu2u+gjn8GprxVN50x8//fTQfzAn+vRMDVCNCIoA84/rqo9gvrYL5lo8H9J6fP4f/hPMj/WvHFWZbc3+4e+xPLvXCEfV/YdKv/wnnLdsHZNaPrQkhuiwFKmEA8F1JpUjHyrXZ3E7r4LDa6CfZK22P7EiMBFVwuVwHexPjpU63/4dzkczRM/XZkcmHZ0r4e7akqzXDLFqcpf3vb6Ecgqa/Yeqt+SvpqlqONY6zj93xdf8D/rMZ7Ec14e7TguJth3YoXQ7bqiBr9ywgxemfjxtrARcl39HcztaQHSgicuRrwfuCbQS7hs6UxKPPjj/limGOriVpnrgZ4gQyl26+ZFfI7ldzF+CTYCwKn18X30d/MxfQBNRy+iQU/fjfDWS8/zIzgfPXae1PfQTzO18MHv+x61VPxO566MGPqilVtM3pb081ucaOHq9n/mLi8xz/Q7mx/mlh8Tm1Pytn2hu+uH5KqO12PkClFQarYN//7/68mr5LwnkYjOKw3BlAAAAAElFTkSuQmCC" alt="Figure: Barcode"></p>
|
||||
<p><span class="code">MVFU 4UKB IYZU 2RBZ NJSW 2MTK NQZT QVBZ</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Enter the one-time code provided by the application and click Save to finish the setup.</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<hr>
|
||||
|
||||
<form action="http://localhost:8180/auth/realms/master/account/totp" class="form-horizontal" method="post">
|
||||
<input id="stateChecker" name="stateChecker" value="7L6A5K0Mghuc4cm2DBF78rIMI5140AnKc01_q3Pj-4o" type="hidden">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-2 col-md-2">
|
||||
<label for="totp" class="control-label">One-time code</label>
|
||||
<div class="col-sm-12 card-pf">
|
||||
<div class="card-pf-body p-b">
|
||||
<span class="label label-default m-r">OFF</span>
|
||||
<!-- <span class="label label-primary m-r">ON</span> -->
|
||||
{{'authenticatorStatusMessage' | translate}} off
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 card-pf">
|
||||
<div class="card-pf-body row">
|
||||
<div class="col-sm-4 col-md-4">
|
||||
<div class="card-pf-subtitle">
|
||||
{{'authenticatorFinishSetUpTitle' | translate}}
|
||||
</div>
|
||||
<div class="introMessage">
|
||||
<p>{{'authenticatorFinishSetUpMessage' | translate}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8 col-md-8">
|
||||
<div class="list-pf list-pf-stacked list-authenticator">
|
||||
<div class="list-authenticator-item">
|
||||
<div class="list-pf-container">
|
||||
<div class="list-pf-content list-pf-content-flex ">
|
||||
<div class="list-pf-left">
|
||||
<span class="fa fa-google list-pf-icon"></span>
|
||||
</div>
|
||||
<div class="list-pf-content-wrapper">
|
||||
<div class="list-pf-main-content">
|
||||
<div class="list-pf-title text-overflow-pf">
|
||||
{{'authenticatorMobileTitle' | translate}}
|
||||
<span class="label label-default authenticator-label">{{'authenticatorDefaultStatus' | translate}}</span>
|
||||
</div>
|
||||
<div class="list-pf-description">
|
||||
{{'authenticatorMobileFinishSetUpMessage' | translate}}
|
||||
</div>
|
||||
<div class="top-margin-m authenticator-entry">
|
||||
<a href="javascript:void(0)">{{'authenticatorChangePhone' | translate}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-pf-actions">
|
||||
<div class="dropdown pull-right dropdown-kebab-pf">
|
||||
<button id="dropdownKebabRight" class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="fa fa-ellipsis-v"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
|
||||
<li><a href="javascript:void(0)">{{'doRemove' | translate}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 card-pf">
|
||||
<div class="card-pf-body row">
|
||||
<div class="col-sm-4 col-md-4">
|
||||
<div class="card-pf-subtitle">
|
||||
{{'authenticatorSubTitle' | translate}}
|
||||
</div>
|
||||
<div class="introMessage">
|
||||
<p>{{'authenticatorSubMessage' | translate}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8 col-md-8">
|
||||
<div class="list-pf list-pf-stacked list-authenticator">
|
||||
<div class="list-authenticator-item">
|
||||
<div class="list-pf-container">
|
||||
<div class="list-pf-content list-pf-content-flex">
|
||||
<div class="list-pf-left">
|
||||
<span class="fa fa-mobile list-pf-icon"></span>
|
||||
</div>
|
||||
<div class="list-pf-content-wrapper">
|
||||
<div class="list-pf-main-content">
|
||||
<div class="list-pf-title text-overflow-pf">{{'authenticatorSMSTitle' | translate}}</div>
|
||||
<div class="list-pf-description">{{'authenticatorSMSMessage' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-pf-actions">
|
||||
<a class="btn btn-link" href="javascript:void(0)">{{'authenticatorActionSetup' | translate}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-authenticator-item">
|
||||
<div class="list-pf-container">
|
||||
<div class="list-pf-content list-pf-content-flex ">
|
||||
<div class="list-pf-left">
|
||||
<span class="fa fa-lock list-pf-icon list-pf-icon-large"></span>
|
||||
</div>
|
||||
<div class="list-pf-content-wrapper">
|
||||
<div class="list-pf-main-content">
|
||||
<div class="list-pf-title text-overflow-pf">{{'authenticatorBackupCodesTitle' | translate}}</div>
|
||||
<div class="list-pf-description">{{'authenticatorBackupCodesMessage' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-pf-actions">
|
||||
<a class="btn btn-link" href="javascript:void(0)">{{'authenticatorActionSetup' | translate}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-10 col-md-10">
|
||||
<input class="form-control" id="totp" name="totp" autocomplete="off" autofocus="" type="text">
|
||||
<input id="totpSecret" name="totpSecret" value="eKNQAF3MD9jem2jl38T9" type="hidden">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
|
||||
<div class="">
|
||||
<button type="submit" class="btn btn-primary btn-lg" name="submitAction" value="Save">Save</button>
|
||||
<button type="submit" class="btn btn-default btn-lg" name="submitAction" value="Cancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -357,3 +357,41 @@ p.description {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* authenticator style */
|
||||
.list-pf {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.list-authenticator {
|
||||
margin: 0 0 30px 0;
|
||||
}
|
||||
.list-authenticator-item {
|
||||
border-color: #ededed;
|
||||
border-left-color: #fff;
|
||||
border-right-color: #fff;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-top: none;
|
||||
}
|
||||
.list-authenticator .list-pf-icon {
|
||||
font-size: 1.8em;
|
||||
height: 20px;
|
||||
line-height: 30px;
|
||||
width: 10px;
|
||||
align-items: normal;
|
||||
}
|
||||
.list-authenticator .list-pf-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.top-margin-m {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.authenticator-entry {
|
||||
font-size: 14px;
|
||||
}
|
||||
.authenticator-label {
|
||||
font-size: 75%;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue