13

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?

1
  • Note - the current correct syntax is {{> loginButtons}}. Commented Mar 19, 2015 at 21:12

4 Answers 4

7

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

Template.loginButtons.rendered = function()
{
    Accounts._loginButtonsSession.set('dropdownVisible', true);
};
2
  • Could it be the name of the login template has changed? Not working for me, with an error "Cannot set property 'rendered' of undefined".
    – kontur
    Commented Feb 3, 2015 at 8:38
  • 1
    As of February 2015 the template's name has change to loginButtons (see github.com/meteor/meteor/blob/devel/packages/… for reference). Your hack still works :)
    – kontur
    Commented Feb 3, 2015 at 8:50
6

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.

2
  • 1
    well the link is dead. Not dead as in buried, but dead as in can somebody please remove it as it is "pay to see".
    – krivar
    Commented Feb 10, 2014 at 14:33
  • 11
    A link to a tutorial is not a valid and persistent answer. -1
    – kontur
    Commented Feb 3, 2015 at 8:36
2

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'

2
  • thank you so much for sharing this. This was driving me crazy. The only change is that getLoginServices() is not global but has to be called via Accounts._loginButtons.getLoginServices()
    – Jamgold
    Commented Aug 26, 2014 at 17:50
  • Can't get getLoginServices() in either way mentioned, help?
    – Asaf
    Commented Mar 26, 2015 at 22:13
1

@shinank - Yes this is a great tutorial for customizing logins for meteor; however it doesn't explain how to separate the buttons out of the dropdown list created by {{loginButtons}} when using more than one authentication method.

You are able to create free standing buttons with the following code:

<div id="login-buttons">
    <div class="login-text-and-button">
      <div class="login-button single-login-button " id="login-buttons-facebook">
        <div class="login-image" id="login-buttons-image-facebook"></div>
        <span id="sign-in-facebook" class="text-besides-image sign-in-text-facebook">Sign in with Facebook</span>
      </div>
      <br>
    </div>
    <div class="login-text-and-button">
      <div class="login-button single-login-button " id="login-buttons-google">
        <div class="login-image" id="login-buttons-image-google"></div>
        <span id="sign-in-google" class="text-besides-image sign-in-text-google">Sign in with Google</span> 
      </div>
    </div>
</div>

You can then add logic to the click for your sign-in-google or sign-in-facebook span and use the following code:

Template.user_loggedout.events({
"click #sign-in-google": function(e, tmpl){
    Meteor.loginWithGoogle({

    }, function (err) {
        if (err){
            console.log("ERROR: " + err);//error handling
        } else {
            console.log("NO ERROR ON LOGIN");//show an alert
        }
    })
}
});

You can always add requestPermissions to your login function for addition permissions that your website may require.

You may need to tweak the CSS slightly since they button does not look exactly the same as it does in the dropdown list

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.