MeteorJS: Login buttons without a dropdown

Question

I know that you can use

{{> loginButtons}}

to get a dropdown with login options. I would like to have the login buttons on my page directly without a dropdown since I would like the UI to be clean on mobile. Is there any way to break the accounts ui out of the dropdown and put it in a div on the main page?

Answer 1

Easy way to do this (i.e. hack):

Template.loginButtons.rendered = function()
{
    Accounts._loginButtonsSession.set('dropdownVisible', true);
};

Answer 2

I asked the same question in #meteor and someone sent me this example on customizing the accounts-ui login.

It is clear and straightforward. I used this as a guide to customize the accounts-ui look and feel and it worked great for me.

https://www.youtube.com/watch?v=-CTSGdQOYYg

There is one caveat. The example does not handle the scenario if the accounts-google package still needs the api information setup. For example {{loginButtons}} will turn red and give you the opportunity to setup the information needed for google-accounts to work. The implementation in the example does not handle that scenario. So be sure to have that setup in your application.

Answer 3

I figured I'd post my solution for this as of 0.8.3.

I wanted a simple Facebook Login button that is replaced by a simple Sign Out button when logged in. I didn't want to rewrite much logic so I came up with this.

login.html:

<template name='login'>

    <div id="login-buttons">

    {{#if currentUser}}

      Hi, {{currentUser.profile.name}}
      <button id='logout-button' class='small'>Sign Out</button>

    {{else}}
      <div class="service-login-buttons">
          {{#each service}}
            {{> _loginButtonsLoggedOutSingleLoginButton}}
          {{/each}}
      </div>
    {{/if}}

    </div>

</template>

 

login.js:

Template.login.events({
  'click #logout-button': function() {
    Meteor.logout();
  }
});

Template.login.service = function()
{
    //returns an array like [{name: 'facebook'}];
    return getLoginServices();
}

getLoginService() is a global that accounts-ui uses for determing what services are enabled. I use this in an #each block to make sure the data context is correct so clicking on the button calls the correct 'loginWithX'