Basically I am trying to only give access to a certain page if a user has a certain item. After that is authenticated, the new page is only able to show basic HTML and CSS styling. The JavaScript does not seem to be loading at all... This is my index.html
const revealMsg = async () => {
var signature = await web3.eth.personal.sign("Message to sign", account)
console.log(signature)
var res = await fetch('/exclusive?signature=' + signature)
//console.log(res)
var body = await res.text()
//console.log(body);
if (body != 'FALSE') {
//console.log(body)
document.querySelector('html').innerHTML = body;
} else {
//alert you do not have item
alert("You do not have the item!");
}
}
This is my server.js
app.get('/exclusive', async (req, res) => {
isMember = false
var address = await web3.eth.accounts.recover("Message to sign", req.query.signature);
console.log(address)
var balanceOne = Number(await contractOne.methods.balanceOf(address).call())
var balanceTwo = Number(await contractTwo.methods.balanceOf(address).call())
console.log("Balance 1: ", balanceOne)
console.log("Balance 2: ", balanceTwo)
if(balanceOne > 0 || balanceTwo > 0){
isMember = true;
res.sendFile(path.join(__dirname, '/exclusive.html'))
}else{
res.send("FALSE")
}
})
And here is the exclusive page I am trying to test simple JS things
<!DOCTYPE html>
<html>
<head>
<title>Exclusive Page</title>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<style>
body {
background-color: red;
}
</style>
<h1>Hello World</h1>
<button onclick="clear()">Lost Tapes</button>
<button id="clear2">Clear2</button>
<script>
const clear = () => {
console.log('clear')
}
function clear2() {
console.log('clear2');
}
document.getElementById("clear2").onclick = clear2
</script>
</body>
</html>