Login in Ember 2

I'm pretty new to Ember and I believe I'm getting quite confused with things I'ver searched and old tutorials. I'm starting a project so I'm still at the beginning of it, hopefully you guys can help me or guide me or point me in the right direction, thanks in advance and sorry if somethings are pretty obvious and I just don't get it :)

The things is I want a login page. So I created my router which has a login route and a main route (the one it will be redirected after login).

router.js

Router.map(function(){
  this.route('main');
  this.route('login', {path: '/'});
});

Then I have my templates and here is where my confusing starts. As far as I've read, Ember 2 is going to depecrate controllers in order to use components. So I should use a component instead of a sole template? But my login is not going to be reused, so (in my mind) it shouldn't be a component. That leads me to more doubts, because if it's a template, where is it's logic implemented? I mean, if I have a component, it's logic would be in it's pertinent component js file, but if I don't it should be in a controller file. But controllers are going to be deprecated so instead I should use components. And my mind explodes.

Right now, I have my login template and its logic in its route, but doesn't work as I intend. Hope you can guide me.

login.hbs

    <form class="form-horizontal" >

      <div class="form-group">
        <div class="col-md-4 col-md-offset-4 col-xs-6 col-xs-offset-3">
          <img id="img-logo" class="img-responsive" src="assets/images/ttlvd-color-alborde.png" />
        </div>
      </div>

      <div class="form-group">
        <label for="loginFormUsername" class="control-label col-md-1">Usuario</label>
        <div class="col-md-11 col-xs-12">
          
        </div>
      </div>

      <div class="form-group">
        <label for="loginFormPassword" class="control-label col-md-1">Contraseña</label>
        <div class="col-md-11 col-xs-12">
          
        </div>
      </div>

      <br/>
      <div class="form-group">
        <div class="col-xs-12">
          <button type="submit" class="btn btn-primary" disabled= >Entrar</button>
        </div>
      </div>

    </form>

login.js

    import Ember from 'ember';

    export default Ember.Route.extend({
      username: '',
      password: '',

      usernameValid: Ember.computed.gte('username.length', 1),
      passwordValid: Ember.computed.gte('password.length', 1),
      isValid: Ember.computed.and('usernameValid', 'passwordValid'),
      isDisabled: Ember.computed.not('isValid'),

      actions: {
        auth() {
          var userData = this.getProperties('username', 'password');

          localStorage.username = userData.username;

          console.log(localStorage.username);
        }
      }
    });

I hope I have been clear with what I want to know and sorry for the long post and if what I'm asking is like common sense in Ember.