+ {/* Left Panel - Auth Form */}
+
+
+ {/* Logo */}
+
+
+ {/* Title */}
+
+ {isLogin ? 'Log in ' : 'Sign Up'}
+
+
+ {isLogin ? 'Welcome back! Select method to log in:' : 'Join us today! Select method to sign up:'}
+
+
+ {/* Note about Spotify access */}
+
+
+ For full access to all features,
+
+
+
+ {/* OAuth Buttons */}
+
+
+
+
+
+
+
or continue with email
+
-
-
-
- {errors.password && (
-
{errors.password}
+ {/* Form */}
+
+
+ {/* Switch between login/signup */}
+
+
+ {isLogin ? "Don't have an account? " : "Already have an account? "}
+
+
+
+
+
+ {/* Right Panel - Carousel */}
+
+
+ {carouselData.map((slide, index) => (
+
+
+ {/* Navigation Arrows */}
+
+
+
+ {/* Content */}
+
+ {slide.icon}
+
+
+
+ {slide.title}
+
+
+
+ {slide.subtitle}
+
-
-
+ {/* Spotify-style Music Player Mockup */}
+
+
+ {/* Now Playing */}
+
+
+ {/* Progress Bar */}
+
+
+ {/* Controls */}
+
+
+
-
- Don't have an account? Sign up
-
+ {/* Floating Music Notes Animation */}
+
+
+
+
+
+ ))}
+
+ {/* Dots Indicator */}
+
+ {carouselData.map((_, index) => (
+
+
+ {/* Background Pattern */}
+
+
);
};
-export default Login;
+export default Login;
\ No newline at end of file
diff --git a/src/components/MiniDrawer.jsx b/src/components/MiniDrawer.jsx
new file mode 100644
index 00000000..ca631894
--- /dev/null
+++ b/src/components/MiniDrawer.jsx
@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from "react";
+import { Link, useLocation } from "react-router-dom";
+import "../style/MiniDrawer.css";
+import {
+ ChevronLeft,
+ ChevronRight,
+ Analytics,
+ MusicNote,
+ Person,
+ QueueMusic,
+ Feed,
+ People,
+ Message,
+ Notifications,
+ Article,
+} from "@mui/icons-material";
+
+const dashboardMenuItems = [
+ { text: "Analytics", path: "/dashboard/analytics", icon: "Analytics" },
+ { text: "Top Tracks", path: "/dashboard/toptracks", icon: "MusicNote" },
+ { text: "Top Artist", path: "/dashboard/topartist", icon: "Person" },
+ { text: "My Playlist", path: "/dashboard/myplaylist", icon: "QueueMusic" },
+];
+
+const socialMenuItems = [
+ { text: "Feed", path: "/social/feed", icon: "Feed" },
+ { text: "Friends", path: "/social/friends", icon: "People" },
+ { text: "Messages", path: "/social/messages", icon: "Message" },
+ { text: "My Posts", path: "/social/mypost", icon: "Article" },
+ {
+ text: "Notifications",
+ path: "/social/notifications",
+ icon: "Notifications",
+ },
+];
+
+const iconComponents = {
+ Analytics,
+ MusicNote,
+ Person,
+ QueueMusic,
+ Feed,
+ People,
+ Message,
+ Notifications,
+ Article,
+};
+
+export default function MiniDrawer({ menuType = "dashboard" }) {
+ const [open, setOpen] = useState(true);
+ const location = useLocation();
+
+ const menuItems =
+ menuType === "social" ? socialMenuItems : dashboardMenuItems;
+
+ const handleDrawerToggle = () => {
+ setOpen(!open);
+ };
+
+ const getIcon = (iconName) => {
+ const IconComponent = iconComponents[iconName];
+ return IconComponent ?
:
;
+ };
+
+ return (
+
+
+
+
+
+
+
+ {menuItems.map((item, index) => (
+ -
+
+
+ {getIcon(item.icon)}
+
+
+ {item.text}
+
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/components/MusicSelector.jsx b/src/components/MusicSelector.jsx
new file mode 100644
index 00000000..34bd2f1c
--- /dev/null
+++ b/src/components/MusicSelector.jsx
@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from 'react';
+import SearchComponent from './SearchComponent';
+import SpotifyEmbed from './SpotifyEmbed';
+import '../style/SearchComponent.css';
+//for profile
+const MusicSelector = ({
+ initialItems = [],
+ maxItems = 5,
+ onSave,
+ onClose
+}) => {
+ const [selectedItems, setSelectedItems] = useState(initialItems);
+ const [searchKey, setSearchKey] = useState(0); // key force remount/reset
+
+ // Reset selectedItems when initialItems changes (e.g., when reopening modal)
+ useEffect(() => {
+ setSelectedItems(initialItems);
+ }, [initialItems]);
+
+ // Add per-embed settings: theme (color), size (width/height), and width mode
+ const defaultWidth = 300;
+ const defaultHeight = 80;
+ const defaultTheme = 'dark'; // Spotify supports 'dark' and 'light'
+ const defaultWidthMode = 'fixed'; // 'fixed' or 'full'
+
+ const handleResultSelect = (item) => {
+ if (selectedItems.length >= maxItems) return;
+ if (selectedItems.find(i => i.id === item.id)) return;
+ setSelectedItems([...selectedItems, item]);
+ setSearchKey(Date.now()); // force SearchComponent to reset
+ };
+
+ const handleRemove = (id) => {
+ setSelectedItems(selectedItems.filter(item => item.id !== id));
+ };
+
+ const handleSave = () => {
+ // Convert width/height to numbers for backend
+ const itemsToSave = selectedItems.map(item => ({
+ ...item,
+ width: item.width !== undefined ? Number(item.width) : undefined,
+ height: item.height !== undefined ? Number(item.height) : undefined,
+ }));
+ onSave(itemsToSave);
+ onClose();
+ };
+
+ const handleSettingChange = (idx, field, value) => {
+ setSelectedItems(items => items.map((item, i) =>
+ i === idx ? { ...item, [field]: value } : item
+ ));
+ };
+
+ return (
+
+
+
+
+
Select up to {maxItems} Spotify items
+
+
+
+
+ {[...Array(maxItems)].map((_, idx) => (
+
+ {selectedItems[idx] ? (
+
+
+
+
+
+ {selectedItems[idx].widthMode === 'full' ? null : (
+
+ )}
+
+
+
+
+ ) : null}
+
+ ))}
+
+
+
+ );
+};
+
+export default MusicSelector;
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
index 648f3808..160bea8e 100644
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -1,12 +1,30 @@
import React from "react";
import { Link } from "react-router-dom";
-import "./NavBarStyles.css";
+import "../style/NavBarStyles.css";
const NavBar = ({ user, onLogout }) => {
return (
-
- );
-};
-
-export default Home;
diff --git a/src/components/Login.jsx b/src/components/Login.jsx
index 849e495a..22f60a43 100644
--- a/src/components/Login.jsx
+++ b/src/components/Login.jsx
@@ -1,130 +1,377 @@
-import React, { useState } from "react";
-import { useNavigate, Link } from "react-router-dom";
+import React, { useState, useEffect } from 'react';
+import { Eye, EyeOff, ChevronLeft, ChevronRight, Users, Zap, Shield, Globe, Smartphone, Music } from 'lucide-react';
import axios from "axios";
-import { API_URL } from "../shared";
-import "./AuthStyles.css";
+import '../style/Login.css';
+import { API_URL } from '../shared';
+import { useNavigate } from 'react-router-dom';
-const Login = ({ setUser }) => {
+const Login = ( {setUser} ) => {
+ const [isLogin, setIsLogin] = useState(true);
+ const [showPassword, setShowPassword] = useState(false);
+ const [currentSlide, setCurrentSlide] = useState(0);
const [formData, setFormData] = useState({
- username: "",
- password: "",
+ email: '',
+ password: '',
+ confirmPassword: '',
+ rememberMe: false
});
- const [errors, setErrors] = useState({});
- const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState("");
+ const [loading, setLoading] = useState(false);
+ const [auth0Loading, setAuth0Loading] = useState(false);
const navigate = useNavigate();
- const validateForm = () => {
- const newErrors = {};
-
- if (!formData.username) {
- newErrors.username = "Username is required";
- } else if (formData.username.length < 3 || formData.username.length > 20) {
- newErrors.username = "Username must be between 3 and 20 characters";
+ const carouselData = [
+ {
+ icon: