maybe this button is where you want to look at? or something near this button
1 Like
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");
const userUsernameField = document.getElementById("txtUsername");
const userEmailField = document.getElementById("txtEmail");
const userAvatarImg = document.getElementById("imgAvatar");
const userAvatarFile = document.getElementById("fileAvatar");
document.getElementById("btn-CloseUserInfo").onclick = () =>
hideElement(userInfo);
document.getElementById("btn-logout").onclick = logout;
document.getElementById("btn-SaveUserInfo").onclick = saveUserInfo;
These are already used
what you expect this code to do?
when you click on the profile button it shows the userinfo on your profile
and where is the profile button in html, what id it has?
<button id="btn-login">Connect Your MetaMask</button>
<button id="btn-profile">Profile</button>
and how is that here it is using “userInfo”?
I fixed the code again after watching the video again, it is still no saving the profile or giving the alert when i checked the console this appeared
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) {
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();
showElement(userAvatarImg);
} else {
hideElement(userAvatarImg);
}
showElement(userInfo);
} else {
login();
}
}
saveUserInfo = async () => {
user.set("email", userEmailField.value);
user.set("username", userUsernameField.value);
if (userAvatarFile.files.length > 0) {
const avatar = new Moralis.File("avatar.jpg", userAvatarFile.files[0]);
user.set('avatar', avatar);
}
await user.save();
prompt("Changes saved successfully!");
openUserInfo();
}
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("btn-profile");
userProfileButton.onclick = openUserInfo;
const userInfo = document.getElementById("userInfo");
const userUsernameField = document.getElementById("txtUsername");
const userEmailField = document.getElementById("txtEmail");
const userAvatarImg = document.getElementById("imgAvatar");
const userAvatarFile = document.getElementById("fileAvatar");
document.getElementById("btn-CloseUserInfo").onclick = () =>
hideElement(userInfo);
document.getElementById("btn-logout").onclick = logout;
document.getElementById("btn-SaveUserInfo").onclick = saveUserInfo;
}
initializeApp();
you may have to save the file as I mentioned before
I mean, did you save the avatar first? I don’t see that in your code.
no i did not save it, how to do it?
how to save the avatar img?