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) {
+/* Autocomplete/Datalist Styling */
-    .container {
+input::-webkit-calendar-picker-indicator {
-        padding: 40px 30px;
+    filter: invert(1);
-        width: 95%;
+}
-    }
 
-    h1 {
+/* Styling untuk browser autocomplete */
-        font-size: 1.6rem;
+input:-webkit-autofill,
-        letter-spacing: 2px;
+input:-webkit-autofill:hover,
-        margin-bottom: 30px;
+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 {
+input:-webkit-autofill:focus {
-        padding: 12px 16px;
+    border-color: #00d9ff;
-        font-size: 15px;
+}
-    }
 
-    .btn {
+/* Styling untuk datalist dropdown - terbatas karena browser restrictions */
-        padding: 13px;
+datalist {
-        font-size: 16px;
+    background-color: rgba(30, 0, 50, 0.95);
-        letter-spacing: 1.5px;
+}
-    }
 
-    .register-link {
+option {
-        font-size: 13px;
+    background-color: rgba(30, 0, 50, 0.95);
-    }
+    color: #fff;
+    padding: 10px;
+}
 
-    .modal-content {
+/* Untuk Firefox */
-        padding: 30px 25px;
+input::-moz-list-thumbnail {
-    }
+    background-color: rgba(30, 0, 50, 0.95);
+}
 
-    .modal-content h2 {
+/* Custom styling untuk dropdown suggestion */
-        font-size: 1.5rem;
+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

@@ -12,36 +12,39 @@
     <div class="container">
       <h1>REGISTER</h1>
 
-      <form id="registerForm">
+    <form id="registerForm">
-        <div class="input-group">
+    <div class="input-group">
-          <input
+      <input
-            type="text"
+        type="text"
-            id="username"
+        id="username"
-            placeholder="Username"
+        name="username"
-            required
+        placeholder="Username"
-          />
+        required
-        </div>
+      />
+    </div>
 
-        <div class="input-group">
+    <div class="input-group">
-          <input
+      <input
-            type="password"
+        type="password"
-            id="password"
+        id="password"
-            placeholder="Password"
+        name="password"
-            required
+        placeholder="Password"
-          />
+        required
-        </div>
+      />
+    </div>
 
-        <div class="input-group">
+    <div class="input-group">
-          <input
+      <input
-            type="password"
+        type="password"
-            id="confirmPassword"
+        id="confirmPassword"
-            placeholder="Confirm Password"
+        name="confirmPassword"
-            required
+        placeholder="Confirm Password"
-          />
+        required
-        </div>
+      />
+    </div>
 
-        <button type="submit" class="btn">Register</button>
+    <button type="submit" class="btn">Register</button>
-      </form>
+    </form>
 
       <div class="register-link">
         Already Have An Account?