feat: readded google signins and add global announcement feature

- Updated .env.example to include new environment variables for Google authentication and global announcement settings.
- Integrated Google sign-in functionality in SignInButton and HeroSection components, allowing users to log in with their Google accounts.
- Added GlobalAnnouncement component to display maintenance notices or announcements on the homepage layout.
- Enhanced styling for Google sign-in buttons to improve user experience.

surfsense_web/.env.example

@@ -1,29 +1,74 @@
+# ─────────────────────────────────────────────────────────────────────────────
+# Backend connectivity
+# ─────────────────────────────────────────────────────────────────────────────
+
 # Optional packaged-client override. Leave unset in Docker so browser requests
-# use same-origin relative URLs behind Caddy.
+# use same-origin relative URLs behind Caddy. Set it for packaged clients
+# (e.g. Electron) or local dev that talks to a separate backend origin.
 # NEXT_PUBLIC_FASTAPI_BACKEND_URL=http://localhost:8000
 
-# Server-only. Internal backend URL used by Next.js server code.
+# Server-only. Internal backend URL used by Next.js server code (RSC / route
+# handlers). Cannot be a relative URL.
 SURFSENSE_BACKEND_INTERNAL_URL=http://backend:8000
 
+# ─────────────────────────────────────────────────────────────────────────────
+# Runtime configuration (read at runtime by the server, no rebuild needed)
+# ─────────────────────────────────────────────────────────────────────────────
+
+# Authentication method: LOCAL (email/password) or GOOGLE (OAuth).
 AUTH_TYPE=LOCAL
+# Document parsing backend: DOCLING, LLAMACLOUD, etc.
 ETL_SERVICE=DOCLING
+# Deployment mode: self-hosted or cloud.
 DEPLOYMENT_MODE=self-hosted
 
-# Contact Form Vars (optional)
+# ─────────────────────────────────────────────────────────────────────────────
+# Build-time fallbacks for packaged clients (e.g. Electron) without a runtime
+# config provider. Optional; Docker reads the plain runtime vars above first.
+# ─────────────────────────────────────────────────────────────────────────────
+# NEXT_PUBLIC_AUTH_TYPE=GOOGLE
+# NEXT_PUBLIC_ETL_SERVICE=DOCLING
+# NEXT_PUBLIC_DEPLOYMENT_MODE=self-hosted
+# Overrides the app version shown in the UI (defaults to package.json version).
+# NEXT_PUBLIC_APP_VERSION=
+
+# ─────────────────────────────────────────────────────────────────────────────
+# Database (Contact Form, optional)
+# ─────────────────────────────────────────────────────────────────────────────
 DATABASE_URL=postgresql://postgres:[YOUR-PASSWORD]@db.sdsf.supabase.co:5432/postgres
 
-# PostHog analytics (optional, leave empty to disable)
+# ─────────────────────────────────────────────────────────────────────────────
+# PostHog analytics (optional, leave key empty to disable)
+# ─────────────────────────────────────────────────────────────────────────────
 NEXT_PUBLIC_POSTHOG_KEY=
+NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
 
+# ─────────────────────────────────────────────────────────────────────────────
+# Zero cache (real-time sync). Leave unset in Docker to use the same-origin
+# "/zero" endpoint behind Caddy. Set it for local dev or packaged clients.
+# ─────────────────────────────────────────────────────────────────────────────
+# NEXT_PUBLIC_ZERO_CACHE_URL=http://localhost:4848
+
+# ─────────────────────────────────────────────────────────────────────────────
 # Cloudflare Turnstile CAPTCHA for anonymous chat abuse prevention
 # Get your site key from https://dash.cloudflare.com/ -> Turnstile
+# ─────────────────────────────────────────────────────────────────────────────
 NEXT_PUBLIC_TURNSTILE_SITE_KEY=
 
+# ─────────────────────────────────────────────────────────────────────────────
 # Google AdSense (optional, only enables ads on the /free hub page).
 # Publisher ID from your AdSense dashboard, e.g. ca-pub-XXXXXXXXXXXXXXXX.
 # Leave empty to disable ad rendering entirely.
+# ─────────────────────────────────────────────────────────────────────────────
 NEXT_PUBLIC_GOOGLE_ADSENSE_CLIENT_ID=
 # Ad unit slot IDs from AdSense dashboard -> Ads -> By ad unit.
 # Leave empty to hide individual slots while keeping the script loaded.
 NEXT_PUBLIC_GOOGLE_ADSENSE_SLOT_FREE_HUB_IN_CONTENT=
-NEXT_PUBLIC_GOOGLE_ADSENSE_SLOT_FREE_HUB_BEFORE_FAQ=
+NEXT_PUBLIC_GOOGLE_ADSENSE_SLOT_FREE_HUB_BEFORE_FAQ=
+
+# ─────────────────────────────────────────────────────────────────────────────
+# Global announcement banner (e.g. planned downtime / maintenance notice).
+# Set ENABLED to "true" to show the banner, and put the notice text in MESSAGE.
+# ─────────────────────────────────────────────────────────────────────────────
+NEXT_PUBLIC_GLOBAL_ANNOUNCEMENT_ENABLED=false
+NEXT_PUBLIC_GLOBAL_ANNOUNCEMENT_MESSAGE=

surfsense_web/app/(home)/layout.tsx

@@ -2,6 +2,7 @@
 
 import { usePathname } from "next/navigation";
 import { FooterNew } from "@/components/homepage/footer-new";
+import { GlobalAnnouncement } from "@/components/homepage/global-announcement";
 import { Navbar } from "@/components/homepage/navbar";
 
 export default function HomePageLayout({ children }: { children: React.ReactNode }) {
@@ -15,6 +16,7 @@ export default function HomePageLayout({ children }: { children: React.ReactNode
 
 	return (
 		<main className="min-h-screen bg-linear-to-b from-gray-50 to-gray-100 text-gray-900 dark:from-black dark:to-gray-900 dark:text-white overflow-x-hidden">
+			<GlobalAnnouncement />
 			<Navbar />
 			{children}
 			{!isAuthPage && <FooterNew />}

surfsense_web/components/auth/sign-in-button.tsx

@@ -1,6 +1,40 @@
 "use client";
 
 import Link from "next/link";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { BUILD_TIME_AUTH_TYPE, buildBackendUrl } from "@/lib/env-config";
+import { trackLoginAttempt } from "@/lib/posthog/events";
+import { cn } from "@/lib/utils";
+
+// Official Google "G" logo with brand colors
+const GoogleLogo = ({ className }: { className?: string }) => (
+	<svg
+		className={className}
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-label="Google logo"
+	>
+		<title>Google logo</title>
+		<path
+			d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+			fill="#4285F4"
+		/>
+		<path
+			d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+			fill="#34A853"
+		/>
+		<path
+			d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+			fill="#FBBC05"
+		/>
+		<path
+			d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+			fill="#EA4335"
+		/>
+	</svg>
+);
 
 interface SignInButtonProps {
 	/**
@@ -12,17 +46,51 @@ interface SignInButtonProps {
 }
 
 export const SignInButton = ({ variant = "desktop" }: SignInButtonProps) => {
+	const isGoogleAuth = BUILD_TIME_AUTH_TYPE === "GOOGLE";
+	const [isRedirecting, setIsRedirecting] = useState(false);
+
+	const handleGoogleLogin = () => {
+		if (isRedirecting) return;
+		setIsRedirecting(true);
+		trackLoginAttempt("google");
+		window.location.href = buildBackendUrl("/auth/google/authorize-redirect");
+	};
+
 	const getClassName = () => {
 		if (variant === "desktop") {
-			return "hidden rounded-full bg-black px-8 py-2 text-sm font-bold text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] md:block dark:bg-white dark:text-black";
+			return isGoogleAuth
+				? "hidden rounded-full border border-white bg-white px-5 py-2 text-sm font-medium text-[#1f1f1f] shadow-sm hover:bg-zinc-100 hover:text-[#1f1f1f] md:flex dark:border-white"
+				: "hidden rounded-full bg-black px-8 py-2 text-sm font-bold text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] md:block dark:bg-white dark:text-black";
 		}
 		if (variant === "compact") {
-			return "rounded-full bg-black px-6 py-1.5 text-sm font-bold text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] dark:bg-white dark:text-black";
+			return isGoogleAuth
+				? "rounded-full border border-white bg-white px-4 py-1.5 text-sm font-medium text-[#1f1f1f] shadow-sm hover:bg-zinc-100 hover:text-[#1f1f1f] dark:border-white"
+				: "rounded-full bg-black px-6 py-1.5 text-sm font-bold text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] dark:bg-white dark:text-black";
 		}
 		// mobile
-		return "w-full rounded-lg bg-black px-8 py-2 font-medium text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] dark:bg-white dark:text-black text-center touch-manipulation";
+		return isGoogleAuth
+			? "w-full rounded-lg border border-white bg-white px-8 py-2.5 font-medium text-[#1f1f1f] shadow-sm hover:bg-zinc-100 hover:text-[#1f1f1f] dark:border-white touch-manipulation"
+			: "w-full rounded-lg bg-black px-8 py-2 font-medium text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] dark:bg-white dark:text-black text-center touch-manipulation";
 	};
 
+	if (isGoogleAuth) {
+		return (
+			<Button
+				type="button"
+				variant="ghost"
+				onClick={handleGoogleLogin}
+				disabled={isRedirecting}
+				className={cn(
+					"flex items-center justify-center gap-2 transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-50",
+					getClassName()
+				)}
+			>
+				<GoogleLogo className="h-4 w-4" />
+				<span>Sign In</span>
+			</Button>
+		);
+	}
+
 	return (
 		<Link href="/login" className={getClassName()}>
 			Sign In

surfsense_web/components/homepage/global-announcement.tsx

@@ -0,0 +1,27 @@
+import { IconInfoCircle } from "@tabler/icons-react";
+import { GLOBAL_ANNOUNCEMENT_ENABLED, GLOBAL_ANNOUNCEMENT_MESSAGE } from "@/lib/env-config";
+
+/**
+ * Small, site-wide banner for planned downtime / maintenance notices.
+ *
+ * Controlled entirely through build-time env vars so it can be toggled from
+ * Vercel without a code change:
+ *   - NEXT_PUBLIC_GLOBAL_ANNOUNCEMENT_ENABLED ("true" to show)
+ *   - NEXT_PUBLIC_GLOBAL_ANNOUNCEMENT_MESSAGE (the copy to display)
+ */
+export function GlobalAnnouncement() {
+	const message = GLOBAL_ANNOUNCEMENT_MESSAGE.trim();
+
+	if (!GLOBAL_ANNOUNCEMENT_ENABLED || !message) {
+		return null;
+	}
+
+	return (
+		<div className="fixed bottom-0 left-0 right-0 z-60 w-full bg-amber-500/15 text-amber-900 backdrop-blur-md dark:bg-amber-400/10 dark:text-amber-200 border-t border-amber-500/30">
+			<div className="mx-auto flex max-w-7xl items-center justify-center gap-2 px-4 py-2 text-center text-sm font-medium">
+				<IconInfoCircle className="h-4 w-4 shrink-0" />
+				<span>{message}</span>
+			</div>
+		</div>
+	);
+}

surfsense_web/components/homepage/hero-section.tsx

@@ -37,8 +37,38 @@ import {
 	getAssetLabel,
 	usePrimaryDownload,
 } from "@/lib/desktop-download-utils";
+import { BUILD_TIME_AUTH_TYPE, buildBackendUrl } from "@/lib/env-config";
+import { trackLoginAttempt } from "@/lib/posthog/events";
 import { cn } from "@/lib/utils";
 
+const GoogleLogo = ({ className }: { className?: string }) => (
+	<svg
+		className={className}
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-label="Google logo"
+	>
+		<title>Google logo</title>
+		<path
+			d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+			fill="#4285F4"
+		/>
+		<path
+			d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+			fill="#34A853"
+		/>
+		<path
+			d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+			fill="#FBBC05"
+		/>
+		<path
+			d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+			fill="#EA4335"
+		/>
+	</svg>
+);
+
 type HeroUseCase = {
 	id: string;
 	title: string;
@@ -284,6 +314,31 @@ export function HeroSection() {
 }
 
 function GetStartedButton() {
+	const isGoogleAuth = BUILD_TIME_AUTH_TYPE === "GOOGLE";
+	const [isRedirecting, setIsRedirecting] = useState(false);
+
+	const handleGoogleLogin = () => {
+		if (isRedirecting) return;
+		setIsRedirecting(true);
+		trackLoginAttempt("google");
+		window.location.href = buildBackendUrl("/auth/google/authorize-redirect");
+	};
+
+	if (isGoogleAuth) {
+		return (
+			<Button
+				type="button"
+				variant="ghost"
+				onClick={handleGoogleLogin}
+				disabled={isRedirecting}
+				className="h-14 w-full cursor-pointer gap-3 rounded-lg border border-white bg-white text-center text-base font-medium text-[#1f1f1f] shadow-sm transition duration-150 hover:bg-zinc-100 hover:text-[#1f1f1f] sm:w-56 dark:border-white"
+			>
+				<GoogleLogo className="h-5 w-5" />
+				<span>Continue with Google</span>
+			</Button>
+		);
+	}
+
 	return (
 		<Button
 			asChild

surfsense_web/lib/env-config.ts

@@ -70,3 +70,12 @@ export const BUILD_TIME_DEPLOYMENT_MODE = process.env.NEXT_PUBLIC_DEPLOYMENT_MOD
 // App version - defaults to package.json version
 // Can be overridden at build time with NEXT_PUBLIC_APP_VERSION for full git tag version
 export const APP_VERSION = process.env.NEXT_PUBLIC_APP_VERSION || packageJson.version;
+
+// Global announcement banner. Useful for planned downtime / maintenance notices.
+// Toggle on Vercel via NEXT_PUBLIC_GLOBAL_ANNOUNCEMENT_ENABLED ("true" to show) and
+// set the copy with NEXT_PUBLIC_GLOBAL_ANNOUNCEMENT_MESSAGE.
+export const GLOBAL_ANNOUNCEMENT_ENABLED =
+	process.env.NEXT_PUBLIC_GLOBAL_ANNOUNCEMENT_ENABLED === "true";
+
+export const GLOBAL_ANNOUNCEMENT_MESSAGE =
+	process.env.NEXT_PUBLIC_GLOBAL_ANNOUNCEMENT_MESSAGE ?? "";