So you echo out a script tag to hold the value in a JavaScript var:
echo "<script>var adminName = '" . $username . "';</script>";
So, when the page renders, if that works, you have the following JavaScript:
var adminName = "<value-of-php-$username>"
But, then in the CLIENT side code you don't have anything that references that var
adminName
That's the only place the admin name value is stored once the client is rendered.
We then see you attempting to retrieve the value from the DOM element:
var adminNameElement = document.getElementById('admin-name');
if (adminNameElement) {
adminNameElement.textContent = 'Logged in as: ' + adminName;
}
However, you cannot refer to the JavaScript var as just adminName because it is out of context at that point.
Why don't you just try the following PHP to see if it even works:
echo "<div id="testAdminName"> $username </div>";
Then you should just be able to view the div on the client.
If that works you can work out how to get the value into a variable.