Add some JS to hide and show elements for password reset

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

3 files changed, 47 insertions, 14 deletions

diff --git a/core/css/guest.css b/core/css/guest.css
index dd610384e31..4741339e183 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;
 }
@@ -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 1923b73a179..58102d2485c 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 342eb43a625..c7b43bb3d84 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>