Unable to setRoot after login successful

Help Requests
1

I am making a login view for my app using my own basic login structure to check a database for login credentials.

When doing that, I’ve got the setRoot function in main.js as ‘login’, and so it displays the login view just fine. But when I successfully login, I am unable to setRoot again to ‘app’.

This is the console error:

Uncaught TypeError: Cannot read property 'setRoot' of undefined

When I log the value of aurelia, it’s undefined.

I am not sure what I am missing.

here is my login.js file:

import {Aurelia, inject} from 'aurelia-framework';
import jquery from 'jquery';
import {AureliaCookie} from 'aurelia-cookie';

window.jQuery = jquery;
window.$ = jquery;

export class Login {

  constructor(aurelia) {
    this.aurelia = aurelia;
    this.loginResponse = null;
    this.login();
    }

    heading = 'Login';

    username    = '';
    password = '';
    
    login() {
            
        if ( this.username && this.password )
        {
            var params = '?username=' + this.username + '&password=' + this.password;
            var url = 'http://[ip address]/login.pl'; // + params;
  
            jquery.ajax({
              type: "GET",
              url: url, // URL of the Perl script
              contentType: "application/json; charset=utf-8",
              dataType: "jsonp",
              headers: { 'Access-Control-Allow-Origin': '*' },
              mode: 'no-cors',
              crossDomain: true,
              jsonp: 'callback',

              // send username and password as parameters to the Perl script
              data: "username=" + this.username + "&password=" + this.password,
              // script call was *not* successful
              error: function(XMLHttpRequest, textStatus, errorThrown) { 
                jquery('div#loginResult').text("responseText: " + XMLHttpRequest.responseText 
                  + ", textStatus: " + textStatus 
                  + ", errorThrown: " + errorThrown);
                jquery('div#loginResult').addClass("error");
              }, // error 
              // script call was successful 
              // data contains the JSON values returned by the Perl script
              success: function(data){
                if (data.error) { // script returned error
                  jquery('div#loginResult').text("data.error: " + data.error);
                  jquery('div#loginResult').addClass("error");
                } // if
                else { // login was successful
                  jquery('form#loginForm').hide();
                  jquery('div#loginResult').text("data.success: " + data.success 
                    + ", data.userid: " + data.username);
                  jquery('div#loginResult').addClass("success");

                  AureliaCookie.set( 'ARIS', 'value', {
                    expiry: 8, //8 hrs is a normal workday
                    domain: 'http://10.40.10.26',
                    REMOTE_USER: data.username,
                  });

                   // this is where I get the error that aurelia is null
                  this.aurelia.setRoot( 'app' );

                } //else
              } // success
            }); // ajax
        } // if
        else {
          jquery('div#loginResult').text("enter username and password");
          jquery('div#loginResult').addClass("error");
        } // else
        jquery('div#loginResult').fadeIn();
        return false;
    }
  }
1 Like
2

Looks like the callback function “success” doesn’t access the right “this”.
I suggest trying to define const self = this as the first statement of the login() function and then in success, do

self.aurelia.setRoot('app')

Hope this works for you.

1 Like
3

Thanks for the suggestion. I tried that, but I am still getting the same error.

Am I calling/constructing the aurelia section of this properly?

I feel like it’s something basic that I am missing.

1 Like
4

Next thing is I can’t find the injection code for the aurelia instance.
You should inject the dependency on your class by using @inject(Aurelia), @autoinject or with static inject = [Aurelia]
Hope this helps.

1 Like
5

If I add the line:

@inject(Aurelia)

//@inject(jquery)

window.jQuery = jquery;
window.$ = jquery;

I get the following error:

Leading decorators must be attached to a class declaration (9:0)

The lines it’s complaining about now are the window.jQuery lines which I need in order to make ajax work properly.

1 Like
6

So I changed what I was doing a bit, and added the line you suggested from self.aurelia.setRoot…

and then I got a new error:

line:

self.aurelia.setRoot( PLATFORM.moduleName( 'app' ) );

error:

Error: Unable to find module with ID: app at WebpackLoader.eval

I imported PLATFORM, because I originally was just doing a setRoot('app'), and got the same error.

1 Like
7

If you use @inject, it must be just before the class declaration.

You might do this as well:

export class Login {
static inject = [Aurelia];

  constructor(aurelia) {
...
1 Like
8

Thank you for this reply.

I was able to get things working by setting the app class to this:

export default class App

That exported the module ‘app’ so that I could setRoot with it in my login module.

2 Likes