UI updates to Change Password Dialog

client/src/changepassword/random-change-password.component.html

@@ -23,7 +23,7 @@
 <div class="ias-dialog random-change-password-dialog">
     <div class="ias-dialog-container">
         <div class="ias-dialog-label">
-            <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ': ' + $ctrl.personUsername"></div>
+            <div class="ias-title" ng-bind="'Title_ChangePassword' | translate"></div>
         </div>
 
         <div class="ias-dialog-content">

client/src/changepassword/random-change-password.controller.ts

@@ -29,13 +29,11 @@ export default class RandomChangePasswordController {
     static $inject = [
         'HelpDeskService',
         'IasDialogService',
-        'personUsername',
         'personUserKey',
         'translateFilter'
     ];
     constructor(private HelpDeskService: IHelpDeskService,
                 private IasDialogService: any,
-                private personUsername: string,
                 private personUserKey: string,
                 private translateFilter: (id: string) => string) {
     }

client/src/changepassword/success-change-password.component.html

@@ -23,7 +23,7 @@
 <div class="ias-dialog success-change-password-dialog">
     <div class="ias-dialog-container">
         <div class="ias-dialog-label">
-            <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ' - ' + $ctrl.personUsername"></div>
+            <div class="ias-title" ng-bind="'Title_ChangePassword' | translate"></div>
         </div>
 
         <div class="ias-dialog-content">

client/src/changepassword/success-change-password.controller.ts

@@ -43,7 +43,6 @@ export default class SuccessChangePasswordController {
         'ConfigService',
         'HelpDeskService',
         'IasDialogService',
-        'personUsername',
         'personUserKey',
         'translateFilter'
     ];
@@ -52,7 +51,6 @@ export default class SuccessChangePasswordController {
                 private configService: IHelpDeskConfigService,
                 private HelpDeskService: IHelpDeskService,
                 private IasDialogService: any,
-                private personUsername: string,
                 private personUserKey: string,
                 private translateFilter: (id: string) => string) {
         this.password = changePasswordSuccessData.password;

client/src/changepassword/type-change-password.component.html

@@ -23,7 +23,7 @@
 <div class="ias-dialog type-change-password-dialog">
     <div class="ias-dialog-container">
         <div class="ias-dialog-label">
-            <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ' - ' + $ctrl.personUsername"></div>
+            <div class="ias-title" ng-bind="'Title_ChangePassword' | translate"></div>
         </div>
         <div class="ias-dialog-content">
             <p ng-bind="$ctrl.message"></p>
@@ -36,12 +36,15 @@
                         <input ng-model="$ctrl.password1" ng-show="$ctrl.passwordMasked" type="password">
                     </td>
                     <td>
-                        <div ng-if="$ctrl.showStrengthMeter">
-                            <ias-icon icon="strength1" ng-show="$ctrl.strength===1"></ias-icon>
-                            <ias-icon icon="strength2" ng-show="$ctrl.strength===2"></ias-icon>
-                            <ias-icon icon="strength3" ng-show="$ctrl.strength===3"></ias-icon>
-                            <ias-icon icon="strength4" ng-show="$ctrl.strength===4"></ias-icon>
-                            <ias-icon icon="strength5" ng-show="$ctrl.strength===5"></ias-icon>
+                        <div class="strength-meter"
+                             ng-attr-title="{{ 'Display_StrengthMeter' | translate }}"
+                             ng-if="$ctrl.showStrengthMeter">
+                            <ias-icon class="strength-base" icon="strength5"></ias-icon>
+                            <ias-icon class="strength" icon="strength1" ng-show="$ctrl.strength===1"></ias-icon>
+                            <ias-icon class="strength" icon="strength2" ng-show="$ctrl.strength===2"></ias-icon>
+                            <ias-icon class="strength" icon="strength3" ng-show="$ctrl.strength===3"></ias-icon>
+                            <ias-icon class="strength" icon="strength4" ng-show="$ctrl.strength===4"></ias-icon>
+                            <ias-icon class="strength" icon="strength5" ng-show="$ctrl.strength===5"></ias-icon>
                         </div>
                     </td>
                 </tr>
@@ -58,8 +61,12 @@
                         </div>
                     </td>
                     <td>
-                        <ias-icon icon="status_ok_thin" ng-show="$ctrl.matchStatus==='MATCH'"></ias-icon>
-                        <ias-icon icon="message_error_thick" ng-show="$ctrl.matchStatus==='NO_MATCH'"></ias-icon>
+                        <ias-icon icon="status_ok_thin"
+                                  ng-attr-title="{{ 'Display_MatchCondition' | translate }}"
+                                  ng-show="$ctrl.matchStatus==='MATCH'"></ias-icon>
+                        <ias-icon icon="message_error_thick"
+                                  ng-attr-title="{{ 'Display_MatchCondition' | translate }}"
+                                  ng-show="$ctrl.matchStatus==='NO_MATCH'"></ias-icon>
                     </td>
                 </tr>
                 </tbody>

client/src/changepassword/type-change-password.component.scss

@@ -24,13 +24,18 @@
   &.type-change-password-dialog {
     .ias-dialog-content {
       table {
+        border: none;
+        margin-left: 0;
+        margin-right: 0;
+        width: auto;
+
         input {
           margin: 7px;
           vertical-align: middle;
         }
 
         td {
-          min-width: 250px;
+          border: none;
         }
 
         .ias-icon-message_error_thick {
@@ -41,24 +46,42 @@
           color: #37c26a;
         }
 
-        .ias-icon-strength1 {
-          color: #e50000;
-        }
+        .strength-meter {
+          position: relative;
 
-        .ias-icon-strength2 {
-          color: #f17e12;
-        }
+          .ias-icon {
+            font-size: 35px;
+          }
 
-        .ias-icon-strength3 {
-          color: #ffd92d;
-        }
+          .strength {
+            position: absolute;
+            left: 0;
+            top: 0;
 
-        .ias-icon-strength4 {
-          color: #01a9e7;
-        }
+            &.ias-icon-strength1 {
+              color: #e50000;
+            }
 
-        .ias-icon-strength5 {
-          color: #37c26a;
+            &.ias-icon-strength2 {
+              color: #f17e12;
+            }
+
+            &.ias-icon-strength3 {
+              color: #ffd92d;
+            }
+
+            &.ias-icon-strength4 {
+              color: #01a9e7;
+            }
+
+            &.ias-icon-strength5 {
+              color: #37c26a;
+            }
+          }
+
+          .strength-base {
+            color: #dae1e1;
+          }
         }
       }
     }

client/src/changepassword/type-change-password.controller.ts

@@ -53,12 +53,10 @@ export default class TypeChangePasswordController {
         '$q',
         '$scope',
         '$timeout',
-        '$window',
         'ConfigService',
         'HelpDeskService',
         'IasDialogService',
         'PasswordService',
-        'personUsername',
         'personUserKey',
         'PwmService',
         'translateFilter'
@@ -67,12 +65,10 @@ export default class TypeChangePasswordController {
                 private $q: IQService,
                 private $scope: IScope,
                 private $timeout: ITimeoutService,
-                private $window: IWindowService,
                 private configService: IHelpDeskConfigService,
                 private HelpDeskService: IHelpDeskService,
                 private IasDialogService: any,
                 private passwordService: IPasswordService,
-                private personUsername: string,
                 private personUserKey: string,
                 private pwmService: IPwmService,
                 private translateFilter: (id: string) => string) {

client/src/helpdesk/helpdesk-detail.component.ts

@@ -154,7 +154,6 @@ export default class HelpDeskDetailComponent {
                 controller: 'RandomChangePasswordController as $ctrl',
                 templateUrl: randomChangePasswordTemplateUrl,
                 locals: {
-                    personUsername: this.person.userDisplayName,
                     personUserKey: this.getUserKey()
                 }
             })
@@ -169,7 +168,6 @@ export default class HelpDeskDetailComponent {
                 templateUrl: successChangePasswordTemplateUrl,
                 locals: {
                     changePasswordSuccessData: data,
-                    personUsername: this.person.userDisplayName,
                     personUserKey: this.getUserKey()
                 }
             })
@@ -182,7 +180,6 @@ export default class HelpDeskDetailComponent {
                 controller: 'TypeChangePasswordController as $ctrl',
                 templateUrl: typeChangePasswordTemplateUrl,
                 locals: {
-                    personUsername: this.person.userDisplayName,
                     personUserKey: this.getUserKey()
                 }
             })          // TODO: right data type?

client/src/i18n/translations_en.json

@@ -22,13 +22,9 @@
   "Display_CaptchaRefresh": "Refresh",
   "Display_CheckingPassword": "Checking Password....",
   "Display_HelpdeskOtpValidation": "Instruct the user to load their mobile authentication app and share the current pass code.",
+  "Display_MatchCondition": "Match Condition",
   "Display_PasswordGeneration": "The following passwords have been randomly generated for you.  These passwords are based on real words to make them easier to remember, but have been modified to make them difficult to guess.",
   "Display_PasswordPrompt": "Please type your new password",
-  "Display_PasswordStrengthHigh": "Strength: <b>Strong</b>",
-  "Display_PasswordStrengthVeryHigh": "Strength: <b>Very Strong</b>",
-  "Display_PasswordStrengthLow": "Strength: <b>Weak</b>",
-  "Display_PasswordStrengthVeryLow": "Strength: <b>Very Weak</b>",
-  "Display_PasswordStrengthMedium": "Strength: <b>Good</b>",
   "Display_PleaseWait": "Loading...",
   "Display_Random": "Random",
   "Display_SearchResultsExceeded": "Search results exceeded maximum search size",

client/src/services/password.service.dev.ts

@@ -79,7 +79,7 @@ export default class PasswordService implements IPasswordService {
         let deferredAbort = this.$q.defer();
 
         let timeoutPromise = this.$timeout(() => {
-            deferred.resolve({ data: data} );
+            deferred.resolve(data);
         }, SIMULATED_RESPONSE_TIME);
 
         // To simulate an abortable promise, edit SIMULATED_RESPONSE_TIME