Just before splitting up changepw dialog into separate files

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

@@ -0,0 +1,118 @@
+<!--
+  ~ Password Management Servlets (PWM)
+  ~ http://www.pwm-project.org
+  ~
+  ~ Copyright (c) 2006-2009 Novell, Inc.
+  ~ Copyright (c) 2009-2017 The PWM Project
+  ~
+  ~ This program is free software; you can redistribute it and/or modify
+  ~ it under the terms of the GNU General Public License as published by
+  ~ the Free Software Foundation; either version 2 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License
+  ~ along with this program; if not, write to the Free Software
+  ~ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
+  -->
+
+<ias-dialog class="change-password-dialog" ng-switch="$ctrl.status">
+
+    <div ng-switch-when="confirm-random">
+        <div class="ias-dialog-header">
+            <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ': ' + $ctrl.personUsername"></div>
+        </div>
+        <div class="ias-dialog-body">
+            <p ng-bind="'Display_SetRandomPasswordPrompt' | translate"></p>
+        </div>
+        <div class="ias-actions">
+            <mf-button ng-click="$ctrl.confirmSetRandomPassword()">{{ 'Button_OK' | translate }}</mf-button>
+            <mf-button ng-click="cancel()">{{ 'Button_Cancel' | translate }}</mf-button>
+        </div>
+    </div>
+
+    <div ng-switch-when="type">
+        <div class="ias-dialog-header">
+            <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ' - ' + $ctrl.personUsername"></div>
+        </div>
+        <div class="ias-dialog-body">
+            <p ng-bind="$ctrl.message"></p>
+
+
+            <input ng-model="$ctrl.password1" ng-hide="$ctrl.password1Masked" type="text">
+            <input ng-model="$ctrl.password1" ng-show="$ctrl.password1Masked" type="password">
+            <mf-button ng-click="$ctrl.togglePassword1Masked()" ng-if="$ctrl.maskPasswords">
+                {{ 'Button_Show' | translate }}
+            </mf-button>
+            <span>Strength: Very Strong</span>
+
+            <input ng-model="$ctrl.password2" ng-hide="$ctrl.password2Masked" type="text">
+            <input ng-model="$ctrl.password2" ng-show="$ctrl.password2Masked" type="password">
+            <mf-button ng-click="$ctrl.togglePassword2Masked()" ng-if="$ctrl.maskPasswords">
+                {{ 'Button_Show' | translate }}
+            </mf-button>
+            <!--Password list
+            First pw   strength
+            Second pw  checkmark-->
+        </div>
+        <div class="ias-actions">
+            <mf-button ng-click="$ctrl.chooseTypedPassword()">{{ 'Button_ChangePassword' | translate }}</mf-button>
+            <mf-button ng-click="$ctrl.status = 'autogen'"
+                       ng-if="$ctrl.passwordUiMode === 'BOTH'">{{ 'Title_RandomPasswords' | translate }}</mf-button>
+        </div>
+    </div>
+
+    <div ng-switch-when="autogen">
+        <div class="ias-dialog-header">
+            <div class="ias-title" ng-bind="'Title_RandomPasswords' | translate"></div>
+        </div>
+        <div class="ias-dialog-body">
+            <p ng-bind="'Display_PasswordGeneration' | translate"></p>
+            <table>
+                <tbody>
+                <tr ng-repeat="i in [0,2,4,6,8,10,12,14,16,18]">
+                    <td ng-repeat="j in [i, i+1]">
+                        <div ng-bind="$ctrl.passwordSuggestions[j]" ng-click="$ctrl.onChoosePasswordSuggestion(j)">
+                        </div>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="ias-actions">
+            <mf-button ng-click="$ctrl.populatePasswordSuggestions()"
+                       ng-disabled="$ctrl.fetchingRandoms">{{ 'Button_More' | translate }}</mf-button>
+            <mf-button ng-click="cancel()">{{ 'Button_Cancel' | translate }}</mf-button>
+        </div>
+    </div>
+
+    <div ng-switch-when="finished">
+        <div class="ias-dialog-header">
+            <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ' - ' + $ctrl.personUsername"></div>
+        </div>
+        <div class="ias-dialog-body">
+            <p ng-bind="$ctrl.message"></p>
+            <span ng-bind="'Field_NewPassword' | translate"></span>
+            <mf-button ng-click="$ctrl.togglePassword1Masked()" ng-if="$ctrl.maskPasswords">
+                {{ 'Button_Show' | translate }}
+            </mf-button>
+            <input ng-model="$ctrl.chosenPassword" ng-hide="$ctrl.password1Masked" readonly type="text">
+        </div>
+        <div class="ias-actions">
+            <mf-button ng-click="cancel()">{{ 'Button_OK' | translate }}</mf-button>
+            <mf-button ng-click="$ctrl.clearAnswers()"
+                       ng-if="$ctrl.clearResponsesSetting==='ask'">{{ 'Button_ClearResponses' | translate }}</mf-button>
+        </div>
+    </div>
+
+    <mf-icon-button class="ias-dialog-close-button"
+                    icon="close_thick"
+                    id="close-icon"
+                    ng-attr-title="{{ 'Button_CloseWindow' | translate }}"
+                    ng-click="cancel()">
+    </mf-icon-button>
+</ias-dialog>

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

@@ -0,0 +1,42 @@
+<!--
+  ~ Password Management Servlets (PWM)
+  ~ http://www.pwm-project.org
+  ~
+  ~ Copyright (c) 2006-2009 Novell, Inc.
+  ~ Copyright (c) 2009-2017 The PWM Project
+  ~
+  ~ This program is free software; you can redistribute it and/or modify
+  ~ it under the terms of the GNU General Public License as published by
+  ~ the Free Software Foundation; either version 2 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License
+  ~ along with this program; if not, write to the Free Software
+  ~ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
+  -->
+
+<ias-dialog class="change-password-dialog">
+
+    <div class="ias-dialog-header">
+        <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ': ' + $ctrl.personUsername"></div>
+    </div>
+    <div class="ias-dialog-body">
+        <p ng-bind="'Display_SetRandomPasswordPrompt' | translate"></p>
+    </div>
+    <div class="ias-actions">
+        <mf-button ng-click="$ctrl.confirmSetRandomPassword()">{{ 'Button_OK' | translate }}</mf-button>
+        <mf-button ng-click="cancel()">{{ 'Button_Cancel' | translate }}</mf-button>
+    </div>
+
+    <mf-icon-button class="ias-dialog-close-button"
+                    icon="close_thick"
+                    id="close-icon"
+                    ng-attr-title="{{ 'Button_CloseWindow' | translate }}"
+                    ng-click="cancel()">
+    </mf-icon-button>
+</ias-dialog>

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

@@ -0,0 +1,118 @@
+<!--
+  ~ Password Management Servlets (PWM)
+  ~ http://www.pwm-project.org
+  ~
+  ~ Copyright (c) 2006-2009 Novell, Inc.
+  ~ Copyright (c) 2009-2017 The PWM Project
+  ~
+  ~ This program is free software; you can redistribute it and/or modify
+  ~ it under the terms of the GNU General Public License as published by
+  ~ the Free Software Foundation; either version 2 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License
+  ~ along with this program; if not, write to the Free Software
+  ~ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
+  -->
+
+<ias-dialog class="change-password-dialog" ng-switch="$ctrl.status">
+
+    <div ng-switch-when="confirm-random">
+        <div class="ias-dialog-header">
+            <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ': ' + $ctrl.personUsername"></div>
+        </div>
+        <div class="ias-dialog-body">
+            <p ng-bind="'Display_SetRandomPasswordPrompt' | translate"></p>
+        </div>
+        <div class="ias-actions">
+            <mf-button ng-click="$ctrl.confirmSetRandomPassword()">{{ 'Button_OK' | translate }}</mf-button>
+            <mf-button ng-click="cancel()">{{ 'Button_Cancel' | translate }}</mf-button>
+        </div>
+    </div>
+
+    <div ng-switch-when="type">
+        <div class="ias-dialog-header">
+            <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ' - ' + $ctrl.personUsername"></div>
+        </div>
+        <div class="ias-dialog-body">
+            <p ng-bind="$ctrl.message"></p>
+
+
+            <input ng-model="$ctrl.password1" ng-hide="$ctrl.password1Masked" type="text">
+            <input ng-model="$ctrl.password1" ng-show="$ctrl.password1Masked" type="password">
+            <mf-button ng-click="$ctrl.togglePassword1Masked()" ng-if="$ctrl.maskPasswords">
+                {{ 'Button_Show' | translate }}
+            </mf-button>
+            <span>Strength: Very Strong</span>
+
+            <input ng-model="$ctrl.password2" ng-hide="$ctrl.password2Masked" type="text">
+            <input ng-model="$ctrl.password2" ng-show="$ctrl.password2Masked" type="password">
+            <mf-button ng-click="$ctrl.togglePassword2Masked()" ng-if="$ctrl.maskPasswords">
+                {{ 'Button_Show' | translate }}
+            </mf-button>
+            <!--Password list
+            First pw   strength
+            Second pw  checkmark-->
+        </div>
+        <div class="ias-actions">
+            <mf-button ng-click="$ctrl.chooseTypedPassword()">{{ 'Button_ChangePassword' | translate }}</mf-button>
+            <mf-button ng-click="$ctrl.status = 'autogen'"
+                       ng-if="$ctrl.passwordUiMode === 'BOTH'">{{ 'Title_RandomPasswords' | translate }}</mf-button>
+        </div>
+    </div>
+
+    <div ng-switch-when="autogen">
+        <div class="ias-dialog-header">
+            <div class="ias-title" ng-bind="'Title_RandomPasswords' | translate"></div>
+        </div>
+        <div class="ias-dialog-body">
+            <p ng-bind="'Display_PasswordGeneration' | translate"></p>
+            <table>
+                <tbody>
+                <tr ng-repeat="i in [0,2,4,6,8,10,12,14,16,18]">
+                    <td ng-repeat="j in [i, i+1]">
+                        <div ng-bind="$ctrl.passwordSuggestions[j]" ng-click="$ctrl.onChoosePasswordSuggestion(j)">
+                        </div>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="ias-actions">
+            <mf-button ng-click="$ctrl.populatePasswordSuggestions()"
+                       ng-disabled="$ctrl.fetchingRandoms">{{ 'Button_More' | translate }}</mf-button>
+            <mf-button ng-click="cancel()">{{ 'Button_Cancel' | translate }}</mf-button>
+        </div>
+    </div>
+
+    <div ng-switch-when="finished">
+        <div class="ias-dialog-header">
+            <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ' - ' + $ctrl.personUsername"></div>
+        </div>
+        <div class="ias-dialog-body">
+            <p ng-bind="$ctrl.message"></p>
+            <span ng-bind="'Field_NewPassword' | translate"></span>
+            <mf-button ng-click="$ctrl.togglePassword1Masked()" ng-if="$ctrl.maskPasswords">
+                {{ 'Button_Show' | translate }}
+            </mf-button>
+            <input ng-model="$ctrl.chosenPassword" ng-hide="$ctrl.password1Masked" readonly type="text">
+        </div>
+        <div class="ias-actions">
+            <mf-button ng-click="cancel()">{{ 'Button_OK' | translate }}</mf-button>
+            <mf-button ng-click="$ctrl.clearAnswers()"
+                       ng-if="$ctrl.clearResponsesSetting==='ask'">{{ 'Button_ClearResponses' | translate }}</mf-button>
+        </div>
+    </div>
+
+    <mf-icon-button class="ias-dialog-close-button"
+                    icon="close_thick"
+                    id="close-icon"
+                    ng-attr-title="{{ 'Button_CloseWindow' | translate }}"
+                    ng-click="cancel()">
+    </mf-icon-button>
+</ias-dialog>

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

@@ -0,0 +1,118 @@
+<!--
+  ~ Password Management Servlets (PWM)
+  ~ http://www.pwm-project.org
+  ~
+  ~ Copyright (c) 2006-2009 Novell, Inc.
+  ~ Copyright (c) 2009-2017 The PWM Project
+  ~
+  ~ This program is free software; you can redistribute it and/or modify
+  ~ it under the terms of the GNU General Public License as published by
+  ~ the Free Software Foundation; either version 2 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License
+  ~ along with this program; if not, write to the Free Software
+  ~ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
+  -->
+
+<ias-dialog class="change-password-dialog" ng-switch="$ctrl.status">
+
+    <div ng-switch-when="confirm-random">
+        <div class="ias-dialog-header">
+            <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ': ' + $ctrl.personUsername"></div>
+        </div>
+        <div class="ias-dialog-body">
+            <p ng-bind="'Display_SetRandomPasswordPrompt' | translate"></p>
+        </div>
+        <div class="ias-actions">
+            <mf-button ng-click="$ctrl.confirmSetRandomPassword()">{{ 'Button_OK' | translate }}</mf-button>
+            <mf-button ng-click="cancel()">{{ 'Button_Cancel' | translate }}</mf-button>
+        </div>
+    </div>
+
+    <div ng-switch-when="type">
+        <div class="ias-dialog-header">
+            <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ' - ' + $ctrl.personUsername"></div>
+        </div>
+        <div class="ias-dialog-body">
+            <p ng-bind="$ctrl.message"></p>
+
+
+            <input ng-model="$ctrl.password1" ng-hide="$ctrl.password1Masked" type="text">
+            <input ng-model="$ctrl.password1" ng-show="$ctrl.password1Masked" type="password">
+            <mf-button ng-click="$ctrl.togglePassword1Masked()" ng-if="$ctrl.maskPasswords">
+                {{ 'Button_Show' | translate }}
+            </mf-button>
+            <span>Strength: Very Strong</span>
+
+            <input ng-model="$ctrl.password2" ng-hide="$ctrl.password2Masked" type="text">
+            <input ng-model="$ctrl.password2" ng-show="$ctrl.password2Masked" type="password">
+            <mf-button ng-click="$ctrl.togglePassword2Masked()" ng-if="$ctrl.maskPasswords">
+                {{ 'Button_Show' | translate }}
+            </mf-button>
+            <!--Password list
+            First pw   strength
+            Second pw  checkmark-->
+        </div>
+        <div class="ias-actions">
+            <mf-button ng-click="$ctrl.chooseTypedPassword()">{{ 'Button_ChangePassword' | translate }}</mf-button>
+            <mf-button ng-click="$ctrl.status = 'autogen'"
+                       ng-if="$ctrl.passwordUiMode === 'BOTH'">{{ 'Title_RandomPasswords' | translate }}</mf-button>
+        </div>
+    </div>
+
+    <div ng-switch-when="autogen">
+        <div class="ias-dialog-header">
+            <div class="ias-title" ng-bind="'Title_RandomPasswords' | translate"></div>
+        </div>
+        <div class="ias-dialog-body">
+            <p ng-bind="'Display_PasswordGeneration' | translate"></p>
+            <table>
+                <tbody>
+                <tr ng-repeat="i in [0,2,4,6,8,10,12,14,16,18]">
+                    <td ng-repeat="j in [i, i+1]">
+                        <div ng-bind="$ctrl.passwordSuggestions[j]" ng-click="$ctrl.onChoosePasswordSuggestion(j)">
+                        </div>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="ias-actions">
+            <mf-button ng-click="$ctrl.populatePasswordSuggestions()"
+                       ng-disabled="$ctrl.fetchingRandoms">{{ 'Button_More' | translate }}</mf-button>
+            <mf-button ng-click="cancel()">{{ 'Button_Cancel' | translate }}</mf-button>
+        </div>
+    </div>
+
+    <div ng-switch-when="finished">
+        <div class="ias-dialog-header">
+            <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ' - ' + $ctrl.personUsername"></div>
+        </div>
+        <div class="ias-dialog-body">
+            <p ng-bind="$ctrl.message"></p>
+            <span ng-bind="'Field_NewPassword' | translate"></span>
+            <mf-button ng-click="$ctrl.togglePassword1Masked()" ng-if="$ctrl.maskPasswords">
+                {{ 'Button_Show' | translate }}
+            </mf-button>
+            <input ng-model="$ctrl.chosenPassword" ng-hide="$ctrl.password1Masked" readonly type="text">
+        </div>
+        <div class="ias-actions">
+            <mf-button ng-click="cancel()">{{ 'Button_OK' | translate }}</mf-button>
+            <mf-button ng-click="$ctrl.clearAnswers()"
+                       ng-if="$ctrl.clearResponsesSetting==='ask'">{{ 'Button_ClearResponses' | translate }}</mf-button>
+        </div>
+    </div>
+
+    <mf-icon-button class="ias-dialog-close-button"
+                    icon="close_thick"
+                    id="close-icon"
+                    ng-attr-title="{{ 'Button_CloseWindow' | translate }}"
+                    ng-click="cancel()">
+    </mf-icon-button>
+</ias-dialog>

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

@@ -32,7 +32,7 @@ import {IPerson} from '../models/person.model';
 import IasDialogComponent from '../ux/ias-dialog.component';
 
 let helpdeskDetailDialogTemplateUrl = require('./helpdesk-detail-dialog.template.html');
-let passwordSuggestionsDialogTemplateUrl = require('./password-suggestions-dialog.html');
+let passwordSuggestionsDialogTemplateUrl = require('./change-password-dialog.html');
 let verificationsDialogTemplateUrl = require('./verifications-dialog.template.html');
 
 const STATUS_WAIT = 'wait';

client/src/helpdesk/password-suggestions-dialog.html

@@ -20,7 +20,7 @@
   ~ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
   -->
 
-<ias-dialog class="password-suggestions-dialog" ng-switch="$ctrl.status">
+<ias-dialog class="change-password-dialog" ng-switch="$ctrl.status">
 
     <div ng-switch-when="confirm-random">
         <div class="ias-dialog-header">
@@ -40,6 +40,21 @@
             <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ' - ' + $ctrl.personUsername"></div>
         </div>
         <div class="ias-dialog-body">
+            <p ng-bind="$ctrl.message"></p>
+
+
+            <input ng-model="$ctrl.password1" ng-hide="$ctrl.password1Masked" type="text">
+            <input ng-model="$ctrl.password1" ng-show="$ctrl.password1Masked" type="password">
+            <mf-button ng-click="$ctrl.togglePassword1Masked()" ng-if="$ctrl.maskPasswords">
+                {{ 'Button_Show' | translate }}
+            </mf-button>
+            <span>Strength: Very Strong</span>
+
+            <input ng-model="$ctrl.password2" ng-hide="$ctrl.password2Masked" type="text">
+            <input ng-model="$ctrl.password2" ng-show="$ctrl.password2Masked" type="password">
+            <mf-button ng-click="$ctrl.togglePassword2Masked()" ng-if="$ctrl.maskPasswords">
+                {{ 'Button_Show' | translate }}
+            </mf-button>
             <!--Password list
             First pw   strength
             Second pw  checkmark-->
@@ -47,7 +62,7 @@
         <div class="ias-actions">
             <mf-button ng-click="$ctrl.chooseTypedPassword()">{{ 'Button_ChangePassword' | translate }}</mf-button>
             <mf-button ng-click="$ctrl.status = 'autogen'"
-                       ng-if="$ctrl.passwordUiMode === 'both'">{{ 'Title_RandomPasswords' | translate }}</mf-button>
+                       ng-if="$ctrl.passwordUiMode === 'BOTH'">{{ 'Title_RandomPasswords' | translate }}</mf-button>
         </div>
     </div>
 
@@ -80,12 +95,12 @@
             <div class="ias-title" ng-bind="('Title_ChangePassword' | translate) + ' - ' + $ctrl.personUsername"></div>
         </div>
         <div class="ias-dialog-body">
-            <p ng-bind="$ctrl.successMessage"></p>
+            <p ng-bind="$ctrl.message"></p>
             <span ng-bind="'Field_NewPassword' | translate"></span>
-            <mf-button ng-click="$ctrl.togglePasswordMasked()" ng-if="$ctrl.maskPasswords">
+            <mf-button ng-click="$ctrl.togglePassword1Masked()" ng-if="$ctrl.maskPasswords">
                 {{ 'Button_Show' | translate }}
             </mf-button>
-            <input ng-model="$ctrl.chosenPassword" ng-hide="$ctrl.passwordMasked" readonly type="text">
+            <input ng-model="$ctrl.chosenPassword" ng-hide="$ctrl.password1Masked" readonly type="text">
         </div>
         <div class="ias-actions">
             <mf-button ng-click="cancel()">{{ 'Button_OK' | translate }}</mf-button>

client/src/helpdesk/password-suggestions-dialog.scss

@@ -1,5 +1,5 @@
 ias-dialog {
-  &.password-suggestions-dialog {
+  &.change-password-dialog {
     table {
       td {
         min-width: 160px;

client/src/helpdesk/password-suggestions.controller.ts

@@ -32,18 +32,21 @@ const STATUS_CONFIRM_RANDOM = 'confirm-random';
 const STATUS_FINISHED = 'finished';
 const STATUS_TYPE = 'type';
 
-require('helpdesk/password-suggestions-dialog.scss');
+require('helpdesk/change-password-dialog.scss');
 
 export default class PasswordSuggestionsDialogController {
     chosenPassword: string;
     clearResponsesSetting: string;
     fetchingRandoms: boolean;
     maskPasswords: boolean;
-    passwordMasked: boolean;
+    message: string;
+    password1: string;
+    password2: string;
+    password1Masked: boolean;
+    password2Masked: boolean;
     passwordSuggestions: string[];
     passwordUiMode: string;
     status: string;
-    successMessage: string;
     // this.HelpDeskService.showStrengthMeter;
 
     static $inject = [
@@ -73,7 +76,8 @@ export default class PasswordSuggestionsDialogController {
             this.clearResponsesSetting = result[0];
             this.passwordUiMode = result[1];
             this.maskPasswords = result[2];
-            this.passwordMasked = this.maskPasswords;   // Set now instead of when we set status to STATUS_FINISHED
+            this.password1Masked = this.maskPasswords;   // Set now instead of later
+            this.password2Masked = this.maskPasswords;
             if (this.passwordUiMode === PASSWORD_UI_MODES.AUTOGEN) {
                 this.status = STATUS_AUTOGEN;
                 this.populatePasswordSuggestions();
@@ -82,6 +86,7 @@ export default class PasswordSuggestionsDialogController {
                 this.status = STATUS_CONFIRM_RANDOM;
             }
             else if (this.passwordUiMode === PASSWORD_UI_MODES.BOTH || this.passwordUiMode === PASSWORD_UI_MODES.TYPE) {
+                this.message = translateFilter('Display_PasswordPrompt');
                 this.status = STATUS_TYPE;
             }
             else {
@@ -94,7 +99,7 @@ export default class PasswordSuggestionsDialogController {
         this.HelpDeskService.setPassword(this.personUserKey, false, this.chosenPassword)
             .then((result: ISuccessResponse) => {
                 this.status = STATUS_FINISHED;
-                this.successMessage = result.successMessage;
+                this.message = result.successMessage;
             });
     }
 
@@ -107,7 +112,7 @@ export default class PasswordSuggestionsDialogController {
             .then((result: ISuccessResponse) => {
                 this.chosenPassword = '[' + this.translateFilter('Display_Random') +  ']';
                 this.status = STATUS_FINISHED;
-                this.successMessage = result.successMessage;
+                this.message = result.successMessage;
             });
     }
 
@@ -127,7 +132,7 @@ export default class PasswordSuggestionsDialogController {
         this.HelpDeskService.setPassword(this.personUserKey, false, this.chosenPassword)
             .then((result: ISuccessResponse) => {
                 this.status = STATUS_FINISHED;
-                this.successMessage = result.successMessage;
+                this.message = result.successMessage;
             });
     }
 
@@ -153,7 +158,11 @@ export default class PasswordSuggestionsDialogController {
         });
     }
 
-    togglePasswordMasked() {
-        this.passwordMasked = !this.passwordMasked;
+    togglePassword1Masked() {
+        this.password1Masked = !this.password1Masked;
+    }
+
+    togglePassword2Masked() {
+        this.password2Masked = !this.password2Masked;
     }
 }

client/src/i18n/translations_en.json

@@ -22,6 +22,7 @@
   "Display_CaptchaRefresh": "Refresh",
   "Display_HelpdeskOtpValidation": "Instruct the user to load their mobile authentication app and share the current pass code.",
   "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_PleaseWait": "Loading...",
   "Display_Random": "Random",
   "Display_SearchResultsExceeded": "Search results exceeded maximum search size",

client/src/services/helpdesk-config.service.dev.ts

@@ -53,7 +53,7 @@ export default class HelpDeskConfigService extends ConfigBaseService implements
     }
 
     getPasswordUiMode(): IPromise<string> {
-        return this.$q.resolve(PASSWORD_UI_MODES.RANDOM);
+        return this.$q.resolve(PASSWORD_UI_MODES.BOTH);
     }
 
     getTokenSendMethod(): IPromise<string> {