index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Access File</title>
</head>
<body>
    <h2>Enter Password to Access the File</h2>
    <input type="password" id="password" placeholder="Enter Password">
    <button onclick="accessFile()">Submit</button>
    <div id="linkContainer" style="display:none;">
        <p>Access your file here: <a id="fileLink" href="#" target="_blank">Download File</a></p>
    </div>

    <script>
        async function accessFile() {
            const password = document.getElementById("password").value;
            const response = await fetch("https://us-central1-mersive-techops-project.cloudfunctions.net/generateSignedUrl?bucketName=mersive-yocto-dev&fileName=_20241002_032753.tar.gz", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ password })
            });

            const data = await response.json();

            if (data.success) {
                document.getElementById("fileLink").href = data.signedUrl;
                document.getElementById("linkContainer").style.display = "block";
            } else {
                alert("Incorrect password. Please try again.");
            }
        }
    </script>
</body>
</html>