From fc0d510e855af0a5ea00d388545805c108dc804e Mon Sep 17 00:00:00 2001 From: June Zhang Date: Fri, 29 Jun 2018 17:49:42 +0800 Subject: [PATCH] Fixes KEYCLOAK-7689 Authenticator - Mobile Setup HTML --- .../account/messages/messages_en.properties | 33 +++++++++ .../resources/app/assets/img/QRCode.png | Bin 0 -> 10924 bytes .../backup-code-setup-page.component.html | 66 ++++++++++++++++- ...le-authenticator-setup-page.component.html | 64 +++++++++++++++- ...bile-authenticator-setup-page.component.ts | 4 + .../sms-code-setup-page.component.html | 48 +++++++++++- .../account/resources/styles.css | 70 ++++++++++++++++++ 7 files changed, 282 insertions(+), 3 deletions(-) create mode 100644 themes/src/main/resources/theme/keycloak-preview/account/resources/app/assets/img/QRCode.png 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 0000000000000000000000000000000000000000..38b551dc2c53a1243b87974fb627b71557669fb3 GIT binary patch literal 10924 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 (dZkbahC3pXHU8QL@x*{NqC0 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 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; +}