meteor-accounts-ui-bs3-and-blaze
Meteor accounts-ui styled with Twitter Bootstrap 3 and Blaze support (Meteor 0.8 update).
Prerequisites
Use the meteorite package manager http://oortcloud.github.com/meteorite/
[sudo] npm install -g meteorite
You will also need at least one accounts plugin (accounts-password
, accounts-github
, etc.), and a Bootstrap 3 package (such as bootstrap-3
).
How to add to your meteor app
mrt add accounts-ui-bs3-and-blaze
How to use
Add {{> loginButtons }}
to your template
Example:
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
{{> loginButtons }} <!-- here -->
</ul>
</div>
</div>
Add additional logged in actions
You can add additional markup to the logged in dropdown, e.g. to edit
the user's account or profile, by defining a
_loginButtonsAdditionalLoggedInDropdownActions
template and specifying
the corresponding events.
<template name="_loginButtonsAdditionalLoggedInDropdownActions">
<button class="btn btn-default btn-block" id="login-buttons-edit-profile">Edit profile</button>
</template>
Template._loginButtonsLoggedInDropdown.events({
'click #login-buttons-edit-profile': function(event) {
event.stopPropagation();
Template._loginButtons.toggleDropdown();
Router.go('profileEdit');
}
});