387 lines
14 KiB
TypeScript
387 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline'
|
|
import { useLogin } from '../hooks/useLogin'
|
|
|
|
export default function LoginForm() {
|
|
const [showPassword, setShowPassword] = useState(false)
|
|
const [showBall, setShowBall] = useState(true)
|
|
const [formData, setFormData] = useState({
|
|
email: '',
|
|
password: '',
|
|
rememberMe: false
|
|
})
|
|
const router = useRouter()
|
|
const { login, error, setError, loading } = useLogin()
|
|
|
|
// Responsive ball visibility
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
setShowBall(window.innerWidth >= 768)
|
|
}
|
|
handleResize()
|
|
window.addEventListener('resize', handleResize)
|
|
return () => window.removeEventListener('resize', handleResize)
|
|
}, [])
|
|
|
|
// Prevent body scrolling when component mounts
|
|
useEffect(() => {
|
|
document.body.style.overflow = 'hidden'
|
|
document.documentElement.style.overflow = 'hidden'
|
|
|
|
return () => {
|
|
document.body.style.overflow = 'unset'
|
|
document.documentElement.style.overflow = 'unset'
|
|
}
|
|
}, [])
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value, type, checked } = e.target
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: type === 'checkbox' ? checked : value
|
|
}))
|
|
setError('') // Clear error when user starts typing
|
|
}
|
|
|
|
const validateForm = (): boolean => {
|
|
if (!formData.email.trim()) {
|
|
setError('E-Mail-Adresse ist erforderlich')
|
|
return false
|
|
}
|
|
|
|
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
|
setError('Bitte gib eine gültige E-Mail-Adresse ein')
|
|
return false
|
|
}
|
|
|
|
if (!formData.password.trim()) {
|
|
setError('Passwort ist erforderlich')
|
|
return false
|
|
}
|
|
|
|
if (formData.password.length < 6) {
|
|
setError('Passwort muss mindestens 6 Zeichen lang sein')
|
|
return false
|
|
}
|
|
|
|
return true
|
|
}
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
if (!validateForm()) return
|
|
|
|
await login({
|
|
email: formData.email,
|
|
password: formData.password,
|
|
rememberMe: formData.rememberMe
|
|
})
|
|
}
|
|
|
|
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
|
|
|
|
return (
|
|
<div
|
|
className="w-full flex justify-center items-center relative"
|
|
style={{
|
|
minHeight: '100vh',
|
|
height: '100vh',
|
|
overflowY: 'hidden',
|
|
overflowX: 'hidden',
|
|
paddingTop: isMobile ? '0.25rem' : '5rem',
|
|
paddingBottom: isMobile ? '2.5rem' : '2.5rem',
|
|
backgroundImage: 'url(/images/misc/marble_bluegoldwhite_BG.jpg)',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat'
|
|
}}
|
|
>
|
|
<div
|
|
className="bg-white rounded-2xl shadow-2xl flex flex-col items-center relative border-t-4 border-[#8D6B1D]"
|
|
style={{
|
|
width: isMobile ? '98vw' : '40vw',
|
|
maxWidth: isMobile ? 'none' : '700px',
|
|
minWidth: isMobile ? '0' : '400px',
|
|
minHeight: isMobile ? '320px' : '320px',
|
|
padding: isMobile ? '0.5rem' : '2rem',
|
|
marginTop: isMobile ? '0.5rem' : undefined,
|
|
transform: isMobile ? undefined : 'scale(0.85)',
|
|
transformOrigin: 'top center',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'flex-start'
|
|
}}
|
|
>
|
|
{/* Animated Ball - Desktop Only */}
|
|
{showBall && !isMobile && (
|
|
<div className="absolute -top-16 left-1/2 -translate-x-1/2 w-28 z-20">
|
|
<div className="w-28 h-28 rounded-full bg-gradient-to-br from-[#8D6B1D] via-[#A67C20] to-[#C49225] flex items-center justify-center shadow-xl border-4 border-white relative">
|
|
<svg className="w-20 h-20 text-[#F4E7D1]" viewBox="0 0 64 64" fill="none">
|
|
<circle cx="32" cy="32" r="20" fill="currentColor" />
|
|
<ellipse cx="32" cy="38" rx="16" ry="5" fill="#8D6B1D" fillOpacity=".10" />
|
|
<ellipse cx="32" cy="26" rx="10" ry="4" fill="#8D6B1D" fillOpacity=".08" />
|
|
<circle cx="40" cy="26" r="3" fill="#8D6B1D" fillOpacity=".5" />
|
|
</svg>
|
|
{/* Orbiting balls */}
|
|
<span className="absolute left-1/2 top-1/2 w-0 h-0">
|
|
<span className="block absolute animate-orbit-1" style={{ width: 0, height: 0 }}>
|
|
<span className="block w-3 h-3 bg-[#8D6B1D] rounded-full shadow-lg" style={{ transform: 'translateX(44px)' }}></span>
|
|
</span>
|
|
<span className="block absolute animate-orbit-2" style={{ width: 0, height: 0 }}>
|
|
<span className="block w-2.5 h-2.5 bg-[#A67C20] rounded-full shadow-md" style={{ transform: 'translateX(-36px)' }}></span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Content */}
|
|
<div style={{
|
|
marginTop: isMobile ? '0.5rem' : '1.5rem',
|
|
marginBottom: isMobile ? '1.5rem' : '2rem',
|
|
width: '100%',
|
|
}}>
|
|
<h1
|
|
className="mb-2 text-center text-4xl font-extrabold text-[#0F172A] tracking-tight drop-shadow-lg"
|
|
style={{
|
|
fontSize: isMobile ? '2rem' : undefined,
|
|
marginTop: isMobile ? '0.5rem' : undefined,
|
|
}}
|
|
>
|
|
Profit Planet
|
|
</h1>
|
|
<p
|
|
className="mb-8 text-center text-lg text-[#8D6B1D] font-medium"
|
|
style={{
|
|
fontSize: isMobile ? '0.95rem' : undefined,
|
|
marginBottom: isMobile ? '1rem' : undefined,
|
|
}}
|
|
>
|
|
Welcome back! Login to continue.
|
|
</p>
|
|
|
|
<form
|
|
className="space-y-7 w-full"
|
|
style={{
|
|
gap: isMobile ? '0.75rem' : undefined,
|
|
}}
|
|
onSubmit={handleSubmit}
|
|
>
|
|
{/* Email Field */}
|
|
<div>
|
|
<label
|
|
htmlFor="email"
|
|
className="block text-base font-semibold text-[#0F172A] mb-1"
|
|
style={{
|
|
fontSize: isMobile ? '0.875rem' : undefined,
|
|
marginBottom: isMobile ? '0.25rem' : undefined,
|
|
}}
|
|
>
|
|
E-Mail-Adresse
|
|
</label>
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
value={formData.email}
|
|
onChange={handleInputChange}
|
|
className="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-[#8D6B1D] text-base bg-white text-[#0F172A] transition"
|
|
style={{
|
|
fontSize: isMobile ? '0.875rem' : undefined,
|
|
padding: isMobile ? '0.4rem 0.75rem' : undefined,
|
|
}}
|
|
placeholder="deine@email.com"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Password Field */}
|
|
<div>
|
|
<label
|
|
htmlFor="password"
|
|
className="block text-base font-semibold text-[#0F172A] mb-1"
|
|
style={{
|
|
fontSize: isMobile ? '0.875rem' : undefined,
|
|
marginBottom: isMobile ? '0.25rem' : undefined,
|
|
}}
|
|
>
|
|
Passwort
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type={showPassword ? "text" : "password"}
|
|
autoComplete="current-password"
|
|
value={formData.password}
|
|
onChange={handleInputChange}
|
|
className="appearance-none block w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-[#8D6B1D] text-base bg-white text-[#0F172A] transition"
|
|
style={{
|
|
fontSize: isMobile ? '0.875rem' : undefined,
|
|
padding: isMobile ? '0.4rem 2.5rem 0.4rem 0.75rem' : '0.75rem 3rem 0.75rem 1rem',
|
|
}}
|
|
placeholder="Dein Passwort"
|
|
required
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute inset-y-0 right-0 pr-3 flex items-center"
|
|
>
|
|
{showPassword ? (
|
|
<EyeSlashIcon className="h-5 w-5 text-gray-400 hover:text-[#8D6B1D] transition-colors" />
|
|
) : (
|
|
<EyeIcon className="h-5 w-5 text-gray-400 hover:text-[#8D6B1D] transition-colors" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Remember Me & Show Password */}
|
|
<div className="mt-2 flex items-center justify-between">
|
|
<div className="flex items-center">
|
|
<input
|
|
id="rememberMe"
|
|
name="rememberMe"
|
|
type="checkbox"
|
|
checked={formData.rememberMe}
|
|
onChange={handleInputChange}
|
|
className="h-4 w-4 text-[#8D6B1D] border-2 border-gray-300 rounded focus:ring-[#8D6B1D] focus:ring-2"
|
|
/>
|
|
<label htmlFor="rememberMe" className="ml-2 text-sm text-[#4A4A4A]">
|
|
Angemeldet bleiben
|
|
</label>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<input
|
|
id="show-password"
|
|
type="checkbox"
|
|
className="h-4 w-4 border-2 border-gray-300 rounded focus:ring-[#8D6B1D] focus:ring-2"
|
|
checked={showPassword}
|
|
onChange={(e) => setShowPassword(e.target.checked)}
|
|
/>
|
|
<label htmlFor="show-password" className="ml-2 text-sm text-[#4A4A4A]">
|
|
Passwort anzeigen
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error Message */}
|
|
{error && (
|
|
<div className="text-red-500 text-sm bg-red-50 border border-red-200 rounded-lg p-3">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Submit Button */}
|
|
<div>
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className={`w-full py-3 px-6 rounded-lg shadow-md text-base font-bold text-white transition-all duration-200 transform hover:-translate-y-0.5 ${
|
|
loading
|
|
? 'bg-gray-400 cursor-not-allowed'
|
|
: 'bg-gradient-to-r from-[#8D6B1D] via-[#A67C20] to-[#C49225] hover:from-[#7A5E1A] hover:to-[#B8851F] focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:ring-offset-2'
|
|
}`}
|
|
style={{
|
|
fontSize: isMobile ? '0.9rem' : undefined,
|
|
padding: isMobile ? '0.6rem 1rem' : undefined,
|
|
}}
|
|
>
|
|
{loading ? (
|
|
<div className="flex items-center justify-center">
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
|
Anmeldung läuft...
|
|
</div>
|
|
) : (
|
|
'Anmelden'
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Forgot Password */}
|
|
<div className="mt-4 flex justify-end">
|
|
<button
|
|
type="button"
|
|
className="text-[#8D6B1D] hover:text-[#7A5E1A] hover:underline text-sm font-medium transition-colors"
|
|
onClick={() => router.push("/password-reset")}
|
|
>
|
|
Passwort vergessen?
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
{/* Registration Section */}
|
|
<div
|
|
className="mt-10 w-full"
|
|
style={{
|
|
marginTop: isMobile ? '1rem' : undefined,
|
|
}}
|
|
>
|
|
<div className="relative">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<div className="w-full border-t border-gray-200"></div>
|
|
</div>
|
|
<div
|
|
className="relative flex justify-center text-base"
|
|
style={{
|
|
fontSize: isMobile ? '0.875rem' : undefined,
|
|
}}
|
|
>
|
|
<a href="/register" className="px-3 bg-white text-[#8D6B1D]">Noch kein Account?</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="mt-7 text-center"
|
|
style={{
|
|
marginTop: isMobile ? '0.75rem' : undefined,
|
|
}}
|
|
>
|
|
<p
|
|
className="text-base text-[#4A4A4A]"
|
|
style={{
|
|
fontSize: isMobile ? '0.8rem' : undefined,
|
|
}}
|
|
>
|
|
Profit Planet is available by invitation only.
|
|
</p>
|
|
<p
|
|
className="text-base text-[#8D6B1D] mt-2"
|
|
style={{
|
|
fontSize: isMobile ? '0.8rem' : undefined,
|
|
}}
|
|
>
|
|
Contact us for an invitation!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CSS Animations */}
|
|
<style jsx>{`
|
|
@keyframes orbit-1 {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
@keyframes orbit-2 {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(-360deg); }
|
|
}
|
|
.animate-orbit-1 {
|
|
animation: orbit-1 3s linear infinite;
|
|
transform-origin: 0 0;
|
|
}
|
|
.animate-orbit-2 {
|
|
animation: orbit-2 4s linear infinite;
|
|
transform-origin: 0 0;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |