1

I have a single component which is just a login form. When login is unsuccessful I get a full application reload for some reason.

This is the application main entry. All it does is the initial authentication ping. If session is up it loads the actual application, otherwise it mounts Authentication component which is just a login form. 

var Application = {
  run() {
    m.request({
      method: "GET",
      url: cfg.apiurl("/session/ping"),
      extract(xhr) {
        return xhr.status > 200 ? xhr.status : xhr.responseText;
      }
    }).then(r => {
      var init = {
        uname: r.data.uname
      };
      router(init);
    }, e => {
      if (e === 401) {
        m.mount(document.body, Authenticate);
      }
    });
  }
};

Application.run();

Below is the Authentication component minus the view. It binds login variables to the view and defines submit action. When I run submit action with incorrect credentials it reloads the application.

Why does it reload the application?? Chrome console says: Navigated to http://localhost:3000/? right after "Login Failure !!!" console message. This causes full application reload. So any on-screen error messages and popups about incorrect login simply disappear. It does print the last error message to the console "Login Failure !!!". After that, when submit function exits, it navigates to the root of the URL causing a full reload.

What am I doing wrong?

var Authenticate = {
  controller, view
};

function controller() {
  this.info = m.prop("");
  this.data = {
    uname: m.prop(""),
    passw: m.prop(""),
    local: m.prop(false)
  };
  this.submit = () => {
    Login.auth(this.data).then(r => {
      if (this.data.uname() === r.data.uname) {
        var init = {
          uname: r.data.uname
        };
        router(init);
      } else {
        console.log("Login Mismatch !!!");
      }
    }, e => {
      if (e === 401) {
        console.log("Login Failure !!!");
        popa();
      } else {
        console.log(`Server Errror ${e} !!!`);
      }
    });
  };
}

Thank you very much.

4

1 回答 1

1

If you use HTML form-element, submit always triggers a page reload. You have to preventDefault here

m('form', {
  onsubmit: function(event) {
    event.preventDefault();
  }, 'form content'
})
于 2015-11-02T10:38:37.017 回答