[adduser] add user: Check various input fields via js for immediate feedback

Refs #3344

1 files changed, 31 insertions, 5 deletions

diff --git a/modules-available/adduser/templates/page-adduser.html b/modules-available/adduser/templates/page-adduser.html
index bd16dbbf..18d79a3b 100644
--- a/modules-available/adduser/templates/page-adduser.html
+++ b/modules-available/adduser/templates/page-adduser.html
@@ -3,18 +3,18 @@
 <h2>{{lang_createUser}}</h2>
 <div class="row">
 	<div class="col-md-4"><label for="login">{{lang_login}} *</label></div>
-	<div class="col-md-4"><input id="label" type="text" name="login" value="{{login}}" class="form-control" placeholder="{{lang_username}}" autofocus></div>
+	<div class="col-md-4"><input id="login" type="text" name="login" value="{{login}}" class="form-control event-box" placeholder="{{lang_username}}" autofocus></div>
 </div>
 <br>
 <div class="row">
 	<div class="col-md-4"><label for="pass1">{{lang_password}} *</label></div>
-	<div class="col-md-4"><input id="pass1" type="password" name="pass1" class="form-control" placeholder="{{lang_password}}"></div>
-	<div class="col-md-4"><input type="password" name="pass2" class="form-control" placeholder="{{lang_confirmation}}"></div>
+	<div class="col-md-4"><input id="pass1" type="password" name="pass1" class="form-control event-box" placeholder="{{lang_password}}"></div>
+	<div class="col-md-4"><input id="pass2" type="password" name="pass2" class="form-control event-box" placeholder="{{lang_confirmation}}"></div>
 </div>
 <br>
 <div class="row">
 	<div class="col-md-4"><label for="fullname">{{lang_fullName}} *</label></div>
-	<div class="col-md-4"><input id="fullname" type="text" name="fullname" value="{{fullname}}" class="form-control" placeholder="{{lang_fullName}}"></div>
+	<div class="col-md-4"><input id="fullname" type="text" name="fullname" value="{{fullname}}" class="form-control event-box" placeholder="{{lang_fullName}}"></div>
 </div>
 <br>
 <div class="row">
@@ -30,8 +30,34 @@
 <div class="row">
 	<div class="col-md-4"></div>
 	<div class="col-md-8">
-		<button class="btn btn-lg btn-primary btn-block" type="submit">{{lang_createUser}}</button>
+		<button id="add-btn" class="btn btn-lg btn-primary btn-block" type="submit" disabled>{{lang_createUser}}</button>
+		<div id="add-msg" class="text-danger slx-bold"></div>
 	</div>
 </div>
 <input type="hidden" name="action" value="adduser">
 <input type="hidden" name="token" value="{{token}}">
+<script><!--
+document.addEventListener('DOMContentLoaded', function() {
+	var $login = $('#login');
+	var $pass1 = $('#pass1');
+	var $pass2 = $('#pass2');
+	var $fullname = $('#fullname');
+	var $msg = $('#add-msg');
+	var $btn = $('#add-btn');
+	var ev = function() {
+		var msg = '';
+		if ($login.val().length < 2) {
+			msg = '{{lang_loginTooShort}}';
+		} else if ($pass1.val() !== $pass2.val()) {
+			msg = '{{lang_passwordsDontMatch}}';
+		} else if ($pass1.val().length < 2) {
+			msg = '{{lang_passwordTooShort}}';
+		} else if ($fullname.val().length < 1) {
+			msg = '{{lang_fullnameMissing}}';
+		}
+		$msg.text(msg);
+		$btn.prop('disabled', !!msg);
+	};
+	$('.event-box').change(ev).keyup(ev);
+});
+//--></script>
\ No newline at end of file