lundi 15 octobre 2018

Ember Simple Auth login errors not displaying on page

I am following an online video tutorial that has setting up Ember Simple Auth Login. Everything works with exception to displaying login errors (i.e., 401 unauthorized) to the template. I have checked the code for typos but cannot find any.

In the controller login, I tried logging the e.errors to the console, but the console just says 'Undefined'. Though, if I just send the error object e to the log then I get the error object with the error.detail inside of it. Note: the error.detail is what I am trying to display on the login-form.hsb.

Any help is appreciated!

  • Ember : 3.4.5
  • Ember Data : 3.4.2
  • jQuery : 3.3.1
  • Ember Simple Auth : 1.7.0

Controllers/login.js

import { inject as service } from '@ember/service';
import Controller from '@ember/controller';

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

    actions: {
        login(attrs) {
            this.get('session').authenticate('authenticator:jwt', {
                email: attrs.email,
                password: attrs.password
            }).then(() => {
                this.transitionToRoute('index');
            }).catch((e) => {
                this.set('errors', e.errors); // nothing is being displayed
                console.log(e.errors); // Says Undefined in the console
                console.log(e); // Display error to console
            });
        }
    }
});

templates/login.hsb



templates/components/login-form.hbs

<div class="slide-out">
    <div class="slide-out-card">
        <div class="slide-out-heading">
            <div class="title">
                <h3>Login</h3>
            </div>
        </div>

        <div class="slide-out-content">
            <form onsubmit=>
                <!-- this does not display the error message -->
                
                    
                    <div class="error-alert"></div>
                
                <div class="field">
                    <label>Email:</label>
                    
                </div>

                <div class="field">
                    <label>Password:</label>
                    
                </div>

                <div class="form-footer">
                    <button type="submit" class="btn-submit">save</button>
                </div>
            </form>
        </div>
    </div>
</div>




Aucun commentaire:

Enregistrer un commentaire