From 87bbd023c9863824ae178dd1c29d005d35313fcd Mon Sep 17 00:00:00 2001
From: FractalParadigm <taylorjamescourage@gmail.com>
Date: Mon, 10 Mar 2025 12:52:45 -0400
Subject: [PATCH] Improved account creation on mobile layouts

---
 create_account.php                |  9 +++++++++
 scripts/user_management.js        |  4 ++--
 styles/user_management.css        | 26 --------------------------
 styles/user_management_mobile.css | 31 +++++++++++++++++++++++++++++++
 user/account.php                  |  9 +++++++++
 5 files changed, 51 insertions(+), 28 deletions(-)
 create mode 100644 styles/user_management_mobile.css

diff --git a/create_account.php b/create_account.php
index fbe5e88..7a8053c 100644
--- a/create_account.php
+++ b/create_account.php
@@ -44,6 +44,15 @@ try {  // Try opening the SQL database connection
         <script>verifyPageInFrame()</script>
         <?php include ("admin/db_config.php");?> <!-- Our password-length variable is stored here -->
         <script src="/scripts/user_management.js"></script>
+        <script>
+            var head = document.getElementsByTagName('HEAD')[0];
+            var link = document.createElement('link');
+            link.rel = "stylesheet";
+            if (parent.window.screen.width >= 360 && window.screen.width <= 1024) {
+                link.href = "/styles/user_management_mobile.css";
+            }
+            head.appendChild(link);
+        </script>
         <title>USER CREATION FORM</title>
         <script>var userList = <?php echo json_encode($userList); ?>; // Convert array from PHP to JS</script>
     </head>
diff --git a/scripts/user_management.js b/scripts/user_management.js
index 8fff5a2..74a3b78 100644
--- a/scripts/user_management.js
+++ b/scripts/user_management.js
@@ -121,13 +121,13 @@ function usernameConfirm() {
     } else if (listOfUsers.includes(username)) {
         document.getElementById("confirmUsername").style.visibility = "visible";
         document.getElementById("confirmUsername").style.color = "red";
-        document.getElementById("confirmUsername").innerHTML = "Name Taken";
+        document.getElementById("confirmUsername").innerHTML = "Taken";
         document.getElementById("username").style.border = "2px solid red";
         return false; // we return false for a match - a match is not what we want!
     } else if (!listOfUsers.includes(username)) {
         document.getElementById("confirmUsername").style.visibility = "visible";
         document.getElementById("confirmUsername").style.color = "green";
-        document.getElementById("confirmUsername").innerHTML = "Name Available!";
+        document.getElementById("confirmUsername").innerHTML = "";
         document.getElementById("username").style.border = "1px solid green";
         return true; // this means the user does not already exist and is good to go
     }
diff --git a/styles/user_management.css b/styles/user_management.css
index 02bf997..c18e4ab 100644
--- a/styles/user_management.css
+++ b/styles/user_management.css
@@ -311,29 +311,3 @@
     width: 350px;
     margin: auto;
 }
-
-
-@media only screen and (min-width: 360px) and (max-width: 1024px) {
-
-    #createAccountPanel {
-        width: 275px;
-    }
-    
-    #createAccountBody {
-        width: 275px;
-    }
-
-    #userForm input[type="password"] {
-        margin: 2% 2%;
-        width: 170px;
-    }
-    #userForm input[type="text"] {
-        margin: 2% 2%;
-        width: 170px;
-    }
-
-    #displayPassword {
-        padding: 0 0 0 5px;
-    }
-
-}
diff --git a/styles/user_management_mobile.css b/styles/user_management_mobile.css
new file mode 100644
index 0000000..bf02cf4
--- /dev/null
+++ b/styles/user_management_mobile.css
@@ -0,0 +1,31 @@
+#createAccountPanel {
+    width: 275px;
+}
+
+#createAccountBody {
+    width: 275px;
+}
+
+#userForm input[type="password"] {
+    margin: 2% 2%;
+    width: 170px;
+}
+#userForm input[type="text"] {
+    margin: 2% 2%;
+    width: 170px;
+}
+
+#displayPassword {
+    padding: 0 0 0 5px;
+}
+
+#matchingPasswords  {
+    visibility: hidden !important;
+    height: 0;
+    width: 0;
+}
+#matchingPasswordsText  {
+    visibility: hidden !important;
+    height: 0;
+    width: 0;
+}
\ No newline at end of file
diff --git a/user/account.php b/user/account.php
index b8c2c83..a13c147 100644
--- a/user/account.php
+++ b/user/account.php
@@ -64,6 +64,15 @@ try {  // Try opening the SQL database connection
         <script src="/scripts/tools.js"></script>
         <script src="/scripts/user_management.js"></script>
         <script>verifyPageInFrame()</script>
+        <script>
+            var head = document.getElementsByTagName('HEAD')[0];
+            var link = document.createElement('link');
+            link.rel = "stylesheet";
+            if (parent.window.screen.width >= 360 && window.screen.width <= 1024) {
+                link.href = "/styles/user_management_mobile.css";
+            }
+            head.appendChild(link);
+        </script>
         <title>User Account Management</title>
     </head>