From 4fda4f643b60a151179e5dd4f04912fb2618d98f Mon Sep 17 00:00:00 2001
From: slawkens <slawkens@gmail.com>
Date: Sun, 2 Feb 2025 21:55:16 +0100
Subject: [PATCH] feat: Settings: password input with hide/show options

---
 system/settings.php                       |  2 +-
 system/src/Settings.php                   |  8 ++++++++
 system/templates/admin.settings.html.twig | 23 +++++++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/system/settings.php b/system/settings.php
index 5f899961..f4f3fedf 100644
--- a/system/settings.php
+++ b/system/settings.php
@@ -348,7 +348,7 @@ return [
 		],
 		'database_password' => [
 			'name' => 'Database Password',
-			'type' => 'text',
+			'type' => 'password',
 			'default' => '',
 			'show_if' => [
 				'database_overwrite', '=', 'true'
diff --git a/system/src/Settings.php b/system/src/Settings.php
index 0749396a..a02ff43c 100644
--- a/system/src/Settings.php
+++ b/system/src/Settings.php
@@ -247,7 +247,15 @@ class Settings implements \ArrayAccess
 						$min = $max = $step = '';
 					}
 
+					if ($setting['type'] === 'password') {
+						echo '<div class="input-group" id="show-hide-' . $key . '">';
+					}
+
 					echo '<input class="form-control" type="' . $setting['type'] . '" name="settings[' . $key . ']" value="' . ($settingsDb[$key] ?? ($setting['default'] ?? '')) . '" id="' . $key . '"' . $min . $max . $step . '/>';
+
+					if ($setting['type'] === 'password') {
+						echo '<div class="input-group-append input-group-text"><a href=""><i class="fas fa-eye-slash" ></i></a></div></div>';
+					}
 				}
 
 				else if($setting['type'] === 'textarea') {
diff --git a/system/templates/admin.settings.html.twig b/system/templates/admin.settings.html.twig
index 89a38a95..e0f5d94b 100644
--- a/system/templates/admin.settings.html.twig
+++ b/system/templates/admin.settings.html.twig
@@ -109,3 +109,26 @@
 		});
 	});
 </script>
+<script>
+{% for key, value in settings %}
+	{% if value.type == 'password' %}
+			$(function () {
+				$('#show-hide-{{ key}} a').on('click', function(event) {
+					event.preventDefault();
+
+					const $showHideIcon = $('#show-hide-{{ key}} i');
+					const $showHideInput = $('#show-hide-{{ key }} input');
+					if($showHideInput.attr('type') === 'text'){
+						$showHideInput.attr('type', 'password');
+						$showHideIcon.addClass('fa-eye-slash');
+						$showHideIcon.removeClass('fa-eye');
+					}else if($showHideInput.attr("type") === 'password'){
+						$showHideInput.attr('type', 'text');
+						$showHideIcon.removeClass('fa-eye-slash');
+						$showHideIcon.addClass('fa-eye');
+					}
+				});
+			});
+	{% endif %}
+{% endfor %}
+</script>