Merge pull request #7013 from nextcloud/forgot-password

Directly show "Forgot password?" link, fix #6808

4 files changed, 123 insertions, 34 deletions

diff --git a/core/css/guest.css b/core/css/guest.css
index 9bacf5a6bb5..f6dbfee08aa 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -130,28 +130,29 @@ form #datadirField legend {
 }
 
 /* Buttons and input */
-#submit-wrapper {
+#submit-wrapper,
+#reset-password-wrapper {
 	position: relative; /* Make the wrapper the containing block of its
 						   absolutely positioned descendant icons */
 }
-#submit-wrapper .icon-confirm-white {
+
+#submit-wrapper .submit-icon,
+#reset-password-wrapper .submit-icon {
 	position: absolute;
 	top: 23px;
 	right: 23px;
+	pointer-events: none; /* The submit icon is positioned on the submit button.
+							 From the user point of view the icon is part of the
+							 button, so the clicks on the icon have to be
+							 applied to the button instead. */
 }
+
 #submit-wrapper .icon-loading-small {
 	position: absolute;
 	top: 22px;
 	right: 24px;
 }
 
-#submit-wrapper #submit-icon {
-	pointer-events: none; /* The submit icon is positioned on the submit button.
-							 From the user point of view the icon is part of the
-							 button, so the clicks on the icon have to be
-							 applied to the button instead. */
-}
-
 input, textarea, select, button, div[contenteditable=true] {
 	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
 }
@@ -385,13 +386,22 @@ form .warning input[type='checkbox']+label {
 #remember_login {
 	margin: 18px 5px 0 16px !important;
 }
-.remember-login-container {
+.remember-login-container,
+.lost-password-container {
 	display: inline-block;
 	margin: 10px 0;
 	text-align: center;
 	width: 100%;
 	text-shadow: 0 0 2px rgba(0, 0, 0, .4); // better readability on bright background
 }
+.lost-password-container #lost-password,
+.lost-password-container #lost-password-back {
+	display: inline-block;
+	padding: 12px;
+	margin-top: -6px;
+	color: #fff;
+	opacity: .7;
+}
 #forgot-password {
 	padding: 11px;
 	float: right;
diff --git a/core/js/login.js b/core/js/login.js
index 81ef25ef2d4..012b4e0280e 100644
--- a/core/js/login.js
+++ b/core/js/login.js
@@ -12,12 +12,17 @@
  */
 OC.Login = _.extend(OC.Login || {}, {
 	onLogin: function () {
-		$('#submit-icon')
-			.removeClass('icon-confirm-white')
-			.addClass('icon-loading-small');
-		$('#submit')
-			.attr('value', t('core', 'Logging in …'));
-		return true;
+		// Only if password reset form is not active
+		if($('form[name=login][action]').length === 0) {
+			$('#submit-wrapper .submit-icon')
+				.removeClass('icon-confirm-white')
+				.addClass('icon-loading-small-dark');
+			$('#submit')
+				.attr('value', t('core', 'Logging in …'));
+			$('.login-additional').fadeOut();
+			return true;
+		}
+		return false;
 	},
 
 	rememberLogin: function(){
diff --git a/core/js/lostpassword.js b/core/js/lostpassword.js
index 1923b73a179..446d70d991e 100644
--- a/core/js/lostpassword.js
+++ b/core/js/lostpassword.js
@@ -14,12 +14,54 @@ OC.Lostpassword = {
 
 	init : function() {
 		$('#lost-password').click(OC.Lostpassword.resetLink);
-		$('#reset-password #submit').click(OC.Lostpassword.resetPassword);
+		$('#lost-password-back').click(OC.Lostpassword.backToLogin);
+		$('form[name=login]').submit(OC.Lostpassword.onSendLink);
+		OC.Lostpassword.resetButtons();
+	},
+
+	resetButtons : function() {
+		$('#reset-password-wrapper .submit-icon')
+			.addClass('icon-confirm-white')
+			.removeClass('icon-loading-small-dark');
+		$('#reset-password-submit')
+			.attr('value', t('core', 'Reset password'))
+			.prop('disabled', false);
+		$('#user').prop('disabled', false);
+		$('.login-additional').fadeIn();
+	},
+
+	backToLogin : function(event) {
+		event.preventDefault();
+
+		$('#reset-password-wrapper').slideUp().fadeOut();
+		$('#lost-password').slideDown().fadeIn();
+		$('#lost-password-back').hide();
+		$('.remember-login-container').slideDown().fadeIn();
+		$('#submit-wrapper').slideDown().fadeIn();
+		$('.groupbottom').slideDown().fadeIn();
+		$('#user').parent().addClass('grouptop');
+		$('#password').attr('required', true);
+		$('form[name=login]').removeAttr('action');
+		$('#user').focus();
 	},
 
 	resetLink : function(event){
 		event.preventDefault();
-		if (!$('#user').val().length){
+
+		$('#lost-password').hide();
+		$('#lost-password-back').slideDown().fadeIn();
+		$('.remember-login-container').slideUp().fadeOut();
+		$('#submit-wrapper').slideUp().fadeOut();
+		$('.groupbottom').slideUp().fadeOut(function(){
+			$('#user').parent().removeClass('grouptop');
+		});
+		$('#reset-password-wrapper').slideDown().fadeIn();
+		$('#password').attr('required', false);
+		$('form[name=login]').attr('action', 'lostpassword/email');
+		$('#user').focus();
+
+		// Generate a browser warning for required fields if field empty
+		if ($('#user').val().length === 0) {
 			$('#submit').trigger('click');
 		} else {
 			if (OC.config.lost_password_link === 'disabled') {
@@ -27,19 +69,37 @@ OC.Lostpassword = {
 			} else if (OC.config.lost_password_link) {
 				window.location = OC.config.lost_password_link;
 			} else {
-				$.post(
-					OC.generateUrl('/lostpassword/email'),
-					{
-						user : $('#user').val()
-					},
-					OC.Lostpassword.sendLinkDone
-				).fail(function() {
-					OC.Lostpassword.sendLinkError(OC.Lostpassword.sendErrorMsg);
-				});
+				OC.Lostpassword.onSendLink();
 			}
 		}
 	},
 
+	onSendLink: function (event) {
+		// Only if password reset form is active
+		if($('form[name=login][action]').length === 1) {
+			if (event) {
+				event.preventDefault();
+			}
+			$('#reset-password-wrapper .submit-icon')
+				.removeClass('icon-confirm-white')
+				.addClass('icon-loading-small-dark');
+			$('#reset-password-submit')
+				.attr('value', t('core', 'Sending email …'))
+				.prop('disabled', true);
+			$('#user').prop('disabled', true);
+			$('.login-additional').fadeOut();
+			$.post(
+				OC.generateUrl('/lostpassword/email'),
+				{
+					user : $('#user').val()
+				},
+				OC.Lostpassword.sendLinkDone
+			).fail(function() {
+				OC.Lostpassword.sendLinkError(OC.Lostpassword.sendErrorMsg);
+			});
+		}
+	},
+
 	sendLinkDone : function(result){
 		var sendErrorMsg;
 
@@ -60,13 +120,14 @@ OC.Lostpassword = {
 		// update is the better success message styling
 		node.addClass('update').css({width:'auto'});
 		node.html(OC.Lostpassword.sendSuccessMsg);
+		OC.Lostpassword.resetButtons();
 	},
 
 	sendLinkError : function(msg){
 		var node = OC.Lostpassword.getSendStatusNode();
 		node.addClass('warning');
 		node.html(msg);
-		OC.Lostpassword.init();
+		OC.Lostpassword.resetButtons();
 	},
 
 	getSendStatusNode : function(){
diff --git a/core/templates/login.php b/core/templates/login.php
index 0801b3746df..82827bbef03 100644
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -51,11 +51,7 @@ script('core', 'merged-login');
 			<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
 		</p>
 
-		<?php if (!empty($_['invalidpassword']) && !empty($_['canResetPassword'])) { ?>
-		<a id="lost-password" class="warning" href="<?php p($_['resetPasswordLink']); ?>">
-			<?php p($l->t('Wrong password. Reset it?')); ?>
-		</a>
-		<?php } else if (!empty($_['invalidpassword'])) { ?>
+		<?php if (!empty($_['invalidpassword'])) { ?>
 			<p class="warning">
 				<?php p($l->t('Wrong password.')); ?>
 			</p>
@@ -63,9 +59,16 @@ script('core', 'merged-login');
 
 		<div id="submit-wrapper">
 			<input type="submit" id="submit" class="login primary" title="" value="<?php p($l->t('Log in')); ?>" disabled="disabled" />
-			<div id="submit-icon" class="icon-confirm-white"></div>
+			<div class="submit-icon icon-confirm-white"></div>
 		</div>
 
+		<?php if (!empty($_['canResetPassword'])) { ?>
+		<div id="reset-password-wrapper" style="display: none;">
+			<input type="submit" id="reset-password-submit" class="login primary" title="" value="<?php p($l->t('Reset password')); ?>" disabled="disabled" />
+			<div class="submit-icon icon-confirm-white"></div>
+		</div>
+		<?php } ?>
+
 		<div class="login-additional">
 			<div class="remember-login-container">
 				<?php if ($_['rememberLoginState'] === 0) { ?>
@@ -75,6 +78,16 @@ script('core', 'merged-login');
 				<?php } ?>
 				<label for="remember_login"><?php p($l->t('Stay logged in')); ?></label>
 			</div>
+			<?php if (!empty($_['canResetPassword'])) { ?>
+			<div class="lost-password-container">
+				<a id="lost-password" href="<?php p($_['resetPasswordLink']); ?>">
+					<?php p($l->t('Forgot password?')); ?>
+				</a>
+				<a id="lost-password-back" href="" style="display:none;">
+					<?php p($l->t('Back to log in')); ?>
+				</a>
+			</div>
+			<?php } ?>
 		</div>
 
 		<input type="hidden" name="timezone_offset" id="timezone_offset"/>