nok-ko/chessproject

chessproject's Issues

Display Sign Up / Log In dialog errors inside the dialog itself

Tasks

• Make fetch()es time out after ~6 seconds without a response.
  • Show a spinner or something while the request is pending?
• In handleSignup() & handleLogin(), display errors in the .errorMessage span element inside of the appropriate dialog.

Basic Layout

We should make sure the basic structure of our app makes sense:

Task List

• Figure out which UI elements we should include
• Make a mobile-friendly alternate layout
• Decide on a simple colour scheme and font
• Make sure our CSS follows industry practices (rem vs. em, custom properties where appropriate, etc.)
• Make a (placeholder) favicon

Fix Chessboard Display Logic

Not certain we'll even keep the whole “hoversquare” thing, but I'm pretty sure we'll need to figure out which square of the chessboard our players click on. Currently this logic is a little broken:

• Resizing the webpage breaks everything! (Actually fixed this in #6 I think)
• Side effect of switching from pixel-based offsets to percent-based offsets in #6: It might be hard to retrofit the existing piece-movement code to support non-square chessboards. I kind of want to, at some point, but it's low priority for now, really.
• We should support drag-and-drop movement, as well as click-piece-click-square movement

User Authentication

Tasks: (Server-side)

• Hash user passwords.
  • Done using the bcrypt module.
• On login:
  • Accept an email/password pair as query parameters on the /login endpoint…
    • #11
  • Check if a user with this email exists…
    • If user does not exist, send back an error.
  • Check if the password hashes alike to the hash we have stored for that user…
    • If hashes don't match, send back an error.
  • Generate a session token and log the user in if the hashes match.
    • Send back a success message with the token and some user info on successful login.
  • Use exponential timeouts for failing login attempts. (Not allowed to do another one for 1 second, 1 second, 1 second, 10 seconds, 100 seconds…)
  • Also implement other bot/spam prevention measures on this endpoint!
• On signup:
  • Accept K/V pairs of {email:"…", pass:"…", handle:"…"} as query parameters on the /signup endpoint:
    • #10
  • Implement bot/spam prevention measures on this endpoint!

Tasks: (Client-side)

• Keep track of “logged in” state
  • #12
  • Display logged-in users' usernames
• #13
  • Add more form validation (Research the best way to do this!)

Validate parameters received by `/signup` endpoint before writing to DB

• Reject empty fields
• Reject duplicate handles
• Reject duplicate e-mails
• Reject fields that are too long
• #16

Show a “Log Out” button to logged-in users

Reject weak passwords (Use `zxcvbn`?)

Use the `better-sqlite3` library instead of `sqlite3`

🤦
Low, low priority thing, but it seems like this is the better SQLite library.

Accept handle + password logins

• Add a uniqueness constraint on handles in the DB schema
• Fall back to looking up users by handle if no email is given to the /login endpoint

Set Up the Server!

Let's write the backend! I think that I'll use Node.js serverside, with express and express-session. And probably SQLite for the database with some connector library or another. I might try to put the whole thing into a Docker container, too… but that could get a bit complicated. Gonna keep it simple for now!

Task List

• Make a basic Express App that just serves the static content
• Set up session handling with express-session
• #9
  • Set up email authentication!
    • (Magic links?)
• Use nginx as a reverse proxy for the Node.js server
• (Bonus Points) make a post-push hook that deploys to chess.nokko.me

Document the DB Schema

I should document the DB schema once I decide on one. Bahhhh.

Originally posted by @nok-ko in #7 (review)

Tasks:

• Make a SCHEMA.md file, or similar
• Factor out the SQL code inside index.js to .sql files (?)

Figure out what status codes are appropriate to send to the user

I mention it in comments, should make an issue about it too:

• Figure out what status codes are appropriate to send to the user (what's the standard in REST APIs?)

Originally posted by @nok-ko in #7 (comment)

Display Chessboard and Chess Pieces

Summary

Goal: make something that resembles Lichess!

List of Tasks

• Display chessboard
  • Display file names (A-H) and rank #’s (1-8)
• Display chess pieces
  • Decide on which set to use. Lichess has several open source piece sets! (In SVG format! Neat.)
  • We can even make a theme-switcher later! But we should get the basics down first.