Added first steps towards user auth to the app

frontend/src/App.jsx

@@ -14,7 +14,7 @@ function App() {
           <Route path="/" element={<Home />} />
           <Route path="/create-station" element={<CreateStation />} />
           <Route path="/join-station" element={<JoinStation />} />
-          <Route path="/station/:id" element={<StationPage />} />
+          <Route path="/station/:id/:user_name" element={<StationPage />} />
         </Routes>
       </Router>
     </div>

frontend/src/constants/ApiConstants.js

@@ -2,3 +2,4 @@ export const RADIOSTATION_URL = "http://localhost:8080/api";
 
 export const CREATE_RADIOSTATION_ENDPOINT = "/radio-stations";
 export const LIST_RADIOSTATIONS_ENDPOINT = "/radio-stations";
+export const ADD_CLIENT_ENDPOINT = "/clients/connect";

frontend/src/screens/JoinStation.jsx

@@ -5,10 +5,13 @@ import { getStations } from "../utils/GetStations";
 function JoinStation() {
   const navigate = useNavigate();
   const [stations, setStations] = useState([]);
+  const [displayName, setDisplayName] = useState("");
 
   const handleJoinStation = (stationID) => {
-    console.log("Joining station with ID:" + stationID);
+    // console.log("Joining station with ID:" + stationID);
-    navigate(`/station/${stationID}`);
+    if (!displayName) return; // USER HAS TO HAVE DISPLAY NAME
+
+    navigate(`/station/${stationID}/${displayName}`);
   };
 
   useEffect(() => {
@@ -26,6 +29,7 @@ function JoinStation() {
       </header>
 
       <main className="join-station-content">
+        <textarea onChange={(e) => setDisplayName(e.target.value)} />
         {stations.map((station, index) => {
           return (
             <div key={index}>

frontend/src/screens/StationPage.jsx

@@ -1,10 +1,33 @@
-import React, { useState, useParams } from "react";
+import { useParams } from "react-router-dom";
+import React, { useState, useEffect } from "react";
 import AddSongModal from "./AddSongModal";
 import LoginButton from "../components/LoginButton";
+import { addClientToStation } from "../utils/AddClientToStation";
 
 function StationPage() {
-  const { id } = useParams();
+  const { joinCode, username } = useParams();
+  const [clientToken, setClientToken] = useState("");
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [accessDenied, setAccessDenied] = useState(true);
+
+  useEffect(() => {
+    const auth = async () => {
+      try {
+        const token = await addClientToStation(username, joinCode);
+        setClientToken(token);
+        setAccessDenied(false);
+      } catch (error) {
+        console.error("Auth failed:", error);
+        setAccessDenied(true);
+      }
+    };
+
+    auth();
+  }, [joinCode, username]);
+
+  if (accessDenied) {
+    return <p>Waiting for authentication</p>;
+  }
 
   const recommendedSongs = [];
 

frontend/src/utils/AddClientToStation.js

@@ -0,0 +1,33 @@
+import {
+  RADIOSTATION_URL,
+  ADD_CLIENT_ENDPOINT,
+} from "../constants/ApiConstants";
+
+export async function addClientToStation(username, joinCode) {
+  const body = {
+    username,
+    joinCode,
+  };
+
+  try {
+    const response = await fetch(RADIOSTATION_URL + ADD_CLIENT_ENDPOINT, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok || !data.success) {
+      console.error("Failed to connect to station:", data.message);
+      throw new Error(data.message || "Unknown error");
+    }
+
+    return data.data.clientToken;
+  } catch (error) {
+    console.error("Error connecting client to station:", error);
+    throw error;
+  }
+}