Fix install pagefix/install-page

- Use normal labels instead of hiding them
- Fix position of the eye button (this is still very hacky)
- Define width on the box and not on the text fields

This really needs to be ported to vue

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

2 files changed, 38 insertions, 21 deletions

diff --git a/core/css/guest.css b/core/css/guest.css
index b120d46a5c8..3883d66000e 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -105,12 +105,36 @@ form {
 	margin: auto;
 	padding: 0;
 }
+form.install-form {
+	max-width: 300px;
+}
+
+form.install-form fieldset,
+form.install-form fieldset input {
+	width: 100%;
+}
+form.install-form .strengthify-wrapper {
+	bottom: 17px;
+	width: calc(100% - 8px);
+	left: 4px;
+	top: unset;
+}
+
+form.install-form #show {
+	top: 18px;
+}
+
 form #sqliteInformation {
-	margin-top: 0px;
+	margin-top: 0.5rem;
 	margin-bottom: 20px;
 }
-form #adminaccount {
+form #adminaccount, form #use_other_db {
 	margin-bottom: 15px;
+	text-align: left;
+}
+form #adminaccount > legend,
+form #adminlogin {
+	margin-bottom: 1rem;
 }
 form #advancedHeader {
 	width: 100%;
@@ -335,7 +359,7 @@ input[type='checkbox'].checkbox--white:checked + label:before {
 	display: inline-block;
 	position: relative;
 	top: -20px;
-	width: 286px;
+	width: 250px;
 	border-radius: 0 0 3px 3px;
 	overflow: hidden;
 	height: 3px;
@@ -350,7 +374,7 @@ input[type='checkbox'].checkbox--white:checked + label:before {
 #show, #dbpassword-toggle {
 	position: absolute;
 	right: 2px;
-	top: 4px;
+	top: -3px;
 	display: flex;
 	justify-content: center;
 	width: 44px;
diff --git a/core/templates/installation.php b/core/templates/installation.php
index 45d9cfc9252..2affefebead 100644
--- a/core/templates/installation.php
+++ b/core/templates/installation.php
@@ -5,7 +5,7 @@ script('core', 'install');
 <input type='hidden' id='hasSQLite' value='<?php p($_['hasSQLite']) ?>'>
 <input type='hidden' id='hasPostgreSQL' value='<?php p($_['hasPostgreSQL']) ?>'>
 <input type='hidden' id='hasOracle' value='<?php p($_['hasOracle']) ?>'>
-<form action="index.php" method="post" class="guest-box">
+<form action="index.php" method="post" class="guest-box install-form">
 <input type="hidden" name="install" value="true">
 	<?php if (count($_['errors']) > 0): ?>
 	<fieldset class="warning">
@@ -34,19 +34,17 @@ script('core', 'install');
 	<?php endif; ?>
 	<fieldset id="adminaccount">
 		<legend><?php print_unescaped($l->t('Create an <strong>admin account</strong>')); ?></legend>
-		<p class="grouptop">
+		<p>
+			<label for="adminlogin"><?php p($l->t('Username')); ?></label>
 			<input type="text" name="adminlogin" id="adminlogin"
-				placeholder="<?php p($l->t('Username')); ?>"
 				value="<?php p($_['adminlogin']); ?>"
 				autocomplete="off" autocapitalize="none" autocorrect="off" autofocus required>
-			<label for="adminlogin" class="infield"><?php p($l->t('Username')); ?></label>
 		</p>
 		<p class="groupbottom">
+			<label for="adminpass"><?php p($l->t('Password')); ?></label>
 			<input type="password" name="adminpass" data-typetoggle="#show" id="adminpass"
-				placeholder="<?php p($l->t('Password')); ?>"
 				value="<?php p($_['adminpass']); ?>"
 				autocomplete="off" autocapitalize="none" autocorrect="off" required>
-			<label for="adminpass" class="infield"><?php p($l->t('Password')); ?></label>
 			<button id="show" class="toggle-password" aria-label="<?php p($l->t('Show password')); ?>">
 				<img src="<?php print_unescaped(image_path('', 'actions/toggle.svg')); ?>" alt="<?php p($l->t('Toggle password visibility')); ?>">
 			</button>
@@ -102,26 +100,23 @@ script('core', 'install');
 		<fieldset id='databaseField'>
 		<div id="use_other_db">
 			<p class="grouptop">
-				<label for="dbuser" class="infield"><?php p($l->t('Database user')); ?></label>
+				<label for="dbuser"><?php p($l->t('Database user')); ?></label>
 				<input type="text" name="dbuser" id="dbuser"
-					placeholder="<?php p($l->t('Database user')); ?>"
 					value="<?php p($_['dbuser']); ?>"
 					autocomplete="off" autocapitalize="none" autocorrect="off">
 			</p>
 			<p class="groupmiddle">
+				<label for="dbpass"><?php p($l->t('Database password')); ?></label>
 				<input type="password" name="dbpass" id="dbpass"
-					placeholder="<?php p($l->t('Database password')); ?>"
 					value="<?php p($_['dbpass']); ?>"
 					autocomplete="off" autocapitalize="none" autocorrect="off">
-				<label for="dbpass" class="infield"><?php p($l->t('Database password')); ?></label>
 				<button id="show" class="toggle-password" aria-label="<?php p($l->t('Show password')); ?>">
 					<img src="<?php print_unescaped(image_path('', 'actions/toggle.svg')); ?>" alt="<?php p($l->t('Toggle password visibility')); ?>">
 				</button>
 			</p>
 			<p class="groupmiddle">
-				<label for="dbname" class="infield"><?php p($l->t('Database name')); ?></label>
+				<label for="dbname"><?php p($l->t('Database name')); ?></label>
 				<input type="text" name="dbname" id="dbname"
-					placeholder="<?php p($l->t('Database name')); ?>"
 					value="<?php p($_['dbname']); ?>"
 					autocomplete="off" autocapitalize="none" autocorrect="off"
 					pattern="[0-9a-zA-Z$_-]+">
@@ -131,16 +126,14 @@ script('core', 'install');
 				<p class="groupmiddle">
 					<label for="dbtablespace" class="infield"><?php p($l->t('Database tablespace')); ?></label>
 					<input type="text" name="dbtablespace" id="dbtablespace"
-						placeholder="<?php p($l->t('Database tablespace')); ?>"
 						value="<?php p($_['dbtablespace']); ?>"
 						autocomplete="off" autocapitalize="none" autocorrect="off">
 				</p>
 			</div>
 			<?php endif; ?>
 			<p class="groupbottom">
-				<label for="dbhost" class="infield"><?php p($l->t('Database host')); ?></label>
+				<label for="dbhost"><?php p($l->t('Database host')); ?></label>
 				<input type="text" name="dbhost" id="dbhost"
-					placeholder="<?php p($l->t('Database host')); ?>"
 					value="<?php p($_['dbhost']); ?>"
 					autocomplete="off" autocapitalize="none" autocorrect="off">
 			</p>
@@ -153,12 +146,12 @@ script('core', 'install');
 	<?php endif; ?>
 
 	<?php if (!$_['dbIsSet'] or count($_['errors']) > 0): ?>
-		<fieldset id="sqliteInformation" class="notecard warning">
+		<div id="sqliteInformation" class="notecard warning">
 			<legend><?php p($l->t('Performance warning'));?></legend>
 			<p><?php p($l->t('You chose SQLite as database.'));?></p>
 			<p><?php p($l->t('SQLite should only be used for minimal and development instances. For production we recommend a different database backend.'));?></p>
 			<p><?php p($l->t('If you use clients for file syncing, the use of SQLite is highly discouraged.')); ?></p>
-		</fieldset>
+		</div>
 	<?php endif ?>
 
 	<div class="icon-loading-dark float-spinner">&nbsp;</div>