From 653d3f4f5d60437c61576f2a5b8c5ec7ac30cae8 Mon Sep 17 00:00:00 2001
From: vmuzikar <vmuzikar@redhat.com>
Date: Tue, 21 Aug 2018 18:46:38 +0200
Subject: [PATCH] KEYCLOAK-8093 Add IDs to HTML elements in new Account Console

---
 .../account/messages/messages_en.properties   |  2 +-
 .../theme/keycloak-preview/account/index.ftl  | 32 +++++++++----------
 .../account-page/account-page.component.html  | 10 +++---
 .../applications-page.component.html          | 20 ++++++------
 .../authenticator-page.component.html         | 16 +++++-----
 .../backup-code-setup-page.component.html     | 20 ++++++------
 ...le-authenticator-setup-page.component.html | 18 +++++------
 .../sms-code-setup-page.component.html        | 12 +++----
 .../device-activity-page.component.html       | 16 +++++-----
 .../linked-accounts-page.component.html       | 14 ++++----
 .../my-resources-detail-page.component.html   |  2 +-
 .../my-resources-page.component.html          |  2 +-
 .../shared-with-me-detail-page.component.html |  2 +-
 .../shared-with-me-page.component.html        |  2 +-
 .../password-page.component.html              |  8 ++---
 15 files changed, 88 insertions(+), 88 deletions(-)

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 e7cd4e845dd5..d2acee2a650a 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
@@ -260,7 +260,7 @@ authorizedProvider=Authorized Provider
 authorizedProviderMessage=Authorized Providers linked with your account
 identityProvider=Identity Provider
 identityProviderMessage=To link your account with identity providers you have configured
-socialLogin=Socail Login
+socialLogin=Social Login
 userDefined=User Defined
 removeAccess=Remove Access
 removeAccessMessage=You will need to grant access again, if you want to use this app account.
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/index.ftl b/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
index a1914179bac0..e0947383b38d 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
+++ b/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
@@ -146,10 +146,10 @@
                     <li><button id="signInButton" style="visibility:hidden" onclick="keycloak.login();" class="btn btn-primary btn-lg btn-sign" type="button">${msg("doLogIn")}</button></li>
                     <#if realm.internationalizationEnabled  && supportedLocales?size gt 1>
                         <li class="dropdown">
-                          <a href="#0" class="dropdown-toggle nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <a href="#0" class="dropdown-toggle nav-item-iconic" id="localeDropdownBtn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             ${msg("locale_" + locale)} <span class="caret"></span>
                           </a>
-                          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+                          <ul class="dropdown-menu" aria-labelledby="localeDropdownBtn" id="localeDropdownMenu">
                           <#list supportedLocales as locale, label>
                             <li><a href="${baseUrl}/?kc_locale=${locale}">${label}</a></li>
                           </#list>
@@ -165,12 +165,12 @@
 <!-- Home Page -->
 
     <div class="cards-pf" id="welcomeScreen">
-        <div class="text-center">
+        <div class="text-center" id="welcomeMsg">
           <h1>${msg("accountManagementWelcomeMessage")}</h1>
         </div>
         <div class="container-fluid container-cards-pf">
             <div class="row row-cards-pf">
-                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
+                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3" id="personalInfoCard">
                     <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
                         <div class="card-pf-body text-center row">
                             <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
@@ -179,12 +179,12 @@
                             <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
                               <h2>${msg("personalInfoHtmlTitle")}</h2>
                               <p class="card-pf-content-intro">${msg("personalInfoIntroMessage")}</p>
-                              <h3><a href="${baseUrl}/#/account">${msg("personalInfoHtmlTitle")}</a></h3>
+                              <h3 id="personalInfoLink"><a href="${baseUrl}/#/account">${msg("personalInfoHtmlTitle")}</a></h3>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
+                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3" id="accountSecurityCard">
                     <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
                         <div class="card-pf-body text-center row">
                             <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
@@ -193,15 +193,15 @@
                             <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
                               <h2>${msg("accountSecurityTitle")}</h2>
                               <p class="card-pf-content-intro">${msg("accountSecurityIntroMessage")}</p>
-                              <h3><a href="${baseUrl}/#/password">${msg("changePasswordHtmlTitle")}</a></h3>
-                              <h3><a href="${baseUrl}/#/authenticator">${msg("authenticatorTitle")}</a></h3>
-                              <h3><a href="${baseUrl}/#/device-activity">${msg("deviceActivityHtmlTitle")}</a></h3>
-                              <h3 id="linkedAccounts"><a href="${baseUrl}/#/linked-accounts">${msg("linkedAccountsHtmlTitle")}</a></h3>
+                              <h3 id="changePasswordLink"><a href="${baseUrl}/#/password">${msg("changePasswordHtmlTitle")}</a></h3>
+                              <h3 id="authenticatiorLink"><a href="${baseUrl}/#/authenticator">${msg("authenticatorTitle")}</a></h3>
+                              <h3 id="deviceActivityLink"><a href="${baseUrl}/#/device-activity">${msg("deviceActivityHtmlTitle")}</a></h3>
+                              <h3 id="linkedAccountsLink"><a href="${baseUrl}/#/linked-accounts">${msg("linkedAccountsHtmlTitle")}</a></h3>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
+                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3" id="applicationsCard">
                     <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
                         <div class="card-pf-body text-center row">
                             <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
@@ -210,12 +210,12 @@
                             <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
                               <h2>${msg("applicationsHtmlTitle")}</h2>
                               <p class="card-pf-content-intro">${msg("applicationsIntroMessage")}</p>
-                              <h3><a href="${baseUrl}/#/applications">${msg("applicationsHtmlTitle")}</a></h3>
+                              <h3 id="applicationsLink"><a href="${baseUrl}/#/applications">${msg("applicationsHtmlTitle")}</a></h3>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div id="myResources" class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
+                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3" id="myResourcesCard">
                     <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
                         <div class="card-pf-body text-center row">
                             <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
@@ -224,7 +224,7 @@
                             <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
                               <h2>${msg("myResources")}</h2>
                               <p class="card-pf-content-intro">${msg("resourceIntroMessage")}</p>
-                              <h3><a href="${baseUrl}/#/my-resources">${msg("myResources")}</a></h3>
+                              <h3 id="myResourcesLink"><a href="${baseUrl}/#/my-resources">${msg("myResources")}</a></h3>
                             </div>
                         </div>
                     </div>
@@ -236,11 +236,11 @@
 
         <script>
             if (!features.isLinkedAccountsEnabled) {
-                document.getElementById("linkedAccounts").style.display='none';
+                document.getElementById("linkedAccountsLink").style.display='none';
             }
                 
             if (!features.isMyResourcesEnabled) {
-                document.getElementById("myResources").style.display='none';
+                document.getElementById("myResourcesCard").style.display='none';
             }
                 
             var winHash = window.location.hash;
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.html
index d4bd5727fa70..d27ab4dcddc5 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/account-page.component.html
@@ -1,17 +1,17 @@
 <div class="page-header">
-    <h1>{{'personalInfoHtmlTitle' | translate}}</h1>
+    <h1 id="pageTitle">{{'personalInfoHtmlTitle' | translate}}</h1>
 </div>
 
 <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">
+          <div class="card-pf-subtitle" id="personalSubTitle">
               {{'personalSubTitle' | translate}}
           </div>
-          <div class="introMessage">
+          <div class="introMessage" id="personalSubMessage">
             <p>{{'personalSubMessage' | translate}}</p>
           </div>
-          <div class="subtitle"><span class="required">*</span> {{'requiredFields' | translate}}</div>
+          <div class="subtitle" id="requiredFieldMessage"><span class="required">*</span> {{'requiredFields' | translate}}</div>
       </div>
       <div class="col-sm-6 col-md-6">
 
@@ -20,7 +20,7 @@ <h1>{{'personalInfoHtmlTitle' | translate}}</h1>
           <div *ngIf="!isRegistrationEmailAsUsername" class="form-group ">
               <label for="username" class="control-label">{{'username' | translate}}</label><span *ngIf="isEditUserNameAllowed" class="required">*</span>
               <input *ngIf="isEditUserNameAllowed" type="text" class="form-control" required ngModel id="username" name="username" value="{{username}}" >
-              <div class="non-edit" *ngIf="!isEditUserNameAllowed">{{ username }}</div>
+              <div class="non-edit" *ngIf="!isEditUserNameAllowed" id="username">{{ username }}</div>
           </div>
 
           <div class="form-group ">
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html
index 9e265dc87a5b..6b8222caa743 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html
@@ -1,5 +1,5 @@
 <div class="page-header">
-    <h1>{{'applicationsHtmlTitle' | translate}}</h1>
+    <h1 id="pageTitle">{{'applicationsHtmlTitle' | translate}}</h1>
 </div>
 
 <!--The new application HTML code-->
@@ -10,7 +10,7 @@ <h1>{{'applicationsHtmlTitle' | translate}}</h1>
         <div id="toolbar-application-mobile">
           <h2>
             <span class="fa fa-angle-right"></span>
-            <a href="javascript:void(0)">Filter</a>
+            <a href="javascript:void(0)" id="showFilterBtn">Filter</a>
           </h2>
         </div>
         <div id="toolbar-application">
@@ -19,8 +19,8 @@ <h2>
               <label class="sr-only" for="filter">{{'applicaitonName' | translate}}</label>
               <div class="input-group">
                 <div class="input-group-btn">
-                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
-                  <ul class="dropdown-menu">
+                  <button type="button" id="filterDropdownBtn" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
+                  <ul class="dropdown-menu" id="filterDropdownMenu">
                     <li class="selected"><a href="#">{{'applicaitonName' | translate}}</a></li>
                     <li><a href="#">{{'applicaitonType' | translate}}</a></li>
                   </ul>
@@ -30,8 +30,8 @@ <h2>
             </div>
             <div class="form-group">
               <div class="dropdown btn-group">
-                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{'applicaitonType' | translate}} <span class="caret"></span></button>
-                <ul class="dropdown-menu">
+                <button type="button" id="appTypeDropdownBtn" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{'applicaitonType' | translate}} <span class="caret"></span></button>
+                <ul class="dropdown-menu" id="appTypeDropdownMenu">
                   <li class="selected"><a href="#">{{'allApps' | translate}}</a></li>
                   <li><a href="#">{{'internalApps' | translate}}</a></li>
                   <li><a href="#">{{'thirdpartyApps' | translate}}</a></li>
@@ -44,9 +44,9 @@ <h2>
           </form>
           <div class="row toolbar-pf-results">
             <div class="col-sm-12">
-              <h5>40 {{'appResults' | translate}}</h5>
+              <h5><span id="appResults">40</span> {{'appResults' | translate}}</h5>
               <p>{{'activeFilters' | translate}}</p>
-              <ul class="list-inline">
+              <ul class="list-inline" id="activeFiltersList">
                 <li>
                   <span class="label label-info">
                     {{'applicaitonName' | translate}}: nameofthething
@@ -66,7 +66,7 @@ <h5>40 {{'appResults' | translate}}</h5>
                   </span>
                 </li>
               </ul>
-              <p><a href="#">{{'clearAllFilter' | translate}}</a></p>
+              <p><a href="#" id="clearAllFilters">{{'clearAllFilter' | translate}}</a></p>
             </div>
           </div>
         </div>
@@ -74,7 +74,7 @@ <h5>40 {{'appResults' | translate}}</h5>
     </div>
 
 
-    <div class="list-group list-view-pf list-view-pf-view">
+    <div class="list-group list-view-pf list-view-pf-view" id="appResultList">
       <div class="list-group-item">
         <div class="list-group-item-header">
           <div class="list-view-pf-expand">
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 1bec59cd6c25..af6b9561f416 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,10 +1,10 @@
 <div class="page-header">
-    <h1>{{'authenticatorTitle' | translate}}</h1>
+    <h1 id="pageTitle">{{'authenticatorTitle' | translate}}</h1>
 </div>
 
 <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-default m-r" id="authenticatorStatus">OFF</span>
     <!-- <span class="label label-primary m-r">ON</span> -->
     {{'authenticatorStatusMessage' | translate}} off
   </div>
@@ -13,15 +13,15 @@ <h1>{{'authenticatorTitle' | translate}}</h1>
 <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">
+      <div class="card-pf-subtitle" id="authenticatorFinishSetUpTitle">
           {{'authenticatorFinishSetUpTitle' | translate}}
       </div>
-      <div class="introMessage">
+      <div class="introMessage" id="authenticatorFinishSetUpMessage">
           <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-pf list-pf-stacked list-authenticator" id="authenticatorFinishList">
         <div class="list-authenticator-item">
           <div class="list-pf-container">
             <div class="list-pf-content list-pf-content-flex ">
@@ -63,15 +63,15 @@ <h1>{{'authenticatorTitle' | translate}}</h1>
 <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">
+      <div class="card-pf-subtitle" id="authenticatorSubTitle">
           {{'authenticatorSubTitle' | translate}}
       </div>
-      <div class="introMessage">
+      <div class="introMessage" id="authenticatorSubMessage">
           <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-pf list-pf-stacked list-authenticator" id="authenticatorList">
         <div class="list-authenticator-item">
           <div class="list-pf-container">
             <div class="list-pf-content list-pf-content-flex">
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 0daf002e6015..65bb97f5bba1 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,4 +1,4 @@
-<ol class="breadcrumb">
+<ol class="breadcrumb" id="breadcrumbs">
   <li>{{'accountSecurityTitle' | translate}}</li>
   <li>
     <a href="#">{{'authenticatorTitle' | translate}}</a>
@@ -9,10 +9,10 @@
 <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">
+          <div class="card-pf-subtitle" id="authenticatorBackupCodesSetupTitle">
               {{'authenticatorBackupCodesSetupTitle' | translate}}
           </div>
-          <div class="introMessage">
+          <div class="introMessage" id="backupcodesIntroMessage">
             <p>{{'backupcodesIntroMessage' | translate}}</p>
           </div>
         </div>
@@ -20,12 +20,12 @@
           <div class="backup-codes-box">
             <div class="backup-codes-box-header">
               <div class="header-text">
-                <b>{{'realmName' | translate}}:</b> Admin
+                <b>{{'realmName' | translate}}:</b> <span id="realmName">Admin</span>
               </div>
             </div>
             <!--Backup Codes Box Header-->
             <div class="backup-codes-box-body">
-              <ol class="backup-codes-list">
+              <ol class="backup-codes-list" id="backupCodesList">
                 <li>7890 7327</li>
                 <li>0000 7347</li>
                 <li>7890 1227</li>
@@ -43,9 +43,9 @@
           </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>
+            <button type="button" class="btn btn-default" id="backupCodesDownloadBtn">{{'doDownload' | translate}}</button>
+            <button type="button" class="btn btn-default" id="backupCodesPrintBtn">{{'doPrint' | translate}}</button>
+            <button type="button" class="btn btn-default" id="backupCodesCopyBtn">{{'doCopy' | translate}}</button>
           </div>
           <!--Buttons Group-->
           <div class="top-margin-m">
@@ -56,11 +56,11 @@
           </div>
           <!--Annotations-->
           <hr>
-          <button type="button" class="btn btn-default">{{'generateNewBackupCodes' | translate}}</button>
+          <button type="button" class="btn btn-default" id="generateNewBackupCodesBtn">{{'generateNewBackupCodes' | translate}}</button>
           <div class="generate-annotation">
             {{'backupCodesTips-3' | translate}}
           </div>
           <div class="top-margin-m">
-            <a href="">&lt; {{'backtoAuthenticatorPage' | translate}}</a>
+            <a href="" id="backtoAuthenticatorPage">&lt; {{'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 ec06b78a58b6..20299875911e 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,4 +1,4 @@
-<ol class="breadcrumb">
+<ol class="breadcrumb" id="breadcrumbs">
   <li>{{'accountSecurityTitle' | translate}}</li>
   <li>
     <a href="#">{{'authenticatorTitle' | translate}}</a>
@@ -9,12 +9,12 @@
 <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">
+          <div class="card-pf-subtitle" id="authenticatorMobileSetupTitle">
               {{'authenticatorMobileSetupTitle' | translate}}
           </div>
           <div class="introMessage">
             <ol class="setup-message">
-              <li>{{'mobileSetupStep1' | translate}}
+              <li id="authenticatorAppsList">{{'mobileSetupStep1' | translate}}
                 <ul>
                   <li><a href="javascript:void(0)">FreeOTP</a></li>
                   <li><a href="javascript:void(0)">Google Authenticator</a></li>
@@ -31,17 +31,17 @@
               <div class="row">
                 <div class="col-sm-12 col-md-4">
                   <div class="qrcode-img">
-                    <img src="${resourceUrl}/app/assets/img/QRCode.png">
+                    <img src="${resourceUrl}/app/assets/img/QRCode.png" id="authenticatorQrCode">
                   </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>
+                      <input class="form-control" type="text" value="2AEB 293G OQ3D 1O23 09UW WOIE WO30 FAL2" disabled id="authenticatorKey">
                       <span class="input-group-btn">
-                        <button class="btn btn-default" type="button">{{'doCopy' | translate}}</button>
+                        <button class="btn btn-default" type="button" id="authenticatorCopyBtn">{{'doCopy' | translate}}</button>
                       </span>
                     </div>
                     <div class="link-right">
-                      <a href="#">{{'scanBarCode' | translate}}</a>
+                      <a href="#" id="scanBarCode">{{'scanBarCode' | translate}}</a>
                     </div>
                   </div>
 
@@ -53,8 +53,8 @@
                       <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>
+                      <button type="submit" class="btn btn-default" disabled="" id="authenticatorFinishBtn">{{'doFinish' | translate}}</button>
+                      <button type="submit" class="btn btn-default" id="authenticatorCancelBtn">{{'doCancel' | translate}}</button>
                     </div>
                   </form>
                 </div>
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 2080cb6003a7..bb7e3d12cdf3 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,4 +1,4 @@
-<ol class="breadcrumb">
+<ol class="breadcrumb" id="breadcrumbs">
   <li>{{'accountSecurityTitle' | translate}}</li>
   <li>
     <a href="#">{{'authenticatorTitle' | translate}}</a>
@@ -9,10 +9,10 @@
 <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">
+          <div class="card-pf-subtitle" id="authenticatorSMSCodeSetupTitle">
               {{'authenticatorSMSCodeSetupTitle' | translate}}
           </div>
-          <div class="introMessage">
+          <div class="introMessage" id="smscodeIntroMessage">
             <p>{{'smscodeIntroMessage' | translate}}</p>
           </div>
         </div>
@@ -24,7 +24,7 @@
                 China +86
                 <span class="caret dropdown-caret"></span>
               </button>
-              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu-lan">
+              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu-lan" id="dropdownMenu">
                 <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>
@@ -43,6 +43,6 @@
             <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>
+          <button class="btn btn-primary" id="authenticatorFinishBtn">Finish</button>
+          <button class="btn btn-default" id="authenticatorCancelBtn">Cancel</button>
         </div>
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.html
index 6727e73e98f7..61b5ca8e0761 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/device-activity-page.component.html
@@ -1,5 +1,5 @@
 <div class="page-header">
-  <h1>{{'deviceActivityHtmlTitle' | translate}}</h1>
+  <h1 id="pageTitle">{{'deviceActivityHtmlTitle' | translate}}</h1>
 </div>
 
 
@@ -7,18 +7,18 @@ <h1>{{'deviceActivityHtmlTitle' | translate}}</h1>
   <div class="card-pf-body">
     <div class="row">
       <div class="col-sm-12 col-md-8">
-        <h2 class="card-pf-title">
+        <h2 class="card-pf-title" id="signedInDevicesTitle">
           Signed In Devices
         </h2>
-        <p class="detail-description">You can find devices that have logged into your account from the list. Log out any of them if the device is unfamiliar or logged in wrong place and time.</p>
+        <p class="detail-description" id="signedInDevicesDesc">You can find devices that have logged into your account from the list. Log out any of them if the device is unfamiliar or logged in wrong place and time.</p>
       </div>
       <div class="col-sm-12 col-md-4">
-        <button class="btn btn-default pull-right pull-right-sm" type="button" data-toggle="modal" data-target="#myModal">Log Out All Devices</button>
+        <button class="btn btn-default pull-right pull-right-sm" type="button" data-toggle="modal" data-target="#myModal" id="logoutAllDevicesBtn">Log Out All Devices</button>
       </div>
     </div>
     <div class="row">
       <div class="container-fluid">
-        <div class="list-group list-view-pf list-view-pf-view">
+        <div class="list-group list-view-pf list-view-pf-view" id="signedInDevicesList">
           <div class="list-group-item">
             <div class="list-group-item-header">
               <div class="list-view-pf-expand">
@@ -116,14 +116,14 @@ <h2 class="card-pf-title">
 </div>
 <div class="card-pf">
   <div class="card-pf-body">
-    <h2 class="card-pf-title">
+    <h2 class="card-pf-title" id="recentlyUsedDevicesTitle">
       Recently Used Devices
     </h2>
-    <p class="detail-description">You can find devices that you used in the last month, but they have not logged into your account anymore.</p>
+    <p class="detail-description" id="recentlyUsedDevicesDesc">You can find devices that you used in the last month, but they have not logged into your account anymore.</p>
 
     <div class="row">
       <div class="container-fluid">
-        <div class="list-group list-view-pf list-view-pf-view">
+        <div class="list-group list-view-pf list-view-pf-view" id="recentlyUsedDevicesList">
           <div class="list-group-item">
             <div class="list-group-item-header">
               <div class="list-view-pf-expand">
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.html
index c3de5ff75701..334e4764faad 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.html
@@ -1,18 +1,18 @@
 <div class="page-header">
-  <h1>{{'linkedAccountsHtmlTitle' | translate}}</h1>
+  <h1 id="pageTitle">{{'linkedAccountsHtmlTitle' | translate}}</h1>
 </div>
 <div class="col-sm-12 card-pf card-linked-account">
   <div class="card-pf-body row">
     <div class="col-md-3">
-      <div class="card-pf-subtitle">
+      <div class="card-pf-subtitle" id="authorizedProvidersSubTitle">
         {{'authorizedProvider' | translate}}
       </div>
-      <div class="introMessage">
+      <div class="introMessage" id="authorizedProvidersSubMessage">
         <p>{{'authorizedProviderMessage' | translate}}</p>
       </div>
     </div>
     <div class="col-md-9">
-      <div class="list-group list-view-pf list-view-pf-view">
+      <div class="list-group list-view-pf list-view-pf-view" id="authorizedProvidersList">
         <div class="list-group-item">
           <div class="list-view-pf-actions">
             <a href="#" data-toggle="modal" data-target="#myModal">{{'doRemove' | translate}}</a>
@@ -43,15 +43,15 @@ <h1>{{'linkedAccountsHtmlTitle' | translate}}</h1>
 <div class="col-sm-12 card-pf card-linked-account">
   <div class="card-pf-body row">
     <div class="col-md-3">
-      <div class="card-pf-subtitle">
+      <div class="card-pf-subtitle" id="identityProviderSubTitle">
         {{'identityProvider' | translate}}
       </div>
-      <div class="introMessage">
+      <div class="introMessage" id="identityProviderSubMessage">
         <p>{{'identityProviderMessage' | translate}}</p>
       </div>
     </div>
     <div class="col-md-9">
-      <div class="list-group list-view-pf list-view-pf-view ">
+      <div class="list-group list-view-pf list-view-pf-view " id="identityProviderList">
         <div class="list-group-item">
           <div class="list-view-pf-actions">
             <a href="#">{{'doLink' | translate}}</a>
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-detail-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-detail-page.component.html
index 2e9033781d40..0019ecf96c93 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-detail-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-detail-page.component.html
@@ -1,4 +1,4 @@
-<ol class="breadcrumb">
+<ol class="breadcrumb" id="breadcrumbs">
   <li><a href="#"> {{'resources' | translate}}</a>
   </li>
   <li class="active"> <strong>Alice Family</strong>
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-page.component.html
index 7c3f610be032..a113830fc676 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-page.component.html
@@ -1,5 +1,5 @@
 <div class="page-header">
-  <h1>{{'resources' | translate}}</h1>
+  <h1 id="pageTitle">{{'resources' | translate}}</h1>
 </div>
 <div class="col-sm-12 card-pf resources-list">
   <div class="card-pf-body row">
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/shared-with-me-detail-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/shared-with-me-detail-page.component.html
index 681b33ba0e1d..c1de962d4ce5 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/shared-with-me-detail-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/shared-with-me-detail-page.component.html
@@ -1,4 +1,4 @@
-<ol class="breadcrumb">
+<ol class="breadcrumb" id="breadcrumbs">
   <li><a href="#">{{'resources' | translate}}</a>
   </li>
   <li class="active"> <strong>Alice Family</strong>
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/shared-with-me-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/shared-with-me-page.component.html
index f88b2303a286..c4da56c46c7d 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/shared-with-me-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/shared-with-me-page.component.html
@@ -1,5 +1,5 @@
 <div class="page-header">
-  <h1>{{'resources' | translate}}</h1>
+  <h1 id="pageTitle">{{'resources' | translate}}</h1>
 </div>
 <div class="col-sm-12 card-pf resources-list">
   <div class="card-pf-body row">
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/password-page/password-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/password-page/password-page.component.html
index 399c2c17d7dc..31eb46b31c0e 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/password-page/password-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/password-page/password-page.component.html
@@ -1,9 +1,9 @@
 <div class="page-header">
-    <h1>{{'changePasswordHtmlTitle' | translate}}</h1>
+    <h1 id="pageTitle">{{'changePasswordHtmlTitle' | translate}}</h1>
 </div>
 
 <div class="col-sm-12 card-pf">
-  <div class="card-pf-body p-b">
+  <div class="card-pf-body p-b" id="passwordLastUpdate">
     <span class="i pficon pficon-info"></span>
     {{'passwordLastUpdateMessage' | translate}} <strong>{{lastPasswordUpdate | date:'medium'}}</strong>
   </div>
@@ -12,10 +12,10 @@ <h1>{{'changePasswordHtmlTitle' | translate}}</h1>
 <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">
+            <div class="card-pf-subtitle" id="updatePasswordSubTitle">
                 {{'updatePasswordTitle' | translate}}
             </div>
-            <div class="introMessage">
+            <div class="introMessage" id="updatePasswordSubMessage">
                 <strong>{{'updatePasswordMessageTitle' | translate}}</strong>
                 <p>{{'updatePasswordMessage' | translate}}</p>
             </div>