Update react monorepo

.gitignore

@@ -1,2 +1,4 @@
 target/
-cache/
+cache/
+tokens.bin
+.auth_key

Cargo.lock

@@ -147,6 +147,7 @@ dependencies = [
  "prost",
  "prost-build",
  "prost-types",
+ "rand 0.9.2",
  "reqwest",
  "rocket",
  "rocket_prost_responder_derive",

backend/Cargo.toml

@@ -19,6 +19,7 @@ serde_json = "1.0"
 reqwest = { version = "0.13", features = ["json"] }
 aes-gcm = "0.10"
 base64 = "0.22"
+rand = "0.9.2"
 
 [build-dependencies]
 prost-build = "0.14"

backend/src/auth.rs

@@ -7,7 +7,6 @@ use std::collections::{HashMap, HashSet};
 use uuid::Uuid;
 
 pub struct AuthState {
-    // Map token -> username
     tokens: Mutex<HashMap<String, String>>,
     storage: AuthStorage,
 }
@@ -65,7 +64,6 @@ impl<'r> rocket::request::FromRequest<'r> for Token {
 
         match token {
             Some(token) => {
-                // Check if token starts with "Bearer "
                 if let Some(token) = token.strip_prefix("Bearer ") {
                     let state = request.guard::<&State<AuthState>>().await.unwrap();
                     let tokens = state.tokens.lock().await;

backend/src/auth_persistence.rs

@@ -185,7 +185,7 @@ impl AuthStorage {
             }
         };
 
-        let nonce_bytes: [u8; NONCE_SIZE] = rand::thread_rng().generate_bytes();
+        let nonce_bytes: [u8; NONCE_SIZE] = rand::random();
         let nonce = Nonce::from_slice(&nonce_bytes);
         let ciphertext = match self.cipher.encrypt(nonce, plaintext.as_ref()) {
             Ok(encrypted) => encrypted,
@@ -225,37 +225,3 @@ impl AuthStorage {
         }
     }
 }
-
-mod rand {
-    use std::cell::Cell;
-
-    thread_local! {
-        static STATE: Cell<u64> = Cell::new(
-            std::time::SystemTime::now()
-                .duration_since(std::time::UNIX_EPOCH)
-                .unwrap_or_default()
-                .as_nanos() as u64
-        );
-    }
-
-    pub struct ThreadRng;
-
-    pub fn thread_rng() -> ThreadRng {
-        ThreadRng
-    }
-
-    impl ThreadRng {
-        pub fn generate_bytes<const N: usize>(&mut self) -> [u8; N] {
-            let mut result = [0u8; N];
-            STATE.with(|state| {
-                let mut s = state.get();
-                for byte in result.iter_mut() {
-                    s = s.wrapping_mul(1103515245).wrapping_add(12345);
-                    *byte = (s >> (s % 8)) as u8;
-                }
-                state.set(s);
-            });
-            result
-        }
-    }
-}

backend/src/lib.rs

@@ -8,7 +8,10 @@ pub mod items {
 pub mod auth;
 pub mod auth_persistence;
 pub mod proto_utils;
+pub mod security_headers;
 pub mod store;
+pub mod validation;
 
 pub use auth::AdminState;
+pub use security_headers::SecurityHeaders;
 pub use store::User;

backend/src/main.rs

@@ -6,7 +6,9 @@ use backend::auth;
 use backend::auth::AdminState;
 use backend::items::{self, Game};
 use backend::proto_utils;
+use backend::security_headers::SecurityHeaders;
 use backend::store::{self, User, save_state};
+use backend::validation;
 
 #[macro_use]
 extern crate rocket;
@@ -17,6 +19,10 @@ async fn get_user(
     user_list: &rocket::State<Mutex<Vec<User>>>,
     name: &str,
 ) -> Option<items::Person> {
+    if validation::validate_username(name).is_err() {
+        return None;
+    }
+
     let users = user_list.lock().await;
     users
         .iter()
@@ -41,6 +47,10 @@ async fn get_game(
     game_list: &rocket::State<Mutex<Vec<Game>>>,
     title: &str,
 ) -> Option<items::Game> {
+    if validation::validate_game_title(title).is_err() {
+        return None;
+    }
+
     let games = game_list.lock().await;
     games
         .iter()
@@ -53,12 +63,16 @@ async fn get_games_batch(
     _token: auth::Token,
     game_list: &rocket::State<Mutex<Vec<Game>>>,
     req: proto_utils::Proto<items::GetGameInfoRequest>,
-) -> items::GameList {
+) -> Result<items::GameList, String> {
-    let games = game_list.lock().await;
     let req = req.into_inner();
+
+    let games_set: std::collections::HashSet<String> = req.games.into_iter().collect();
+    validation::validate_game_titles_batch(&games_set)?;
+
+    let games = game_list.lock().await;
     let mut games = games.clone();
-    games.retain(|g| req.games.contains(&g.title));
+    games.retain(|g| games_set.contains(&g.title));
-    items::GameList { games }
+    Ok(items::GameList { games })
 }
 
 #[get("/games")]
@@ -72,55 +86,75 @@ async fn get_games(
     }
 }
 
-#[post("/game", data = "<game>")]
+#[post("/game", data = "<game>", rank = 1)]
 async fn add_game(
     _token: auth::Token,
     game_list: &rocket::State<Mutex<Vec<Game>>>,
     user_list: &rocket::State<Mutex<Vec<User>>>,
     game: proto_utils::Proto<items::Game>,
-) -> Option<items::Game> {
+) -> Result<Option<items::Game>, String> {
-    let mut games = game_list.lock().await;
     let mut game = game.into_inner();
 
     game.title = game.title.trim().to_string();
 
-    if game.remote_id == 0 {
+    validation::validate_game_title(&game.title)?;
-        return None;
+    validation::validate_remote_id(game.remote_id)?;
+    validation::validate_player_count(game.min_players, game.max_players)?;
+    validation::validate_price(game.price)?;
+
+    if game.title.len() > validation::MAX_GAME_TITLE_TRIMMED_LENGTH {
+        game.title = game
+            .title
+            .chars()
+            .take(validation::MAX_GAME_TITLE_TRIMMED_LENGTH)
+            .collect();
     }
 
+    let users = user_list.lock().await;
+    let mut games = game_list.lock().await;
+
     if let Some(existing) = games.iter().find(|g| {
         g.title == game.title || (g.remote_id == game.remote_id && g.source == game.source)
     }) {
-        return Some(existing.clone());
+        return Ok(Some(existing.clone()));
     }
 
     games.push(game.clone());
 
     games.sort_unstable_by(|g1, g2| g1.title.cmp(&g2.title));
 
-    let users = user_list.lock().await;
     save_state(&games, &users);
 
-    Some(game)
+    Ok(Some(game))
 }
 
-#[patch("/game", data = "<game>")]
+#[patch("/game", data = "<game>", rank = 1)]
 async fn update_game(
     _token: auth::AdminToken,
     game_list: &rocket::State<Mutex<Vec<Game>>>,
     user_list: &rocket::State<Mutex<Vec<User>>>,
     game: proto_utils::Proto<items::Game>,
-) -> Option<items::Game> {
+) -> Result<Option<items::Game>, String> {
-    let mut games = game_list.lock().await;
-    let mut users = user_list.lock().await;
     let mut game = game.into_inner();
 
     game.title = game.title.trim().to_string();
 
-    if game.remote_id == 0 {
+    validation::validate_game_title(&game.title)?;
-        return None;
+    validation::validate_remote_id(game.remote_id)?;
+    validation::validate_player_count(game.min_players, game.max_players)?;
+    validation::validate_price(game.price)?;
+
+    if game.title.len() > validation::MAX_GAME_TITLE_TRIMMED_LENGTH {
+        game.title = game
+            .title
+            .chars()
+            .take(validation::MAX_GAME_TITLE_TRIMMED_LENGTH)
+            .collect();
     }
 
+    let mut users = user_list.lock().await;
+    let mut games = game_list.lock().await;
+
     let mut r_existing = None;
 
     if let Some(existing) = games.iter_mut().find(|g| {
@@ -128,7 +162,6 @@ async fn update_game(
     }) {
         if existing.title != game.title {
             let old_title = existing.title.clone();
-            // Update title for every opinion
             for person in users.iter_mut() {
                 let opinion = person
                     .person
@@ -154,16 +187,19 @@ async fn update_game(
 
     save_state(&games, &users);
 
-    r_existing
+    Ok(r_existing)
 }
 
-#[delete("/game/<title>")]
+#[delete("/game/<title>", rank = 1)]
 async fn delete_game(
     _token: auth::AdminToken,
     game_list: &rocket::State<Mutex<Vec<Game>>>,
     user_list: &rocket::State<Mutex<Vec<User>>>,
     title: &str,
-) -> Option<items::Game> {
+) -> Result<Option<items::Game>, String> {
+    validation::validate_game_title(title)?;
+
+    let mut users = user_list.lock().await;
     let mut games = game_list.lock().await;
 
     if let Some(pos) = games
@@ -172,21 +208,19 @@ async fn delete_game(
     {
         let game = games.remove(pos);
 
-        let mut users = user_list.lock().await;
-
         for person in users.iter_mut() {
             person.person.opinion.retain_mut(|o| o.title != game.title);
         }
 
         save_state(&games, &users);
 
-        return Some(game);
+        return Ok(Some(game));
     }
 
-    None
+    Ok(None)
 }
 
-#[post("/refresh")]
+#[post("/refresh", rank = 1)]
 async fn refresh_state(
     _token: auth::AdminToken,
     game_list: &rocket::State<Mutex<Vec<Game>>>,
@@ -194,8 +228,8 @@ async fn refresh_state(
     admin_state: &rocket::State<AdminState>,
 ) -> items::RefreshResponse {
     if let Some((new_games, new_users)) = store::load_state() {
-        let mut games = game_list.lock().await;
         let mut users = user_list.lock().await;
+        let mut games = game_list.lock().await;
         let mut admins = admin_state.admins.lock().await;
 
         *games = new_games;
@@ -214,20 +248,21 @@ async fn refresh_state(
     }
 }
 
-#[post("/opinion", data = "<req>")]
+#[post("/opinion", data = "<req>", rank = 1)]
 async fn add_opinion(
     token: auth::Token,
     game_list: &rocket::State<Mutex<Vec<Game>>>,
     user_list: &rocket::State<Mutex<Vec<User>>>,
     req: proto_utils::Proto<items::AddOpinionRequest>,
-) -> Option<items::Person> {
+) -> Result<Option<items::Person>, String> {
+    validation::validate_username(&token.username)?;
+
     let games = game_list.lock().await;
     let mut users = user_list.lock().await;
     let mut result = None;
 
-    // Validate game exists
     if !games.iter().any(|g| g.title == req.game_title) {
-        return None;
+        return Err("Game not found".to_string());
     }
 
     if let Some(user) = users
@@ -235,6 +270,8 @@ async fn add_opinion(
         .find(|u| u.person.name.to_lowercase() == token.username.to_lowercase())
     {
         let req = req.into_inner();
+        validation::validate_game_title(&req.game_title)?;
+
         let opinion = items::Opinion {
             title: req.game_title.clone(),
             would_play: req.would_play,
@@ -260,16 +297,18 @@ async fn add_opinion(
     if result.is_some() {
         save_state(&games, &users);
     }
-    result
+    Ok(result)
 }
 
-#[patch("/opinion", data = "<req>")]
+#[patch("/opinion", data = "<req>", rank = 1)]
 async fn remove_opinion(
     token: auth::Token,
     game_list: &rocket::State<Mutex<Vec<Game>>>,
     user_list: &rocket::State<Mutex<Vec<User>>>,
     req: proto_utils::Proto<items::RemoveOpinionRequest>,
-) -> Option<items::Person> {
+) -> Result<Option<items::Person>, String> {
+    validation::validate_username(&token.username)?;
+
     let games = game_list.lock().await;
     let mut users = user_list.lock().await;
     let mut result = None;
@@ -279,6 +318,7 @@ async fn remove_opinion(
         .find(|u| u.person.name.to_lowercase() == token.username.to_lowercase())
     {
         let req = req.into_inner();
+        validation::validate_game_title(&req.game_title)?;
 
         if let Some(existing) = user
             .person
@@ -294,7 +334,7 @@ async fn remove_opinion(
     if result.is_some() {
         save_state(&games, &users);
     }
-    result
+    Ok(result)
 }
 
 mod cached_option;
@@ -447,6 +487,7 @@ async fn main() -> Result<(), std::io::Error> {
     });
 
     rocket::build()
+        .attach(SecurityHeaders)
         .manage(Mutex::new(user_list))
         .manage(auth::AuthState::new())
         .manage(auth::AdminState::new())

backend/src/security_headers.rs

@@ -0,0 +1,33 @@
+use rocket::fairing::{Fairing, Info, Kind};
+use rocket::http::Header;
+use rocket::{Request, Response};
+
+pub struct SecurityHeaders;
+
+#[rocket::async_trait]
+impl Fairing for SecurityHeaders {
+    fn info(&self) -> Info {
+        Info {
+            name: "Security Headers",
+            kind: Kind::Response,
+        }
+    }
+
+    async fn on_response<'r>(&self, _request: &'r Request<'_>, response: &mut Response<'r>) {
+        response.set_header(Header::new("X-Content-Type-Options", "nosniff"));
+        response.set_header(Header::new("X-Frame-Options", "DENY"));
+        response.set_header(Header::new("X-XSS-Protection", "1; mode=block"));
+        response.set_header(Header::new(
+            "Referrer-Policy",
+            "strict-origin-when-cross-origin",
+        ));
+        response.set_header(Header::new(
+            "Content-Security-Policy",
+            "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-ancestors 'none';",
+        ));
+        response.set_header(Header::new(
+            "Permissions-Policy",
+            "geolocation=(), microphone=(), camera=()",
+        ));
+    }
+}

backend/src/validation.rs

@@ -0,0 +1,108 @@
+use std::collections::HashSet;
+
+pub const MAX_USERNAME_LENGTH: usize = 50;
+pub const MIN_USERNAME_LENGTH: usize = 2;
+pub const MAX_GAME_TITLE_LENGTH: usize = 200;
+const MIN_GAME_TITLE_LENGTH: usize = 1;
+pub const MAX_GAME_TITLE_TRIMMED_LENGTH: usize = 200;
+pub const MAX_PRICE: u32 = 1_000_000;
+pub const MAX_PLAYERS: u32 = 10_000;
+
+const VALID_USERNAME_CHARS: &str =
+    "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-";
+
+pub fn validate_username(username: &str) -> Result<(), String> {
+    let trimmed = username.trim();
+
+    if trimmed.is_empty() {
+        return Err("Username cannot be empty".to_string());
+    }
+
+    if trimmed.len() < MIN_USERNAME_LENGTH {
+        return Err(format!(
+            "Username must be at least {} characters long",
+            MIN_USERNAME_LENGTH
+        ));
+    }
+
+    if trimmed.len() > MAX_USERNAME_LENGTH {
+        return Err(format!(
+            "Username must not exceed {} characters",
+            MAX_USERNAME_LENGTH
+        ));
+    }
+
+    for c in trimmed.chars() {
+        if !VALID_USERNAME_CHARS.contains(c) {
+            return Err(format!(
+                "Username contains invalid character '{}'. Only alphanumeric characters, underscores and hyphens are allowed",
+                c
+            ));
+        }
+    }
+
+    Ok(())
+}
+
+pub fn validate_game_title(title: &str) -> Result<(), String> {
+    if title.trim().is_empty() {
+        return Err("Game title cannot be empty".to_string());
+    }
+
+    if title.len() > MAX_GAME_TITLE_LENGTH {
+        return Err(format!(
+            "Game title must not exceed {} characters",
+            MAX_GAME_TITLE_LENGTH
+        ));
+    }
+
+    Ok(())
+}
+
+pub fn validate_remote_id(remote_id: u64) -> Result<(), String> {
+    if remote_id == 0 {
+        return Err("Remote ID cannot be zero".to_string());
+    }
+
+    Ok(())
+}
+
+pub fn validate_player_count(min_players: u32, max_players: u32) -> Result<(), String> {
+    if min_players == 0 {
+        return Err("Minimum players must be at least 1".to_string());
+    }
+
+    if min_players > max_players {
+        return Err("Minimum players cannot be greater than maximum players".to_string());
+    }
+
+    if max_players > MAX_PLAYERS {
+        return Err(format!("Maximum players cannot exceed {}", MAX_PLAYERS));
+    }
+
+    Ok(())
+}
+
+pub fn validate_price(price: u32) -> Result<(), String> {
+    if price > MAX_PRICE {
+        return Err(format!("Price cannot exceed ${}", MAX_PRICE));
+    }
+
+    Ok(())
+}
+
+pub fn validate_game_titles_batch(titles: &HashSet<String>) -> Result<(), String> {
+    if titles.is_empty() {
+        return Ok(());
+    }
+
+    if titles.len() > 100 {
+        return Err("Cannot request more than 100 games at once".to_string());
+    }
+
+    for title in titles {
+        validate_game_title(title)?;
+    }
+
+    Ok(())
+}

frontend/items.ts

@@ -1,6 +1,6 @@
 // Code generated by protoc-gen-ts_proto. DO NOT EDIT.
 // versions:
-//   protoc-gen-ts_proto  v2.8.3
+//   protoc-gen-ts_proto  v2.10.1
 //   protoc               v6.33.1
 // source: items.proto
 

frontend/package.json

@@ -11,24 +11,24 @@
     "gen:proto": "protoc --plugin=./node_modules/.bin/protoc-gen-ts_proto --ts_proto_out=. -I ../protobuf items.proto"
   },
   "dependencies": {
-    "@bufbuild/protobuf": "^2.10.1",
+    "@bufbuild/protobuf": "^2.10.2",
-    "react": "^19.2.1",
+    "react": "^19.2.3",
-    "react-dom": "^19.2.1",
+    "react-dom": "^19.2.3",
-    "react-router-dom": "^7.10.1"
+    "react-router-dom": "^7.12.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
-    "@types/node": "^24.10.1",
+    "@types/node": "^24.10.7",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-react-refresh": "^0.4.26",
     "globals": "^16.5.0",
-    "ts-proto": "^2.8.3",
+    "ts-proto": "^2.10.1",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.48.1",
+    "typescript-eslint": "^8.53.0",
     "vite": "npm:rolldown-vite@7.2.5"
   },
   "pnpm": {

frontend/src/App.tsx

@@ -41,6 +41,15 @@ function App() {
     _setTheme(ev.data as string);
   };
 
+  const addToast = useCallback((message: string, type: ToastType = "info") => {
+    const id = Date.now();
+    setToasts((prev) => [...prev, { id, message, type }]);
+  }, []);
+
+  const removeToast = (id: number) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  };
+
   useEffect(() => {
     if (theme !== "default" && theme !== "sakura") {
       document.body.classList.remove("sakura-theme");
@@ -73,15 +82,6 @@ function App() {
     return () => window.removeEventListener("unauthorized", handleUnauthorized);
   }, [addToast]);
 
-  const addToast = useCallback((message: string, type: ToastType = "info") => {
-    const id = Date.now();
-    setToasts((prev) => [...prev, { id, message, type }]);
-  }, []);
-
-  const removeToast = (id: number) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  };
-
   const fetchPeople = () => {
     if (!token) return;
     setIsLoading(true);

frontend/src/Login.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { LoginRequest, LoginResponse } from "../items";
 
 interface LoginProps {
@@ -6,11 +6,18 @@ interface LoginProps {
 }
 
 export function Login({ onLogin }: LoginProps) {
+  const usernameInputRef = useRef<HTMLInputElement>(null);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [fieldErrors, setFieldErrors] = useState<{ username?: string, password?: string }>({});
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [shakeCard, setShakeCard] = useState(false);
+
+  useEffect(() => {
+    usernameInputRef.current?.focus();
+  }, []);
 
   const validateForm = () => {
     const errors: { username?: string, password?: string } = {};
@@ -24,7 +31,11 @@ export function Login({ onLogin }: LoginProps) {
     e.preventDefault();
     setError("");
 
-    if (!validateForm()) return;
+    if (!validateForm()) {
+      setShakeCard(true);
+      setTimeout(() => setShakeCard(false), 500);
+      return;
+    }
 
     setIsSubmitting(true);
 
@@ -44,110 +55,364 @@ export function Login({ onLogin }: LoginProps) {
       const response = LoginResponse.decode(new Uint8Array(buffer));
 
       if (response.success) {
+        setIsSuccess(true);
         onLogin(response.token);
       } else {
         setError(response.message || "Login failed");
+        setShakeCard(true);
+        setTimeout(() => setShakeCard(false), 500);
       }
     } catch (err) {
       console.error("Login error:", err);
       setError("An unexpected error occurred. Please try again.");
+      setShakeCard(true);
+      setTimeout(() => setShakeCard(false), 500);
     } finally {
       setIsSubmitting(false);
     }
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleSubmit(e);
+    }
+  };
+
   return (
-    <div className="card" style={{ maxWidth: "400px", margin: "4rem auto" }}>
+    <div
-      <h2 style={{ textAlign: "center", marginBottom: "2rem" }}>🎮 Login</h2>
+      className="card login-card"
-      <form onSubmit={handleSubmit} className="form-group">
+      style={{
-        <div className="form-group">
+        maxWidth: "420px",
-          <label>Username</label>
+        margin: "6rem auto",
-          <input
+        padding: "2.5rem",
-            type="text"
+        background: "linear-gradient(135deg, var(--secondary-bg) 0%, var(--secondary-alt-bg) 100%)",
-            value={username}
+        position: "relative"
-            onChange={(e) => {
+      }}
-              setUsername(e.target.value);
+    >
-              if (fieldErrors.username) setFieldErrors({ ...fieldErrors, username: undefined });
+      {isSubmitting && (
-            }}
-            placeholder="Enter your username"
-            style={{
-              borderColor: fieldErrors.username ? "#f44336" : undefined,
-              borderWidth: fieldErrors.username ? "2px" : undefined
-            }}
-          />
-          {fieldErrors.username && (
-            <span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
-              {fieldErrors.username}
-            </span>
-          )}
-        </div>
-        <div className="form-group">
-          <label>Password</label>
-          <input
-            type="password"
-            value={password}
-            onChange={(e) => {
-              setPassword(e.target.value);
-              if (fieldErrors.password) setFieldErrors({ ...fieldErrors, password: undefined });
-            }}
-            placeholder="Enter your password"
-            style={{
-              borderColor: fieldErrors.password ? "#f44336" : undefined,
-              borderWidth: fieldErrors.password ? "2px" : undefined
-            }}
-          />
-          {fieldErrors.password && (
-            <span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
-              {fieldErrors.password}
-            </span>
-          )}
-        </div>
-        <button
-          type="submit"
-          style={{ marginTop: "1rem", width: "100%", opacity: isSubmitting ? 0.7 : 1, cursor: isSubmitting ? "not-allowed" : "pointer" }}
-          disabled={isSubmitting}
-        >
-          {isSubmitting ? (
-            <>
-              <span
-                style={{
-                  width: "14px",
-                  height: "14px",
-                  border: "2px solid rgba(255,255,255,0.3)",
-                  borderTopColor: "white",
-                  borderRadius: "50%",
-                  animation: "spin 0.8s linear infinite",
-                  display: "inline-block",
-                  marginRight: "0.5rem"
-                }}
-              ></span>
-              Logging in...
-            </>
-          ) : (
-            "Login"
-          )}
-        </button>
-      </form>
-      {error && (
         <div
           style={{
-            backgroundColor: "rgba(244, 67, 54, 0.1)",
+            position: "absolute",
-            border: "1px solid rgba(244, 67, 54, 0.3)",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            borderRadius: "16px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 10,
+            backdropFilter: "blur(2px)"
+          }}
+        >
+          <div
+            style={{
+              width: "48px",
+              height: "48px",
+              border: "4px solid rgba(255, 255, 255, 0.2)",
+              borderTopColor: "white",
+              borderRadius: "50%",
+              animation: "spin 0.8s linear infinite"
+            }}
+          />
+        </div>
+      )}
+
+      {isSuccess && (
+        <div
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "1rem",
+            animation: "fadeInScale 0.5s ease forwards",
+            zIndex: 10
+          }}
+        >
+          <div
+            style={{
+              width: "64px",
+              height: "64px",
+              borderRadius: "50%",
+              backgroundColor: "#4caf50",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "2rem",
+              color: "white",
+              boxShadow: "0 0 20px rgba(76, 175, 80, 0.5)"
+            }}
+          >
+            ✓
+          </div>
+          <span style={{ color: "#4caf50", fontWeight: 600, fontSize: "1.1rem" }}>
+            Success!
+          </span>
+        </div>
+      )}
+
+      <h2
+        style={{
+          textAlign: "center",
+          marginBottom: "0.5rem",
+          fontSize: "2rem",
+          fontWeight: 700
+        }}
+      >
+        🎮 Login
+      </h2>
+      <p
+        style={{
+          textAlign: "center",
+          color: "var(--text-muted)",
+          marginBottom: "2rem",
+          fontSize: "0.95rem"
+        }}
+      >
+        Welcome back! Please sign in to continue.
+      </p>
+
+      <form onSubmit={handleSubmit} className="form-group">
+        <div className="form-group" style={{ marginBottom: "1.5rem" }}>
+          <label
+            style={{
+              display: "block",
+              marginBottom: "0.5rem",
+              fontWeight: 500,
+              color: "var(--text-color)",
+              fontSize: "0.95rem"
+            }}
+          >
+            Username
+          </label>
+          <div
+            style={{
+              position: "relative",
+              display: "flex",
+              alignItems: "center"
+            }}
+          >
+            <span
+              style={{
+                position: "absolute",
+                left: "0.75rem",
+                color: "var(--text-muted)",
+                pointerEvents: "none",
+                fontSize: "1.1rem"
+              }}
+            >
+              👤
+            </span>
+            <input
+              ref={usernameInputRef}
+              type="text"
+              value={username}
+              onChange={(e) => {
+                setUsername(e.target.value);
+                if (fieldErrors.username) setFieldErrors({ ...fieldErrors, username: undefined });
+              }}
+              onKeyDown={handleKeyDown}
+              placeholder="Enter your username"
+              aria-label="Username"
+              aria-invalid={!!fieldErrors.username}
+              aria-describedby={fieldErrors.username ? "username-error" : undefined}
+              style={{
+                width: "100%",
+                paddingLeft: "2.75rem",
+                paddingRight: "0.75rem",
+                paddingTop: "0.75rem",
+                paddingBottom: "0.75rem",
+                borderColor: fieldErrors.username ? "#f44336" : undefined,
+                borderWidth: fieldErrors.username ? "2px" : "1px",
+                fontSize: "1rem"
+              }}
+            />
+          </div>
+          {fieldErrors.username && (
+            <span
+              id="username-error"
+              role="alert"
+              style={{
+                color: "#ff6b6b",
+                fontSize: "0.85rem",
+                marginTop: "0.5rem",
+                display: "flex",
+                alignItems: "center",
+                gap: "0.25rem"
+              }}
+            >
+              ⚠️ {fieldErrors.username}
+            </span>
+          )}
+        </div>
+
+        <div className="form-group" style={{ marginBottom: "2rem" }}>
+          <label
+            style={{
+              display: "block",
+              marginBottom: "0.5rem",
+              fontWeight: 500,
+              color: "var(--text-color)",
+              fontSize: "0.95rem"
+            }}
+          >
+            Password
+          </label>
+          <div
+            style={{
+              position: "relative",
+              display: "flex",
+              alignItems: "center"
+            }}
+          >
+            <span
+              style={{
+                position: "absolute",
+                left: "0.75rem",
+                color: "var(--text-muted)",
+                pointerEvents: "none",
+                fontSize: "1.1rem"
+              }}
+            >
+              🔒
+            </span>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => {
+                setPassword(e.target.value);
+                if (fieldErrors.password) setFieldErrors({ ...fieldErrors, password: undefined });
+              }}
+              onKeyDown={handleKeyDown}
+              placeholder="Enter your password"
+              aria-label="Password"
+              aria-invalid={!!fieldErrors.password}
+              aria-describedby={fieldErrors.password ? "password-error" : undefined}
+              style={{
+                width: "100%",
+                paddingLeft: "2.75rem",
+                paddingRight: "0.75rem",
+                paddingTop: "0.75rem",
+                paddingBottom: "0.75rem",
+                borderColor: fieldErrors.password ? "#f44336" : undefined,
+                borderWidth: fieldErrors.password ? "2px" : "1px",
+                fontSize: "1rem"
+              }}
+            />
+          </div>
+          {fieldErrors.password && (
+            <span
+              id="password-error"
+              role="alert"
+              style={{
+                color: "#ff6b6b",
+                fontSize: "0.85rem",
+                marginTop: "0.5rem",
+                display: "flex",
+                alignItems: "center",
+                gap: "0.25rem"
+              }}
+            >
+              ⚠️ {fieldErrors.password}
+            </span>
+          )}
+        </div>
+
+        <button
+          type="submit"
+          style={{
+            marginTop: "0.5rem",
+            width: "100%",
+            padding: "0.875rem",
+            fontSize: "1rem",
+            fontWeight: 600,
+            opacity: isSubmitting ? 0.7 : 1,
+            cursor: isSubmitting ? "not-allowed" : "pointer",
+            background: "linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%)",
+            border: "none",
+            transition: "transform 0.1s, box-shadow 0.2s"
+          }}
+          disabled={isSubmitting}
+          onMouseEnter={(e) => {
+            if (!isSubmitting) {
+              e.currentTarget.style.transform = "translateY(-1px)";
+              e.currentTarget.style.boxShadow = "0 4px 12px rgba(9, 109, 192, 0.4)";
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (!isSubmitting) {
+              e.currentTarget.style.transform = "translateY(0)";
+              e.currentTarget.style.boxShadow = "none";
+            }
+          }}
+          onMouseDown={(e) => {
+            if (!isSubmitting) {
+              e.currentTarget.style.transform = "translateY(0)";
+            }
+          }}
+        >
+          Login
+        </button>
+      </form>
+
+      {error && (
+        <div
+          role="alert"
+          style={{
+            backgroundColor: "rgba(244, 67, 54, 0.15)",
+            border: "1px solid rgba(244, 67, 54, 0.4)",
             color: "#ff6b6b",
-            padding: "1rem",
+            padding: "0.875rem 1rem",
             borderRadius: "8px",
-            marginTop: "1rem",
+            marginTop: "1.5rem",
             textAlign: "center",
-            fontSize: "0.9rem"
+            fontSize: "0.9rem",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "0.5rem"
           }}
         >
           ⚠️ {error}
         </div>
       )}
+
       <style>{`
         @keyframes spin {
           to { transform: rotate(360deg); }
         }
+
+        @keyframes fadeInScale {
+          from {
+            opacity: 0;
+            transform: translate(-50%, -40%) scale(0.8);
+          }
+          to {
+            opacity: 1;
+            transform: translate(-50%, -50%) scale(1);
+          }
+        }
+
+        .login-card {
+          animation: ${shakeCard ? "shake 0.5s ease" : "none"};
+        }
+
+        @keyframes shake {
+          0%, 100% {
+            transform: translateX(0);
+          }
+          20%, 60% {
+            transform: translateX(-8px);
+          }
+          40%, 80% {
+            transform: translateX(8px);
+          }
+        }
       `}</style>
     </div>
   );

frontend/src/components/FilteredGamesList.tsx

@@ -35,7 +35,11 @@ export function FilteredGamesList({
             const positiveCount = gameToPositive.get(game)?.size || 0;
             const neutralCount = selectedPeopleCount - positiveCount;
             const gameData = games.get(game);
-            const price = gameData?.price ?? 0;
+            if (!gameData) {
+              console.error("no data", game);
+              return null;
+            }
+            const price = gameData.price;
 
             return (
               <Link
@@ -81,7 +85,10 @@ export function FilteredGamesList({
                       padding: "0.2rem 0.6rem",
                       borderRadius: "4px",
                       display: "inline-block",
-                      backgroundColor: price === 0 ? "rgba(76, 175, 80, 0.2)" : "rgba(255, 152, 0, 0.2)",
+                      backgroundColor:
+                        price === 0
+                          ? "rgba(76, 175, 80, 0.2)"
+                          : "rgba(255, 152, 0, 0.2)",
                       color: price === 0 ? "#4caf50" : "#ff9800",
                       fontWeight: 600,
                     }}

frontend/src/hooks/useGameFilter.ts

@@ -112,9 +112,7 @@ export function useGameFilter(
     selectedPeople,
   ]);
 
-  const gamesMap = useMemo(() => {
+  const gamesMap = new Map(Object.entries(metaDataRef.current));
-    return new Map(Object.entries(metaDataRef.current));
-  }, []);
 
   return { filteredGames, gameToPositive: gameToPositiveOpinion, games: gamesMap };
 }

frontend/src/index.css

@@ -130,8 +130,8 @@ ul {
   --secondary-alt-bg: rgb(20, 20, 20, 0.6); /* Translucent inputs */
   --tertiary-bg: rgb(40, 40, 40, 0.8);
   --text-color: #ffffff;
-  --accent-color: #121212;
+  --accent-color: #FF9500;
-  --secondary-accent: #212121;
+  --secondary-accent: #FF6B00;
 }
 
 .sakura-theme {