feat: Conditionally render 'Add Opinion' form based on user authentication status and add Rocket server port configuration.

Rocket.toml

@@ -0,0 +1,5 @@
+[default]
+port = 8000
+
+[release]
+port = 24237

frontend/src/PersonDetails.tsx

@@ -1,6 +1,13 @@
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import { Person, AddOpinionRequest, Game, GameList } from "../items";
+import {
+  Person,
+  AddOpinionRequest,
+  Game,
+  GameList,
+  AuthStatusRequest,
+  AuthStatusResponse,
+} from "../items";
 import { apiFetch } from "./api";
 
 export const PersonDetails = () => {
@@ -9,6 +16,35 @@ export const PersonDetails = () => {
   const [games, setGames] = useState<Game[]>([]);
   const [gameTitle, setGameTitle] = useState("");
   const [wouldPlay, setWouldPlay] = useState(false);
+  const [currentUser, setCurrentUser] = useState<string>("");
+
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    if (token) {
+      const req = AuthStatusRequest.create({ token });
+      const buffer = AuthStatusRequest.encode(req).finish();
+
+      apiFetch("/auth/get_auth_status", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/octet-stream",
+        },
+        body: buffer,
+      })
+        .then((res) => res.arrayBuffer())
+        .then((buffer) => {
+          try {
+            const response = AuthStatusResponse.decode(new Uint8Array(buffer));
+            if (response.authenticated) {
+              setCurrentUser(response.username);
+            }
+          } catch (e) {
+            console.error("Failed to decode auth status:", e);
+          }
+        })
+        .catch(console.error);
+    }
+  }, []);
 
   useEffect(() => {
     apiFetch("/api/games")
@@ -99,63 +135,65 @@ export const PersonDetails = () => {
         </ul>
       </div>
 
-      <div
+      {currentUser === name && (
-        style={{
-          marginTop: "2rem",
-          borderTop: "1px solid var(--border-color)",
-          paddingTop: "2rem",
-        }}
-      >
-        <h3>Add Opinion</h3>
         <div
           style={{
-            display: "flex",
+            marginTop: "2rem",
-            gap: "1rem",
+            borderTop: "1px solid var(--border-color)",
-            alignItems: "flex-end",
+            paddingTop: "2rem",
-            flexWrap: "wrap",
           }}
         >
-          <div className="form-group" style={{ marginBottom: 0, flex: 1 }}>
+          <h3>Add Opinion</h3>
-            <label>Game</label>
-            <select
-              value={gameTitle}
-              onChange={(e) => setGameTitle(e.target.value)}
-              style={{ width: "100%" }}
-            >
-              {games.map((g) => (
-                <option key={g.title} value={g.title}>
-                  {g.title}
-                </option>
-              ))}
-            </select>
-          </div>
           <div
-            className="form-group"
             style={{
-              marginBottom: 0,
+              display: "flex",
-              flexDirection: "row",
+              gap: "1rem",
-              alignItems: "center",
+              alignItems: "flex-end",
-              paddingBottom: "0.5rem",
+              flexWrap: "wrap",
             }}
           >
-            <input
+            <div className="form-group" style={{ marginBottom: 0, flex: 1 }}>
-              type="checkbox"
+              <label>Game</label>
-              checked={wouldPlay}
+              <select
-              onChange={(e) => setWouldPlay(e.target.checked)}
+                value={gameTitle}
-              id="wouldPlay"
+                onChange={(e) => setGameTitle(e.target.value)}
-            />
+                style={{ width: "100%" }}
-            <label
+              >
-              htmlFor="wouldPlay"
+                {games.map((g) => (
-              style={{ marginBottom: 0, cursor: "pointer" }}
+                  <option key={g.title} value={g.title}>
+                    {g.title}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div
+              className="form-group"
+              style={{
+                marginBottom: 0,
+                flexDirection: "row",
+                alignItems: "center",
+                paddingBottom: "0.5rem",
+              }}
             >
-              Would Play
+              <input
-            </label>
+                type="checkbox"
+                checked={wouldPlay}
+                onChange={(e) => setWouldPlay(e.target.checked)}
+                id="wouldPlay"
+              />
+              <label
+                htmlFor="wouldPlay"
+                style={{ marginBottom: 0, cursor: "pointer" }}
+              >
+                Would Play
+              </label>
+            </div>
+            <button onClick={handleAddOpinion} style={{ marginBottom: "2px" }}>
+              Add
+            </button>
           </div>
-          <button onClick={handleAddOpinion} style={{ marginBottom: "2px" }}>
-            Add
-          </button>
         </div>
-      </div>
+      )}
     </div>
   );
 };