524 - password policy

"change pwd" page: add feedback during the password typing

application/loginwebpage.class.inc.php

@@ -1062,6 +1062,21 @@ class LoginWebPage extends NiceWebPage
 				exit;
 			}
 		}
+		else if ($operation == 'check_pwd_policy')
+		{
+			$aPwdMap = array();
+
+			foreach (array('new_pwd', 'retype_new_pwd') as $postedPwd)
+			{
+				$oUser = new UserLocal();
+				$oUser->ValidatePassword($_POST[$postedPwd]);
+
+				$aPwdMap[$postedPwd]['isValid'] = $oUser->IsPasswordValid();
+				$aPwdMap[$postedPwd]['message'] = $oUser->getPasswordValidityMessage();
+			}
+			echo json_encode($aPwdMap);
+			die();
+		}
 		if ($operation == 'do_change_pwd')
 		{
 			if (isset($_SESSION['auth_user']))

datamodels/2.x/authent-local/model.authent-local.php

@@ -176,6 +176,21 @@ class UserLocal extends UserInternal
 		return (empty($this->m_oPasswordValidity)) || ($this->m_oPasswordValidity->isPasswordValid());
 	}
 
+	public function getPasswordValidityMessage()
+	{
+		if (ContextTag::Check('Setup'))
+		{
+			// during the setup, the admin account can have whatever password you want ...
+			return null;
+		}
+
+		if (empty($this->m_oPasswordValidity))
+		{
+			return null;
+		}
+
+		return $this->m_oPasswordValidity->getPasswordValidityMessage();
+	}
 
 
 	/**

templates/login/password/changepwdform.html.twig

@@ -23,15 +23,19 @@
 					<div>
 						<label for="new_pwd">{{ 'UI:Login:NewPasswordPrompt'|dict_s }}:</label>
 						<input type="password" id="new_pwd" name="new_pwd" value="" />
+						<span class="message"></span>
 					</div>
 					<div>
 						<label for="retype_new_pwd">{{ 'UI:Login:RetypeNewPasswordPrompt'|dict_s }}:</label>
 						<input type="password" id="retype_new_pwd" name="retype_new_pwd" value="" />
+						<span class="message"></span>
 					</div>
 				</div>
 				<div id="login-submit" class="changepwd-submit">
 					<div>
-						<input type="submit" onClick="return DoCheckPwd();" value="{{ 'UI:Button:ChangePassword'|dict_s }}" />
+						<input class="login-submit-primary" type="submit" onClick="return DoCheckPwd();" value="{{ 'UI:Button:ChangePassword'|dict_s }}" />
+						<span class="message"></span>
+
 						<input class="login-submit-secondary" type="button" onClick="GoBack();" value="{{ 'UI:Button:Cancel'|dict_s }}" />
 					</div>
 				</div>
@@ -39,6 +43,36 @@
 			</div>
 		</form>
 		</div>
+
+	<style type="text/css">
+	#login-input .invalid input{
+		border:1px solid red;
+		background-color: #FFD0D0;
+	}
+
+
+	#login-input .invalid .message{
+		border-left: 1px solid red;
+		background-color: #FFD0D0;
+		display: inline-block;
+		padding: 5px;
+	}
+
+	#login-submit.invalid .message {
+		border-left: 1px solid #9e510f;
+		background-color: #9e510f;
+		display: inline-block;
+		padding: 5px;
+	}
+	#login-submit.invalid input[type="submit"] {
+		/*border: 1px solid red;*/
+		/*background-color: red;*/
+		/*display: inline-block;*/
+		/*padding: 5px;*/
+		color: rgb(247, 125, 25);
+	}
+
+	</style>
 {% endblock %}
 
 {% block script %}

templates/login/password/changepwdform.js.twig

@@ -15,3 +15,89 @@ function DoCheckPwd()
     }
     return true;
 }
+
+$(function() {
+	var iCheckPwdPolicyTimeout = null;
+	var jqXHRCheckPwdPolicy = null;
+	var aPwdFieldMap = ['new_pwd', 'retype_new_pwd'];
+	var sFieldsCssSelector = aPwdFieldMap.map(function(item) {return '#'+item}).join(',');
+
+	console.debug(aPwdFieldMap, sFieldsCssSelector);
+
+	$(sFieldsCssSelector).on('keyup', function() {
+		if (null != iCheckPwdPolicyTimeout)
+		{
+			clearTimeout(iCheckPwdPolicyTimeout);
+		}
+
+		var iCheckPwdPolicyTimeout = setTimeout(function () {
+			if (null != jqXHRCheckPwdPolicy)
+			{
+				jqXHRCheckPwdPolicy.abort();
+			}
+
+			var oData = {};
+			$.each(aPwdFieldMap, function(index, sPwdField) {
+				oData[sPwdField] = $('#'+sPwdField).val();
+			});
+
+			if (oData.new_pwd != oData.retype_new_pwd)
+			{
+				$('#login-submit .message')
+						.empty()
+						.append('{{ 'UI:Login:RetypePwdDoesNotMatch'|dict_s }}')
+				;
+				$('#login-submit')
+						.addClass('invalid')
+				;
+
+				$('#login-submit .login-submit-primary').prop('disabled', true);
+			}
+			else
+			{
+				$('#login-submit .message')
+						.empty()
+				;
+				$('#login-submit')
+						.removeClass('invalid')
+				;
+				$('#login-submit .login-submit-primary').prop('disabled', false);
+			}
+
+			jqXHRCheckPwdPolicy = $.ajax('?loginop=check_pwd_policy', {
+				cache: false,
+				dataType: 'json',
+				data: oData,
+				method:'POST'
+			});
+
+			jqXHRCheckPwdPolicy.done(function(oResponse) {
+				$.each(aPwdFieldMap, function(index, sPwdField) {
+					var oField = $('#'+sPwdField);
+					var oDiv = oField.parent();
+					var oMessage = oDiv.find('.message');
+
+					oMessage.empty();
+
+					if (oResponse[sPwdField].isValid || oField.val() == '')
+					{
+						oDiv.removeClass('invalid');
+					}
+					else
+					{
+						oDiv.addClass('invalid');
+						oMessage.append(oResponse[sPwdField].message);
+					}
+
+
+				});
+			});
+
+
+			jqXHRCheckPwdPolicy.fail(function(oResponse) {
+
+			});
+		}, 200); //setTimeout
+
+	}); //.on('keyup', function() {
+}); //$(function() {