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()

2 files changed, 31 insertions, 16 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) {