Display username when login in banner

dev
1

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

username
username1280×275 112 KB

5 Likes
2

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

3

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
4

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
5

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

6

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

banner
banner.gif800×378 315 KB

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

5 Likes
7

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
8

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
9

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

after%20header
after%20header1280×339 321 KB

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

header
header1280×344 323 KB

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

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>
9 Likes
11

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

1 Like
12

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
13

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
14

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
15

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