From af2403f1918845e8af3d9fa7708623eef6aa427e Mon Sep 17 00:00:00 2001
From: Roman Kelesidis <roman25052006.kelesh@gmail.com>
Date: Tue, 11 Mar 2025 22:14:28 +0700
Subject: [PATCH] refactor: Password generation (#1847)

* refactor: Password generation

* Update main.js

* Update usercp_register.tpl

* Update main.js

* Updated

* Update main.js
---
 styles/js/main.js                            | 36 ++++++++++++++------
 styles/templates/default/usercp_register.tpl |  4 +--
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/styles/js/main.js b/styles/js/main.js
index c195ceed4..6c6f5489c 100644
--- a/styles/js/main.js
+++ b/styles/js/main.js
@@ -460,19 +460,33 @@ $(document).ready(function () {
 /**
  * Autocomplete password
  **/
-var array_for_rand_pass = ["a", "A", "b", "B", "c", "C", "d", "D", "e", "E", "f", "F", "g", "G", "h", "H", "i", "I", "j", "J", "k", "K", "l", "L", "m", "M", "n", "N", "o", "O", "p", "P", "q", "Q", "r", "R", "s", "S", "t", "T", "u", "U", "v", "V", "w", "W", "x", "X", "y", "Y", "z", "Z", 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-var array_rand = function (array) {
-  var array_length = array.length;
-  var result = Math.random() * array_length;
-  return Math.floor(result);
-};
+function generatePassword(length) {
+  const lowercaseChars = "abcdefghijklmnopqrstuvwxyz";
+  const uppercaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  const numberChars = "0123456789";
+  const specialChars = "!@#$%^&*()_+~`|}{[]:;?><,./-=";
 
-var autocomplete = function (noCenter) {
-  var string_result = ""; // Empty string
-  for (var i = 1; i <= 8; i++) {
-    string_result += array_for_rand_pass[array_rand(array_for_rand_pass)];
+  let password = [
+    getRandomChar(lowercaseChars),
+    getRandomChar(uppercaseChars),
+    getRandomChar(numberChars),
+    getRandomChar(specialChars)
+  ];
+
+  for (let i = 4; i < length; i++) {
+    password.push(getRandomChar(lowercaseChars));
   }
 
+  password = password.sort(() => Math.random() - 0.5);
+  return password.slice(0, length).join("");
+}
+
+function getRandomChar(charSet) {
+  return charSet[Math.floor(Math.random() * charSet.length)];
+}
+
+var autocomplete = function (noCenter = false, passwordLength = 10) {
+  let string_result = generatePassword(passwordLength);
   var _popup_left = (Math.ceil(window.screen.availWidth / 2) - 150);
   var _popup_top = (Math.ceil(window.screen.availHeight / 2) - 50);
 
@@ -491,7 +505,7 @@ var autocomplete = function (noCenter) {
 
 $(document).ready(function () {
   $("span#autocomplete").click(function () {
-    autocomplete();
+    autocomplete(false, $(this).data('password-length'));
   });
 
   var _X, _Y;
diff --git a/styles/templates/default/usercp_register.tpl b/styles/templates/default/usercp_register.tpl
index 596658d62..a19d17371 100644
--- a/styles/templates/default/usercp_register.tpl
+++ b/styles/templates/default/usercp_register.tpl
@@ -41,7 +41,7 @@
         <div class="title">{L_YOUR_NEW_PASSWORD}</div>
         <div>
             <input value="" autocomplete="off" type="text"/>
-            <span class="regenerate" title="{L_REGENERATE}" onclick="autocomplete(true);"></span>
+            <span class="regenerate" title="{L_REGENERATE}" onclick="autocomplete(true, {#PASSWORD_MIN_LENGTH#});"></span>
         </div>
     </div>
 </div>
@@ -85,7 +85,7 @@
         <tr>
             <td class="prof-title"><!-- IF EDIT_PROFILE -->{L_NEW_PASSWORD}: * <br/><h6>{L_PASSWORD_IF_CHANGED}</h6><!-- ELSE -->{L_PASSWORD}: *<!-- ENDIF --></td>
             <td>
-                <input id="pass" type="<!-- IF SHOW_PASS -->text<!-- ELSE -->password<!-- ENDIF -->" name="new_pass" size="35" maxlength="32" value=""/>&nbsp;<span id="autocomplete" title="{L_AUTOCOMPLETE}">&#9668;</span>&nbsp;<i class="med">{PASSWORD_LONG}</i>
+                <input id="pass" type="<!-- IF SHOW_PASS -->text<!-- ELSE -->password<!-- ENDIF -->" name="new_pass" size="35" maxlength="32" value=""/>&nbsp;<span id="autocomplete" data-password-length="{#PASSWORD_MIN_LENGTH#}" title="{L_AUTOCOMPLETE}">&#9668;</span>&nbsp;<i class="med">{PASSWORD_LONG}</i>
             </td>
         </tr>
         <tr>