Added login to RadioTower

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/:user_name" element={<StationPage />} />
+          <Route path="/station/:id" element={<StationPage />} />
         </Routes>
       </Router>
     </div>

frontend/src/constants/ApiConstants.js

@@ -3,3 +3,6 @@ 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";
+
+export const SPOTIFY_PREMIUM_TOKEN =
+  "BQCEnWrYVdmta4Eekdkewazun99IuocRAyPEbwPSrHuGYgZYg7JGlXG2BLmRL6fwjzPJkrmHiqlTLSn1yqR36awA9Rv4n9dwvTBv1DjAitsuzaEVg7PtYdbUHXqP2HJJ4dDDvTtvUfWIBDY_Afa7WgY1cyRbl-p4VobNHXUR9N3Ye1qBTgH3RZ5ziIbIoNWe_JrxYvcedkvr23zXUVabOyahTgt_YdmnCWt2Iu8XT8sjhSyc8tOCqbs_KqE-Qe1WSPUCrGS8";

frontend/src/screens/CreateStation.jsx

@@ -6,9 +6,10 @@ import { createStation } from "../utils/StationsCreate";
 function CreateStation() {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
+  const [joinCode, setJoinCode] = useState("");
 
   const handleCreateStation = () => {
-    createStation(name, description);
+    setJoinCode(createStation(name, description));
   };
 
   return (
@@ -28,6 +29,8 @@ function CreateStation() {
         >
           Create Radio Station
         </button>
+
+        <p>your joinCode: {joinCode}</p>
       </main>
     </div>
   );

frontend/src/screens/Home.jsx

@@ -1,33 +1,35 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import React from "react";
+import { useNavigate } from "react-router-dom";
 
 function Home() {
   const navigate = useNavigate();
 
   const handleCreateStation = () => {
-    navigate('/create-station');
+    navigate("/create-station");
   };
 
   const handleJoinStation = () => {
-    navigate('/join-station');
+    navigate("/join-station");
   };
 
   return (
     <div className="home-container">
       <div className="content">
         <h1 className="title">Radio Station Hub</h1>
-        <p className="subtitle">Create or join a radio station to share music with friends</p>
-        
+        <p className="subtitle">
+          Create or join a radio station to share music with friends
+        </p>
+
         <div className="button-container">
-          <button 
-            className="action-button primary" 
+          <button
+            className="action-button primary"
             onClick={handleCreateStation}
           >
             Create Radio Station
           </button>
-          
-          <button 
-            className="action-button secondary" 
+
+          <button
+            className="action-button secondary"
             onClick={handleJoinStation}
           >
             Join Radio Station

frontend/src/screens/JoinStation.jsx

@@ -5,18 +5,16 @@ 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);
-    if (!displayName) return; // USER HAS TO HAVE DISPLAY NAME
 
-    navigate(`/station/${stationID}/${displayName}`);
+    navigate(`/station/${stationID}`);
   };
 
   useEffect(() => {
     async function fetchStations() {
-      const result = await getStations(); // assuming getStations is async
+      const result = await getStations();
       setStations(result);
     }
     fetchStations();
@@ -29,7 +27,6 @@ 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

@@ -5,28 +5,33 @@ import LoginButton from "../components/LoginButton";
 import { addClientToStation } from "../utils/AddClientToStation";
 
 function StationPage() {
-  const { joinCode, username } = useParams();
+  const { stationID } = 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);
-      }
-    };
+  const [userName, setUserName] = useState("");
+  const [joinCode, setJoinCode] = useState("");
 
-    auth();
-  }, [joinCode, username]);
+  const auth = async () => {
+    try {
+      const token = await addClientToStation(userName, joinCode);
+      setClientToken(token);
+      setAccessDenied(false);
+    } catch (error) {
+      console.error("Auth failed:", error);
+      setAccessDenied(true);
+    }
+  };
 
   if (accessDenied) {
-    return <p>Waiting for authentication</p>;
+    return (
+      <div>
+        <textarea onChange={(e) => setUserName(e.target.value)} />
+        <textarea onChange={(e) => setJoinCode(e.target.value)} />
+        <button onClick={auth}>Access RadioTower</button>
+      </div>
+    );
   }
 
   const recommendedSongs = [];

frontend/src/utils/StationsCreate.js

@@ -11,18 +11,28 @@ export async function createStation(name, description) {
     description: description,
   };
 
-  fetch(RADIOSTATION_URL + CREATE_RADIOSTATION_ENDPOINT, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(body),
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      console.log("Station created:", data);
-    })
-    .catch((error) => {
-      console.error("Error creating station:", error);
-    });
+  try {
+    const response = await fetch(
+      RADIOSTATION_URL + CREATE_RADIOSTATION_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 create station:", data.message);
+      throw new Error(data.message || "Unknown error");
+    }
+
+    return data.data.station.joinCode;
+  } catch (error) {
+    console.error("Error connecting client to station:", error);
+    throw error;
+  }
 }