Hide Name and Email fields from User Profile block

[Maria]

If you need to hide Name and Email on from User Profile block add this custom code to Page Settings>Custom Code>Header field

<script>
    document.addEventListener("DOMContentLoaded", function () {
        $('#user-accounts2 #sw-form-capture-full_name-input').removeClass('sw-display-inline-block');
        $('#user-accounts2 #sw-form-capture-full_name-input').addClass('d-none');
        
        $('#user-accounts2 #sw-form-capture-email-input').removeClass('sw-display-inline-block');
        $('#user-accounts2 #sw-form-capture-email-input').addClass('d-none');
        $('#user-accounts2 .hr').addClass('d-none');
    });
</script>

[danyalamriben]

this is no longer working as expected: it is no longer allowing my users to enter old password FYI. i have no idea how i didnt notice until my first day of launch

[matthieu_chateau]

Hi Diana,

Here is the code to do so, nothing to change in the code, just put it in the header.

To hide the button “update profile”, just reduce the padding to 0 and the texte size of the button to 0.

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var elements = document.querySelectorAll('.form-input-component-wrapper');
        for (var i = 0; i < 2 && i < elements.length; i++) {
            elements[i].classList.add('d-none');
        }
    });
</script>

Concerning the old password, impossible for me too, @Maria => users can’t enter their old password anymore since 1 or 2 weeks (this is a bug, it has nothing to do with the custom code above, as I tested with and without it).

[danyalamriben]

Thanks Matthieu. I acually have slightly different code that another support member helped provide, curious how it differs from this

<script>
window.addEventListener('block-loaded-user-accounts3', () => {
var formParent = document.querySelector('form').parentNode;
var foundChangePassword = false;
var child = formParent.firstElementChild;
while (child) {
var nextSibling = child.nextElementSibling;
if (foundChangePassword) {
break;
}
if (child.tagName === 'FORM') {
foundChangePassword = true;
}
formParent.removeChild(child);
child = nextSibling;
}
var divElement = document.querySelector('div[style*="border-top: 1px solid rgb(237, 237, 237)"]');
if (divElement) {
divElement.parentNode.removeChild(divElement);
}
});
</script>

But this is how it looks

Visually, it works. Until you actually use it lol.

UX wise, I realized 2 major issues when observing onsite trying to complete the new account set up workflow:

1. Everything about this suggests they should be typing their old password at the top. 50% of them finally gave up, and correctly assumed they only needed to type their new password. The rest either said it was broken or (not ideal either) just typed their old password again no error message said anything about setting the same password twice
2. There is zero indication after clicking update. Like nothing happens. No popup. No “saved successfully”. The 2nd field just reverts to blank. So everyone just sits there wondering if it worked…

Re: #2, does anyone know if there is an event listener I can target to programmatically display a success message? I felt embarrassed when I realized how janky that account setup actually worked for users I was so proud initially! Lol!

[matthieu_chateau]

My code is way simpler .
Mine just takes the first 2 elements that have a same class name, corresponding to a text input and hides it.
But if it works, it works!

Concerning your need to show something when updating a password =>

<div id="customModal">
    Your password was successfully changed
</div>
  
<style>
    #customModal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      border: 2px solid black;
      border-radius: 5px;
      background-color: #ccc;
      z-index: 9999;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
      max-width: 400px;
      text-align: center;
      font-size: 18px;
    }
  </style>

  <script>
    function handleAlert() {
      var elem = document.querySelectorAll('button[type=submit]')[0];
      if (!elem) {
        return;
      }

      window.setInterval(function () {
        if (elem.querySelector('.success-icon')) {
          setTimeout(() => {
            const modal = document.getElementById('customModal');
            modal.style.display = 'block';

            setTimeout(() => {
              modal.style.display = 'none';
            }, 3000);
          }, 2000);
        }
      }, 500);
    }

    window.addEventListener("load", (event) => {
      handleAlert();
    });
  </script>

So this code works when changing name in the user account block. It should have worked for the password by changing [0] by [1] in the code.

But as there is this bug with the old password (and maybe with the input “new password” by the way) you won’t have any chance to make it display

@artur

[Maria]

Hey @matthieu_chateau @danyalamriben, let me make sure I understand. Users are not able to log in with their passwords or it is not possible to change the old password to new one with User profile block?

[danyalamriben]

it is possible. you just aren’t being prompted to enter the old password. you cannot enter your old password. You can only type your new password. → All “security” concerns aside, I can try to just hide the old password field since seeing it just makes you think you need to be typing something in. Hiding it would resolve this.

And once you submit, nothing happens, other than the new password you typed being wiped out.

the only way I could confirm my new password was indeed saved, was by logging out and trying to log in with new password. I confirmed it worked. But my users were just staring at it and being very confused, since again, nothing visually suggests that it was successful

Love @matthieu_chateau 's success code, want to try it even though he says I wont have a chance to make it display LOL what if I want it badly enough, maybe the gods will hear my prayers?! jk haha but that would help.

[matthieu_chateau]

Deleted video

[danyalamriben]

Windows Explorer - 2023-07-25_09-22-25

to piggy back off of this: showing how it works

[matthieu_chateau]

[Maria]

Thank you guys. This just got reported and the team is investigating

[Maria]

@matthieu_chateau I noticed that you deleted the recording. Is it because something got changed(fixed) or you just decide to delete it? we are still trying to reproduce this case so that is why I am wondering.
@danyalamriben in your case, are you logged in with magic link in the recording or with a password just like Matthieu? the reason why I am asking is because previously the old password field was active even If there was no password and the user logged in with magic link, now it is disabled because there is no point of having that field active If the user got registered and logged in with magic link.

[danyalamriben]

Re: My video → logged in the normal way (email + password).

Initially wanted to explore magic link but for my purposes just made more sense to generate the account credentials via API so I can ensure the email & display name used is correct because people stink at spelling their own information i guess….

The api sends over the username, email, and temporary password automatically and when they log in the first time I want to “force” them however possible to ensure they are setting a real password before proceeding to the app

[danyalamriben]

It [the fact that you can’t type in the box for “old password”] seems to be caused by whatever block updates were made to the user profile block. Matthieu’s block performed the same as my new “password only” custom user profile block that was added quite recently.

As you probably could see, my old outdated user profile block did not behave that way, and in fact allowed me to type the old password before typing new password to update. it also displayed a “changed” confirmation animation when I clicked update ← would love if this could also be restored in updated block!!

[matthieu_chateau]

Nothing changed, my Loom workspace was just full, so I deleted this video as the process was quite simple => sign up with password then go to user profile.

You can find the bug behaviour back in the Diana’s video.

The bug is not related to signin or signup.

I can see this bug since 2 weeks or so, from the last block update I would say, in all apps I worked in, if the block was updated.

[danyalamriben]

LOL yeah my loom is full, hence the switch to snagit

[Maria]

@matthieu_chateau haha got it, no worries. @danyalamriben
Since we are still struggling to reproduce this issue, may I please, ask one of you to send me a screenshot from Users tab where the magic link section is also visible for the users that you experience such issue with (in case later on magic link is generated but not used, it might still matter) as well as a published link to an app.

[danyalamriben]

all users experience this. It has nothing to do with the user only the version of the user profile block

users dont use the magic links at all, are you still saying you need screenshot? I can DM you aramayis’s magic link if needed. the page in question is https://centricitycentral.softr.app/new-account-activation but you will need to be signed in so you can access

[Maria]

The app link is enough for now. Thank you. We will fix this soon and I will let you know

[danyalamriben]

Hi Maria just checking for any updates?? This is the message I’m still sending to new staff LOL

the password block has a glitch at the moment and it’s driving me nuts:

• you dont enter your temporary password after signing in
• you will only enter your new password to set permanent password. Once you click update… so obnoxious but it’ll literally just wipe out what you typed and nothing looks different… HAHA SURPRISE THAT MEANS IT WORKED hahaha
• you can click the next button in bottom left to move on after !