I am unable to get userInfo and profile button not working - CLONE RARIBLE IN 24 HORS

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) {
        try {
            user = await Moralis.authenticate({
                signingMessage: "Welcome to GrandPaDoge NFT MarketPlace",
            });
        } catch (error) {
            alert(
                (error =
                    "Please consider installing Metamask to connect to MrGrandPaDoge 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();
    hide_buttons();
    if (user) {
        const email = user.get("email");
        if (email) {
            userEmailField.value = email;
        } else {
            userEmailField.value = "";
        }
        userUsernameField.value = user.get("username");
        const userAvatar = user.get("avatar");
        if (userAvatar) {
            userAvatarImg.src = userAvatar.url();
            document.getElementById("userAvatarImg").style.display = "block";
        } else {
            document.getElementById("userAvatarImg").style.display = "none";
        }
        document.getElementById("userInfo").style.display = "block";
    } else {
        login();
    }
}

async function saveUserInfo() {
    user.set("email", userEmailField.value);
    user.set("username", userUsernameField);

    if (userAvatarFile.files.length > 0) {
        const Avatar = new Moralis.File(avatar.jpg, userAvatarFile.files[0]);
    }
    user.set("avatar", avatar);
    await user.save();
    alert("User info saved successfully!");
    openuserInfo();
}

async function closeuserInfo() {
    user = await Moralis.User.current();
    hide_buttons();
    if (user) {
        document.getElementById("userInfo").style.display = "none";
    } else {
        logOut();
    }
}

document.getElementById("btnConnect").onclick = login;
document.getElementById("btnLogout").onclick = logOut;
document.getElementById("btnUserInfo").onclick = openuserInfo;
document.getElementById("btnCloseUserInfo").onclick = closeuserInfo;
document.getElementById("btnSaveUserInfo").onclick = saveUserInfo;

const userUsernameField = document.getElementById("txtUsername");
const userEmailField = document.getElementById("txtEmail");
const userAvatarImg = document.getElementById("imgAvatar");
const userAvatarFile = document.getElementById("fileAvatar");

Can you also add your html?

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/[email protected]/dist/web3.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/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 width="50px" height="50px" 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>
</body>
<! --BODY ENDS HERE -->

</html>

It looks like it doesnโ€™t work because it has an error here, it looks like you donโ€™t have that userAvatarImg element in your html.

You can open the browser console and look on what errors you have there.

I am getting this error in my console when i was trying to save the userinfo
Uncaught (in promise) ReferenceError: avatar is not defined at HTMLButtonElement.saveUserInfo (main.js:85)

that may be because you donโ€™t have an avatar and the script may stop at that error and that is why it doesnโ€™t work

here take a look at 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) {
        try {
            user = await Moralis.authenticate({
                signingMessage: "Welcome to GrandPaDoge NFT MarketPlace",
            });
        } catch (error) {
            alert(
                (error =
                    "Please consider installing Metamask to connect to MrGrandPaDoge 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();
    hide_buttons();
    if (user) {
        const email = user.get("email");
        if (email) {
            userEmailField.value = email;
        } else {
            userEmailField.value = "";
        }
        userUsernameField.value = user.get("username");
        const userAvatar = user.get("avatar");
        if (userAvatar) {
            userAvatarImg.src = userAvatar.url();
            document.getElementById("imgAvatar").style.display = "block";
        } else {
            document.getElementById("imgAvatar").style.display = "none";
        }
        document.getElementById("userInfo").style.display = "block";
    } else {
        login();
    }
}

async function saveUserInfo() {
    user.set("email", userEmailField.value);
    user.set("username", userUsernameField);

    if (userAvatarImg.files.length > 0) {
        const avatar = new Moralis.File("avatar.jpg", userAvatarImg.files[0]);
        user.set("avatar", avatar);
    }

    await user.save();
    alert("User info saved successfully!");
    openuserInfo();
}

async function closeuserInfo() {
    user = await Moralis.User.current();
    hide_buttons();
    if (user) {
        document.getElementById("userInfo").style.display = "none";
    } else {
        logOut();
    }
}

document.getElementById("btnConnect").onclick = login;
document.getElementById("btnLogout").onclick = logOut;
document.getElementById("btnUserInfo").onclick = openuserInfo;
document.getElementById("btnCloseUserInfo").onclick = closeuserInfo;
document.getElementById("btnSaveUserInfo").onclick = saveUserInfo;

const userUsernameField = document.getElementById("txtUsername");
const userEmailField = document.getElementById("txtEmail");
const userAvatarImg = document.getElementById("imgAvatar");

when i click on save button, it shows this error in my console

main.js:82 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')
    at HTMLButtonElement.saveUserInfo (main.js:82)

and what you have at that line 82 in your javascript file?

if (userAvatarImg.files.length > 0) {

This is my line 82 of the file

the looks like userAvatarImg.files is undefined. now you get a step back to see where you initialised userAvatarImg variable.

you can also use console.log(variable_name) to see what values have a variable in your code, or you can write directly in your browser console

what should i do to solve this?

i donโ€™t understand how to do that

Okay now i write on the console and it gives me this below

console.log(userAvatarImg)
VM422:1 <img width=โ€‹"50" height=โ€‹"50" src(unknown) id=โ€‹"imgAvatar" alt style=โ€‹"display:โ€‹ none;โ€‹">โ€‹
undefined

I think that if you remove/comment the part with avatar from you javascript code, then it will start to work.

Which part did you say i should remove?

this part, or you can comment that line from else initially

How do i comment each part?