@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
{{> loginButtons}}
.