Meteor accounts with custom login form

Meteor

After some exercises with PHP and MySQL I decided to dive deeper into the Javascript world. I know it doesn't make much sense, but bare with me.
I started developing a new app with the Meteor framework. My first impression of it - Amazing. I'm still trying to wrap my head around it as I'm a bit new to javascript as well.
I was struggling last day or so with the accounts. I added the accounts and the user interface packages:

meteor add accounts-password
meteor add twbs:bootstrap
meteor add ian:accounts-ui-bootstrap-3

All work as expected. I can create users, login, logout. no issue. ...except... I cannot easily remove the drop down on the log in page. It's a bit annoying.
I sat googling for a fair amount of time. There are of course many solution out there, but all they look to me a bit harder. Being lazy by nature I tough myself 'There must be an easier/clearer way'. On top of that I wanted to keep all the functionality those packages provide. Just wanted to remove the dropdown.
Looking at the code in I see I have to change only couple of lines there. I could go and just modify them, but it's a bit messy. What is there is a way to replace their template with my alternative, where I can change those lines keeping the rest of the functionality untouched? Sure there is! Let me introduce you the meteor-template-extension package.

The Actual Work

The first thing is to add the meteor-template-extension package to the project.

meteor add aldeed:template-extension

Then I created my own version of the '_loginButtonsLoggedOutDropdown' template from the 'ian:accounts-ui-bootstrap-3' package. I call it "My_loginButtonsLoggedOutDropdown" and place it in login.html:

<template name="My_loginButtonsLoggedOutDropdown">
    <div class="container">
<section class="panel">
        <header class="panel-heading">
            <strong>Welcome</strong> 
        </header>
        {{> _loginButtonsLoggedOutAllServices}}
    </section></div>
</template>

I my version of this template I just removed the dropdown and put some styling around.

The final thing is to replace the "_loginButtonsLoggedOutDropdown" with "My_loginButtonsLoggedOutDropdown", where the aldeed:template-extension comes handy. Somewhere in the client side js file:

Template.My_loginButtonsLoggedOutDropdown.replaces("_loginButtonsLoggedOutDropdown");

That's it! Next I put some very very simple CSS:
the CSS

.panel {
    width: 300px;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    background-color:#fff;
    border:1px solid transparent;
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);
    box-shadow:0 1px 1px rgba(0,0,0,0.05);
    border-radius:2px;
}

.panel-heading {
    border-bottom:1px solid transparent;
    border-top-right-radius:3px;
    border-top-left-radius:3px;
    border-radius:2px 2px 0 0;
    padding:10px 15px;
    text-align:center;
}

Enjoy!