add comment

Adjust css for login page

frontend/src/App.jsx

@@ -11,9 +11,7 @@ import AlertHistory from "./pages/alertHistory/AlertHistory";
 import Account from "./pages/user_account/Account";
 
 export default function App() {
-  const { currentUser, isSubscribed, loading } = useAuth();
-
-  if (loading) return null;
+  const { currentUser, isSubscribed } = useAuth();
 
   if (!currentUser) {
     return (

frontend/src/components/navPanel/NavPanel.css

@@ -76,3 +76,14 @@
   cursor: pointer;
   transition: all 0.15s ease;
 }
+
+
+@media (max-width: 480px) {
+  .nav-panel__overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.45);
+    opacity: 0;
+    z-index: 900;
+  }
+}

frontend/src/contexts/AuthContext.jsx

@@ -1,9 +1,10 @@
-import { createContext, useContext, useState, useEffect, useCallback } from "react";
+import { createContext, useContext, useSyncExternalStore } from "react";
 import {
   onAuthStateChanged,
   signInWithEmailAndPassword,
   createUserWithEmailAndPassword,
   signOut,
+  sendEmailVerification as firebaseSendEmailVerification,
 } from "firebase/auth";
 import { auth } from "../firebase/config";
 import { getAccount } from "../api/account";
@@ -16,71 +17,98 @@ const DEFAULT_TIER_LIMITS = {
   allowed_channels: ["email"],
 };
 
-export function AuthProvider({ children }) {
-  const [currentUser, setCurrentUser] = useState(null);
-  const [userTier, setUserTier] = useState("free");
-  const [tierLimits, setTierLimits] = useState(DEFAULT_TIER_LIMITS);
-  const [isSubscribed, setIsSubscribed] = useState(false);
-  const [loading, setLoading] = useState(true);
+// External auth store - lives outside React
+const createAuthStore = () => {
+  let state = {
+    currentUser: null,
+    userTier: "free",
+    tierLimits: DEFAULT_TIER_LIMITS,
+    isSubscribed: false,
+    loading: true,
+  };
+  const listeners = new Set();
 
-  const fetchAccount = useCallback(async () => {
+  const notify = () => listeners.forEach((fn) => fn());
+
+  const setState = (partial) => {
+    state = { ...state, ...partial };
+    notify();
+  };
+
+  const fetchAccount = async () => {
     try {
       const data = await getAccount();
-      setUserTier(data.subscription_tier || "free");
-      setTierLimits(data.tier_limits || DEFAULT_TIER_LIMITS);
-      setIsSubscribed(
-        data.subscription_status === "active" ||
+      setState({
+        userTier: data.subscription_tier || "free",
+        tierLimits: data.tier_limits || DEFAULT_TIER_LIMITS,
+        isSubscribed:
+          data.subscription_status === "active" ||
           data.subscription_status === "trialing",
-      );
+      });
     } catch {
-      setUserTier("free");
-      setTierLimits(DEFAULT_TIER_LIMITS);
-      setIsSubscribed(false);
+      setState({ isSubscribed: false });
     }
-  }, []);
+  };
 
-  useEffect(() => {
-    const unsubscribe = onAuthStateChanged(auth, async (user) => {
-      setCurrentUser(user);
-      if (user) {
-        await fetchAccount();
-      } else {
-        setUserTier("free");
-        setTierLimits(DEFAULT_TIER_LIMITS);
-        setIsSubscribed(false);
-      }
-      setLoading(false);
-    });
-    return unsubscribe;
-  }, [fetchAccount]);
+  // Set up Firebase listener once, outside of React
+  onAuthStateChanged(auth, async (user) => {
+    setState({ loading: true, currentUser: user });
+    if (user) {
+      await fetchAccount();
+    } else {
+      setState({ isSubscribed: false, userTier: "free", tierLimits: DEFAULT_TIER_LIMITS });
+    }
+    setState({ loading: false });
+  });
 
-  async function signup(email, password) {
-    const cred = await createUserWithEmailAndPassword(auth, email, password);
-    return cred.user;
-  }
+  return {
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    getSnapshot: () => state,
+    refreshAccount: fetchAccount,
+  };
+};
 
-  async function login(email, password) {
-    const cred = await signInWithEmailAndPassword(auth, email, password);
-    return cred.user;
-  }
+const authStore = createAuthStore();
 
-  async function logout() {
-    await signOut(auth);
-  }
+export function AuthProvider({ children }) {
+  const state = useSyncExternalStore(authStore.subscribe, authStore.getSnapshot);
+
+  const signup = (email, password) => createUserWithEmailAndPassword(auth, email, password);
+  const login = (email, password) => signInWithEmailAndPassword(auth, email, password);
+  const logout = () => signOut(auth);
+
+  const sendEmailVerification = () => {
+    if (auth.currentUser) {
+      return firebaseSendEmailVerification(auth.currentUser);
+    }
+  };
+
+  const reloadUser = async () => {
+    if (auth.currentUser) {
+      await auth.currentUser.reload();
+      return auth.currentUser;
+    }
+    return null;
+  };
 
   const value = {
-    currentUser,
-    userTier,
-    tierLimits,
-    isSubscribed,
-    loading,
+    ...state,
     signup,
     login,
     logout,
-    refreshAccount: fetchAccount,
+    sendEmailVerification,
+    reloadUser,
+    refreshAccount: authStore.refreshAccount,
   };
 
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+  return (
+    <AuthContext.Provider value={value}>
+      {!state.loading && children}
+    </AuthContext.Provider>
+  );
 }
 
 export function useAuth() {

frontend/src/index.css

@@ -422,7 +422,7 @@ button {
 
   .btn {
     padding: 0.45rem 0.85rem;
-    font-size: 0.95rem;
+    font-size: 1.45rem !important;
   }
 
   .btn--lg {
@@ -433,4 +433,8 @@ button {
   .section {
     padding: 0.75rem;
   }
+
+  .mb-lg {
+    color: white;
+  }
 }

frontend/src/pages/login/Login.css

@@ -40,6 +40,7 @@
   text-align: center;
   position: relative;
   top: -20px;
+  white-space: nowrap;
 }
 
 .login-brand {
@@ -114,4 +115,21 @@
     padding-right: 1rem;
     font-size: 1.25rem;
   }
+
+  .login-span {
+    color: red
+  }
+
+  h1 {
+    font-weight: 400 !important
+  }
+
+  .login-bg-video {
+    opacity: 0.135;
+    left: 47%;
+  }
+
+  .login-button {
+    font-size: 1rem;
+  }
 }

frontend/src/pages/login/Login.jsx

@@ -47,7 +47,7 @@ export default function Login() {
 
       <div className="login-card login-card-fadein">
         <h1 className="login-heading">
-          <span className="login-brand">Koin Ping</span> - Login
+          <span className="login-brand">Koin Ping</span><span className="login-span"> - Login</span>
         </h1>
 
         <div className="login-interactive-fadein">

frontend/src/pages/subscribe/Subscribe.css

@@ -128,6 +128,23 @@
   font-size: 0.9rem;
 }
 
+.subscribe__subtitle strong {
+  color: var(--color-primary);
+}
+
+/* Verify email actions */
+.subscribe__verify-actions {
+  text-align: center;
+  margin-top: 1rem;
+}
+
+.subscribe__verify-sent {
+  color: var(--color-success, #22c55e);
+  text-align: center;
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
 /* Subscribe card (Step 2 tier cards) */
 .subscribe-card {
   background-color: var(--color-bg-card, #1a1a2e);

frontend/src/pages/subscribe/Subscribe.jsx

@@ -10,12 +10,12 @@ import Button from "../../components/Button";
 import TierPicker from "../../components/TierPicker";
 import "./Subscribe.css";
 
-const STEPS = ["Create Account", "Choose Plan"];
+const STEPS = ["Create Account", "Verify Email", "Choose Plan"];
 
 export default function Subscribe() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const { currentUser, signup, refreshAccount } = useAuth();
+  const { currentUser, signup, sendEmailVerification, reloadUser, refreshAccount } = useAuth();
 
   const queryParameters = new URLSearchParams(window.location.search)
   const success = queryParameters?.get("payment")
@@ -30,7 +30,10 @@ export default function Subscribe() {
 
   setTimeout(forward, 2000, success, session_id);
 
-  const [step, setStep] = useState(currentUser ? 2 : 1);
+  const [step, setStep] = useState(
+    currentUser ? (currentUser.emailVerified ? 3 : 2) : 1
+  );
+  const [verificationSent, setVerificationSent] = useState(false);
   const [data, setData] = useState({
     email: currentUser?.email || "",
     password: "",
@@ -65,6 +68,8 @@ export default function Subscribe() {
     setLoading(true);
     try {
       await signup(data.email, data.password);
+      await sendEmailVerification();
+      setVerificationSent(true);
       setStep(2);
     } catch (err) {
       setError(err.message || "Failed to create account");
@@ -74,6 +79,41 @@ export default function Subscribe() {
   }
 
   async function handleStep2() {
+    setError("");
+    setLoading(true);
+    try {
+      const user = await reloadUser();
+      if (user?.emailVerified) {
+        setStep(3);
+      } else {
+        setError("Email not yet verified. Please check your inbox and click the verification link.");
+      }
+    } catch (err) {
+      setError(err.message || "Failed to check verification status");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleResendVerification() {
+    setError("");
+    setLoading(true);
+    try {
+      await sendEmailVerification();
+      setVerificationSent(true);
+      setError("");
+    } catch (err) {
+      if (err.code === "auth/too-many-requests") {
+        setError("Too many requests. Please wait a moment before trying again.");
+      } else {
+        setError(err.message || "Failed to resend verification email");
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleStep3() {
     setError("");
     if (!data.selectedTier) {
       setError("Please select a plan");
@@ -173,6 +213,30 @@ export default function Subscribe() {
     );
   }
 
+  function StepVerifyEmail() {
+    return (
+      <>
+        <h2 className="mb-sm">Verify your email</h2>
+        <p className="subscribe__subtitle">
+          We've sent a verification link to <strong>{currentUser?.email}</strong>.
+          Please check your inbox and click the link to verify your email address.
+        </p>
+        {verificationSent && !error && (
+          <p className="subscribe__verify-sent">Verification email sent!</p>
+        )}
+        <div className="subscribe__verify-actions">
+          <Button
+            onClick={handleResendVerification}
+            disabled={loading}
+            variant="ghost"
+          >
+            {loading ? "Sending..." : "Resend verification email"}
+          </Button>
+        </div>
+      </>
+    );
+  }
+
   function StepChoosePlan() {
     return (
       <>
@@ -194,6 +258,7 @@ export default function Subscribe() {
     async function handleNext() {
       if (step === 1) handleStep1();
       else if (step === 2) await handleStep2();
+      else if (step === 3) await handleStep3();
     }
 
     function handleBack() {
@@ -204,16 +269,18 @@ export default function Subscribe() {
     const nextLabel =
       step === 1
         ? "Create Account"
-        : !data.selectedTier
-          ? "Continue"
-          : data.selectedTier === "free"
-            ? "Start Free Trial"
-            : "Subscribe & Continue";
+        : step === 2
+          ? "I've verified my email"
+          : !data.selectedTier
+            ? "Continue"
+            : data.selectedTier === "free"
+              ? "Start Free Trial"
+              : "Subscribe & Continue";
 
     return (
       <div className="subscribe__footer">
         <div>
-          {step === 2 && (
+          {step > 1 && (
             <Button onClick={handleBack} disabled={loading} variant="ghost">
               ← Back
             </Button>
@@ -222,7 +289,7 @@ export default function Subscribe() {
 
         <Button
           onClick={handleNext}
-          disabled={loading || (step === 2 && !data.selectedTier)}
+          disabled={loading || (step === 3 && !data.selectedTier)}
           className="text-bold"
         >
           {loading ? "Please wait..." : nextLabel}
@@ -235,13 +302,14 @@ export default function Subscribe() {
 
   const stepContent = {
     1: StepCreateAccount(),
-    2: StepChoosePlan(),
+    2: StepVerifyEmail(),
+    3: StepChoosePlan(),
   };
 
   return (
     <div className="subscribe">
       <div
-        className={`subscribe__container${step === 2 ? " subscribe__container--wide" : ""}`}
+        className={`subscribe__container${step === 3 ? " subscribe__container--wide" : ""}`}
       >
         <h1 className="subscribe__title">Koin Ping</h1>