Ember - Focus password field on failed login

I have a similar issue to How can I access an Ember input as a jQuery element? but the jsbin in the answers don't seem to be working anymore.

I'm trying to have my password field focused after a failed login using document.getElementById('passfield').focus() but it doesn't seem to be working. I've tried using jQuery as well but no luck. I'm also using ember-simple-auth. Any help or suggestions would be greatly appreciated.

This is the code I have for my login controller.js

import Ember from 'ember';

const { get, set, setProperties, inject, observer } = Ember;

export default Ember.Controller.extend({
    session: inject.service(),

    username: null,
    password: null,
    loginErrorMessage: null,
    isLoggingIn: false,

    resetLoginErrorMessage: observer('username','password', function() {
        set(this, 'loginErrorMessage', null);
    }),

    actions: {

        login() {
            console.log("logging in");
            var username = get(this, 'username');
            var password = get(this, 'password');

            this.set('isLoggingIn', true);
            this.get('session').authenticate('authenticator:drf-token', username, password).catch((response) => {
                if (response && response.errors && response.errors.base) {
                    this.set('loginErrorMessage', response.errors.base[0]);
                    //focus password field
                    document.getElementById('passfield').focus();
                }
            }).finally(() => {
                this.set('isLoggingIn', false);


            });
        }

    },
    reset() {
        setProperties(this, {
            username: null,
            password: null,
            loginErrorMessage: null,
            isLoggingIn: false
        });
    }
});

And this is my code for the login template.hbs

<span class="loggedin loggedin-hidden glyphicon glyphicon-ok"></span>
<div class="login">
<div class="login-panel">
    <div class="logo-header"></div>
    <div class="login-content">
        
            
        
            
                <span class="loggedin glyphicon glyphicon-ok"></span>
            
                <form class="form login" autocomplete="on" >
                    <div class="input-group">
                        
                    </div>
                    <div class="input-group">
                        
                    </div>
                    <div class="input-group btn-toolbar">
                        <button type="submit" class="btn btn-primary btn-regular-bg">
                            Login
                        </button>
                    </div>
                </form>
            

            
                <div class="alert alert-danger">
                <span class="glyphicon glyphicon-ban-circle"></span>
                    
                </div>
            
        
    </div>
</div>
</div>