Display username when login in banner

I would like to say “hey Username” in my banner, how can I do this? And not display a name when logout… Thanks!

5 Likes

I think this would have to be done in client JavaScript, any ideas @Dax?

I think it’s as simple as adding this to the </ head> tab of the theme:

<script type="text/discourse-plugin" version="0.8.18">
    if(api.getCurrentUser() != null) {
        $("#logged-in-user").text(" " + api.getCurrentUser().username);
    }
</script>

And then adding a <span> to the < header> tab where *USERNAME* is:

<h2 class="x-title">Hey<span id="logged-in-user"></span>! Bienvenue dans ta nouvelle communauté</h2>
14 Likes

Thanks for sharing.

Now you’ve got me interested in checking out what other API calls are available!

If anyone else is interested: -

2 Likes

Thanks! But, I tried it and my name doesn’t display.
I copied exactly what you wrote.

Is this where you are putting the code (see highlighted lines)?

Also did you make sure you saved the changes? Refreshed your browser after you saved?

5 Likes

When I put the html in the header like you do, I see my name. But I don’t want the banner above the header. I want it after like this tutorial Banner themes (and instructions for customizing them) . When I put the code in the “Afther header” I don’t see my name.

And is it possible to see only the first name?

Thanks

1 Like

Sure, no problem. You can put the HTML code with the <span> in the After Header now, and the code below in the </head>. It displays the first name only. To show their full name, you would get rid of the .split(' ')[0].

<script type="text/discourse-plugin" version="0.8.18">
    api.onPageChange(() => {
        if(api.getCurrentUser() != null) {
            $("#logged-in-user").text(" " + api.getCurrentUser().name.split(' ')[0]);
        }
    });
</script>
7 Likes

This is what I got with After header. I don’t see my name.

This is what I got with header . I see my full name but it is not where I want to place this section.

I put this code :

<script type="text/discourse-plugin" version="0.8.18">
if(api.getCurrentUser() != null) {
    $("#logged-in-user").text(" " + api.getCurrentUser().username);
}</script>

It looks like you copied the wrong code. This is what you want to add to </head> tab:

<script type="text/discourse-plugin" version="0.8.18">
    api.onPageChange(() => {
        if(api.getCurrentUser() != null) {
            $("#logged-in-user").text(" " + api.getCurrentUser().name.split(' ')[0]);
        }
    });
</script>

And place this in the After Header tab where appropriate:

<h2 class="x-title">Hey<span id="logged-in-user"></span>! Bienvenue dans ta nouvelle communauté</h2>
8 Likes

Thanks so much! I didn’t see you modify the code!

1 Like

Thanks for this, love it!

Have slightly modified the script to include the ‘Hey!’ in the script, thereby getting around the issue of showing the ‘Hey!’ if name is blank:

<script type="text/discourse-plugin" version="0.8.18">
    api.onPageChange(() => {
        if(api.getCurrentUser() != null) {
            if(api.getCurrentUser().name.split(' ')[0] != "") {
                $("#logged-in-user").text("Hey " + api.getCurrentUser().name.split(' ')[0]+"!");
            }
        }
    });
</script>

I’ve used this shorter greeting in a more discrete spot at the side of my site banners, just above the avatar.

3 Likes

Just a quick heads up: did you verify that this piece of code doesn’t raise any errors for non-logged in users? A JS error in a theme could make your site completely unusable.

4 Likes

You are right … thanks for the warning … was getting this on console when logged out:

null is not an object (evaluating 'api.getCurrentUser().name')

Fixed my code above, clearing the error when logged out. Apologies, believe the original script worked fine.

3 Likes

Improved this slightly, to use the Username in single quotes if the Name is not available:

<script type="text/discourse-plugin" version="0.8.18">
    api.onPageChange(() => {
        if(api.getCurrentUser() != null) {
            if(api.getCurrentUser().name != "") {
                if(api.getCurrentUser().name.split(' ')[0] != "") {
                    $("#logged-in-user").text("Hey " + api.getCurrentUser().name.split(' ')[0]+"!");
                }
            }
            else
            {
                $("#logged-in-user").text("Hey '" + api.getCurrentUser().username + "'!");
            }
        }
    });
</script>
3 Likes