Dummy data shown when API is unreachable

How to reproduce the behaviour

Build the frontend: docker build -t doccano-frontend frontend

Launch: docker run --rm -it -p 3000:3000 doccano-frontend

Browsing to http://localhost:3000 shows the frontend, everything fine there, trying to login with fake credentials (username: 123, password: 123) works instead of failing with auth errors. So somewhere in the frontend container dummy data is stored and now sent to the client. The page at http://localhost:3000/projects shows a list of (dummy/testing) projects, where one would expect to see nothing (ie. auth errors)

As an example, this is the login call my browser tries:

curl 'http://localhost:3000/v1/auth-token' \
-XPOST \
-H 'Content-Type: application/json;charset=utf-8' \
--data-binary '{"username":"123","password":"123"}'

Which returns html…

When I point (hack) the nuxt code to some (dummy) url (http://localhost:12345/v1) to use as API, it does return Incorrect username or password when trying to login.

I haven’t looked at the code yet, figured I’d get this reported first.

Your Environment

• Operating System: docker/mac
• How did you install doccano (Heroku button etc): docker build

[Hironsan]

In early development, I have been developing frontend by using dummy API. It’s accessible from localhost:3000/v1. I used Nuxt’s serverMiddleware to implement the API. So If we remove the following lines, the API will be unreachable.

https://github.com/doccano/doccano/blob/a71fbd3e4ce576bfc08c0a5ca724388378200177/frontend/nuxt.config.js#L29-L31

Actually, it’s legacy code. I’m currently using Python’s backend API instead of the dummy API. It’s deletable.

[harmw]

the tryLogin() logic in frontend/components/organisms/auth/LoginForm.vue:

tryLogin() {
      if (this.validate()) {
        this.login({
          username: this.username,
          password: this.password
        })
          .then((result) => {
              this.$router.push('/projects')
          })
          .catch(() => {
            this.showError = true
          })
[..]

hypothesis: when the backend API returns a HTTP/400 vue triggers the catch(). However, since we’re talking to /v1 we get html returned, ie. a HTTP/200 which causes vue to move along with this.$router.push('/projects'). Meaning, we’re logged on and get to see the dummy data.

Would probably be sensible to just check if result is an object that holds a token-field, as that is how the API tells us everything is fine.