34 avoiding reload in submit button

[shailee-m]

closes #34

This should avoid the page reload on login failure. Adding prevent default at places we use q-form submit

[shailee-m]

@brylie Can I get a valid login cred to check if the reloading issue is happening for other forms as well?

[brylie]

@shailee-m I will set up a login for you today.

Make sure to try using the Vue .prevent event modifier, since it is designed for this purpose: https://v3.vuejs.org/guide/events.html#event-modifiers

[brylie]

User: test@user.com PW: test123

[shailee-m]

@brylie the event modifier is there in the login form. Does not seem to work. Also, in the local build, it does not reload the page back to login URL. So I think we should deploy this and try

[brylie]

You can deploy this branch using the command git push dokku 34-login-reload:main Dokku will deploy an app from the main branch, but the previous command pushes the 34-login-reload branch to main on the dokku remote.

[brylie]

This branch doesn't fix the error in the deployed version. I am starting to wonder whether axios may be failing to make the request and causing the page to reload. I am encountering a similar issue when running the project locally in development mode.

[brylie]

I think the issue is with the following code:

if (await loginToServer(this.email, this.password)) {
        console.log("logged in to server");

        await this.$store.dispatch("user/getUserDetails");
        await this.$store.dispatch("user/getGroupsOfCurrentUser");

        window.location.reload();
        window.location.href = "/#/";
      } else {
        console.log("Could not log in to server.");
      }

Specifically, the window.location.reload() should be unnecessary. Let's refer to the Vue guide for a more conventional pattern to managing authentication in Vue apps.

https://www.smashingmagazine.com/2020/10/authentication-in-vue-js/