Improved account creation on mobile layouts

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>

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
     }

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;
-    }
-
-}

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;
+}

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>