Update

API Register.js

@@ -12,6 +12,9 @@ export async function registerRequest(username, password) {
     try {
         const response = await fetch(`${BASE_URL}Register.php`, {
             method: "POST",
+            headers: {
+                "Accept": "application/json"
+            },
             body: formData
         });
         return await response.json();

Login.css

@@ -270,40 +270,44 @@ input::placeholder {
     }
 }
 
-@media (max-width: 768px) {
-    .container {
-        padding: 40px 30px;
-        width: 95%;
+/* Autocomplete/Datalist Styling */
+input::-webkit-calendar-picker-indicator {
+    filter: invert(1);
 }
 
-    h1 {
-        font-size: 1.6rem;
-        letter-spacing: 2px;
-        margin-bottom: 30px;
+/* Styling untuk browser autocomplete */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+    -webkit-text-fill-color: #fff;
+    -webkit-box-shadow: 0 0 0px 1000px rgba(50, 50, 70, 0.5) inset;
+    transition: background-color 5000s ease-in-out 0s;
+    border: 2px solid rgba(100, 100, 120, 0.3);
 }
 
-    input {
-        padding: 12px 16px;
-        font-size: 15px;
+input:-webkit-autofill:focus {
+    border-color: #00d9ff;
 }
 
-    .btn {
-        padding: 13px;
-        font-size: 16px;
-        letter-spacing: 1.5px;
+/* Styling untuk datalist dropdown - terbatas karena browser restrictions */
+datalist {
+    background-color: rgba(30, 0, 50, 0.95);
 }
 
-    .register-link {
-        font-size: 13px;
+option {
+    background-color: rgba(30, 0, 50, 0.95);
+    color: #fff;
+    padding: 10px;
 }
 
-    .modal-content {
-        padding: 30px 25px;
+/* Untuk Firefox */
+input::-moz-list-thumbnail {
+    background-color: rgba(30, 0, 50, 0.95);
 }
 
-    .modal-content h2 {
-        font-size: 1.5rem;
-    }
+/* Custom styling untuk dropdown suggestion */
+input[list]::-webkit-list-button {
+    color: #00d9ff;
 }
 
 @media (max-width: 480px) {

Register.css

@@ -246,6 +246,46 @@ input::placeholder {
     box-shadow: 0 0 30px #00eaff;
 }
 
+/* Autocomplete/Datalist Styling */
+input::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+}
+
+/* Styling untuk browser autocomplete */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+    -webkit-text-fill-color: #fff;
+    -webkit-box-shadow: 0 0 0px 1000px rgba(50, 50, 70, 0.5) inset;
+    transition: background-color 5000s ease-in-out 0s;
+    border: 2px solid rgba(100, 100, 120, 0.3);
+}
+
+input:-webkit-autofill:focus {
+    border-color: #00d9ff;
+}
+
+/* Styling untuk datalist dropdown - terbatas karena browser restrictions */
+datalist {
+    background-color: rgba(30, 0, 50, 0.95);
+}
+
+option {
+    background-color: rgba(30, 0, 50, 0.95);
+    color: #fff;
+    padding: 10px;
+}
+
+/* Untuk Firefox */
+input::-moz-list-thumbnail {
+    background-color: rgba(30, 0, 50, 0.95);
+}
+
+/* Custom styling untuk dropdown suggestion */
+input[list]::-webkit-list-button {
+    color: #00d9ff;
+}
+
 /* Responsive */
 @media (max-width: 480px) {
     .container {

Register.html

@@ -17,6 +17,7 @@
       <input
         type="text"
         id="username"
+        name="username"
         placeholder="Username"
         required
       />
@@ -26,6 +27,7 @@
       <input
         type="password"
         id="password"
+        name="password"
         placeholder="Password"
         required
       />
@@ -35,6 +37,7 @@
       <input
         type="password"
         id="confirmPassword"
+        name="confirmPassword"
         placeholder="Confirm Password"
         required
       />