If a Identity Management client wants to make the first and last name fields not updatable in their Profile tab in My Account, here are the steps they should take:
Step 1: Add "style" and "id" attributes to the input element.
The client should add style="pointer-events: none;" id="given-name" to the input element for the first name and to the input element for the last name. Here's an example of the initial format of the fields in the Identity Management profile in My Account template:
<label class='piano-field'>
<t>First name</t>
<input class='slate-input' fieldProfileFirstName autocomplete='given-name'>
</label>
<label class='piano-field'>
<t>Last name</t>
<input class='slate-input' fieldProfileLastName autocomplete='family-name'>
</label>
And here is how it would look like after adding the attributes:
<label class='piano-field'>
<t>First name</t>
<input class='slate-input' fieldProfileFirstName autocomplete='given-name' style="pointer-events: none;" id="given-name">
</label>
<label class='piano-field'>
<t>Last name</t>
<input class='slate-input' fieldProfileLastName autocomplete='family-name' style="pointer-events: none;" id="family-name">
</label>
Step 2: Disable the input elements.
At the end of the Identity Management profile in My Account template, the client should add a custom script that disables the input elements with the given ids. Here's an example:
<custom-script>
var interval = setInterval(function() {
if(document.getElementById("given-name") != null) {
clearInterval(interval);
document.getElementById("given-name").disabled = true;
document.getElementById("family-name").disabled = true;
}
}, 50);
</custom-script>
Once this is applied, users won't be able to edit their first and last name values in the Profile tab in My Account.