I want to hide my User Profile section before any user connect his/her wallet then after they connect their wallet, they should see only the Profile button and when they click the Profile button, the User Profile should display. Thanks
I want to hide my User Profile section before any user connect his/her wallet then after they connect their wallet, they should see only the Profile button and when they click the Profile button, the User Profile should display.
async function hide_buttons() {
let user = await Moralis.User.current();
if (!user) {
document.getElementById("btnConnect").style.display = "block";
document.getElementById("btnUserInfo").style.display = "none";
document.getElementById("btnLogout").style.display = "none";
document.getElementById("userInfo").style.display = "none";
} else {
document.getElementById("btnUserInfo").style.display = "block";
document.getElementById("btnConnect").style.display = "none";
document.getElementById("btnLogout").style.display = "block";
}
}
async function openuserInfo() {
user = await Moralis.User.current();
if (user) {
document.getElementById("userInfo").style.display = "block";
} else {
login();
}
}
I will try it out, if it works, i will let you know
After adding the code to my code, the User Profile Section is still showing whereas it should be hidden before the user connect to their metamask.
This is the code when i added it to my code.
const serverUrl = "https://mzrhanzmogsu.moralishost.com:2053/server";
const appId = "gFnTLmvgt8ZDUYMXF80FIonsCRqosKxXcfzmO2bM";
Moralis.start({ serverUrl, appId });
async function hide_buttons() {
let user = await Moralis.User.current();
if (!user) {
document.getElementById("btnConnect").style.display = "block";
document.getElementById("btnUserInfo").style.display = "none";
document.getElementById("btnLogout").style.display = "none";
document.getElementById("userInfo").style.display = "none";
} else {
document.getElementById("btnUserInfo").style.display = "block";
document.getElementById("btnConnect").style.display = "none";
document.getElementById("btnLogout").style.display = "block";
}
}
hide_buttons();
async function login() {
let user = Moralis.User.current();
if (!user) {
user = await Moralis.authenticate({
signingMessage: "Welcome to GrandPaDoge NFT MarketPlace",
});
}
console.log("logged in user:", user);
hide_buttons();
const isWeb3Active = Moralis.ensureWeb3IsInstalled();
if (isWeb3Active) {
console.log("Activated");
} else {
async function enable() {
await Moralis.enable();
}
}
}
async function logOut() {
await Moralis.User.logOut();
console.log("logged out");
hide_buttons();
}
async function openuserInfo() {
user = await Moralis.User.current();
if (user) {
document.getElementById("userInfo").style.display = "block";
} else {
login();
}
}
document.getElementById("btnConnect").onclick = login;
document.getElementById("btnLogout").onclick = logOut;
document.getElementById("btnUserInfo").onclick = openuserInfo;
I haven’t connected my wallet but the user Profile is showing, which i want to hide it until the user connect their wallet and click on Profile button before it should display
This is the User Profile still showing,
Can you please post html file
1 Like
<!DOCTYPE html>
<html>
<!-- HEADER STARTS HERE -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<!-- Favicons -->
<link rel="icon" type="image/png" href="icon/favicon-32x32.png" sizes="32x32" />
<link rel="apple-touch-icon" href="icon/favicon-32x32.png" />
<meta name="description" content="MrGrandpa doge, Is the ORIGINAL OG of crypto.
He is a smooth talking r&b singing 🎤 playboy,
who believes that bitcoin is the most secure investment in the crypto universe,
don't get him wrong he's a strong believer of doge coin as well." />
<meta name="keywords" content="MrGrandPaDoge #MRBTC" />
<meta name="Developer" content="Isaiah Fadakinte" />
<meta name="Owner" content="Joey Duque" />
<title>
MrGrandpadoge NFT Marketplace | No 1 first Multi Network MarketPlace
</title>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://npmcdn.com/moralis@latest/dist/moralis.js"></script>
</head>
<!-- HEADER STOPS HERE -->
<!-- BODY STARTS HERE -->
<body>
<h1>MrGrandPaDoge NFT Marketplace</h1>
<button id="btnConnect">Connect wallet</button>
<button id="btnUserInfo">Profile</button>
<! -- adding the UserInfo details like Email & username -->
<div id="userInfo"></div>
<h4>User Profile</h4>
<input type="text" id="txtUsername" required placeholder="Enter username" />
<input type="text" id="txtEmail" placeholder="Enter email" />
<small>Optional</small>
<! -- adding the avatar file -->
<img src="" id="imgAvatar" alt="" />
<label for="fileAvatar">Select Avatar</label>
<input type="file" id="fileAvatar" />
<button id="btnLogout">LogOut</button>
<button id="btnCloseUserInfo">Close</button>
<button id="btnSaveUserInfo">Save</button>
<script src="js/main.js"></script>
</body>
<! --BODY ENDS HERE -->
</html>
Are you sure the user did the logout?
1 Like
User is not connected yet but the User Profile is showing
<button id="btnUserInfo">Profile</button>
<! -- adding the UserInfo details like Email & username -->
<div id="userInfo"></div> <-- YOU HAVE NOTHING INSIDE HERE
<h4>User Profile</h4>
<input type="text" id="txtUsername" required placeholder="Enter username" />
<input type="text" id="txtEmail" placeholder="Enter email" />
<small>Optional</small>
<! -- adding the avatar file -->
<img src="" id="imgAvatar" alt="" />
<label for="fileAvatar">Select Avatar</label>
<input type="file" id="fileAvatar" />
<button id="btnLogout">LogOut</button>
<button id="btnCloseUserInfo">Close</button>
<button id="btnSaveUserInfo">Save</button>
You have the whole content not in the userInfo DIV. Everything has to be inside the userInfo div tag. Wrap it around every other element that is supposed be in userInfo
The logout button and the Profile button is hidden before the user connect their wallet while the User Profile Section is still showing when the user is not connected yet
What should be there?
You don’t understand what i mean, What i want to do is hide User Profile Section which contains the Username and password until the user clicked on the button called Profile then when they clicked on it, it should show the User Profile which contains ( Username and Password )
User Profile should be hidden in the entire code right from when the user open the frontpage until they click on Profile button
We understand you. But the things you want to hide are not inside the div tag userInfo. Thats why it will be shown everytime 
<!DOCTYPE html>
<html>
<!-- HEADER STARTS HERE -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<!-- Favicons -->
<link rel="icon" type="image/png" href="icon/favicon-32x32.png" sizes="32x32" />
<link rel="apple-touch-icon" href="icon/favicon-32x32.png" />
<meta name="description" content="MrGrandpa doge, Is the ORIGINAL OG of crypto.
He is a smooth talking r&b singing 🎤 playboy,
who believes that bitcoin is the most secure investment in the crypto universe,
don't get him wrong he's a strong believer of doge coin as well." />
<meta name="keywords" content="MrGrandPaDoge #MRBTC" />
<meta name="Developer" content="Isaiah Fadakinte" />
<meta name="Owner" content="Joey Duque" />
<title>
MrGrandpadoge NFT Marketplace | No 1 first Multi Network MarketPlace
</title>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://npmcdn.com/moralis@latest/dist/moralis.js"></script>
</head>
<!-- HEADER STOPS HERE -->
<!-- BODY STARTS HERE -->
<body>
<h1>MrGrandPaDoge NFT Marketplace</h1>
<button id="btnConnect">Connect wallet</button>
<button id="btnUserInfo">Profile</button>
<! -- adding the UserInfo details like Email & username -->
<div id="userInfo">
<h4>User Profile</h4>
<input type="text" id="txtUsername" required placeholder="Enter username" />
<input type="text" id="txtEmail" placeholder="Enter email" />
<small>Optional</small>
<! -- adding the avatar file -->
<img src="" id="imgAvatar" alt="" />
<label for="fileAvatar">Select Avatar</label>
<input type="file" id="fileAvatar" />
<button id="btnLogout">LogOut</button>
<button id="btnCloseUserInfo">Close</button>
<button id="btnSaveUserInfo">Save</button>
</div>
<script src="js/main.js"></script>
<script>
const serverUrl = "https://mzrhanzmogsu.moralishost.com:2053/server";
const appId = "gFnTLmvgt8ZDUYMXF80FIonsCRqosKxXcfzmO2bM";
Moralis.start({ serverUrl, appId });
async function hide_buttons() {
let user = await Moralis.User.current();
if (!user) {
document.getElementById("btnConnect").style.display = "block";
document.getElementById("btnUserInfo").style.display = "none";
document.getElementById("btnLogout").style.display = "none";
document.getElementById("userInfo").style.display = "none";
} else {
document.getElementById("btnUserInfo").style.display = "block";
document.getElementById("btnConnect").style.display = "none";
document.getElementById("btnLogout").style.display = "block";
}
}
hide_buttons();
async function login() {
let user = Moralis.User.current();
if (!user) {
user = await Moralis.authenticate({
signingMessage: "Welcome to GrandPaDoge NFT MarketPlace",
});
}
console.log("logged in user:", user);
hide_buttons();
const isWeb3Active = Moralis.ensureWeb3IsInstalled();
if (isWeb3Active) {
console.log("Activated");
} else {
async function enable() {
await Moralis.enable();
}
}
}
async function logOut() {
await Moralis.User.logOut();
console.log("logged out");
hide_buttons();
}
async function openuserInfo() {
user = await Moralis.User.current();
if (user) {
document.getElementById("userInfo").style.display = "block";
} else {
login();
}
}
document.getElementById("btnConnect").onclick = login;
document.getElementById("btnLogout").onclick = logOut;
document.getElementById("btnUserInfo").onclick = openuserInfo;
</script>
</body>
<! --BODY ENDS HERE -->
</html>
This is your solution
I got it its a mistake, now the User Profile is hidden before the user connect his/her wallet, But its still showing after the user connected their wallet which it should show until the user clicked on Profile button.
i nearly see the </div> i’m so dumb. Thanks i have changed it now, but the User Profile shows after the wallect is connected whereas it should only show when the user clicked on Profile button
Copy my code Ive sent . This is what you were looking for
1 Like
Mehn you guys deserve to be the top solution community. I have seen my mistake and my problem is solved now. Thanks Moralis Community 
1 Like