Fix 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>

diff --git a/core/css/guest.css b/core/css/guest.css
index b120d46a5c8f1834e79af9cec02748ac33635314..3883d66000e0da53a300e1f0764dc1422a393dc4 100644 (file)
--- 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 45d9cfc925288b0c414f9073132d49289f9c10fa..2affefebead5b035259dd13533a75ff3a6d856b4 100644 (file)
--- 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>