How to get username and make an URL with that?

Support
1

Hi,

One of my project, i use Wordpress and Discourse. I want to create a link for Wordpress user profiles. I connected login system with SSO between Wordpress and Discourse. So i want to create a dynamic link like that: site.com/members/users/discourseusername

There are two conditions here.

If user is not logged in link must seems like that:
site.com

If user logged in, link must seems like that:
site.com/members/users/discourseusername

And idea?

2

You can try something like this:

<script type="text/discourse-plugin" version="0.8.18">
  const loggedIn = Discourse.User.current();

  if (loggedIn != null) {
    var username = loggedIn.username,
      link = "site.com/members/users/" + username;
  } else {
    var link = "site.com";
  }
</script>

This gives you link as a variable that you can use as the href of a dynamic link.

5 Likes
3

Thanks @Johani I want to use that link for logo. How can we adapt?

How can i use that in a href tag?

4

Sure, you can do that by adding

api.changeWidgetSetting('home-logo', 'href', link);

just before the close tag for the script like so:

<script type="text/discourse-plugin" version="0.8.18">
  const loggedIn = Discourse.User.current();

  if (loggedIn != null) {
    var username = loggedIn.username,
      link = "//site.com/members/users/" + username;
  } else {
    var link = "//site.com";
  }

  api.changeWidgetSetting('home-logo', 'href', link);
</script>

Do note however that this is probably not a good idea.

You’re better off adding the link to the header as opposed to changing the logo. On every website I visit, my expectation is that clicking the logo will either take you to the homepage or to the top of the current page. I would find the change you’re trying to accomplish a bit annoying.

Try something like this instead:

<script type="text/discourse-plugin" version="0.8.18">
  const loggedIn = Discourse.User.current();

  if (loggedIn != null) {
    var username = loggedIn.username,
      link = "//site.com/members/users/" + username;
  } else {
    var link = "//site.com";
  }

  api.decorateWidget('header-icons:before', helper => {
      return helper.h('li.wordpress-profile', [
          helper.h('a.icon.btn-flat', {
              href: link, 
              title: 'Your wordpress profile', // change link title
              target: '_blank' // opens in a new tab
          }, helper.h('i.fa.fa-user.d-icon')), // change link icon
      ]);
  });
</script>

to add an icon with the dynamic link in the header like so:

Capture
Capture.PNG1765Ă—119 20.1 KB

You can then hide that icon for non-logged in users if you want with:

.anon .wordpress-profile {
  display: none;
}

or you can keep it, depending on what icon you choose.

6 Likes
5

I totally agree with you about that. But it’s not my own project and project’s owner wanted it.

That’s a really good idea. And it works great.

You explained everything. Thank you for your help! :slight_smile:

By the way, how i can learn Discourse API terms like “Discourse.User.current();” and “api.decorateWidget”? Could you suggest a resource?

1 Like
6

For now you can have a look at some of the pluginAPI examples here.

However, we also have more structured theme developer documentation coming out very soon. :+1:

3 Likes