2025-summer/team-5
12
Fork 0
Code Issues Pull requests Projects Releases Activity

Reduce

Browse source
This commit is contained in:
Noah Knapp 2025-08-02 10:39:04 +02:00
parent d9b227fb85
commit 0f020d83d2
4 changed files with 0 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

30
frontend/src/components/LoginButton.jsx
View file

@ -1,30 +0,0 @@
import React from 'react';
import { getSpotifyLoginUrl, isLoggedIn, removeAccessToken } from '../utils/spotifyAuth.js';
const LoginButton = () => {
const loggedIn = isLoggedIn();
const handleLogout = () => {
removeAccessToken();
window.location.reload(); // Refresh to update UI
};
if (loggedIn) {
return (
<div className="login-status">
<span>✓ Connected to Spotify</span>
<button onClick={handleLogout} className="logout-btn">
Logout
</button>
</div>
);
}
return (
<a href={getSpotifyLoginUrl()}>
<button className="spotify-login-btn">Login with Spotify</button>
</a>
);
};
export default LoginButton;

3
frontend/src/constants/ApiConstants.js
View file

@ -3,6 +3,3 @@ export const RADIOSTATION_URL = "http://localhost:8080/api";
export const CREATE_RADIOSTATION_ENDPOINT = "/radio-stations"; export const CREATE_RADIOSTATION_ENDPOINT = "/radio-stations";
export const LIST_RADIOSTATIONS_ENDPOINT = "/radio-stations"; export const LIST_RADIOSTATIONS_ENDPOINT = "/radio-stations";
export const ADD_CLIENT_ENDPOINT = "/clients/connect"; export const ADD_CLIENT_ENDPOINT = "/clients/connect";
export const SPOTIFY_PREMIUM_TOKEN =
"BQCEnWrYVdmta4Eekdkewazun99IuocRAyPEbwPSrHuGYgZYg7JGlXG2BLmRL6fwjzPJkrmHiqlTLSn1yqR36awA9Rv4n9dwvTBv1DjAitsuzaEVg7PtYdbUHXqP2HJJ4dDDvTtvUfWIBDY_Afa7WgY1cyRbl-p4VobNHXUR9N3Ye1qBTgH3RZ5ziIbIoNWe_JrxYvcedkvr23zXUVabOyahTgt_YdmnCWt2Iu8XT8sjhSyc8tOCqbs_KqE-Qe1WSPUCrGS8";

17
frontend/src/screens/StationPage.jsx
View file

@ -1,13 +1,10 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import AddSongModal from "./AddSongModal";
import LoginButton from "../components/LoginButton";
import { addClientToStation } from "../utils/AddClientToStation"; import { addClientToStation } from "../utils/AddClientToStation";
function StationPage() { function StationPage() {
const { stationID } = useParams(); const { stationID } = useParams();
const [clientToken, setClientToken] = useState(""); const [clientToken, setClientToken] = useState("");
const [isModalOpen, setIsModalOpen] = useState(false);
const [accessDenied, setAccessDenied] = useState(true); const [accessDenied, setAccessDenied] = useState(true);
const [userName, setUserName] = useState(""); const [userName, setUserName] = useState("");
@ -36,14 +33,6 @@ function StationPage() {
const recommendedSongs = []; const recommendedSongs = [];
const openModal = () => {
setIsModalOpen(true);
};
const closeModal = () => {
setIsModalOpen(false);
};
return ( return (
<div className="station-page"> <div className="station-page">
<div className="animated-background"> <div className="animated-background">
@ -56,15 +45,11 @@ function StationPage() {
<header className="station-header"> <header className="station-header">
<h1>Serena Station</h1> <h1>Serena Station</h1>
<p className="station-subtitle">Collaborative Music Experience</p> <p className="station-subtitle">Collaborative Music Experience</p>
<LoginButton />
</header> </header>
<div className="songs-section"> <div className="songs-section">
<div className="section-header"> <div className="section-header">
<h2>Song Queue</h2> <h2>Song Queue</h2>
<button className="add-song-btn" onClick={openModal}>
Add Song
</button>
</div> </div>
<div className="songs-list"> <div className="songs-list">
@ -86,8 +71,6 @@ function StationPage() {
</div> </div>
</div> </div>
</div> </div>
{isModalOpen && <AddSongModal onClose={closeModal} />}
</div> </div>
); );
} }

40
frontend/src/utils/spotifyAuth.js
View file

@ -1,40 +0,0 @@
const CLIENT_ID = 'e1274b6593674771bea12d8366c7978b';
const REDIRECT_URI = 'http://localhost:3000/callback';
const SCOPES = [
'user-read-private',
'user-read-email',
'playlist-read-private',
'user-library-read',
];
export const getSpotifyLoginUrl = () => {
const scope = SCOPES.join('%20');
return `https://accounts.spotify.com/authorize?client_id=${CLIENT_ID}&response_type=token&redirect_uri=${encodeURIComponent(
REDIRECT_URI
)}&scope=${scope}`;
};
export const getAccessTokenFromUrl = () => {
const hash = window.location.hash;
if (hash) {
const params = new URLSearchParams(hash.substring(1));
return params.get('access_token');
}
return null;
};
export const storeAccessToken = (token) => {
localStorage.setItem('spotify_access_token', token);
};
export const getAccessToken = () => {
return localStorage.getItem('spotify_access_token');
};
export const removeAccessToken = () => {
localStorage.removeItem('spotify_access_token');
};
export const isLoggedIn = () => {
return !!getAccessToken();
};