Refactors the publicshareauth template to have the Enter key working …

…in the

email input field and add a 'Back' button.

This commit is part of #31005

Signed-off-by: Cyrille Bollu <cyrpub@bollu.be>

core/css/publicshareauth.css

@@ -18,8 +18,10 @@ form fieldset > p {
 	min-width: 0; /* FF hack for to override default value */
 }
 
-input[type='submit'],
-input[type='submit'].icon-confirm {
+#password-input-form input[type='submit'],
+#email-input-form input[type='submit'],
+#email-input-form input[type='submit'].icon-confirm,
+#password-input-form input[type='submit'].icon-confirm {
 	position: absolute;
 	top: 0px;
 	right: -5px;

core/js/publicshareauth.js

@@ -1,13 +1,15 @@
-function showEmailAddressPrompt() {
+function showEmailAddressPromptForm() {
 	// Shows email prompt
-	var emailInput = document.getElementById('email-input');
-	var emailPrompt = document.getElementById('email-prompt');
+	var emailInput = document.getElementById('email-input-form');
 	emailInput.style.display="block";
-	emailPrompt.style.display="block";
 
-	// Hides password prompt
+	// Shows back button
+	var backButton = document.getElementById('request-password-back-button');
+	backButton.style.display="block";
+
+	// Hides password prompt and 'request password' button
 	var passwordRequestButton = document.getElementById('request-password-button-not-talk');
-	var passwordInput = document.getElementById('password-input');
+	var passwordInput = document.getElementById('password-input-form');
 	passwordRequestButton.style.display="none";
 	passwordInput.style.display="none";
 
@@ -23,17 +25,28 @@ function showEmailAddressPrompt() {
 }
 
 document.addEventListener('DOMContentLoaded', function() {
+	// Enables password submit button only when user has typed something in the password field
 	var passwordInput = document.getElementById('password');
 	var passwordButton = document.getElementById('password-submit');
 	var eventListener = function() {
 		passwordButton.disabled = passwordInput.value.length === 0;
 	};
-
 	passwordInput.addEventListener('click', eventListener);
 	passwordInput.addEventListener('keyup', eventListener);
 	passwordInput.addEventListener('change', eventListener);
 
+	// Enables email request button only when user has typed something in the email field
+	var emailInput = document.getElementById('email');
+	var emailButton = document.getElementById('password-request');
+	eventListener = function() {
+		emailButton.disabled = emailInput.value.length === 0;
+	};
+	emailInput.addEventListener('click', eventListener);
+	emailInput.addEventListener('keyup', eventListener);
+	emailInput.addEventListener('change', eventListener);
+
+	// Adds functionality to the request password button
 	var passwordRequestButton = document.getElementById('request-password-button-not-talk');
-	passwordRequestButton.addEventListener('click', showEmailAddressPrompt);
+	passwordRequestButton.addEventListener('click', showEmailAddressPromptForm);
 
 });

core/templates/publicshareauth.php

@@ -5,16 +5,21 @@
 	style('core', 'publicshareauth');
 	script('core', 'publicshareauth');
 ?>
-<form method="post">
+
+<!-- password prompt form. It should be hidden when we show the email prompt form -->
+<?php if (!isset($_['identityOk'])): ?>
+	<form method="post" id="password-input-form">
+<?php else: ?>
+	<form method="post" id="password-input-form" style="display:none;">
+<?php endif; ?>
 	<fieldset class="warning">
 		<?php if (!isset($_['wrongpw'])): ?>
 			<div class="warning-info"><?php p($l->t('This share is password-protected')); ?></div>
 		<?php endif; ?>
 		<?php if (isset($_['wrongpw'])): ?>
 			<div class="warning"><?php p($l->t('The password is wrong. Try again.')); ?></div>
 		<?php endif; ?>
-		<div class="warning-info" id="email-prompt" style="display:none;"><?php p($l->t('Please type in your email address to request a temporary password')); ?></div>
-		<p id="password-input">
+		<p>
 			<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
 			<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>" />
 			<input type="password" name="password" id="password"
@@ -26,23 +31,53 @@
 			<input type="submit" id="password-submit"
 				class="svg icon-confirm input-button-inline" value="" disabled="disabled" />
 		</p>
-		 <p id="email-input" style="display:none;">
+	</fieldset>
+</form>
+
+<!-- email prompt form. It should initially be hidden -->
+<?php if (isset($_['identityOk'])): ?>
+	<form method="post" id="email-input-form">
+<?php else: ?>
+	<form method="post" id="email-input-form" style="display:none;">
+<?php endif; ?>
+	<fieldset class="warning">
+		<div class="warning-info" id="email-prompt"><?php p($l->t('Please type in your email address to request a temporary password')); ?></div>
+		 <p>
 			<input type="email" id="email" name="identityToken" placeholder="<?php p($l->t('Email address')); ?>" />
-			<input type="submit" id="password-request" name="passwordRequest" class="svg icon-confirm input-button-inline" value="" />
+			<input type="submit" id="password-request" name="passwordRequest" class="svg icon-confirm input-button-inline" value="" disabled="disabled"/>
+			<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>" />
+			<input type="hidden" name="sharingToken" value="<?php p($_['share']->getToken()) ?>" id="sharingToken">
+			<input type="hidden" name="sharingType" value="<?php p($_['share']->getShareType()) ?>" id="sharingType">
 		</p>
 		<?php if (isset($_['identityOk'])): ?>
 			<?php if ($_['identityOk']): ?>
 				<div class="warning-info" id="identification-success"><?php p($l->t('Password sent!')); ?></div>
-			<?php endif; ?>
-			<?php if (!$_['identityOk']): ?>
-				<div class="warning-info" id="identification-failure"><?php p($l->t('You are not authorized to request a password for this share')); ?></div>
+			<?php else: ?>
+				<div class="warning" id="identification-failure"><?php p($l->t('You are not authorized to request a password for this share')); ?></div>
 			<?php endif; ?>
 		<?php endif; ?>
 	</fieldset>
 </form>
-<?php if ($_['share']->getShareType()===$_['share']::TYPE_EMAIL && !$_['share']->getSendPasswordByTalk()): ?>
+
+<!-- request password button -->
+<?php if (!isset($_['identityOk']) && $_['share']->getShareType()===$_['share']::TYPE_EMAIL && !$_['share']->getSendPasswordByTalk()): ?>
 	<input type="button"
 		id="request-password-button-not-talk"
 		value="<?php p($l->t('Request password')); ?>"
 		class="primary" />
 <?php endif; ?>
+
+<!-- back to showShare button -->
+<form method="get">
+	<fieldset>
+		<input type="submit"
+			id="request-password-back-button"
+			value="<?php p($l->t('Back')); ?>"
+			class="primary"
+<?php if (isset($_['identityOk'])): ?>
+			style="display:block;" />
+<?php else: ?>
+			style="display:none;" />
+<?php endif; ?>
+	</fieldset>
+</form>