HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
</head>
<body>
<button id="btn-login">Connect Your MetaMask</button>
<button id="btn-profile">Profile</button>
<div id="userInfo">
<h4>User Profile</h4>
<input type="text" id="txtUsername" required placeholder="Enter Username">
<input type="text" id="txtEmail" required placeholder="Enter Email Address">
<small>Optional</small>
<img src="" id="imgAvatar" alt="">
<label for="fileAvatar">Select Avatar</label>
<input type="file" id="fileAvatar">
<button id="btn-logout">Logout</button>
<button id="btn-CloseUserInfo">Close</button>
<button id="btn-SaveUserInfo">Save</button>
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
</html>
Index.js:
MoralisWeb3 = serverUrl = "https://w6j9c9lnnoio.usemoralis.com:2053/server"; //Server url from moralis.io
MoralisWeb3 = appId = "wZsf07rYLfsPudepzTdjvrAsYfgWAQb0BFbnTFJI"; // Application id from moralis.io
async function initializeApp() {
hideElement(userInfo)
await Moralis.start({ serverUrl, appId });
await Moralis.enableWeb3();
currentUser = Moralis.User.current();
if (!currentUser){
currentUser = await Moralis.Web3.authenticate();
}
initUser = async () => {
if (await Moralis.User.current()) {
hideElement(userConnectButton);
showElement(userProfileButton);
}else {
showElement(userConnectButton);
hideElement(userProfileButton);
}
}
login = async () => {
try {
await Moralis.Web3.authenticate();
initUser();
} catch (error) {
alert(error)
}
}
logout = async () => {
await Moralis.User.logOut();
hideElement(userInfo)
initUser();
}
openUserInfo = async () => {
user = await Moralis.User.current();
if (user){
showElement(userInfo);
}else{
login();
}
}
hideElement = (element) => element.style.display = "none";
showElement = (element) => element.style.display = "block";
const userConnectButton = document.getElementById("btn-login");
userConnectButton.onclick = login;
const userProfileButton = document.getElementById("userInfo");
userProfileButton.onclick = openUserInfo;
const userInfo = document.getElementById("userInfo");
document.getElementById("btn-CloseUserInfo").onclick = () => hideElement(userInfo);
document.getElementById("btn-logout").onclick = logout;
document.getElementById("userInfo").style.display = "none";
}
initializeApp();
