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 8ee69b7bf6..6229600020 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 0000000000..38b551dc2c 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 4dea838001..0daf002e60 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 @@ -

Placeholder for Backup Code Setup

+
    +
  1. {{'accountSecurityTitle' | translate}}
    2. +
  2. + {{'authenticatorTitle' | translate}} +
    3. +
  3. {{'authenticatorBackupCodesSetupTitle' | translate}}
    4. +
+
+
+
+
+ {{'authenticatorBackupCodesSetupTitle' | translate}} +
+
+

{{'backupcodesIntroMessage' | translate}}

+
+
+
+
+
+
+ {{'realmName' | translate}}: Admin +
+
+ +
+
    +
  1. 7890 7327
    2. +
  2. 0000 7347
    3. +
  3. 7890 1227
    4. +
  4. 7870 9065
    5. +
  5. 1234 1232
    6. +
  6. 3232 2323
    7. +
  7. 7890 7327
    8. +
  8. 0000 7347
    9. +
  9. 7890 1227
    10. +
  10. 7870 9065
    11. +
  11. 1234 1232
    12. +
  12. 3232 2323
    13. +
+
+
+ +
+ + + +
+ +
+
    +
  • {{'backupCodesTips-1' | translate}}
    • +
  • {{'backupCodesTips-2' | translate}} Jan 11, 2018.
    • +
+
+ +
+ +
+ {{'backupCodesTips-3' | translate}} +
+
+ < {{'backtoAuthenticatorPage' | translate}} +
+
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 d4d9ca751f..ec06b78a58 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 @@ -

Placeholder for Mobile Authenticator Setup

+
    +
  1. {{'accountSecurityTitle' | translate}}
    2. +
  2. + {{'authenticatorTitle' | translate}} +
    3. +
  3. {{'authenticatorMobileSetupTitle' | translate}}
    4. +
+
+
+
+
+ {{'authenticatorMobileSetupTitle' | translate}} +
+
+
    +
  1. {{'mobileSetupStep1' | translate}} + +
    2. +
  2. {{'mobileSetupStep2' | translate}}
    3. +
  3. {{'mobileSetupStep3' | translate}}
    4. +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + +
+
+ {{'scanBarCode' | translate}} +
+
+ +
+
+
+
+ + +
+
+ + +
+
+
+
+
+
+
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 9652f61fae..302dd154f5 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 1e880bb998..2080cb6003 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 @@ -

Placeholder for SMS Code Setup

+
    +
  1. {{'accountSecurityTitle' | translate}}
    2. +
  2. + {{'authenticatorTitle' | translate}} +
    3. +
  3. {{'authenticatorSMSCodeSetupTitle' | translate}}
    4. +
+
+
+
+
+ {{'authenticatorSMSCodeSetupTitle' | translate}} +
+
+

{{'smscodeIntroMessage' | translate}}

+
+
+
+
+ +
+ + +
+
+
+ + +
+ +
+
+ + +
+ + +
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 2f851fdbd4..e9d2778c19 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; +}