From 585e9f9fcdfbe095f7112ca102c7da59179266e0 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 2 Nov 2017 12:02:51 +0100
Subject: [PATCH] Add some JS to hide and show elements for password reset

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 core/css/guest.css       | 28 ++++++++++++++++------------
 core/js/lostpassword.js  | 24 +++++++++++++++++++++++-
 core/templates/login.php | 11 +++++++++--
 3 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/core/css/guest.css b/core/css/guest.css
index dd610384e3..4741339e18 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;
-}
-#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. */
 }
 
+#submit-wrapper .icon-loading-small {
+	position: absolute;
+	top: 22px;
+	right: 24px;
+}
+
 input, textarea, select, button, div[contenteditable=true] {
 	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
 }
@@ -395,9 +396,12 @@ form .warning input[type='checkbox']+label {
 .lost-password-container {
 	margin: 0;
 }
-.lost-password-container #lost-password {
+.lost-password-container #lost-password,
+.lost-password-container #lost-password-back {
+	display: inline-block;
+	padding: 12px;
+	margin-top: -6px;
 	color: #fff;
-	padding: 10px;
 	opacity: .7;
 }
 #forgot-password {
diff --git a/core/js/lostpassword.js b/core/js/lostpassword.js
index 1923b73a17..58102d2485 100644
--- a/core/js/lostpassword.js
+++ b/core/js/lostpassword.js
@@ -14,11 +14,33 @@ OC.Lostpassword = {
 
 	init : function() {
 		$('#lost-password').click(OC.Lostpassword.resetLink);
-		$('#reset-password #submit').click(OC.Lostpassword.resetPassword);
+		$('#reset-password-submit').click(OC.Lostpassword.resetPassword);
+		$('#lost-password-back').click(OC.Lostpassword.backToLogin);
+	},
+
+	backToLogin : function(event){
+		event.preventDefault();
+
+		$('#reset-password-wrapper').slideUp().fadeOut();
+		$('#lost-password').slideDown().fadeIn();
+		$('.remember-login-container').slideDown().fadeIn();
+		$('#submit-wrapper').slideDown().fadeIn();
+		$('.groupbottom').slideDown().fadeIn();
+		$('#user').parent().addClass('grouptop');
+		$('#user').focus();
 	},
 
 	resetLink : function(event){
 		event.preventDefault();
+
+		$('#lost-password').slideUp().fadeOut();
+		$('.remember-login-container').slideUp().fadeOut();
+		$('#submit-wrapper').slideUp().fadeOut();
+		$('.groupbottom').slideUp().fadeOut();
+		$('#user').parent().removeClass('grouptop');
+		$('#reset-password-wrapper').slideDown().fadeIn();
+		$('#user').focus();
+
 		if (!$('#user').val().length){
 			$('#submit').trigger('click');
 		} else {
diff --git a/core/templates/login.php b/core/templates/login.php
index 342eb43a62..c7b43bb3d8 100644
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -51,7 +51,7 @@ script('core', 'merged-login');
 			<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
 		</p>
 
-		<?php if (!empty($_['invalidpassword']) && !empty($_['canResetPassword'])) { ?>
+		<?php if (!empty($_['invalidpassword']) && !empty($_['canResetPlost-passwordassword'])) { ?>
 		<a id="lost-password" class="warning" href="<?php p($_['resetPasswordLink']); ?>">
 			<?php p($l->t('Wrong password. Reset it?')); ?>
 		</a>
@@ -63,7 +63,7 @@ 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>
 
 		<div class="login-additional">
@@ -80,6 +80,13 @@ script('core', 'merged-login');
 				<a id="lost-password" href="<?php p($_['resetPasswordLink']); ?>">
 					<?php p($l->t('Forgot password?')); ?>
 				</a>
+				<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>
+					<a id="lost-password-back" href="">
+						<?php p($l->t('Back to log in')); ?>
+					</a>
+				</div>
 			</div>
 			<?php } ?>
 		</div>