keycloak-memoizeit

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 110de18..73866cc 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
@@ -29,7 +29,8 @@ passwordLastUpdateMessage=Your password was updated at
 updatePasswordTitle=Update Password
 updatePasswordMessageTitle=Make sure you choose a strong password
 updatePasswordMessage=A strong password contains a mix of numbers, letters, and symbols. It is hard to guess, does not resemble a real word, and is only used for this account.
-
+personalSubTitle=Your Personal Info
+personalSubMessage=Manage this basic information: your first name, last name and email
 
 authenticatorCode=One-time code
 email=Email

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 76941a0..dee55a9 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
@@ -3,58 +3,49 @@
 </div>
 
 <div class="col-sm-12 content-area">
-
-    <form #formGroup="ngForm" (ngSubmit)="saveAccount()" class="form-horizontal">
-
-        <div *ngIf="!isRegistrationEmailAsUsername" class="form-group ">
-            <div class="col-sm-2 col-md-2">
-                <label for="username" class="control-label">{{'username' | translate}}</label><span *ngIf="isEditUserNameAllowed" class="required">*</span>
-            </div>
-
-            <div class="col-sm-6 col-md-6">
-                <input *ngIf="isEditUserNameAllowed" type="text" class="form-control" required ngModel id="username" name="username" value="{{username}}" >
-                <span *ngIf="!isEditUserNameAllowed">{{ username }}</span>
-            </div>
-        </div>
-
-        <div class="form-group ">
-            <div class="col-sm-2 col-md-2">
-                <label for="email" class="control-label">{{'email' | translate }}</label> <span class="required">*</span>
-            </div>
-
-            <div class="col-sm-6 col-md-6">
-                <input type="email" class="form-control" id="email" name="email" required autofocus="" ngModel type="text">
-            </div>
-        </div>
-
-        <div class="form-group ">
-            <div class="col-sm-2 col-md-2">
-                <label for="firstName" class="control-label">{{'firstName' | translate}}</label> <span class="required">*</span>
-            </div>
-
-            <div class="col-sm-6 col-md-6">
-                <input class="form-control" id="firstName" required name="firstName" ngModel type="text">
-            </div>
-        </div>
-
-        <div class="form-group ">
-            <div class="col-sm-2 col-md-2">
-                <label for="lastName" class="control-label">{{'lastName' | translate}}</label> <span class="required">*</span>
-            </div>
-
-            <div class="col-sm-6 col-md-6">
-                <input class="form-control" id="lastName" required name="lastName" ngModel type="text">
-            </div>
-        </div>
-
-        <div class="form-group">
-            <div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
-                <div class="">
-                    <button type="submit" [disabled]="!formGroup.valid || !formGroup.dirty" class="btn btn-primary btn-lg" name="submitAction">{{'doSave' | translate}}</button>
-                </div>
-            </div>
-        </div>
-    </form>
-
-    <div class="subtitle"><span class="required">*</span> {{'requiredFields' | translate}}</div>
-</div>
+  <div class="row">
+      <div class="col-sm-4 col-md-4">
+          <div class="card-pf-subtitle">
+              {{'personalSubTitle' | translate}}
+          </div>
+          <div class="introMessage">
+            <p>{{'personalSubMessage' | translate}}</p>
+          </div>
+          <div class="subtitle"><span class="required">*</span> {{'requiredFields' | translate}}</div>
+      </div>
+      <div class="col-sm-6 col-md-6">
+
+        <form #formGroup="ngForm" (ngSubmit)="saveAccount()" class="form-horizontal">
+
+          <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>
+
+          <div class="form-group ">
+            <label for="email" class="control-label">{{'email' | translate }}</label> <span class="required">*</span>
+            <input type="email" class="form-control" id="email" name="email" required autofocus="" ngModel type="text">
+          </div>
+
+          <div class="form-group ">
+            <label for="firstName" class="control-label">{{'firstName' | translate}}</label> <span class="required">*</span>
+            <input class="form-control" id="firstName" required name="firstName" ngModel type="text">
+          </div>
+
+          <div class="form-group ">
+            <label for="lastName" class="control-label">{{'lastName' | translate}}</label> <span class="required">*</span>
+            <input class="form-control" id="lastName" required name="lastName" ngModel type="text">
+          </div>
+
+          <div class="form-group">
+            <div id="kc-form-buttons" class="submit">
+              <div class="">
+                <button type="submit" [disabled]="!formGroup.valid || !formGroup.dirty" class="btn btn-primary btn-lg" name="submitAction">{{'doSave' | translate}}</button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>

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 a512195..df0728f 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
@@ -2,7 +2,7 @@
     <h1>{{'changePasswordHtmlTitle' | translate}}</h1>
 </div>
 
-<div class="col-sm-12 content-area">
+<div class="col-sm-12 content-area password-update">
     <span class="i pficon pficon-info"></span>
     {{'passwordLastUpdateMessage' | translate}} <strong></strong>
 </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 4af86a9..517f14d 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
@@ -46,7 +46,6 @@ p.description {
 .content-area {
   padding: 30px 30px 20px;
   background: #ffffff;
-  font-size: 13px;
   margin-bottom: 10px;
 }
 
@@ -122,6 +121,30 @@ p.description {
     font-size: 14px;
     padding-bottom: 0;
   }
+  .page-header {
+    background: #f5f5f5;
+    margin-top: 0;
+    margin-left: -20px;
+    margin-right: -20px;
+  }
+  .page-header h1 {
+    margin-top: 0;
+    line-height: 30px;
+    padding-top: 20px;
+    padding-left: 20px;
+    font-size: 18px;
+  }
+  .password-update {
+    margin-left: -20px;
+    margin-right: -20px;
+    border-bottom: solid 10px #f5f5f5;
+  }
+  .content-area {
+    padding-top: 8px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
 
 }
 
@@ -138,6 +161,7 @@ p.description {
 .subtitle {
   color: #4d5258;
   font-size: 12px;
+  margin-bottom: 10px;
 }
 
 .content-area .required{
@@ -148,6 +172,11 @@ p.description {
   border-bottom: 0;
 }
 
+.non-edit {
+  border: 1px solid #bbb;
+  padding: 3px 10px;
+  background-color: #f5f5f5;
+}
 
 /* Introduction Message on the left */
 .introMessage {