+ {/* 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..050b4a16
--- /dev/null
+++ b/src/components/MiniDrawer.jsx
@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { Link } 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 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/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: