Implement retype password for new users issue 147

css/setpassword.css

@@ -13,3 +13,11 @@
 #password {
 	width: 100%;
 }
+
+#retypepassword {
+	width: 100%;
+}
+
+#message {
+	width: 94%;
+}

js/setpassword.js

@@ -5,17 +5,28 @@
 		},
 
 		onClickSetPassword : function(event){
-			event.preventDefault();
 			var passwordObj = $('#password');
-			if (passwordObj.val()){
+			var retypePasswordObj = $('#retypepassword');
+			passwordObj.parent().removeClass('shake');
+			event.preventDefault();
+			if (passwordObj.val() === retypePasswordObj.val()) {
 				$.post(
 					passwordObj.parents('form').attr('action'),
-					{password : passwordObj.val()}
+					{password: passwordObj.val()}
 				).done(function (result) {
 					OCA.UserManagement.SetPassword._resetDone(result);
 				}).fail(function (result) {
 					OCA.UserManagement.SetPassword._onSetPasswordFail(result);
 				});
+			} else {
+				//Password mismatch happened
+				passwordObj.val('');
+				retypePasswordObj.val('');
+				passwordObj.parent().addClass('shake');
+				$('#message').addClass('warning');
+				$('#message').text('Passwords do not match');
+				$('#message').show();
+				passwordObj.focus();
 			}
 		},
 
@@ -59,4 +70,14 @@
 
 $(document).ready(function () {
 	OCA.UserManagement.SetPassword.init();
+	$('#password').keypress(function () {
+		/*
+		 The warning message should be shown only during password mismatch.
+		 Else it should not.
+		 */
+		if (($('#password').val().length >= 0) && ($('#retypepassword').val().length === 0)) {
+			$('#message').removeClass('warning');
+			$('#message').text('');
+		}
+	});
 });

templates/new_user/setpassword.php

@@ -25,12 +25,17 @@
 <label id="error-message" class="warning" style="display:none"></label>
 <form action="<?php print_unescaped($_['link']) ?>" id="set-password" method="post">
 	<fieldset>
-		<p>
+		<p class="groupbottom<?php if (!empty($_['invalidpassword'])) {
+	?> shake<?php
+} ?>">
 			<label for="password" class="infield"><?php p($l->t('New password')); ?></label>
 			<input type="password" name="password" id="password" value=""
 				   placeholder="<?php p($l->t('New Password')); ?>"
 				   autocomplete="off" autocapitalize="off" autocorrect="off"
 				   required autofocus />
+			<input type="password" name="retypepassword" id="retypepassword" value=""
+				   placeholder="<?php p($l->t('Confirm Password')); ?>"/>
+			<span id='message'></span>
 		</p>
 		<input type="submit" id="submit" value="<?php
 			p($l->t('Please set your password'));

tests/js/setpasswordSpec.js

@@ -21,6 +21,10 @@ describe('OCA.UserManagement.SetPassword tests', function () {
 			'placeholder="New Password"' +
 			'autocomplete="off" autocapitalize="off" autocorrect="off"' +
 			'required autofocus />' +
+			'<input type="password" name="retypepassword" id="retypepassword" value=""' +
+			'placeholder="<"Confirm Password">' +
+			' />' +
+			'<span id="message"></span>' +
 			'</p>' +
 			'<input type="submit" id="submit" value="Please set your password"' +
 			'</fieldset>' +
@@ -47,6 +51,7 @@ describe('OCA.UserManagement.SetPassword tests', function () {
 
 			SetPassword.init();
 			$('#password').val('foo');
+			$('#retypepassword').val('foo');
 			$('#submit').click();
 
 			expect(resultSpy.calledOnce).toEqual(true);
@@ -63,6 +68,7 @@ describe('OCA.UserManagement.SetPassword tests', function () {
 
 			SetPassword.init();
 			$('#password').val('foo');
+			$('#retypepassword').val('foo');
 			$('#submit').click();
 
 			expect(resultSpy.calledOnce).toEqual(true);