Server Connect form is redirecting to the server connect file instead of showing error on page (NodeJS)

Wappler General Bugs
#1

Wappler Version : 3.3.3
Operating System : W10

Expected behavior

What do you think should happen?

Page should show a toast message with a 401 error

Actual behavior

What actually happens?

In the wappler preview it works correctly, however in the localhost or remote host it goes to the server action (/api/Security/login) and shows the unauthorized message there.
See video:

2020.09.28 22.48 - 507 - Cob

It was working before, the only thing I have consciously changed recently is setting it up as a SPA app according to the latest doc of @Teodor

How to reproduce

  • Detail a step by step guide to reproduce the issue
  • A screenshot or short video indicating the problem
  • A copy of your code would help. Include: JS, HTML.
  • Test your steps on a clean page to see if you still have an issue
  1. Create NodeJs project, make it a SPA with a main layout and a content page /login
  2. Create a simple server action with logging in (followed tutorial in docs)
  3. SEt up a login form on /login
  4. Set up a dynamic action to redirect on successful login and show a toast message image
  5. Test it when deployed
Wappler 3.3.5 Released
#2

Do you maybe have Allow Basic Authentication turned on in the security provider?

#3

@patrick Nope:

image
image515×1359 45.6 KB

#4

@patrick

I managed to debug a little bit more: I think it’s a routing or SPA issue with including the layout. Please see:

  1. I go to localhost:8100/ - I am redirected to /login as I set it up in the routing. Then I get the error as seen above:

    2020.09.29 14.11 - 515 - Tattler

  2. BUT if I click on Dashboard Which is navigation from the included mainLayout → it redirects to /login (as I’ve protected that page with the Security Restrict as per NodeJS doc.

Then if I try to login again, it DOES show up the unauthorized error as it should:

2020.09.29 14.13 - 516 - Hadrosaurus

#5

What I notice in the videos is that with the first one the form is normally submitted instead of via ajax, you see that in the url and that is why it shows unauthorized.

Add onsubmit="return false;" to the login form and check if there are any messages/errors in the console when you try to login.

Also in the first video I don’t see you being redirected, it still shows the localhost:8100/. Does it work from localhost:8100/login?

#6

Since it is a SPA/Routing issue, perhaps this update will help.

dmxRouting.zip (1.7 KB)

1 Like
#7

@patrick

  1. When adding onsubmit="return false;" simply nothing happens, also an empty console.
    From both localhost:8100/ or localhost:8100/login
    You’re right, the redirect doesn’t show, I wrote incorrectly. The page shows /dashboard and on here the login page works.
    I think the URL SHOULD change to /login though:

    image
    image1424×1277 120 KB

  2. I apply the update by replacing the file I take it?

    image
    image583×709 20.9 KB

Perhaps my routing file might show the issue:

  "routes": [
    {
      "path": "/",
      "url": "",
      "routeType": "redirect",
      "redirect": "login"
    },
    {
      "path": "/login",
      "page": "login",
      "layout": "mainLayout",
      "name": "Login Page",
      "exec": ""
    },
    {
      "path": "/kars",
      "page": "kars",
      "layout": "mainLayout",
      "exec": "/api/Security/access_check_kars"
    },
    {
      "path": "/sandbox",
      "page": "sandbox",
      "layout": "main-layout"
    },
    {
      "path": "/dashboard",
      "page": "dashboard",
      "layout": "mainLayout",
      "exec": "/api/Security/access_check_all"
    },
    {
      "path": "/forbidden",
      "page": "forbidden",
      "layout": "mainLayout"
    },
    {
      "path": "/mycourses",
      "page": "mycourses",
      "layout": "mainLayout",
      "exec": "/api/Security/access_check_teacher"
    },
    {
      "path": "/reset-pass",
      "page": "reset-pass",
      "layout": "mainLayout",
      "exec": "/api/Meta/meta_tags",
      "data": {
        "title": "{{$_PARAM.title}}"
      }
    },
    {
      "path": "/new-pass",
      "page": "new-pass",
      "layout": "mainLayout",
      "exec": ""
    },
    {
      "path": "/control-panel",
      "page": "control-panel",
      "layout": "mainLayout"
    },
    {
      "path": "/404",
      "page": "404",
      "layout": "mainLayout"
    },
    {
      "path": "/:+",
      "url": "",
      "routeType": "page",
      "page": "404",
      "layout": "mainLayout"
    },
    {
      "path": "/loginv2",
      "page": "loginv2",
      "layout": "mainLayout"
    },
    {
      "path": "/loginv3",
      "page": "loginv3",
      "layout": "mainLayout"
    }
  ],
  "layouts": {
    "mainLayout": {
      "meta": [
        {
          "type": "text",
          "name": "title"
        },
        {
          "type": "text",
          "name": "description"
        }
      ],
      "exec": "",
      "data": {
        "title": "a"
      }
    }
  }
}```
#8

Yes, just replace the file.

#9

@patrick Thank you!! It seems to have fixed the issue!!

I do have another issue that I think might be related, since you’re trying to fix it now - see: (NodeJS, SPA) Validation message not showing on localhost target but IS showing in wappler preview

(Also different behaviour in the preview and on localhost)

#10

Fixed in Wappler 3.3.5

#11
#12