Merge pull request #846 from owncloud/password-form-design

Apply new auth form design

.drone.star

@@ -20,7 +20,6 @@ config = {
 	'phpunit': {
 		'reducedDatabases' : {
 			'phpVersions': [
-				'7.2',
 				'7.3',
 				'7.4',
 			],

appinfo/info.xml

@@ -33,7 +33,7 @@ Media gallery that adds image viewing capabilities to files view and public link
 	<bugs>https://github.com/owncloud/gallery/issues</bugs>
 	<repository type="git">https://github.com/owncloud/gallery.git</repository>
 	<dependencies>
-		<owncloud min-version="10.2" max-version="10"/>
+		<owncloud min-version="10.8" max-version="10"/>
 	</dependencies>
 	<default_enable />
 </info>

css/authenticate.css

@@ -1,13 +1,12 @@
 #password {
-	width: 190px !important;
 	padding: 10px;
-	margin: 6px;
+	margin:	6px;
 }
 
 input[type='submit'] {
 	width: 45px;
 	height: 45px;
-	margin: 6px;
+	margin:	6px;
 }
 
 #body-login input[type='submit'] {
@@ -19,3 +18,7 @@ input[type='submit'] {
 fieldset > p {
 	position: relative;
 }
+
+form #password-protected-share legend {
+	margin-bottom: 15px;
+}

templates/authenticate.php

@@ -7,24 +7,37 @@
  */
 style('gallery', 'authenticate');
 ?>
-<form method="post">
-	<fieldset>
-		<?php if (!isset($_['password'])): ?>
-			<div
-				class="warning-info"><?php p($l->t('This share is password-protected')); ?></div>
-		<?php endif; ?>
-		<?php if (isset($_['password'])): ?>
-			<div
-				class="warning"><?php p($l->t('The password is wrong. Try again.')); ?></div>
-		<?php endif; ?>
+<form method="post" autocapitalize="none">
+	<fieldset id="password-protected-share">
+		<legend>
+			<?php if (!isset($_['password'])): ?>
+				<div class="warning-info"><?php p($l->t('This share is password-protected')); ?></></div>
+			<?php endif; ?>
+		</legend>
 		<p>
-			<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
-			<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>"/>
+			<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"
 				   placeholder="<?php p($l->t('Password')); ?>" value=""
-				   autocomplete="off" autocapitalize="off" autocorrect="off"
-				   autofocus/>
-			<input type="submit" value="" class="svg icon-confirm input-button-inline"/>
+				   autocomplete="off" autocorrect="off" autofocus/>
 		</p>
 	</fieldset>
+
+	<div class="submit-wrap">
+		<?php if (isset($_['password'])): ?>
+			<div class="warning"><?php p($l->t('The password is wrong. Try again.')); ?></div>
+		<?php endif; ?>
+
+		<button type="submit" id="password-submit">
+			<span><?php p($l->t('Proceed')); ?></span>
+			<div class="loading-spinner">
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+			</div>
+		</button>
+	</div>
 </form>