From 2bddd8360b36d2301b2e8d7d69869c875f0d4c40 Mon Sep 17 00:00:00 2001 From: DeathKaioken Date: Fri, 3 Oct 2025 22:40:25 +0200 Subject: [PATCH] beautify: register #1 --- src/app/components/nav/Header.tsx | 121 ++++++++------ .../components/SessionDetectedModal.tsx | 43 ++++- src/app/register/page.tsx | 155 +++++------------- 3 files changed, 152 insertions(+), 167 deletions(-) diff --git a/src/app/components/nav/Header.tsx b/src/app/components/nav/Header.tsx index 1566f3a..b0d67b0 100644 --- a/src/app/components/nav/Header.tsx +++ b/src/app/components/nav/Header.tsx @@ -45,6 +45,7 @@ const navLinks = [ export default function Header() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [isDark, setIsDark] = useState(false) + const [mounted, setMounted] = useState(false) // added const user = useAuthStore((s) => s.user); const logout = useAuthStore((s) => s.logout); const router = useRouter(); @@ -83,6 +84,7 @@ export default function Header() { document.documentElement.classList.remove('dark') setIsDark(false) } + setMounted(true) // hydration complete }, []) const toggleTheme = useCallback(() => { @@ -99,6 +101,9 @@ export default function Header() { }) }, []) + const isLoggedIn = !!user + const userPresent = mounted && isLoggedIn + return (
- {/* Avatar first (when logged in) - repositioned dropdown */} - {user && ( - - - - - -
-
-
- {user?.firstName && user?.lastName ? `${user.firstName} ${user.lastName}` : (user?.email || 'User')} -
-
- {user?.email || 'user@example.com'} + {/* Stable auth slot to avoid SSR/CSR structural drift */} +
+ {userPresent ? ( + + + { + if (!user) return 'U' + if (user.firstName || user.lastName) { + return ((user.firstName?.[0] || '') + (user.lastName?.[0] || '')).toUpperCase() + } + return user.email ? user.email[0].toUpperCase() : 'U' + })()} + className="size-8 bg-gradient-to-br from-indigo-500/40 to-indigo-600/60 text-white" + /> + + +
+
+
+ {user?.firstName && user?.lastName ? `${user.firstName} ${user.lastName}` : (user?.email || 'User')} +
+
+ {user?.email || 'user@example.com'} +
+ +
- - -
- - - )} - {/* Login button (only when not logged in) */} - {!user && ( - - )} - {/* Language after avatar/login */} + + + ) : mounted ? ( + + ) : ( + + {/* Language & theme remain after auth slot */} - {/* Theme toggle last */} + +
+
+
+
+ + ) + } + return ( diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx index 907d3d6..2b38626 100644 --- a/src/app/register/page.tsx +++ b/src/app/register/page.tsx @@ -2,8 +2,10 @@ import { useEffect, useState } from 'react' import { useSearchParams, useRouter } from 'next/navigation' -import PageLayout from '../components/PageLayout' import useAuthStore from '../store/authStore' +import RegisterForm from './components/RegisterForm' +import PageLayout from '../components/PageLayout' +import SessionDetectedModal from './components/SessionDetectedModal' export default function RegisterPage() { const searchParams = useSearchParams() @@ -11,142 +13,69 @@ export default function RegisterPage() { const [registered, setRegistered] = useState(false) const [mode, setMode] = useState<'personal' | 'company'>('personal') const router = useRouter() - + // Auth state const user = useAuthStore(state => state.user) const logout = useAuthStore(state => state.logout) - + // Session management const [showSessionModal, setShowSessionModal] = useState(false) const [sessionCleared, setSessionCleared] = useState(false) - - // Redirect to login on successful registration + + // Redirect to login after simulated registration useEffect(() => { if (registered) { - // Show success toast would go here - setTimeout(() => router.push('/login'), 1200) + const t = setTimeout(() => router.push('/login'), 1200) + return () => clearTimeout(t) } }, [registered, router]) - - // Check for existing session + + // Detect existing logged-in session useEffect(() => { - if (user && !sessionCleared) { - setShowSessionModal(true) - } + if (user && !sessionCleared) setShowSessionModal(true) }, [user, sessionCleared]) - + const handleLogout = async () => { await logout() setSessionCleared(true) setShowSessionModal(false) } - + const handleCancel = () => { setShowSessionModal(false) router.push('/dashboard') } - - // Block registration if session detected and not cleared - if (showSessionModal) { - return ( - -
-
-

- Aktive Sitzung erkannt -

-

- Du bist bereits angemeldet. Um dich zu registrieren, musst du dich zuerst abmelden. -

-
- - -
-
-
- - ) - } - - // Prevent form rendering until session is cleared - if (!sessionCleared && user) { - return null - } - + return ( -
-
-
-
-

- Registrierung für Profit Planet -

- {refToken && ( -

- Du wurdest eingeladen! Referral-Token: {refToken} -

- )} - - {/* Mode Toggle */} -
-
- - -
-
- -
-

- Registrierungsmodus: {mode === 'personal' ? 'Privatperson' : 'Unternehmen'} -

- -
-

- Bereits registriert?{' '} - - Hier anmelden - -

-
-
-
+
+ {showSessionModal ? ( +
+
-
-
+ ) : ( + <> + {(!user || sessionCleared) && ( + setRegistered(true)} + /> + )} + {registered && ( +
+ Registrierung erfolgreich – Weiterleitung... +
+ )} + + )} + ) } \ No newline at end of file