How to hide my userInfo element

Moralis General
#1

I want to hide my userInfo element before a user connect his/her wallet and i want it to show when the user click on Profile button.
Here is my main.js code below.

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";
    } else {
        document.getElementById("btnConnect").style.display = "none";
        document.getElementById("btnUserInfo").style.display = "block";
        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) {
        showElement(userInfo);
    } else {
        login();
    }
}

document.getElementById("btnConnect").onclick = login;
document.getElementById("btnLogout").onclick = logOut;
document.getElementById("btnUserInfo").onclick = openuserInfo;

const userConnectButton = document.getElementById("btnConnect");
const userProfileButton = document.getElementById("btnUserInfo");

const userInfo = document.getElementById("userInfo");
#2

This is my html code below.

<!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>
#3

You can add code to hide it and show it in this hide_buttons function, similar on how you did it with those buttons you can do it for user info too:
document.getElementById("userInfo").style.display = "none"; should hide it
and
document.getElementById("userInfo").style.display = "block"; should show it

#4

Not working bro, i used the same method

#5

I would expect it to work, can you paste the new code for hide_buttons function?

#6 
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("btnConnect").style.display = "none";
        document.getElementById("btnUserInfo").style.display = "block";
        document.getElementById("btnLogout").style.display = "block";
        document.getElementById("userInfo").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) {
        showElement(userInfo);
    } else {
        login();
    }
}

document.getElementById("btnConnect").onclick = login;
document.getElementById("btnLogout").onclick = logOut;
document.getElementById("btnUserInfo").onclick = openuserInfo;
#7

Works perfectly fine for me.

You have one typo in openuserInfo() function

its Moralis.User.current() not Moralis.user.current().

#8

i have corrected the typo yet it’s not working,

#9

You will need to define showElement first.

function showElement(param) {
// your logic here
}
#10

Should i add this code to the hide_button function?

#11

No as a function itself.

First go through your mind and think of what do you want to display/show.
Then define the function properly and pass in your argument. In this case your arg is userInfo but I cannot really see from where you are getting userInfo .

#12

Where do i need to add this code?

#13

within the script tag

#14

Can i send image so you can see what am facing?

1 Like
#15

You can use this instead of that function

#16

20211022_114251
20211022_1142511366×768 103 KB

My User Profile is not hidden when i added this code below.

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("btnConnect").style.display = "none";
        document.getElementById("btnUserInfo").style.display = "block";
        document.getElementById("btnLogout").style.display = "block";
        document.getElementById("userInfo").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) {
        showElement("userInfo");
    } else {
        login();
    }
}

function showElement() {
    userInfo;
}

document.getElementById("btnConnect").onclick = login;
document.getElementById("btnLogout").onclick = logOut;
document.getElementById("btnUserInfo").onclick = openuserInfo;
document.getElementById("userInfo");
#17

I use it but it is not hidden my User Profile, it’s only hide the Profile button

#18

Ok let me ask you please. What should the function showElement do?

Getting the userInfo and displaying it? Or just make an element visible?

#19

I am completely lost :grimacing:

#20

Only an element visible is my assumption