import { useState, useEffect } from "react"; import { useNavigate, Link, useSearchParams } from "react-router-dom"; import { AlertCircle, Eye, EyeOff, Loader2, Lightbulb } from "lucide-react"; import { motion } from "framer-motion"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"; import { login } from "@/lib/auth"; import { toast } from "@/hooks/use-toast"; import { supabase } from "@/integrations/supabase/client"; import { useMetaTags } from "@/hooks/useMetaTags"; import { checkUserRole } from "@/lib/admin"; import { getSubdomain } from "@/lib/subdomain"; import { resolveOnboardingState } from "@/lib/onboarding"; import { useSchoolBranding } from "@/contexts/SchoolBrandingContext"; import { canAccessWhiteLabelStudentApp, rejectWhiteLabelAccess } from "@/lib/white-label-access"; import nepeduaiLogo from "@/assets/nepeduai-logo.png"; import { AppleSignIn } from "@/components/auth/AppleSignIn"; import { OfflineAuthFallback } from "@/components/auth/OfflineAuthFallback"; import { applyRememberPreference, getRememberedIdentifier, getRememberPreference } from "@/lib/remember-me"; import { db } from "@/lib/backend"; /* ────────────────────────────────────────────────────────────── Login — editorial business vibe Matches landing page: light bg, asymmetric, SectionLabel rhythm, Playfair italic accent, soft glows, no shaders. ────────────────────────────────────────────────────────────── */ const CONTEXT: Record = { teacher: { label: "Teacher portal", lead: "Back to the", italic: "staffroom.", sub: "Sign in to mark attendance, post homework, and update marks — without the WhatsApp groups.", }, parent: { label: "Parent portal", lead: "How was school", italic: "today?", sub: "Sign in to see attendance, marks, fees and notices the moment they're posted — no need to wait for the parent meeting.", }, main: { label: "Welcome back! ", lead: "Ready to jump", italic: "back in?", sub: "Your study streaks, AI insights, and learning progress are waiting for you.", }, }; const Login = () => { const subdomain = getSubdomain(); const { branding } = useSchoolBranding(); const schoolName = branding?.display_name?? null; const ctx = schoolName ? { label: `${schoolName} portal`, lead: "Welcome back to", italic: schoolName, sub: branding?.principal_message || branding?.tagline || `Sign in to access ${schoolName}'s notices, marks, attendance and more.`, } : (CONTEXT[subdomain] || CONTEXT.main); useMetaTags({ title: schoolName? `Sign in — ${schoolName}` : "Sign In", description: schoolName ? `Sign in to ${schoolName}'s student & parent portal.` : "Sign in to NepEduAI — Nepal's Smart Education Operating System.", }); const [showPassword, setShowPassword] = useState(false); const [email, setEmail] = useState(() => getRememberedIdentifier()); const [password, setPassword] = useState(""); const [remember, setRemember] = useState(() => getRememberPreference()); const [loading, setLoading] = useState(false); const [forgotOpen, setForgotOpen] = useState(false); const [resetEmail, setResetEmail] = useState(""); const [resetLoading, setResetLoading] = useState(false); const [searchParams, setSearchParams] = useSearchParams(); const errorCode = searchParams.get("error"); const inlineError = errorCode === "wrong_school" ? schoolName ? `Invalid user. This account is not registered with ${schoolName}.` : "Invalid user. This account is not registered with this school." : null; const navigate = useNavigate(); const redirectByRole = async (userId: string) => { const sub = getSubdomain(); const hostname = window.location.hostname.toLowerCase(); const isProdHost = hostname === "nepeduai.com" || hostname.endsWith(".nepeduai.com"); // Bulk-created accounts must change their password before going anywhere else. try { const { data: forcedProfile } = await (db.from("profiles") as any) .select("must_change_password") .eq("id", userId) .maybeSingle(); if (forcedProfile?.must_change_password) { navigate("/change-password", { replace: true }); return; } } catch { // non-fatal — fall through to normal redirect } if (branding?.school_id) { const allowed = await canAccessWhiteLabelStudentApp(userId, branding.school_id); if (!allowed) { await rejectWhiteLabelAccess(); return; } // Skip the extra profile fetch + onboarding round-trip on white-label // schools: school students are pre-onboarded by their school admin, // so go straight to the dashboard. (If a real onboarding is required // later, Dashboard's own guard will kick in — we just stop blocking // the perceived login latency here.) navigate("/dashboard", { replace: true }); return; } // Fetch role + profile IN PARALLEL — these are independent network calls. // Instead of using getUserRoles() which re-fetches auth.getUser(), we query the DB directly // since we already have the authenticated userId from the session. This cuts login time in half. const [rolesRes, profileRes] = await Promise.all([ db.from("user_roles").select("role").eq("user_id", userId), db.from("profiles").select("grade,onboarding_completed").eq("id", userId).maybeSingle(), ]); const roles = rolesRes.data ? rolesRes.data.map(r => r.role as string) : ["user"]; const profile = profileRes.data ?? undefined; // Check if the user is authorized for the current subdomain portal if (sub === "school" && roles.includes("school_admin")) { navigate("/dashboard", { replace: true }); return; } if (sub === "teacher" && roles.includes("teacher")) { navigate("/dashboard", { replace: true }); return; } if (sub === "parent" && roles.includes("parent")) { navigate("/dashboard", { replace: true }); return; } if (sub === "admin" && roles.includes("admin")) { navigate("/dashboard", { replace: true }); return; } // If they aren't explicitly signing into a portal they have access to, // fall back to their primary role logic to redirect them to their main home. const primaryRole = roles.includes("admin") ? "admin" : roles.includes("school_admin") ? "school_admin" : roles.includes("teacher") ? "teacher" : roles.includes("parent") ? "parent" : "user"; // On dedicated portal subdomains, routes are root-level (no /school-admin, /teacher prefix) switch (primaryRole) { case "admin": // Admins MUST use the admin subdomain. If they signed in anywhere else // in production, sign them out and bounce them to adminmanager.nepeduai.com. if (sub!== "admin") { if (isProdHost) { await supabase.auth.signOut(); toast({ title: "Wrong portal", description: "Admins must sign in at adminmanager.nepeduai.com", variant: "destructive", }); window.location.href = "https://adminmanager.nepeduai.com/login"; return; } // In dev/preview: send to the admin login route navigate("/admin/login", { replace: true }); return; } navigate("/dashboard", { replace: true }); return; case "school_admin": if (isProdHost && sub!== "school" && sub!== "admin") { window.location.href = "https://school.nepeduai.com/login"; return; } navigate(sub === "school"? "/dashboard" : "/school-admin/dashboard", { replace: true }); return; case "teacher": if (isProdHost && sub!== "teacher" && sub!== "admin") { window.location.href = "https://teacher.nepeduai.com/login"; return; } navigate(sub === "teacher"? "/dashboard" : "/teacher/dashboard", { replace: true }); return; case "parent": if (isProdHost && sub!== "parent" && sub!== "admin") { window.location.href = "https://parent.nepeduai.com/login"; return; } navigate(sub === "parent"? "/dashboard" : "/parent/dashboard", { replace: true }); return; default: { // Students should never land on portal subdomains if (sub === "school" || sub === "teacher" || sub === "parent" || sub === "admin") { window.location.href = "https://nepeduai.com/dashboard"; return; } const onboarding = await resolveOnboardingState(userId, primaryRole, profile); navigate(onboarding.requiresOnboarding? "/onboarding" : "/dashboard", { replace: true }); } } }; useEffect(() => { const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => { if (event === "SIGNED_IN" && session) redirectByRole(session.user.id); }); return () => subscription.unsubscribe(); }, [branding?.school_id, navigate]); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!email.trim() ||!password.trim()) { toast({ title: "Missing fields", description: "Please enter your email/username and password.", variant: "destructive" }); return; } setLoading(true); applyRememberPreference(email.trim(), remember); const result = await login(email, password); if (result.error) { const msg = result.error.includes("Invalid login") ? "Incorrect email/username or password. Please try again." : result.error; toast({ title: "Sign in failed", description: msg, variant: "destructive" }); } setLoading(false); }; const handleForgotPassword = async () => { if (!resetEmail.trim()) { toast({ title: "Enter your email", description: "Please enter the email you signed up with.", variant: "destructive" }); return; } setResetLoading(true); const { error } = await supabase.auth.resetPasswordForEmail(resetEmail, { redirectTo: `${window.location.origin}/settings`, }); if (error) toast({ title: "Error", description: "Could not send reset email. Please check the address and try again.", variant: "destructive" }); else { toast({ title: "Check your inbox", description: "We've sent a password reset link to your email." }); setForgotOpen(false); } setResetLoading(false); }; return (
{/* Soft floating background blobs for glassmorphic depth */}
{/* Top bar — minimal */}
{schoolName {schoolName? ( {schoolName} ) : ( <> Nep EduAI )} {!schoolName && ( Create account → )}
{/* MAIN */}
{/* LEFT — editorial copy */} {/* Overline — SectionLabel rhythm */}

{ctx.label}

{/* Heading */}

{ctx.lead}{" "} {ctx.italic}

{ctx.sub}

{/* Editorial pull-quote / school principal card */} {schoolName && branding? (
{branding.cover_image_url && (
)}
{branding.principal_message && (

“{branding.principal_message}”

)}
{branding.principal_photo_url && ( {branding.principal_name )}
{branding.principal_name && ( {branding.principal_name} )} Principal · {schoolName}
) : (

Daily Success Tip

"Consistent small steps lead to big results. Reviewing just one chapter today keeps your streak alive and your brain sharp! "

)} {/* RIGHT — form */} {/* Mobile-only overline */}

{ctx.label}

Sign In

For students at any school in Nepal — or studying on your own.

{inlineError && (

{inlineError}

)}
{ if (inlineError) { const next = new URLSearchParams(searchParams); next.delete("error"); setSearchParams(next, { replace: true }); } handleSubmit(e); }} className="mt-8 space-y-5" >
setEmail(e.target.value)} placeholder="you@example.com or your username" className="h-14 w-full rounded-2xl border border-black/5 dark:border-zinc-800 bg-white/50 dark:bg-zinc-950/50 backdrop-blur-sm px-4 text-[15px] text-foreground placeholder:text-muted-foreground/50 focus-visible:border-primary/50 focus-visible:bg-white dark:focus-visible:bg-zinc-950 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/10 transition-all shadow-sm inset-shadow-sm" required />
setPassword(e.target.value)} placeholder="Enter your password" className="h-14 w-full rounded-2xl border border-black/5 dark:border-zinc-800 bg-white/50 dark:bg-zinc-950/50 backdrop-blur-sm px-4 pr-12 text-[15px] text-foreground placeholder:text-muted-foreground/50 focus-visible:border-primary/50 focus-visible:bg-white dark:focus-visible:bg-zinc-950 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/10 transition-all shadow-sm inset-shadow-sm" required />
{/* Sign in with Apple — iOS native only (renders nothing on web/Android) */} {!schoolName && ( <>
or

New to NepEduAI?{" "} Create an account

)} {schoolName && (

Accounts are issued by your school. Contact the school office if you can't sign in.

)}

By signing in, you agree to our{" "} Terms{" "} &{" "} Privacy Policy.

{/* Forgot password dialog */} Reset your password Enter your email and we'll send you a reset link.
setResetEmail(e.target.value)} placeholder="you@example.com" className="h-12 w-full rounded-xl border border-border bg-background px-4 text-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background transition-all" />
); }; export default Login;