yeah, i know about the authentication problem, will fix it later
if you look in your server dashboard in User table, you will see the usernames that are saved in DB, and they look random there too, but that is the username that is generated automatically on first authentication.
can you send me the link on codesandbox of the code because the UI of the website is a bit confusing.
I created a new one now: https://codesandbox.io/s/competent-jackson-ifhu2?file=/main.js
you will have to visit: https://ifhu2.csb.app/
Thank You For Your Help Bro.
There is still one problem, now the username is getting changed from the userâs input to the random one again and when you click on Choose File or click in the input box for the Email Address the username changes from âExampleâ to random again, I get i that the server will receive the random generated code because it is personalized to the walletâs id.
I understand now what you say, if I write something in that user field, and then click on next field, it is like somehow a function is called and resets all the data. If I hit tab and donât click on next field then it works fine.
yes that is what I was trying to tell you
it looks like openUserInfo function is called every time you click on that âEnter Email Addressâ input.
this may be the problem:
const userProfileButton = document.getElementById("userInfo");
userProfileButton.onclick = openUserInfo;
it means that every time you click on userInfo it runs that function 
so the fix to this problem is?
use the id of a button there instead of the id of a div, that (âuserInfoâ)
1 Like
<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>
The div and the id are both merged together
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();