Improve UI/UX install process (#5147)

* less buttons on step 1

* add form-group

* jump to next step as link not as button

* improve navigation bar HTML structure

* sync password-show button with extra.js

* fix CSS

* i18n: step 4: split text strings for help text (max chars default user)

* show menu button if mobile view

* improve header layout with empty div

* step 5: button in form-actions

* improve buttons in goup-controls

* Favicon added

* Button: Font color  hover btn-attention

* install check step: add subtitles

* fix .btn

* improve tabindex

* improve showPW_this()

6 files changed, 65 insertions, 18 deletions

diff --git a/p/scripts/extra.js b/p/scripts/extra.js
index 707719430..6fd62ac58 100644
--- a/p/scripts/extra.js
+++ b/p/scripts/extra.js
@@ -84,14 +84,12 @@ function init_crypto_form() {
 // <show password>
 let timeoutHide;
 
-function showPW_this(ev) {
+function showPW_this() {
 	const id_passwordField = this.getAttribute('data-toggle');
 	if (this.classList.contains('active')) {
 		hidePW(id_passwordField);
 	} else {
-		if (ev.type === 'click' || ev.buttons || ev.key === ' ' || ev.key.toUpperCase() === 'ENTER') {
-			showPW(id_passwordField);
-		}
+		showPW(id_passwordField);
 	}
 	return false;
 }
diff --git a/p/scripts/install.js b/p/scripts/install.js
index 7c802531e..0bd54f978 100644
--- a/p/scripts/install.js
+++ b/p/scripts/install.js
@@ -1,26 +1,43 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
 'use strict';
 
-function show_password(ev) {
-	const button = ev.currentTarget;
-	const passwordField = document.getElementById(button.getAttribute('data-toggle'));
+let timeoutHide;
+
+function showPW_this() {
+	const id_passwordField = this.getAttribute('data-toggle');
+	if (this.classList.contains('active')) {
+		hidePW(id_passwordField);
+	} else {
+		showPW(id_passwordField);
+	}
+	return false;
+}
+
+function showPW(id_passwordField) {
+	const passwordField = document.getElementById(id_passwordField);
 	passwordField.setAttribute('type', 'text');
-	button.className += ' active';
+	passwordField.nextElementSibling.classList.add('active');
+	clearTimeout(timeoutHide);
+	timeoutHide = setTimeout(function () { hidePW(id_passwordField); }, 5000);
 	return false;
 }
-function hide_password(ev) {
-	const button = ev.currentTarget;
-	const passwordField = document.getElementById(button.getAttribute('data-toggle'));
+
+function hidePW(id_passwordField) {
+	clearTimeout(timeoutHide);
+	const passwordField = document.getElementById(id_passwordField);
 	passwordField.setAttribute('type', 'password');
-	button.className = button.className.replace(/(?:^|\s)active(?!\S)/g, '');
+	passwordField.nextElementSibling.classList.remove('active');
 	return false;
 }
-const toggles = document.getElementsByClassName('toggle-password');
-for (let i = 0; i < toggles.length; i++) {
-	toggles[i].addEventListener('mousedown', show_password);
-	toggles[i].addEventListener('mouseup', hide_password);
+
+function init_password_observers(parent) {
+	parent.querySelectorAll('.toggle-password').forEach(function (btn) {
+		btn.addEventListener('click', showPW_this);
+	});
 }
 
+init_password_observers(document.body);
+
 const auth_type = document.getElementById('auth_type');
 function auth_type_change() {
 	if (auth_type) {
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 3a7d395a0..f66188b35 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -190,7 +190,12 @@ form th {
 
 .form-group .group-controls {
 	min-height: 25px;
-	padding: 10px 0;
+	padding: 0.5rem 0;
+}
+
+.form-group.form-actions .group-controls .btn {
+	margin-top: 0.25rem;
+	margin-bottom: 0.25rem;
 }
 
 .form-group .group-controls label {
@@ -349,6 +354,10 @@ a:hover .icon {
 	background-image: linear-gradient(to bottom, var(--attention-background-color-gradient1-hover), var(--attention-background-color-gradient2-hover));
 }
 
+a.btn-attention:hover {
+	color: var(--font-color-light);
+}
+
 .btn-attention:active {
 	background-color: var(--attention-background-color-active);
 	box-shadow: none;
@@ -381,6 +390,7 @@ a:hover .icon {
 }
 
 .nav-list .item > a,
+.nav-list .item > span,
 .nav-list .item > div {
 	padding: 0 1rem;
 }
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index ae5f1ca39..ae4006517 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -190,7 +190,12 @@ form th {
 
 .form-group .group-controls {
 	min-height: 25px;
-	padding: 10px 0;
+	padding: 0.5rem 0;
+}
+
+.form-group.form-actions .group-controls .btn {
+	margin-top: 0.25rem;
+	margin-bottom: 0.25rem;
 }
 
 .form-group .group-controls label {
@@ -349,6 +354,10 @@ a:hover .icon {
 	background-image: linear-gradient(to bottom, var(--attention-background-color-gradient1-hover), var(--attention-background-color-gradient2-hover));
 }
 
+a.btn-attention:hover {
+	color: var(--font-color-light);
+}
+
 .btn-attention:active {
 	background-color: var(--attention-background-color-active);
 	box-shadow: none;
@@ -381,6 +390,7 @@ a:hover .icon {
 }
 
 .nav-list .item > a,
+.nav-list .item > span,
 .nav-list .item > div {
 	padding: 0 1rem;
 }
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 6a5ef8b87..43c6b7d4d 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -738,6 +738,12 @@ input[type="checkbox"]:focus-visible {
 	width: 100%
 }
 
+.group-controls .next-step {
+	display: inline-block;
+	padding-top: 6px;
+	padding-bottom: 6px;
+}
+
 .alert-head {
 	margin: 0;
 	font-weight: bold;
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 1d818cf1a..62afd6ff0 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -738,6 +738,12 @@ input[type="checkbox"]:focus-visible {
 	width: 100%
 }
 
+.group-controls .next-step {
+	display: inline-block;
+	padding-top: 6px;
+	padding-bottom: 6px;
+}
+
 .alert-head {
 	margin: 0;
 	font-weight: bold;