Username gets changed randomly when put in the email or select a profile picture, the image doesnt load until I select another image or doesnot even work

Moralis General
#1

Index.html:

<!DOCTYPE html>

  <html>

    <head>

      <title>Title</title>

      <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

      <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

    </head>

 

    <body>

      <button id="btn-login">Connect Your MetaMask</button>

      <button id="btn-profile">Profile</button>

      <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>

        <img width = "50" height = "50" src="" id="imgAvatar" alt="">

        <label for="fileAvatar">Select Avatar</label>

        <input type="file" id="fileAvatar">

        <button id="btn-logout">Logout</button>

        <button id="btn-CloseUserInfo">Close</button>

        <button id="btn-SaveUserInfo">Save</button>

      </div>

      <script type="text/javascript" src="./main.js"></script>

    </body>

  </html>

</html>

main.js:

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();

  alert('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("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;

}

initializeApp();
#2

here you may need an intermediate step to save that avatar, like

x = await avatar.save()
user.set('avatar', x)
#3

not working and the username is still getting changed to something random when I click anywhere on the page

#4

what you mean by:

like anywhere anywhere, or when clicking on some buttons?

#5

I tested and username works fine for me, it looks random, but it is not random. that is the username that was generated.

#6

when i click anywhere anywhere

#7

can you send me that code which is working fine for you

#8

I just copied your code, and added it in https://codesandbox.io/.
It doesn’t work perfectly, but the username part looks fine.
I noticed that it tries to authenticate automatically on page load.

#9

yeah, i know about the authentication problem, will fix it later

#10

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.

#11

can you send me the link on codesandbox of the code because the UI of the website is a bit confusing.

#12

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/

#13

Thank You For Your Help Bro.

#14

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.

#15

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.

#16

yes that is what I was trying to tell you

#17

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 :slight_smile:

#18

so the fix to this problem is?

#19

use the id of a button there instead of the id of a div, that (“userInfo”)

1 Like
#20 
<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