Merge branch 'tobi-dev'

frontend/Spotify.md

@@ -1,7 +1,6 @@
-
 # How the Spotify API registration works
 
-[Spotify Docs](https://developer.spotify.com/documentation/web-api/tutorials/getting-started#create-an-app)
+[Spotify Docs](https://developer.spotify.com/documentation/web-api/tutorials/getting-started#create-app)
 
 ## Creating an App with their developer console
 
@@ -9,7 +8,11 @@ https://developer.spotify.com/dashboard
 
 *App* name: Serena
 *App description*: open source radio station emulator to get the vibe right
-*redirect URI*: https://localhost:3000
+*redirect URI*: 
+- Development: http://127.0.0.1:3000/callback
+- Production: https://your-domain.com/callback
+
+**Important**: Spotify doesn't accept `localhost` URLs. Use `127.0.0.1` for local development.
 
 ## Requesting an Access Token
 

frontend/src/components/LoginButton.jsx

@@ -0,0 +1,30 @@
+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;

frontend/src/screens/CreateStation.jsx

@@ -5,7 +5,6 @@ function CreateStation() {
   const [password, setPassword] = useState('');
 
   const handleCreateStation = () => {
-    // Handle station creation logic here
     console.log('Creating station with password:', password);
   };
 

frontend/src/screens/StationPage.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import AddSongModal from './AddSongModal';
+import LoginButton from '../components/LoginButton';
 
 function StationPage() {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -44,6 +45,7 @@ function StationPage() {
         <header className="station-header">
           <h1>Serena Station</h1>
           <p className="station-subtitle">Collaborative Music Experience</p>
+          <LoginButton />
         </header>
 
         <div className="media-controls-section">

frontend/src/utils/spotifyAuth.js

@@ -0,0 +1,40 @@
+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();
+};