Merge branch 'change-password-page-rework'

# Conflicts:
#	client/package.json

client/src/pages/changepassword/changepassword.controller.ts

@@ -0,0 +1,83 @@
+/*
+ * 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
+ */
+
+/* tslint:disable */
+
+import {ICompileService, IScope, ITemplateCacheService, element} from 'angular';
+
+declare const PWM_GLOBAL: any;
+declare const PWM_MAIN: any;
+
+const PWM_CHANGEPW = window['PWM_CHANGEPW'];
+const PW_SUGGESTIONS_TEMPLATE = require("pages/changepassword/password-suggestions.html");
+require("pages/changepassword/password-suggestions.scss");
+
+export default class ChangePasswordController {
+    static $inject = ["$scope", "$compile", "$templateCache"];
+    constructor(
+            private $scope: IScope,
+            private $compile: ICompileService,
+            private $templateCache: ITemplateCacheService
+    ) {
+    }
+
+    getString(key: string) {
+        return PWM_MAIN.showString(key);
+    }
+
+    doRandomGeneration() {
+        PWM_MAIN.showDialog({
+            title: PWM_MAIN.showString('Title_RandomPasswords'),
+            dialogClass: 'narrow',
+            text: "",
+            showOk: false,
+            showClose: true,
+            loadFunction: () => {
+                this.populateDialog()
+            }
+        });
+    }
+
+    populateDialog() {
+        this.$scope.$ctrl = this;
+        const passwordSuggestionsElement: JQuery<HTMLElement> = this.$compile(this.$templateCache.get(PW_SUGGESTIONS_TEMPLATE) as string)(this.$scope);
+
+        var myElement = element( document.querySelector( '#dialogPopup .dialogBody, #html5Dialog .dialogBody' ) );
+        myElement.replaceWith(passwordSuggestionsElement);
+
+        this.$scope.$applyAsync();
+
+        PWM_CHANGEPW.beginFetchRandoms({});
+    }
+
+    onChoosePassword(event) {
+        PWM_CHANGEPW.copyToPasswordFields(event.target.textContent);
+    }
+
+    onMoreRandomsButtonClick() {
+        PWM_CHANGEPW.beginFetchRandoms({});
+    }
+
+    onCancelRandomsButtonClick() {
+        PWM_MAIN.closeWaitDialog('dialogPopup');
+    }
+}

client/src/pages/changepassword/changepassword.module.ts

@@ -0,0 +1,29 @@
+/*
+ * 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
+ */
+
+/* tslint:disable */
+
+import { module } from 'angular';
+import ChangePasswordController from './changepassword.controller';
+
+module("changepassword.module", [])
+    .controller("ChangePasswordController", ChangePasswordController);

client/src/pages/changepassword/password-suggestions.html

@@ -0,0 +1,35 @@
+<div class="dialogBody narrow">
+    {{$ctrl.getString('Display_PasswordGeneration')}}
+    <br><br>
+    <table class="noborder">
+        <tbody>
+
+        <tr class="noborder" ng-repeat="i in [0,2,4,6,8,10,12,14,16,18]">
+            <td class="noborder" ng-repeat="j in [i, i+1]" style="padding-bottom: 5px;" width="20%">
+                <div style="visibility: visible;" class="link-randomPasswordValue" href="#" id="randomGen{{j}}"
+                    ng-click="$ctrl.onChoosePassword($event)">
+                </div>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+    <br><br>
+    <table class="noborder">
+        <tbody>
+        <tr class="noborder">
+            <td class="noborder">
+                <button class="btn" id="moreRandomsButton" ng-click="$ctrl.onMoreRandomsButtonClick()">
+                    <span class="btn-icon pwm-icon pwm-icon-refresh"></span>
+                    {{$ctrl.getString('Button_More')}}
+                </button>
+            </td>
+            <td class="noborder" style="text-align:right;">
+                <button class="btn" id="cancelRandomsButton" ng-click="$ctrl.onCancelRandomsButtonClick()">
+                    <span class="btn-icon pwm-icon pwm-icon-times"></span>
+                    {{$ctrl.getString('Button_Cancel')}}
+                </button>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>

client/src/pages/changepassword/password-suggestions.scss

@@ -0,0 +1,3 @@
+#dialogPopup .dialogBody, #html5Dialog .dialogBody {
+    height: 395px;
+}

client/webpack.build.js

@@ -28,7 +28,8 @@ var webpackMerge = require('webpack-merge');
 module.exports = webpackMerge(commonConfig, {
     devtool: 'source-map',
     entry: {
-        'peoplesearch.ng': './src/main'
+        'peoplesearch.ng': './src/main',
+        'changepassword.ng': './src/pages/changepassword/changepassword.module'
     },
     module: {
         loaders: [

client/webpack.dev.js

@@ -28,7 +28,8 @@ var webpackMerge = require('webpack-merge');
 module.exports = webpackMerge(commonConfig, {
     devtool: 'cheap-module-source-map',
     entry: {
-        'peoplesearch.ng': './src/main.dev'
+        'peoplesearch.ng': './src/main.dev',
+        'changepassword.ng': './src/pages/changepassword/changepassword.module'
     },
     module: {
         loaders: [

server/src/main/webapp/WEB-INF/jsp/changepassword.jsp

@@ -35,7 +35,7 @@
     <jsp:include page="fragment/header-body.jsp">
         <jsp:param name="pwm.PageName" value="Title_ChangePassword"/>
     </jsp:include>
-    <div id="centerbody">
+    <div id="centerbody" ng-app="changepassword.module" ng-controller="ChangePasswordController as $ctrl">
         <div id="page-content-title"><pwm:display key="Title_ChangePassword" displayIfMissing="true"/></div>
         <pwm:if test="<%=PwmIfTest.passwordExpired%>">
         <h1><pwm:display key="Display_PasswordExpired"/></h1><br/>
@@ -54,6 +54,7 @@
         <% } %>
         <br/>
         <%@ include file="fragment/message.jsp" %>
+
         <form action="<pwm:current-url/>" method="post" enctype="application/x-www-form-urlencoded" id="changePasswordForm" autocomplete="off">
             <table class="noborder">
                 <tr>
@@ -66,7 +67,7 @@
                             <div class="pwm-icon pwm-icon-question-circle icon_button" id="password-guide-icon" style="cursor: pointer; visibility: hidden"></div>
                             <pwm:if test="<%=PwmIfTest.showRandomPasswordGenerator%>">
                                 &nbsp;&nbsp;
-                                <div class="pwm-icon pwm-icon-retweet icon_button" id="autogenerate-icon" style="cursor: pointer; visibility: hidden" ></div>
+                                <div class="pwm-icon pwm-icon-retweet icon_button" id="autogenerate-icon" ng-click="$ctrl.doRandomGeneration()" style="cursor: pointer; visibility: hidden" ></div>
                             </pwm:if>
                         </div>
                         <input type="<pwm:value name="<%=PwmValue.passwordFieldType%>"/>" name="password1" id="password1" class="changepasswordfield passwordfield" <pwm:autofocus/>/>
@@ -133,9 +134,14 @@
         });
     </script>
 </pwm:script>
+
+<pwm:script-ref url="/public/resources/webjars/angular/angular.min.js" />
+<pwm:script-ref url="/public/resources/webjars/angular-ui-router/release/angular-ui-router.min.js" />
+<pwm:script-ref url="/public/resources/webjars/angular-translate/dist/angular-translate.min.js" />
+
 <pwm:script-ref url="/public/resources/js/changepassword.js"/>
+<pwm:script-ref url="/public/resources/webjars/pwm-client/changepassword.ng.js" />
+
 <%@ include file="fragment/footer.jsp" %>
 </body>
 </html>
-
-

server/src/main/webapp/public/resources/js/changepassword.js

@@ -222,78 +222,6 @@ PWM_CHANGEPW.handleChangePasswordSubmit=function() {
     PWM_VAR['dirtyPageLeaveFlag'] = false;
 };
 
-PWM_CHANGEPW.doRandomGeneration=function(randomConfig) {
-    randomConfig = randomConfig === undefined ? {} : randomConfig;
-    var finishAction = 'finishAction' in randomConfig ? randomConfig['finishAction'] : function(password) {
-        PWM_CHANGEPW.copyToPasswordFields(password)
-    };
-
-    var eventHandlers = [];
-    var dialogBody = "";
-    if (randomConfig['dialog'] != null && randomConfig['dialog'].length > 0) {
-        dialogBody += randomConfig['dialog'];
-    } else {
-        dialogBody += PWM_MAIN.showString('Display_PasswordGeneration');
-    }
-    dialogBody += "<br/><br/>";
-    dialogBody += '<table class="noborder">';
-
-    for (var i = 0; i < 20; i++) {
-        dialogBody += '<tr class="noborder">';
-        for (var j = 0; j < 2; j++) {
-            i = i + j;
-            (function(index) {
-                var elementID = "randomGen" + index;
-                dialogBody += '<td class="noborder" style="padding-bottom: 5px;" width="20%"><div style="visibility:hidden" class="link-randomPasswordValue" href="#" id="' + elementID + '">&nbsp;</div></td>';
-                eventHandlers.push(function(){
-                    PWM_MAIN.addEventHandler(elementID,'click',function(){
-                        var value = PWM_MAIN.getObject(elementID).innerHTML;
-                        var parser = new DOMParser();
-                        var dom = parser.parseFromString(value, 'text/html');
-                        var domString = dom.body.textContent;
-                        finishAction(domString);
-                    });
-                });
-            })(i);
-        }
-        dialogBody += '</tr>';
-    }
-    dialogBody += "</table><br/><br/>";
-
-    dialogBody += '<table class="noborder">';
-    dialogBody += '<tr class="noborder"><td class="noborder"><button class="btn" id="moreRandomsButton" disabled="true"><span class="btn-icon pwm-icon pwm-icon-refresh"></span>' + PWM_MAIN.showString('Button_More') + '</button></td>';
-    dialogBody += '<td class="noborder" style="text-align:right;"><button class="btn" id="cancelRandomsButton"><span class="btn-icon pwm-icon pwm-icon-times"></span>' + PWM_MAIN.showString('Button_Cancel') + '</button></td></tr>';
-    dialogBody += "</table>";
-
-    randomConfig['dialogBody'] = dialogBody;
-
-    eventHandlers.push(function(){
-        PWM_MAIN.addEventHandler('cancelRandomsButton','click',function(){
-            PWM_MAIN.closeWaitDialog('dialogPopup');
-        });
-        PWM_MAIN.addEventHandler('moreRandomsButton','click',function(){
-            PWM_CHANGEPW.beginFetchRandoms(randomConfig);
-        });
-    });
-
-
-
-    var titleString = randomConfig['title'] == null ? PWM_MAIN.showString('Title_RandomPasswords') : randomConfig['title'];
-    PWM_MAIN.showDialog({
-        title:titleString,
-        dialogClass:'narrow',
-        text:dialogBody,
-        showOk:false,
-        showClose:true,
-        loadFunction:function(){
-            PWM_CHANGEPW.beginFetchRandoms(randomConfig);
-            for (var i = 0; i < eventHandlers.length; i++) {
-                eventHandlers[i]();
-            }
-        }
-    });
-};
-
 PWM_CHANGEPW.beginFetchRandoms=function(randomConfig) {
     PWM_MAIN.getObject('moreRandomsButton').disabled = true;
     var fetchList = new Array();
@@ -369,9 +297,9 @@ PWM_CHANGEPW.startupChangePasswordPage=function() {
     var autoGenPasswordElement = PWM_MAIN.getObject("autogenerate-icon");
     if (autoGenPasswordElement != null) {
         autoGenPasswordElement.style.visibility = 'visible';
-        PWM_MAIN.addEventHandler(autoGenPasswordElement,'click',function(){
-            PWM_CHANGEPW.doRandomGeneration();
-        });
+        // PWM_MAIN.addEventHandler(autoGenPasswordElement,'click',function(){
+        //     PWM_CHANGEPW.doRandomGeneration();
+        // });
         PWM_MAIN.showTooltip({
             id: "autogenerate-icon",
             text: PWM_MAIN.showString('Display_AutoGeneratedPassword')