Skip to content

Use dashboard auth page for all authentication buttons #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BrandDead wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Use dashboard auth page for all authentication buttons #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bc2917e
Fix sign-in modal centering to viewport
BrandDead Dec 8, 2025
ea1d946
Remove Dashboard button and redirect Sign In to login page
BrandDead Dec 8, 2025
75caffe
Merge update/header-navigation into main
BrandDead Dec 8, 2025
5114457
Use dashboard auth page for all authentication buttons
BrandDead Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 3 additions & 35 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
import { useState } from 'react'
Copy link

@vercel vercel bot Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The LoginModal and SignupModal components are imported in the before version but removed in the after version. However, these component files still exist in the repository and are now unused orphaned code that should be deleted.

View Details
📝 Patch Details 
diff --git a/src/components/LoginModal.jsx b/src/components/LoginModal.jsx
deleted file mode 100644
index 108e4d8b..00000000
--- a/src/components/LoginModal.jsx
+++ /dev/null
@@ -1,276 +0,0 @@
-import { useState } from 'react'
-import { motion } from 'framer-motion'
-import { Button } from '../components/ui/button.jsx'
-import { Input } from '../components/ui/input.jsx'
-import { Label } from '../components/ui/label.jsx'
-import { X, Mail } from 'lucide-react'
-import AnimatedLogo from '../components/ui/AnimatedLogo.jsx'
-import AuthCard from '../components/ui/AuthCard.jsx'
-import AnimatedPasswordField from '../components/ui/AnimatedPasswordField.jsx'
-
-const LoginModal = ({ isOpen, onClose, onSwitchToSignup }) => {
-  const [formData, setFormData] = useState({
-    email: '',
-    password: ''
-  })
-  const [isAuthenticating, setIsAuthenticating] = useState(false)
-  const [isAuthenticated, setIsAuthenticated] = useState(false)
-  const [error, setError] = useState('')
-
-  if (!isOpen) return null
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    setError('')
-    
-    // Basic validation
-    if (!formData.email || !formData.password) {
-      setError('Please fill in all fields')
-      return
-    }
-
-    setIsAuthenticating(true)
-    
-    try {
-      // Simulate authentication delay
-      await new Promise(resolve => setTimeout(resolve, 1500))
-      
-      // For now, accept any email/password combination for testing
-      // In production, this would call your actual auth API
-      if (formData.email && formData.password) {
-        setIsAuthenticating(false)
-        setIsAuthenticated(true)
-        
-        // Redirect to dashboard after animation completes
-        setTimeout(() => {
-          window.location.href = 'https://app.thelabelai.com/dashboard'
-        }, 2000)
-      } else {
-        throw new Error('Invalid credentials')
-      }
-    } catch (err) {
-      setError('Login failed. Please try again.')
-      setIsAuthenticating(false)
-    }
-  }
-
-  const handleInputChange = (e) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value
-    })
-    // Clear error when user starts typing
-    if (error) setError('')
-  }
-
-  const handlePasswordChange = (password, strength) => {
-    // This will trigger logo animations based on password input
-  }
-
-  const handleAnimationComplete = () => {
-    // Animation completed, can perform cleanup if needed
-  }
-
-  return (
-    <AuthCard
-      isVisible={isOpen}
-      isAuthenticating={isAuthenticating}
-      isAuthenticated={isAuthenticated}
-      onAnimationComplete={handleAnimationComplete}
-    >
-      {/* Close Button */}
-      <motion.button
-        onClick={onClose}
-        className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors z-20"
-        whileHover={{ scale: 1.1, rotate: 90 }}
-        whileTap={{ scale: 0.9 }}
-        transition={{ duration: 0.2 }}
-      >
-        <X size={24} />
-      </motion.button>
-
-      {/* Header with Animated Logo */}
-      <div className="text-center mb-8">
-        <motion.div
-          initial={{ y: -20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.2 }}
-        >
-          <AnimatedLogo
-            isAuthenticating={isAuthenticating}
-            isAuthenticated={isAuthenticated}
-            passwordLength={formData.password.length}
-            className="text-4xl mb-4"
-          />
-        </motion.div>
-        
-        <motion.h2
-          className="text-3xl font-bold text-white mb-2"
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.4 }}
-        >
-          Welcome Back
-        </motion.h2>
-        
-        <motion.p
-          className="text-gray-300"
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.6 }}
-        >
-          Sign in to access your dashboard
-        </motion.p>
-      </div>
-
-      {/* Error Message */}
-      {error && (
-        <motion.div
-          className="mb-4 p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-300 text-sm text-center"
-          initial={{ opacity: 0, y: -10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3 }}
-        >
-          {error}
-        </motion.div>
-      )}
-
-      {/* Form */}
-      <motion.form
-        onSubmit={handleSubmit}
-        className="space-y-6"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.6, delay: 0.8 }}
-      >
-        {/* Email Field */}
-        <motion.div
-          className="space-y-2"
-          initial={{ x: -20, opacity: 0 }}
-          animate={{ x: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.0 }}
-        >
-          <Label htmlFor="email" className="text-white">Email</Label>
-          <div className="relative">
-            <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-            <Input
-              id="email"
-              name="email"
-              type="email"
-              placeholder="[email protected]"
-              value={formData.email}
-              onChange={handleInputChange}
-              className="pl-10 bg-white/10 border-white/20 text-white placeholder:text-gray-400"
-              required
-            />
-          </div>
-        </motion.div>
-
-        {/* Password Field */}
-        <motion.div
-          className="space-y-2"
-          initial={{ x: -20, opacity: 0 }}
-          animate={{ x: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.2 }}
-        >
-          <Label htmlFor="password" className="text-white">Password</Label>
-          <AnimatedPasswordField
-            value={formData.password}
-            onChange={(e) => handleInputChange(e)}
-            placeholder="Enter your password"
-            onPasswordChange={handlePasswordChange}
-          />
-        </motion.div>
-
-        {/* Forgot Password */}
-        <motion.div
-          className="text-right"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.4 }}
-        >
-          <a href="#" className="text-[#29C5F6] hover:text-[#29C5F6]/80 text-sm">
-            Forgot password?
-          </a>
-        </motion.div>
-
-        {/* Submit Button */}
-        <motion.div
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.6 }}
-        >
-          <Button 
-            type="submit"
-            className="w-full bg-[#FF5000] hover:bg-[#FF5000]/80 text-white py-3 text-lg font-semibold"
-            disabled={isAuthenticating}
-          >
-            {isAuthenticating ? 'Authenticating...' : 'Sign In'}
-          </Button>
-        </motion.div>
-      </motion.form>
-
-      {/* Divider */}
-      <motion.div
-        className="my-6 flex items-center"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.6, delay: 1.8 }}
-      >
-        <div className="flex-1 border-t border-white/20"></div>
-        <span className="px-4 text-gray-400 text-sm">or</span>
-        <div className="flex-1 border-t border-white/20"></div>
-      </motion.div>
-
-      {/* Social Login */}
-      <motion.div
-        className="space-y-3"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.6, delay: 2.0 }}
-      >
-        <Button 
-          variant="outline"
-          className="w-full border-white/20 text-white hover:bg-white/10"
-          onClick={() => {
-            // For now, redirect directly to dashboard
-            window.location.href = 'https://app.thelabelai.com/dashboard'
-          }}
-        >
-          Continue with Google
-        </Button>
-        <Button 
-          variant="outline"
-          className="w-full border-white/20 text-white hover:bg-white/10"
-          onClick={() => {
-            // For now, redirect directly to dashboard
-            window.location.href = 'https://app.thelabelai.com/dashboard'
-          }}
-        >
-          Continue with Apple
-        </Button>
-      </motion.div>
-
-      {/* Switch to Signup */}
-      <motion.div
-        className="text-center mt-6"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.6, delay: 2.2 }}
-      >
-        <p className="text-gray-300">
-          Don't have an account?{' '}
-          <button
-            onClick={onSwitchToSignup}
-            className="text-[#29C5F6] hover:text-[#29C5F6]/80 font-semibold"
-          >
-            Sign up free
-          </button>
-        </p>
-      </motion.div>
-    </AuthCard>
-  )
-}
-
-export default LoginModal
-
diff --git a/src/components/SignupModal.jsx b/src/components/SignupModal.jsx
deleted file mode 100644
index 72ae2b03..00000000
--- a/src/components/SignupModal.jsx
+++ /dev/null
@@ -1,331 +0,0 @@
-import { useState } from 'react'
-import { motion } from 'framer-motion'
-import { Button } from '../components/ui/button.jsx'
-import { Input } from '../components/ui/input.jsx'
-import { Label } from '../components/ui/label.jsx'
-import { Checkbox } from '../components/ui/checkbox.jsx'
-import { X, Mail, User, Music } from 'lucide-react'
-import AnimatedLogo from '../components/ui/AnimatedLogo.jsx'
-import AuthCard from '../components/ui/AuthCard.jsx'
-import AnimatedPasswordField from '../components/ui/AnimatedPasswordField.jsx'
-
-const SignupModal = ({ isOpen, onClose, onSwitchToLogin }) => {
-  const [formData, setFormData] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    password: '',
-    artistName: '',
-    agreeToTerms: false,
-    subscribeNewsletter: true
-  })
-  const [isAuthenticating, setIsAuthenticating] = useState(false)
-  const [isAuthenticated, setIsAuthenticated] = useState(false)
-  const [error, setError] = useState('')
-
-  if (!isOpen) return null
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    setError('')
-    
-    // Basic validation
-    if (!formData.firstName || !formData.lastName || !formData.email || !formData.password || !formData.artistName) {
-      setError('Please fill in all required fields')
-      return
-    }
-
-    if (!formData.agreeToTerms) {
-      setError('You must agree to the terms and conditions')
-      return
-    }
-
-    setIsAuthenticating(true)
-    
-    try {
-      // Simulate signup delay
-      await new Promise(resolve => setTimeout(resolve, 1500))
-      
-      // For now, accept any valid form data for testing
-      setIsAuthenticating(false)
-      setIsAuthenticated(true)
-      
-      // Redirect to dashboard after animation completes
-      setTimeout(() => {
-        window.location.href = 'https://app.thelabelai.com/dashboard'
-      }, 2000)
-    } catch (err) {
-      setError('Signup failed. Please try again.')
-      setIsAuthenticating(false)
-    }
-  }
-
-  const handleInputChange = (e) => {
-    const { name, value, type, checked } = e.target
-    setFormData({
-      ...formData,
-      [name]: type === 'checkbox' ? checked : value
-    })
-    // Clear error when user starts typing
-    if (error) setError('')
-  }
-
-  const handlePasswordChange = (password, strength) => {
-    // This will trigger logo animations based on password input
-  }
-
-  const handleAnimationComplete = () => {
-    // Animation completed, can perform cleanup if needed
-  }
-
-  return (
-    <AuthCard
-      isVisible={isOpen}
-      isAuthenticating={isAuthenticating}
-      isAuthenticated={isAuthenticated}
-      onAnimationComplete={handleAnimationComplete}
-    >
-      {/* Close Button */}
-      <motion.button
-        onClick={onClose}
-        className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors z-20"
-        whileHover={{ scale: 1.1, rotate: 90 }}
-        whileTap={{ scale: 0.9 }}
-        transition={{ duration: 0.2 }}
-      >
-        <X size={24} />
-      </motion.button>
-
-      {/* Header with Animated Logo */}
-      <div className="text-center mb-8">
-        <motion.div
-          initial={{ y: -20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.2 }}
-        >
-          <AnimatedLogo
-            isAuthenticating={isAuthenticating}
-            isAuthenticated={isAuthenticated}
-            passwordLength={formData.password.length}
-            className="text-4xl mb-4"
-          />
-        </motion.div>
-        
-        <motion.h2
-          className="text-3xl font-bold text-white mb-2"
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.4 }}
-        >
-          Join theLABEL
-        </motion.h2>
-        
-        <motion.p
-          className="text-gray-300"
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.6 }}
-        >
-          Start your journey to musical freedom
-        </motion.p>
-      </div>
-
-      {/* Error Message */}
-      {error && (
-        <motion.div
-          className="mb-4 p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-300 text-sm text-center"
-          initial={{ opacity: 0, y: -10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3 }}
-        >
-          {error}
-        </motion.div>
-      )}
-
-      {/* Form */}
-      <motion.form
-        onSubmit={handleSubmit}
-        className="space-y-6"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.6, delay: 0.8 }}
-      >
-        {/* Name Fields */}
-        <motion.div
-          className="grid grid-cols-2 gap-4"
-          initial={{ x: -20, opacity: 0 }}
-          animate={{ x: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.0 }}
-        >
-          <div className="space-y-2">
-            <Label htmlFor="firstName" className="text-white">First Name</Label>
-            <div className="relative">
-              <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-              <Input
-                id="firstName"
-                name="firstName"
-                type="text"
-                placeholder="John"
-                value={formData.firstName}
-                onChange={handleInputChange}
-                className="pl-10 bg-white/10 border-white/20 text-white placeholder:text-gray-400"
-                required
-              />
-            </div>
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="lastName" className="text-white">Last Name</Label>
-            <Input
-              id="lastName"
-              name="lastName"
-              type="text"
-              placeholder="Doe"
-              value={formData.lastName}
-              onChange={handleInputChange}
-              className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
-              required
-            />
-          </div>
-        </motion.div>
-
-        {/* Artist Name */}
-        <motion.div
-          className="space-y-2"
-          initial={{ x: -20, opacity: 0 }}
-          animate={{ x: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.2 }}
-        >
-          <Label htmlFor="artistName" className="text-white">Artist Name</Label>
-          <div className="relative">
-            <Music className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-            <Input
-              id="artistName"
-              name="artistName"
-              type="text"
-              placeholder="Your Artist Name"
-              value={formData.artistName}
-              onChange={handleInputChange}
-              className="pl-10 bg-white/10 border-white/20 text-white placeholder:text-gray-400"
-              required
-            />
-          </div>
-        </motion.div>
-
-        {/* Email Field */}
-        <motion.div
-          className="space-y-2"
-          initial={{ x: -20, opacity: 0 }}
-          animate={{ x: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.4 }}
-        >
-          <Label htmlFor="email" className="text-white">Email</Label>
-          <div className="relative">
-            <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-            <Input
-              id="email"
-              name="email"
-              type="email"
-              placeholder="[email protected]"
-              value={formData.email}
-              onChange={handleInputChange}
-              className="pl-10 bg-white/10 border-white/20 text-white placeholder:text-gray-400"
-              required
-            />
-          </div>
-        </motion.div>
-
-        {/* Password Field */}
-        <motion.div
-          className="space-y-2"
-          initial={{ x: -20, opacity: 0 }}
-          animate={{ x: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.6 }}
-        >
-          <Label htmlFor="password" className="text-white">Password</Label>
-          <AnimatedPasswordField
-            value={formData.password}
-            onChange={(e) => handleInputChange(e)}
-            placeholder="Create a strong password"
-            onPasswordChange={handlePasswordChange}
-          />
-        </motion.div>
-
-        {/* Checkboxes */}
-        <motion.div
-          className="space-y-4"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.8 }}
-        >
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="agreeToTerms"
-              name="agreeToTerms"
-              checked={formData.agreeToTerms}
-              onChange={handleInputChange}
-              required
-            />
-            <Label htmlFor="agreeToTerms" className="text-sm text-gray-300">
-              I agree to the{' '}
-              <a href="#" className="text-[#29C5F6] hover:text-[#29C5F6]/80">
-                Terms of Service
-              </a>{' '}
-              and{' '}
-              <a href="#" className="text-[#29C5F6] hover:text-[#29C5F6]/80">
-                Privacy Policy
-              </a>
-            </Label>
-          </div>
-          
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="subscribeNewsletter"
-              name="subscribeNewsletter"
-              checked={formData.subscribeNewsletter}
-              onChange={handleInputChange}
-            />
-            <Label htmlFor="subscribeNewsletter" className="text-sm text-gray-300">
-              Subscribe to our newsletter for updates and tips
-            </Label>
-          </div>
-        </motion.div>
-
-        {/* Submit Button */}
-        <motion.div
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 2.0 }}
-        >
-          <Button 
-            type="submit"
-            className="w-full bg-[#FF5000] hover:bg-[#FF5000]/80 text-white py-3 text-lg font-semibold"
-            disabled={isAuthenticating}
-          >
-            {isAuthenticating ? 'Creating Account...' : 'Create Account'}
-          </Button>
-        </motion.div>
-      </motion.form>
-
-      {/* Switch to Login */}
-      <motion.div
-        className="text-center mt-6"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.6, delay: 2.2 }}
-      >
-        <p className="text-gray-300">
-          Already have an account?{' '}
-          <button
-            onClick={onSwitchToLogin}
-            className="text-[#29C5F6] hover:text-[#29C5F6]/80 font-semibold"
-          >
-            Sign in
-          </button>
-        </p>
-      </motion.div>
-    </AuthCard>
-  )
-}
-
-export default SignupModal
-
diff --git a/src/components/ui/AuthCard.jsx b/src/components/ui/AuthCard.jsx
deleted file mode 100644
index 5ef9505f..00000000
--- a/src/components/ui/AuthCard.jsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { motion, AnimatePresence } from 'framer-motion'
-import { useState, useEffect } from 'react'
-
-const AuthCard = ({ 
-  children, 
-  isVisible = true, 
-  isAuthenticating = false,
-  isAuthenticated = false,
-  onAnimationComplete = () => {}
-}) => {
-  const [isExiting, setIsExiting] = useState(false)
-
-  useEffect(() => {
-    if (isAuthenticated && !isExiting) {
-      setIsExiting(true)
-    }
-  }, [isAuthenticated, isExiting])
-
-  const cardVariants = {
-    hidden: {
-      opacity: 0,
-      scale: 0.8,
-      y: 50,
-      rotateX: -15
-    },
-    visible: {
-      opacity: 1,
-      scale: 1,
-      y: 0,
-      rotateX: 0,
-      transition: {
-        duration: 0.6,
-        ease: "easeOut",
-        type: "spring",
-        stiffness: 100,
-        damping: 15
-      }
-    },
-    exit: {
-      opacity: 0,
-      scale: 0.8,
-      y: -100,
-      rotateX: 15,
-      transition: {
-        duration: 0.8,
-        ease: "easeIn"
-      }
-    },
-    authenticating: {
-      scale: [1, 1.02, 1],
-      rotateY: [0, 2, -2, 0],
-      transition: {
-        duration: 2,
-        repeat: Infinity,
-        ease: "easeInOut"
-      }
-    }
-  }
-
-  const backdropVariants = {
-    hidden: { opacity: 0 },
-    visible: { 
-      opacity: 1,
-      transition: { duration: 0.3 }
-    },
-    exit: { 
-      opacity: 0,
-      transition: { duration: 0.5 }
-    }
-  }
-
-  return (
-    <AnimatePresence mode="wait" onExitComplete={onAnimationComplete}>
-      {isVisible && (
-        <motion.div
-          className="fixed inset-0 z-50 flex items-center justify-center p-4"
-          variants={backdropVariants}
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-        >
-          {/* Backdrop with blur effect */}
-          <motion.div 
-            className="absolute inset-0 bg-black/60 backdrop-blur-md"
-            variants={backdropVariants}
-          />
-          
-          {/* Centered Auth Card */}
-          <motion.div
-            className="relative w-full max-w-md"
-            variants={cardVariants}
-            initial="hidden"
-            animate={isAuthenticating ? "authenticating" : "visible"}
-            exit="exit"
-            onAnimationComplete={() => {
-              if (isExiting) {
-                onAnimationComplete()
-              }
-            }}
-          >
-            {/* Card Container */}
-            <div className="relative glassmorphism rounded-2xl p-8 shadow-2xl">
-              {/* Animated border glow */}
-              <motion.div
-                className="absolute inset-0 rounded-2xl bg-gradient-to-r from-orange-500/20 via-blue-500/20 to-orange-500/20"
-                animate={{
-                  opacity: [0.3, 0.6, 0.3],
-                  scale: [1, 1.02, 1]
-                }}
-                transition={{
-                  duration: 3,
-                  repeat: Infinity,
-                  ease: "easeInOut"
-                }}
-              />
-              
-              {/* Content */}
-              <div className="relative z-10">
-                {children}
-              </div>
-            </div>
-          </motion.div>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  )
-}
-
-export default AuthCard

Analysis

Orphaned modal components and supporting UI component left after auth refactoring

What fails: Three component files (LoginModal.jsx, SignupModal.jsx, and AuthCard.jsx) remain in the repository as dead code after being removed from App.jsx. These files are not imported or used anywhere in the codebase.

How to reproduce:

# Search for any imports of these components
grep -r "import.*LoginModal\|import.*SignupModal" src --include="*.jsx"
# No results found - components are orphaned

# Verify they're defined but never used
grep -r "LoginModal\|SignupModal" src --include="*.jsx"
# Only appears in their own definition files and nowhere else

What happened vs expected behavior:

  • Commit 5114457 ("Use dashboard auth page for all authentication buttons") removed all usage of LoginModal and SignupModal from App.jsx and replaced modal-based auth with external redirects to app.thelabelai.com/login
  • Commit message explicitly states "Removed SignupModal and LoginModal usage completely"
  • However, the component files themselves were never deleted from the repository
  • AuthCard.jsx (imported only by these two modal files) is also orphaned

Expected: All three orphaned component files should be deleted to complete the refactoring and remove dead code:

  • src/components/LoginModal.jsx (276 lines)
  • src/components/SignupModal.jsx (331 lines)
  • src/components/ui/AuthCard.jsx (129 lines)

import './App.css'
import LoginModal from './components/LoginModal.jsx'
import SignupModal from './components/SignupModal.jsx'

function App() {
const [showLogin, setShowLogin] = useState(false)
const [showSignup, setShowSignup] = useState(false)

return (
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
{/* Header */}
Expand All @@ -18,23 +12,17 @@ function App() {
</div>
<div className="flex items-center space-x-4">
<button
onClick={() => setShowLogin(true)}
onClick={() => window.location.href = 'https://app.thelabelai.com/login'}
className="text-white hover:text-orange-500 transition-colors"
>
Sign In
</button>
<button
onClick={() => setShowSignup(true)}
onClick={() => window.location.href = 'https://app.thelabelai.com/login'}
className="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-lg transition-colors"
>
GET STARTED FREE
</button>
<button
onClick={() => window.location.href = 'https://app.thelabelai.com/dashboard'}
className="border border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white px-4 py-2 rounded-lg transition-colors"
>
Dashboard
</button>
</div>
</div>
</div>
Expand All @@ -56,7 +44,7 @@ function App() {

<div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-16">
<button
onClick={() => setShowSignup(true)}
onClick={() => window.location.href = 'https://app.thelabelai.com/login'}
className="bg-orange-500 hover:bg-orange-600 text-white text-xl px-12 py-6 rounded-lg transition-colors"
>
SIGN UP FREE
Expand Down Expand Up @@ -127,28 +115,8 @@ function App() {
</div>
</div>
</footer>

{/* Enhanced Modals */}
<LoginModal
isOpen={showLogin}
onClose={() => setShowLogin(false)}
onSwitchToSignup={() => {
setShowLogin(false)
setShowSignup(true)
}}
/>

<SignupModal
isOpen={showSignup}
onClose={() => setShowSignup(false)}
onSwitchToLogin={() => {
setShowSignup(false)
setShowLogin(true)
}}
/>
</div>
)
}

export default App

26 changes: 3 additions & 23 deletions src/components/ui/AuthCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,32 +73,21 @@ const AuthCard = ({
<AnimatePresence mode="wait" onExitComplete={onAnimationComplete}>
{isVisible && (
<motion.div
className="fixed inset-0 z-50 flex items-center justify-center"
className="fixed inset-0 z-50 flex items-center justify-center p-4"
variants={backdropVariants}
initial="hidden"
animate="visible"
exit="exit"
style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '1rem'
}}
>
{/* Backdrop with blur effect */}
<motion.div
className="absolute inset-0 bg-black/60 backdrop-blur-md"
variants={backdropVariants}
/>

{/* Perfectly Centered Auth Card */}
{/* Centered Auth Card */}
<motion.div
className="relative w-full max-w-md mx-auto"
className="relative w-full max-w-md"
variants={cardVariants}
initial="hidden"
animate={isAuthenticating ? "authenticating" : "visible"}
Expand All @@ -108,15 +97,6 @@ const AuthCard = ({
onAnimationComplete()
}
}}
style={{
position: 'relative',
width: '100%',
maxWidth: '28rem',
margin: '0 auto',
transform: 'translate(-50%, -50%)',
left: '50%',
top: '50%'
}}
>
{/* Card Container */}
<div className="relative glassmorphism rounded-2xl p-8 shadow-2xl">
Expand Down