my web page, login page

syedH1.php

+<?php
+//Syed 3: POST
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    if (empty($_POST["username"]) || empty($_POST["password"])) {
+        //Syed 4: Alert for credentials
+        echo "<script>alert('Username and Password Required!');</script>";
+    } else {
+        $username = $_POST["username"];
+        $password = $_POST["password"];
+
+        if ($username === "user" && $password === "pass") {
+            //Syed 5: set cookie with said method
+            $cookieValue = bin2hex(random_bytes(16));
+
+            setcookie('__Host-session', $cookieValue, time() + 3600, '/', '', true, true);
+            echo "Hello user!<br>";
+            echo '<form method="GET" action="?action=logout"><button type="submit">Logout</button></form>';
+        } else {
+            //Syed 6: Login incorrect
+            echo "Login Incorrect!<br>";
+            showLoginForm();
+        }
+    }
+}
+
+elseif ($_SERVER["REQUEST_METHOD"] == "GET") {
+    //Syed 7:  32 hex: display "Hello user!"
+    if (isset($_COOKIE['__Host-session']) && strlen($_COOKIE['__Host-session']) == 32 && ctype_xdigit($_COOKIE['__Host-session'])) {
+        echo "Hello user!<br>";
+        echo '<form method="GET" action="?action=logout"><button type="submit">Logout</button></form>';
+    }
+    //Syed 8: LOGOUT with cookie delete ; set the time in past to delete
+    elseif (isset($_GET['action']) && $_GET['action'] == 'logout') {
+        setcookie('__Host-session', '', time() - 3600, '/');
+        header('Location: ' . $_SERVER['PHP_SELF']);
+        exit();
+    }
+    else {
+        showLoginForm();
+    }
+}
+//Syed 9: only GET and POST method
+else {
+    http_response_code(405);
+    echo "Only GET and POST methods are supported.";
+    exit();
+}
+//Syed 1: Login Form
+function showLoginForm() {
+    echo '
+    <form method="POST" onsubmit="return validateForm()">
+        <!-- SYED 2:  Username and Password -->
+        <label for="username">Username:</label><br>
+        <input type="text" id="username" name="username"><br><br>
+        <label for="password">Password:</label><br>
+        <input type="password" id="password" name="password"><br><br>
+        <input type="submit" value="Login">
+    </form>
+    <script>
+        function validateForm() {
+            var username = document.getElementById("username").value;
+            var password = document.getElementById("password").value;
+            if (username === "" || password === "") {
+                alert("username and password required!");
+                return false;
+            }
+            return true;
+        }
+    </script>';
+}
+?>