/* LoginPage.jsx — Guest + Host login with Firebase Auth */ function LoginPage() { const [mode, setMode] = React.useState('guest'); // 'guest' | 'host' const [view, setView] = React.useState('login'); // 'login' | 'signup' | 'forgot' | 'phone' const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(''); const [form, setForm] = React.useState({ email: '', password: '', name: '', confirmPassword: '' }); // Phone sign-in state (guest tab only). const [phone, setPhone] = React.useState(''); const [code, setCode] = React.useState(''); const [confirmation, setConfirmation] = React.useState(null); const [showPw, setShowPw] = React.useState(false); const [showPw2, setShowPw2] = React.useState(false); function update(field, value) { setForm(f => ({ ...f, [field]: value })); if (error) setError(''); } // Where to land after a successful login. Master accounts can enter either // portal — they follow the selected tab; guests/hosts follow their role. function destinationFor(session) { if (session.role === 'master') { return mode === 'host' ? '../admin/host-portal.html' : '../guest-portal/index.html'; } if (session.role === 'host' || session.role === 'admin') return '../admin/host-portal.html'; return '../guest-portal/index.html'; } async function handleSubmit(e) { e.preventDefault(); setError(''); if (!window.NovusAuth) return setError('Auth not ready. Please refresh and try again.'); if (view === 'signup') { if (!form.name.trim()) return setError('Please enter your name'); if (form.password.length < 6) return setError('Password must be at least 6 characters'); if (form.password !== form.confirmPassword) return setError('Passwords do not match'); setLoading(true); try { const session = await window.NovusAuth.signUp(form.email, form.password, form.name); window.location.href = destinationFor(session); } catch (err) { setError(prettyError(err.message)); } finally { setLoading(false); } } else if (view === 'login') { if (!form.email || !form.password) return setError('Please fill in all fields'); setLoading(true); try { const session = await window.NovusAuth.login(form.email, form.password); window.location.href = destinationFor(session); } catch (err) { setError(prettyError(err.message)); } finally { setLoading(false); } } } function prettyError(msg) { msg = msg || ''; if (msg.includes('popup-closed-by-user') || msg.includes('cancelled-popup-request')) return 'Sign-in was cancelled.'; if (msg.includes('account-exists-with-different-credential')) return 'An account already exists with a different sign-in method for this email.'; if (msg.includes('operation-not-allowed')) return "This sign-in method isn't enabled yet."; if (msg.includes('invalid-verification-code')) return 'That code is incorrect. Please re-check and try again.'; if (msg.includes('invalid-phone-number')) return 'Please enter a valid phone number, including country code.'; if (msg.includes('user-not-found') || msg.includes('wrong-password') || msg.includes('invalid-credential')) return 'Wrong email or password.'; if (msg.includes('email-already-in-use')) return 'An account with this email already exists. Try logging in.'; if (msg.includes('invalid-email')) return 'Please enter a valid email address.'; if (msg.includes('weak-password')) return 'Password is too weak (min. 6 characters).'; if (msg.includes('network')) return 'Network error. Check your connection.'; return msg; } // ── social sign-in (guest tab only) ──────────────────────────────────────── async function handleProvider(kind) { setError(''); if (!window.NovusAuth || !window.NovusAuth.loginWithProvider) return setError('Auth not ready. Please refresh and try again.'); setLoading(true); try { const session = await window.NovusAuth.loginWithProvider(kind); window.location.href = destinationFor(session); } catch (err) { setError(prettyError(err.code || err.message)); } finally { setLoading(false); } } // ── phone sign-in (guest tab only) ───────────────────────────────────────── async function handleStartPhone(e) { if (e) e.preventDefault(); setError(''); if (!phone.trim()) return setError('Please enter your phone number.'); if (!window.NovusAuth || !window.NovusAuth.startPhone) return setError('Auth not ready. Please refresh and try again.'); setLoading(true); try { const conf = await window.NovusAuth.startPhone(phone.trim(), 'novus-recaptcha'); setConfirmation(conf); } catch (err) { setError(prettyError(err.code || err.message)); } finally { setLoading(false); } } async function handleConfirmPhone(e) { if (e) e.preventDefault(); setError(''); if (code.trim().length < 6) return setError('Enter the 6-digit code we sent you.'); setLoading(true); try { const session = await window.NovusAuth.confirmPhone(confirmation, code.trim()); window.location.href = destinationFor(session); } catch (err) { setError(prettyError(err.code || err.message)); } finally { setLoading(false); } } // Inline branded provider button (no external SDK / asset files). function ProviderButton({ kind, label, icon }) { return ( ); } // Inline brand SVGs (no new asset files). const googleIcon = ( ); const facebookIcon = ( ); const appleIcon = ( ); const phoneIcon = ( ); const eyeIcon = ( ); const eyeOffIcon = ( ); return (
{/* Visual side — hidden on mobile */}
Villa
Novus NOVUS RESIDENTIALS

The art of refined hospitality.

A curated collection across Miami, held to a single standard. Log in to manage your stay or property.

Nos vemos pronto.
{/* Form side */}
{/* Mobile logo */} Novus NOVUS RESIDENTIALS {/* Mode tabs */}
{/* Heading */}

{view === 'signup' ? (mode === 'host' ? 'Become a host' : 'Create your account') : view === 'forgot' ? 'Reset your password' : mode === 'host' ? 'Host portal access' : 'Welcome back'}

{view === 'signup' ? `Sign up to ${mode === 'host' ? 'manage your properties' : 'track your stay'}.` : view === 'forgot' ? 'Enter your email and we\'ll send a reset link.' : `Log in to ${mode === 'host' ? 'your host dashboard' : 'manage your reservation'}.`}

{/* Phone sign-in sub-view (guest tab only) */} {view === 'phone' && (
{!confirmation ? (
{ setPhone(e.target.value); if (error) setError(''); }} placeholder="+1 305-848-3113" autoComplete="tel" aria-invalid={!!error} required />
{error && (
{error}
)} {/* Invisible reCAPTCHA mounts here */}
) : (
{ setCode(e.target.value.replace(/\D/g, '')); if (error) setError(''); }} placeholder="123456" autoComplete="one-time-code" aria-invalid={!!error} required />
{error && (
{error}
)}
)}
)} {/* Form */} {view !== 'phone' && (
{view === 'signup' && (
update('name', e.target.value)} placeholder="Your full name" autoComplete="name" />
)}
update('email', e.target.value)} placeholder="you@email.com" autoComplete="email" inputMode="email" required />
{view !== 'forgot' && (
update('password', e.target.value)} placeholder="Min. 6 characters" autoComplete={view === 'signup' ? 'new-password' : 'current-password'} style={{ width: '100%', paddingRight: 44 }} required />
)} {view === 'signup' && (
update('confirmPassword', e.target.value)} placeholder="Re-enter your password" autoComplete="new-password" style={{ width: '100%', paddingRight: 44 }} required />
)} {error && (
{error}
)} {view === 'login' && (
)}
)} {/* Admin Google sign-in — HOST/ADMIN tab, login view */} {mode === 'host' && view === 'login' && (
or

Use your @novusresidentials.com Google account for admin access.

)} {/* Social + phone providers — GUEST tab only, on login/signup views */} {mode === 'guest' && (view === 'login' || view === 'signup') && (
or continue with
)} {/* Switch view */} {view !== 'phone' && (
{view === 'login' ? ( <>Don't have an account?{' '} ) : view === 'signup' ? ( <>Already have an account?{' '} ) : ( )}
)}
); } window.LoginPage = LoginPage;