Fixes KEYCLOAK-7689 Authenticator - Mobile Setup HTML

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

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="">&lt; {{'backtoAuthenticatorPage' | translate}}</a>
+          </div>
+        </div>

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>

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() {
     }
 

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>

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;
+}