Details
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 53a9a64..124496c 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
@@ -22,6 +22,11 @@ accountSecurityTitle=Account Security
accountSecurityIntroMessage=Control your password and account access
applicationsIntroMessage=Track and manage your app permission to access your account
resourceIntroMessage=Share your resources among team members
+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.
+
authenticatorCode=One-time code
email=Email
@@ -31,6 +36,7 @@ fullName=Full name
lastName=Last name
familyName=Family name
password=Password
+currentPassword=Current Password
passwordConfirm=Confirmation
passwordNew=New Password
username=Username
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 94b6c33..a512195 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,54 +2,50 @@
<h1>{{'changePasswordHtmlTitle' | translate}}</h1>
</div>
-<div class="row">
- <div class="col-md-10">
- </div>
- <div class="col-md-2 subtitle">
- <span class="subtitle">{{'allFieldsRequired' | translate}}</span>
- </div>
- <hr/>
+<div class="col-sm-12 content-area">
+ <span class="i pficon pficon-info"></span>
+ {{'passwordLastUpdateMessage' | translate}} <strong></strong>
</div>
-<form #formGroup="ngForm" (ngSubmit)="changePassword()" class="form-horizontal">
- <input readonly="" value="this is not a login form" style="display: none;" type="text">
- <input readonly="" value="this is not a login form" style="display: none;" type="password">
-
- <div class="form-group">
- <div class="col-sm-2 col-md-2">
- <label for="password" class="control-label">{{'password' | translate}}</label>
- </div>
-
- <div class="col-sm-10 col-md-10">
- <input ngModel class="form-control" id="password" name="password" autofocus="" autocomplete="off" type="password">
- </div>
- </div>
-
- <div class="form-group">
- <div class="col-sm-2 col-md-2">
- <label for="password-new" class="control-label">{{'passwordNew' | translate}}</label>
- </div>
-
- <div class="col-sm-10 col-md-10">
- <input ngModel class="form-control" id="newPassword" name="newPassword" autocomplete="off" type="password">
+<div class="col-sm-12 content-area">
+ <div class="row">
+ <div class="col-sm-4 col-md-4">
+ <div class="card-pf-subtitle">
+ {{'updatePasswordTitle' | translate}}
+ </div>
+ <div class="introMessage">
+ <strong>{{'updatePasswordMessageTitle' | translate}}</strong>
+ <p>{{'updatePasswordMessage' | translate}}</p>
+ </div>
+ <div class="subtitle"><span class="required">*</span> {{'requiredFields' | translate}}</div>
</div>
- </div>
+ <div class="col-sm-6 col-md-6">
+ <form #formGroup="ngForm" (ngSubmit)="changePassword()" class="form-horizontal">
+ <input readonly="" value="this is not a login form" style="display: none;" type="text">
+ <input readonly="" value="this is not a login form" style="display: none;" type="password">
+ <div class="form-group">
+ <label for="password" class="control-label">{{'currentPassword' | translate}}</label>
+ <input ngModel class="form-control" id="password" name="password" autofocus="" autocomplete="off" type="password">
+ </div>
- <div class="form-group">
- <div class="col-sm-2 col-md-2">
- <label for="password-confirm" class="control-label">{{'passwordConfirm' | translate}}</label>
- </div>
+ <div class="form-group">
+ <label for="password-new" class="control-label">{{'passwordNew' | translate}}</label>
+ <input ngModel class="form-control" id="newPassword" name="newPassword" autocomplete="off" type="password">
+ </div>
- <div class="col-sm-10 col-md-10">
- <input ngModel class="form-control" id="confirmation" name="confirmation" autocomplete="off" type="password">
- </div>
- </div>
+ <div class="form-group">
+ <label for="password-confirm" class="control-label">{{'passwordConfirm' | translate}}</label>
+ <input ngModel class="form-control" id="confirmation" name="confirmation" autocomplete="off" type="password">
+ </div>
- <div class="form-group">
- <div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
- <div class="">
- <button type="submit" class="btn btn-primary btn-lg" name="submitAction">{{'doSave' | translate}}</button>
+ <div class="form-group">
+ <div id="kc-form-buttons" class="submit">
+ <div class="">
+ <button type="submit" class="btn btn-primary btn-lg" name="submitAction">{{'doSave' | translate}}</button>
+ </div>
+ </div>
</div>
- </div>
- </div>
-</form>
\ No newline at end of file
+ </form>
+ </div>
+ </div>
+</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 374a613..0c85b5f 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
@@ -28,6 +28,7 @@ p.description {
padding: 30px 30px 20px;
background: #ffffff;
font-size: 13px;
+ margin-bottom: 10px;
}
/* personal Info Style */
@@ -43,3 +44,9 @@ p.description {
.page-header {
border-bottom: 0;
}
+
+
+/* Introduction Message on the left */
+.introMessage {
+ margin: 10px 20px 20px 0;
+}
