Details
diff --git a/themes/src/main/resources/theme/base/account/messages/messages_en.properties b/themes/src/main/resources/theme/base/account/messages/messages_en.properties
index 907aeac..3374227 100755
--- a/themes/src/main/resources/theme/base/account/messages/messages_en.properties
+++ b/themes/src/main/resources/theme/base/account/messages/messages_en.properties
@@ -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.
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/authenticator-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/authenticator-page.component.html
index f490c06..1bec59c 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/authenticator-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/authenticator-page.component.html
@@ -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>
+<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>
- <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 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-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 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="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 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>
- </form>
-
+ </div>
+ </div>
+ </div>
</div>
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css b/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
index 39ba300..ddf912c 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
@@ -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;
+}
