Login Debugging on teacher_portfolio

[aidenhuynh]

How to Run with Debugger

Frontend

1. Run locally using bundler, use whatever port bundle exec jekyll serve -P 4001

2. Open up post/markdown page locally

3. Open inspect and navigate to js code

4. Add breakpoints by clicking on the line numbers on the left.

5. When running code, press the arrow to step through each breakpoint. In our case, the code will be run when attempting to login.

Backend

1. Navigate to Main.java
2. In VSCode, press on the arrow next to the run button and click "Debug Java"

Demonstration

First, we run our frontend locally with bundle exec jekyll serve -P 4001 and navigate to http://localhost:4001/teacher_portfolio/java/login (You can choose any port, but preferably not 4000 to see a CORS error later)

Then, inspect element and find the "login" js code in Sources

Setting three breakpoints on the .fetch, .then, and .catch allows us to see possible points of error from our frontend.

The following errors occur in different cases when trying to sign in:

1. ERR_CONNECTION_REFUSED occurs from not running the backend, and is fixed by doing so

2. This CORS error occurs from not allowing the correct origins on MvcConfig.java

This error is fixed by making sure the origin is allowed, and in this case, we had to change the port to match our localhost.

@Override
    public void addCorsMappings(@NonNull CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("https://nighthawkcoders.github.io", "http://localhost:4001"); // Changed port to 4001 from 4000
    }

3. The 401 error occurs from an authorization issue, which in this case was from incorrect login credentials

This is fixed by making sure to use the correct login information from Person.java, as we testing with a random password, instead of the actual password initialized within the file.

Successful Run

The expected outcome of properly avoiding all of these errors is being redirected to the data page (http://localhost:4001/teacher_portfolio/java/data). Yay!