Display username when login in banner


(François Douville) #1

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


(Jeff Atwood) #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>

(Biscuit) #4

Thanks for sharing.

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

If anyone else is interested: -


(François Douville) #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)?

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


(François Douville) #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


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

(François Douville) #9

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>

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

(François Douville) #11

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


#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.


#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.


#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.


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