Refactored the change password javascript code to take advantage of angular features.

.gitignore

@@ -7,3 +7,4 @@
 pwm-parent.iml
 pwmconfig/
 ssprconfig/
+/server/src/main/webapp/public/resources/webjars

client/package.json

@@ -1,69 +1,69 @@
 {
-  "name": "ng1-webpack",
-  "version": "0.0.1",
-  "description": "",
-  "main": "index.js",
-  "engines": {
-    "node": ">=6.2",
-    "npm": ">=3.9"
-  },
-  "scripts": {
-    "build": "webpack --config=webpack.build.js --NODE_ENV=production",
-    "clean": "rimraf dist/",
-    "test": "karma start --NODE_ENV=test",
-    "test-single-run": "karma start --NODE_ENV=test --singleRun --no-auto-watch",
-    "start": "webpack-dev-server --config=webpack.dev.js --NODE_ENV=dev --colors",
-    "sync": "webpack --config=webpack.build.js --NODE_ENV=production --output-path=../webapp/public/resources/app --watch --colors"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {},
-  "devDependencies": {
-    "@types/angular": "1.6.6",
-    "@types/angular-mocks": "1.5.5",
-    "@types/angular-translate": "2.4.33",
-    "@types/angular-ui-router": "1.1.34",
-    "@types/jasmine": "2.5.35",
-    "@types/node": "6.0.45",
-    "@uirouter/angularjs": "1.0.5",
-    "angular": "1.6.5",
-    "angular-mocks": "1.6.5",
-    "angular-translate": "2.15.2",
-    "autoprefixer": "6.5.3",
-    "copy-webpack-plugin": "3.0.1",
-    "css-loader": "0.25.0",
-    "file-loader": "0.9.0",
-    "fontgen-loader": "0.2.1",
-    "html-loader": "0.4.4",
-    "html-webpack-plugin": "2.22.0",
-    "ignore-loader": "0.1.2",
-    "jasmine": "2.5.2",
-    "jshint": "2.9.3",
-    "jshint-loader": "0.8.3",
-    "json-loader": "0.5.4",
-    "karma": "0.13.19",
-    "karma-jasmine": "1.0.2",
-    "karma-phantomjs-launcher": "0.2.3",
-    "karma-sourcemap-loader": "0.3.6",
-    "karma-webpack": "1.7.0",
-    "ngtemplate-loader": "1.3.1",
-    "node-sass": "3.10.1",
-    "phantomjs": "2.1.7",
-    "phantomjs-prebuilt": "2.1.13",
-    "postcss-loader": "1.0.0",
-    "raw-loader": "0.5.1",
-    "rimraf": "2.5.4",
-    "sass-loader": "4.0.2",
-    "string-replace-loader": "1.0.5",
-    "style-loader": "0.13.1",
-    "ts-loader": "0.9.1",
-    "tslint": "^3.15.1",
-    "tslint-loader": "2.1.5",
-    "typescript": "2.3.4",
-    "url-loader": "0.5.7",
-    "webpack": "1.13.2",
-    "webpack-dev-server": "1.16.2",
-    "webpack-merge": "0.14.1",
-    "write-file-webpack-plugin": "3.3.0"
-  }
+    "name": "ng1-webpack",
+    "version": "0.0.1",
+    "description": "",
+    "main": "index.js",
+    "engines": {
+        "node": ">=6.2",
+        "npm": ">=3.9"
+    },
+    "scripts": {
+        "build": "webpack --config=webpack.build.js --NODE_ENV=production",
+        "clean": "rimraf dist/",
+        "test": "karma start --NODE_ENV=test",
+        "test-single-run": "karma start --NODE_ENV=test --singleRun --no-auto-watch",
+        "start": "webpack-dev-server --config=webpack.dev.js --NODE_ENV=dev --colors",
+        "sync": "webpack --config=webpack.build.js --NODE_ENV=production --output-path=../server/src/main/webapp/public/resources/webjars/pwm-client --watch --colors"
+    },
+    "author": "",
+    "license": "ISC",
+    "dependencies": {},
+    "devDependencies": {
+        "@types/angular": "1.6.6",
+        "@types/angular-mocks": "1.5.5",
+        "@types/angular-translate": "2.4.33",
+        "@types/angular-ui-router": "1.1.34",
+        "@types/jasmine": "2.5.35",
+        "@types/node": "6.0.45",
+        "@uirouter/angularjs": "1.0.5",
+        "angular": "1.6.5",
+        "angular-mocks": "1.6.5",
+        "angular-translate": "2.15.2",
+        "autoprefixer": "6.5.3",
+        "copy-webpack-plugin": "3.0.1",
+        "css-loader": "0.25.0",
+        "file-loader": "0.9.0",
+        "fontgen-loader": "0.2.1",
+        "html-loader": "0.4.4",
+        "html-webpack-plugin": "2.22.0",
+        "ignore-loader": "0.1.2",
+        "jasmine": "2.5.2",
+        "jshint": "2.9.3",
+        "jshint-loader": "0.8.3",
+        "json-loader": "0.5.4",
+        "karma": "0.13.19",
+        "karma-jasmine": "1.0.2",
+        "karma-phantomjs-launcher": "0.2.3",
+        "karma-sourcemap-loader": "0.3.6",
+        "karma-webpack": "1.7.0",
+        "ngtemplate-loader": "1.3.1",
+        "node-sass": "3.10.1",
+        "phantomjs": "2.1.7",
+        "phantomjs-prebuilt": "2.1.13",
+        "postcss-loader": "1.0.0",
+        "raw-loader": "0.5.1",
+        "rimraf": "2.5.4",
+        "sass-loader": "4.0.2",
+        "string-replace-loader": "1.0.5",
+        "style-loader": "0.13.1",
+        "ts-loader": "0.9.1",
+        "tslint": "^3.15.1",
+        "tslint-loader": "2.1.5",
+        "typescript": "2.3.4",
+        "url-loader": "0.5.7",
+        "webpack": "1.13.2",
+        "webpack-dev-server": "1.16.2",
+        "webpack-merge": "0.14.1",
+        "write-file-webpack-plugin": "3.3.0"
+    }
 }

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/java/password/pwm/http/servlet/resource/ResourceFileServlet.java

@@ -552,6 +552,12 @@ public class ResourceFileServlet extends HttpServlet implements PwmServlet {
             throws PwmUnrecoverableException
     {
         if (resourcePathUri.startsWith(WEBJAR_BASE_URL_PATH)) {
+            // This allows us to override a webjar file, if needed.  Mostly helpful during development.
+            final File file = new File(servletContext.getRealPath(resourcePathUri));
+            if (file.exists()) {
+                return new RealFileResource(file);
+            }
+
             final String remainingPath = resourcePathUri.substring(WEBJAR_BASE_URL_PATH.length(), resourcePathUri.length());
 
             final String webJarName;

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')