Meteor accounts-ui styled with twitter/bootstrap 3 (translated in italian)
Use the meteorite package manager http://oortcloud.github.com/meteorite/
[sudo] npm install -g meteorite
You will also need the following:
- Bootstrap 3:
mrt add bootstrap-3
- At least one accounts plugin:
mrt add accounts-password
,mrt add accounts-github
, etc.
mrt add accounts-ui-bootstrap-3-italian
If this doesn't work, add to your smart.json:
"accounts-ui-bootstrap-3-italian": {
"git": "https://github.com/lbragaglia/meteor-accounts-ui-bootstrap-3-italian.git"
}
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>
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');
}
});