bug: loginform + header navigation adjusted
This commit is contained in:
DeathKaioken
parent
aa447348b2
commit
9e194da309
@ -54,6 +54,8 @@ export default function Header() {
|
||||
|
||||
// NEW: permission flag
|
||||
const [hasReferralPerm, setHasReferralPerm] = useState(false)
|
||||
// NEW: admin management dropdown state
|
||||
const [adminMgmtOpen, setAdminMgmtOpen] = useState(false)
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
@ -405,31 +407,58 @@ export default function Header() {
|
||||
>
|
||||
Dashboard
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { console.log('🧭 Admin: navigate to /admin/user-management'); router.push('/admin/user-management') }}
|
||||
className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
|
||||
>
|
||||
User Management
|
||||
</button>
|
||||
{/* MOVED: User Verify now before Management */}
|
||||
<button
|
||||
onClick={() => { console.log('🧭 Admin: navigate to /admin/user-verify'); router.push('/admin/user-verify') }}
|
||||
className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
|
||||
>
|
||||
User Verify
|
||||
</button>
|
||||
{/* Management dropdown (unchanged) */}
|
||||
<div
|
||||
className="relative"
|
||||
onMouseLeave={() => setAdminMgmtOpen(false)}
|
||||
>
|
||||
<button
|
||||
onClick={() => { console.log('🧭 Admin: navigate to /admin/matrix-management'); router.push('/admin/matrix-management') }}
|
||||
className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
|
||||
onClick={() => setAdminMgmtOpen(o => !o)}
|
||||
className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A] flex items-center gap-1"
|
||||
>
|
||||
Management
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 transition-transform ${adminMgmtOpen ? 'rotate-180' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
{adminMgmtOpen && (
|
||||
<div className="absolute left-1/2 -translate-x-1/2 mt-2 min-w-[15rem] rounded-md bg-white shadow-lg ring-1 ring-black/10 z-50">
|
||||
<div className="py-2">
|
||||
<button
|
||||
onClick={() => { router.push('/admin/user-management'); setAdminMgmtOpen(false); }}
|
||||
className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
|
||||
>
|
||||
User Management
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { router.push('/admin/matrix-management'); setAdminMgmtOpen(false); }}
|
||||
className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
|
||||
>
|
||||
Matrix Management
|
||||
</button>
|
||||
{/* Contract Management only for admin */}
|
||||
<button
|
||||
onClick={() => { console.log('🧭 Admin: navigate to /admin/contract-management'); router.push('/admin/contract-management') }}
|
||||
className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
|
||||
onClick={() => { router.push('/admin/contract-management'); setAdminMgmtOpen(false); }}
|
||||
className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
|
||||
>
|
||||
Contract Management
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { router.push('/admin/subscriptions'); setAdminMgmtOpen(false); }}
|
||||
className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
|
||||
>
|
||||
Coffee Subscription Management
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,28 +13,25 @@ export default function LoginForm() {
|
||||
password: '',
|
||||
rememberMe: false
|
||||
})
|
||||
const [viewportWidth, setViewportWidth] = useState<number>(
|
||||
typeof window !== 'undefined' ? window.innerWidth : 1200
|
||||
)
|
||||
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)
|
||||
const handleResizeBall = () => setShowBall(window.innerWidth >= 768)
|
||||
handleResizeBall()
|
||||
window.addEventListener('resize', handleResizeBall)
|
||||
return () => window.removeEventListener('resize', handleResizeBall)
|
||||
}, [])
|
||||
|
||||
// Prevent body scrolling when component mounts
|
||||
// Track viewport width for dynamic scaling
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = 'hidden'
|
||||
document.documentElement.style.overflow = 'hidden'
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = 'unset'
|
||||
document.documentElement.style.overflow = 'unset'
|
||||
}
|
||||
const handleResize = () => setViewportWidth(window.innerWidth)
|
||||
window.addEventListener('resize', handleResize)
|
||||
return () => window.removeEventListener('resize', handleResize)
|
||||
}, [])
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@ -82,63 +79,59 @@ export default function LoginForm() {
|
||||
})
|
||||
}
|
||||
|
||||
const screenWidth = typeof window !== 'undefined' ? window.innerWidth : 1200
|
||||
const isMobile = screenWidth < 768
|
||||
const isTablet = screenWidth >= 768 && screenWidth <= 1024
|
||||
const isSmallLaptop = screenWidth > 1024 && screenWidth <= 1366
|
||||
// Dynamic breakpoints
|
||||
const isMobile = viewportWidth < 640
|
||||
const isTablet = viewportWidth >= 640 && viewportWidth < 1024
|
||||
const isSmallLaptop = viewportWidth >= 1024 && viewportWidth < 1366
|
||||
|
||||
// Calculate responsive values
|
||||
const getFormWidth = () => {
|
||||
if (isMobile) return '98vw'
|
||||
if (isTablet) return '85vw'
|
||||
if (isSmallLaptop) return '50vw'
|
||||
return '40vw'
|
||||
}
|
||||
// Dynamic width & scale
|
||||
const formWidth = isMobile
|
||||
? '98vw'
|
||||
: isTablet
|
||||
? '85vw'
|
||||
: isSmallLaptop
|
||||
? '50vw'
|
||||
: '40vw'
|
||||
|
||||
const getFormScale = () => {
|
||||
if (isMobile) return undefined
|
||||
if (isTablet) return 'scale(0.95)'
|
||||
if (isSmallLaptop) return 'scale(0.9)'
|
||||
return 'scale(0.85)'
|
||||
}
|
||||
const formMaxWidth = isMobile
|
||||
? 'none'
|
||||
: isTablet
|
||||
? '620px'
|
||||
: isSmallLaptop
|
||||
? '660px'
|
||||
: '720px'
|
||||
|
||||
const getFormMaxWidth = () => {
|
||||
if (isMobile) return 'none'
|
||||
if (isTablet) return '600px'
|
||||
if (isSmallLaptop) return '650px'
|
||||
return '700px'
|
||||
}
|
||||
const formScale = (() => {
|
||||
if (isMobile) return 1
|
||||
if (isTablet) return 0.95
|
||||
if (isSmallLaptop) return 0.9
|
||||
if (viewportWidth >= 1366 && viewportWidth < 1680) return 0.85
|
||||
return 0.82
|
||||
})()
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full flex justify-center items-center relative"
|
||||
className="w-full flex justify-center items-start relative"
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
height: '100vh',
|
||||
overflowY: 'hidden',
|
||||
overflowX: 'hidden',
|
||||
paddingTop: isMobile ? '0.25rem' : '5rem',
|
||||
paddingBottom: isMobile ? '2.5rem' : '2.5rem',
|
||||
// Removed fixed 100vh + overflow hidden to allow scrolling
|
||||
minHeight: 'auto',
|
||||
paddingTop: isMobile ? '0.75rem' : '4rem',
|
||||
paddingBottom: '3rem',
|
||||
backgroundImage: 'url(/images/misc/marble_bluegoldwhite_BG.jpg)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
backgroundPosition: 'center'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-2xl shadow-2xl flex flex-col items-center relative border-t-4 border-[#8D6B1D]"
|
||||
style={{
|
||||
width: getFormWidth(),
|
||||
maxWidth: getFormMaxWidth(),
|
||||
width: formWidth,
|
||||
maxWidth: formMaxWidth,
|
||||
minWidth: isMobile ? '0' : '400px',
|
||||
minHeight: isMobile ? '320px' : '320px',
|
||||
padding: isMobile ? '0.5rem' : '2rem',
|
||||
padding: isMobile ? '0.75rem' : '2rem',
|
||||
marginTop: isMobile ? '0.5rem' : undefined,
|
||||
transform: getFormScale(),
|
||||
transformOrigin: 'top center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start'
|
||||
transform: formScale !== 1 ? `scale(${formScale})` : undefined,
|
||||
transformOrigin: 'top center'
|
||||
}}
|
||||
>
|
||||
{/* Animated Ball - Desktop Only */}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user