keycloak-uncached
Changes
themes/src/main/resources/theme/keycloak-preview/account/resources/app/assets/img/QRCode.png 0(+0 -0)
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/backup-code-setup-page.component.html 66(+65 -1)
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/mobile-authenticator-setup-page.component.html 64(+63 -1)
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/mobile-authenticator-setup-page.component.ts 4(+4 -0)
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 8ee69b7..6229600 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
@@ -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
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/assets/img/QRCode.png b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/assets/img/QRCode.png
new file mode 100644
index 0000000..38b551d
Binary files /dev/null and b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/assets/img/QRCode.png differ
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/backup-code-setup-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/backup-code-setup-page.component.html
index 4dea838..0daf002 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/backup-code-setup-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/backup-code-setup-page.component.html
@@ -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>
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/mobile-authenticator-setup-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/mobile-authenticator-setup-page.component.html
index d4d9ca7..ec06b78 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/mobile-authenticator-setup-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/mobile-authenticator-setup-page.component.html
@@ -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>
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/mobile-authenticator-setup-page.component.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/mobile-authenticator-setup-page.component.ts
index 9652f61..302dd15 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/mobile-authenticator-setup-page.component.ts
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/mobile-authenticator-setup-page.component.ts
@@ -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() {
}
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/sms-code-setup-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/sms-code-setup-page.component.html
index 1e880bb..2080cb6 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/sms-code-setup-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/sms-code-setup-page.component.html
@@ -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>
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 2f851fd..e9d2778 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
@@ -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;
+}