Improve install routine: database password input with "show password" button (#3962)

* wip

* CSS better btn

* CSS: RTL

* button is better than a

* improved CSS for button

app/install.php

@@ -503,8 +503,11 @@ function printStep2() {
 		<div class="form-group">
 			<label class="group-name" for="pass"><?= _t('install.bdd.password') ?></label>
 			<div class="group-controls">
-				<input type="password" id="pass" name="pass" value="<?=
-					isset($_SESSION['bd_password']) ? $_SESSION['bd_password'] : '' ?>" tabindex="4" autocomplete="off" />
+				<div class="stick">
+					<input type="password" id="pass" name="pass" value="<?=
+						isset($_SESSION['bd_password']) ? $_SESSION['bd_password'] : '' ?>" tabindex="4" autocomplete="off" />
+					<a class="btn toggle-password" data-toggle="pass" tabindex="5"><?= FreshRSS_Themes::icon('key') ?></a>
+				</div>
 			</div>
 		</div>
 
@@ -512,7 +515,7 @@ function printStep2() {
 			<label class="group-name" for="base"><?= _t('install.bdd') ?></label>
 			<div class="group-controls">
 				<input type="text" id="base" name="base" maxlength="64" pattern="[0-9A-Za-z_-]{1,64}" value="<?=
-					isset($_SESSION['bd_base']) ? $_SESSION['bd_base'] : '' ?>" tabindex="5" />
+					isset($_SESSION['bd_base']) ? $_SESSION['bd_base'] : '' ?>" tabindex="6" />
 			</div>
 		</div>
 
@@ -520,17 +523,17 @@ function printStep2() {
 			<label class="group-name" for="prefix"><?= _t('install.bdd.prefix') ?></label>
 			<div class="group-controls">
 				<input type="text" id="prefix" name="prefix" maxlength="16" pattern="[0-9A-Za-z_]{1,16}" value="<?=
-					isset($_SESSION['bd_prefix']) ? $_SESSION['bd_prefix'] : $system_default_config->db['prefix'] ?>" tabindex="6" />
+					isset($_SESSION['bd_prefix']) ? $_SESSION['bd_prefix'] : $system_default_config->db['prefix'] ?>" tabindex="7" />
 			</div>
 		</div>
 		</div>
 
 		<div class="form-group form-actions">
 			<div class="group-controls">
-				<button type="submit" class="btn btn-important" tabindex="7" ><?= _t('gen.action.submit') ?></button>
-				<button type="reset" class="btn" tabindex="8" ><?= _t('gen.action.cancel') ?></button>
+				<button type="submit" class="btn btn-important" tabindex="8" ><?= _t('gen.action.submit') ?></button>
+				<button type="reset" class="btn" tabindex="9" ><?= _t('gen.action.cancel') ?></button>
 				<?php if ($s2['all'] == 'ok') { ?>
-				<a class="btn btn-important next-step" href="?step=3" tabindex="9" ><?= _t('install.action.next_step') ?></a>
+				<a class="btn btn-important next-step" href="?step=3" tabindex="10" ><?= _t('install.action.next_step') ?></a>
 				<?php } ?>
 			</div>
 		</div>
@@ -585,7 +588,7 @@ function printStep3() {
 				<div class="stick">
 					<input type="password" id="passwordPlain" name="passwordPlain" pattern=".{7,}"
 						autocomplete="off" <?= $auth_type === 'form' ? ' required="required"' : '' ?> tabindex="5" />
-					<a class="btn toggle-password" data-toggle="passwordPlain"><?= FreshRSS_Themes::icon('key') ?></a>
+					<button type="button" class="btn toggle-password" data-toggle="passwordPlain"><?= FreshRSS_Themes::icon('key') ?></button>
 				</div>
 				<p class="help"><?= _i('help') ?> <?= _t('install.auth.password_format') ?></p>
 				<noscript><b><?= _t('gen.js.should_be_activated') ?></b></noscript>

p/themes/Origine/origine.css

@@ -47,10 +47,11 @@ option {
 	padding: 0 .5em;
 }
 
-input:focus, select:focus, textarea:focus {
+input:focus, select:focus, textarea:focus, input[type="password"]:focus + .toggle-password {
 	color: #0062be;
 	border-color: #3bf;
 	box-shadow: 0 2px 2px #ddf inset;
+	outline: none;
 }
 
 input:invalid, select:invalid {
@@ -114,11 +115,17 @@ form th {
 	padding: 0;
 }
 
-.form-group .group-controls input,
-.form-group .group-controls select {
+.form-group .group-controls > input,
+.form-group .group-controls > select,
+.form-group .group-controls .stick {
 	margin: -5px 0;
 }
 
+.form-group .group-controls .stick .btn {
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+
 /*=== Buttons */
 .stick {
 	vertical-align: middle;

p/themes/Origine/origine.rtl.css

@@ -47,10 +47,11 @@ option {
 	padding: 0 .5em;
 }
 
-input:focus, select:focus, textarea:focus {
+input:focus, select:focus, textarea:focus, input[type="password"]:focus + .toggle-password {
 	color: #0062be;
 	border-color: #3bf;
 	box-shadow: 0 2px 2px #ddf inset;
+	outline: none;
 }
 
 input:invalid, select:invalid {
@@ -114,11 +115,17 @@ form th {
 	padding: 0;
 }
 
-.form-group .group-controls input,
-.form-group .group-controls select {
+.form-group .group-controls > input,
+.form-group .group-controls > select,
+.form-group .group-controls .stick {
 	margin: -5px 0;
 }
 
+.form-group .group-controls .stick .btn {
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+
 /*=== Buttons */
 .stick {
 	vertical-align: middle;