firebase-os 1.1.4 → 1.1.6

package/src/pages/Home.tsx

@@ -0,0 +1,144 @@
+import { motion } from 'framer-motion';
+import { Zap } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { ContactPopup } from '../components/ContactPopup';
+import { AnimatePresence } from 'framer-motion';
+import { doc, onSnapshot } from 'firebase/firestore';
+import { db } from '../lib/firebase';
+import { defaultHomeConfig } from '../configs/pages/home.config';
+
+export function Home() {
+  const [showForm, setShowForm] = useState<string | null>(null);
+  const [homeConfig, setHomeConfig] = useState<any>(() => {
+    try {
+      const cached = localStorage.getItem('fbos_home_config');
+      if (cached) return JSON.parse(cached);
+    } catch(e) {}
+    return null;
+  });
+  const [isReady, setIsReady] = useState(() => !!localStorage.getItem('fbos_home_config'));
+
+  useEffect(() => {
+    const unsub = onSnapshot(doc(db, 'sys_pages', 'home'), docSnap => {
+      if (docSnap.exists()) {
+        const data = docSnap.data();
+        setHomeConfig(data);
+        localStorage.setItem('fbos_home_config', JSON.stringify(data));
+      } else {
+        setHomeConfig(defaultHomeConfig);
+        localStorage.setItem('fbos_home_config', JSON.stringify(defaultHomeConfig));
+      }
+      setIsReady(true);
+    });
+    return unsub;
+  }, []);
+
+  if (!isReady) return null;
+
+  const home = homeConfig || defaultHomeConfig;
+
+  // Safety fallback just in case data is being structured
+  const showSubtitle = home?.hero?.showSubtitle ?? true;
+  const subtitleEmoji = home?.hero?.subtitleEmoji ?? '⚡️';
+  const heroTitle = home?.hero?.title || home?.heroTitle || 'The Open-Source Firebase Starter';
+  const heroSubtitle = home?.hero?.subtitle || home?.heroSubtitle || 'The Open-Source Firebase Starter';
+  const heroText = home?.hero?.text || home?.heroText || 'A production-ready Firebase backend template with Auth, Firestore prefix rules, and a clean dashboard — ready for vibe-coded apps.';
+  
+  const primaryText = home?.hero?.buttons?.primary?.text || home?.primaryBtnText || 'Start Building Free';
+  const primaryAction = home?.hero?.buttons?.primary?.action || home?.primaryBtnAction || 'register';
+  const primaryBtn = home?.hero?.buttons?.primary || {};
+  const secondaryBtn = home?.hero?.buttons?.secondary || {};
+
+  const renderButton = (btnData: any, defaultText: string, defaultAction: string, baseClassName: string) => {
+    const text = btnData.text || defaultText;
+    const action = btnData.action || defaultAction;
+    
+    // Strip manual hardcoded rounded utilities and apply semantic radius
+    const cleanClassName = baseClassName.replace(/rounded-\[.*?\]|rounded-\w+/g, '').replace(/border /g, '').replace(/border-\[.*?\]/g, '');
+    const style = { borderRadius: 'var(--btn-radius, 0.75rem)' };
+
+    if (action === 'form') {
+      const targetForm = btnData.form || 'contact';
+      return (
+        <button onClick={() => setShowForm(targetForm)} className={cleanClassName} style={style}>
+          {text}
+        </button>
+      );
+    }
+    
+    if (action === 'redirect') {
+      const url = btnData.url || '/';
+      if (url.startsWith('http')) {
+        return (
+          <a href={url} target="_blank" rel="noopener noreferrer" className={cleanClassName} style={style}>
+            {text}
+          </a>
+        );
+      }
+      return (
+        <Link to={url} className={cleanClassName} style={style}>
+          {text}
+        </Link>
+      );
+    }
+
+    const pathMap: Record<string, string> = { sign_in: '/login', register: '/register' };
+    return (
+      <Link to={pathMap[action] || '/register'} className={cleanClassName} style={style}>
+        {text}
+      </Link>
+    );
+  };
+
+  return (
+    <main className="flex-1 flex flex-col items-center justify-center w-full max-w-5xl mx-auto mt-4 md:mt-12 mb-16 md:mb-24 z-10 relative">
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+        className="text-center mb-8 md:mb-12"
+      >
+        {showSubtitle && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: 0.2 }}
+            className="inline-flex items-center gap-2 md:gap-3 px-5 md:px-6 py-2 md:py-2.5 mb-8 md:mb-10 text-[13px] md:text-[15px] font-semibold tracking-wide uppercase rounded-full glass-panel text-foreground glow-hover cursor-pointer"
+          >
+            {heroSubtitle === defaultHomeConfig.hero.subtitle && <Zap className="w-4 h-4 text-accent" />} {heroSubtitle}
+          </motion.div>
+        )}
+        
+        <motion.h1 
+          className="text-5xl sm:text-6xl md:text-7xl lg:text-[5.5rem] font-extrabold tracking-tight mb-6 md:mb-8 text-gradient animate-float leading-[1.1] md:leading-[1.15] px-2"
+        >
+          {heroTitle}
+        </motion.h1>
+        
+        <p className="text-[15px] sm:text-lg md:text-xl lg:text-[22px] text-foreground/60 max-w-3xl mx-auto font-medium leading-[1.6] md:leading-[1.7] mb-10 md:mb-14 px-6 md:px-4">
+          {heroText}
+        </p>
+
+        <motion.div 
+          className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 w-full max-w-2xl mx-auto px-6"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.5 }}
+        >
+           {renderButton(primaryBtn, 'Start Building Free', 'register', "w-full sm:w-auto px-6 md:px-8 py-3 md:py-3.5 rounded-xl font-semibold tracking-wide btn-primary text-[15px] shadow-xl transition-all duration-300 hover:-translate-y-1 active:scale-95 flex items-center justify-center")}
+           {renderButton(secondaryBtn, 'Sign In', 'sign_in', "w-full sm:w-auto px-6 md:px-8 py-3 md:py-3.5 rounded-xl font-semibold tracking-wide btn-secondary text-[15px] transition-all duration-300 flex items-center justify-center hover:-translate-y-1")}
+        </motion.div>
+      </motion.div>
+
+      <AnimatePresence>
+        {showForm && (
+          <ContactPopup 
+            onClose={() => setShowForm(null)} 
+            formId={showForm} 
+          />
+        )}
+      </AnimatePresence>
+    </main>
+  );
+}

package/src/pages/Login.test.tsx

@@ -0,0 +1,98 @@
+// @generated-test
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from '../lib/AuthContext';
+import { ThemeProvider } from '../lib/ThemeContext';
+import { Login } from './Login';
+
+// Global mocks
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+vi.mock('../lib/AuthContext', () => ({
+  AuthProvider: ({ children }: any) => <>{children}</>,
+  useAuth: () => ({ 
+    user: { uid: 'mock-user-123', email: 'test@example.com' }, 
+    userWorkspaces: [], 
+    activeWorkspace: null,
+    activeOrg: null,
+    loading: false
+  })
+}));
+
+vi.mock('../lib/ThemeContext', () => ({
+  ThemeProvider: ({ children }: any) => <>{children}</>,
+  useTheme: () => ({ themeMode: 'light', setThemeMode: vi.fn(), activeConfig: {} })
+}));
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(() => ({})),
+  onAuthStateChanged: vi.fn((auth, cb) => { cb({ uid: 'mock-user-123', email: 'test@example.com', getIdToken: vi.fn(() => Promise.resolve('mock-token')) }); return () => {}; })
+}));
+vi.mock('firebase/firestore', () => ({
+  getFirestore: vi.fn(() => ({})),
+  collection: vi.fn(),
+  doc: vi.fn(),
+  setDoc: vi.fn(() => Promise.resolve()),
+  addDoc: vi.fn(() => Promise.resolve()),
+  updateDoc: vi.fn(() => Promise.resolve()),
+  deleteDoc: vi.fn(() => Promise.resolve()),
+  query: vi.fn(),
+  where: vi.fn(),
+  orderBy: vi.fn(),
+  limit: vi.fn(),
+  getDoc: vi.fn(() => Promise.resolve({ exists: () => true, data: () => ({ role: 'super_admin' }) })),
+  getDocs: vi.fn(() => Promise.resolve({ docs: [], forEach: vi.fn() })),
+  onSnapshot: vi.fn((...args: any[]) => {
+    let cb = args[1];
+    if (typeof args[2] === 'function') {
+      cb = args[2];
+    }
+    if (typeof cb === 'function') {
+      cb({docs: [], forEach: vi.fn(), data: () => ({}), exists: () => true});
+    }
+    return () => {};
+  })
+}));
+vi.mock('firebase/storage', () => ({
+  getStorage: vi.fn(() => ({})),
+  ref: vi.fn(),
+  listAll: vi.fn(() => Promise.resolve({ items: [], prefixes: [] })),
+  getDownloadURL: vi.fn(() => Promise.resolve('mock-url')),
+  getMetadata: vi.fn(() => Promise.resolve({ size: 1024, timeCreated: new Date().toISOString() }))
+}));
+
+describe('Login Component', () => {
+  it('renders without crashing', async () => {
+    // Wrap in standard application providers inside act to process async side effects and prevent warnings
+    await act(async () => {
+      render(
+        <BrowserRouter>
+          <AuthProvider>
+            <ThemeProvider>
+              {/* @ts-ignore */}
+              <Login />
+            </ThemeProvider>
+          </AuthProvider>
+        </BrowserRouter>
+      );
+      // Wait a tick to flush background state updates
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+    
+    // Check if the document has anything rendered without throwing
+    expect(document.body).toBeDefined();
+  });
+});

package/src/pages/Login.tsx

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import { Link, useSearchParams, useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { ArrowRight } from 'lucide-react';
+import { Input } from '../components/Input';
+import { Button } from '../components/Button';
+import { auth } from '../lib/firebase';
+import { signInWithEmailAndPassword, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
+
+export function Login() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<React.ReactNode | null>(null);
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const [emailValue] = useState(searchParams.get('email') || '');
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    const formData = new FormData(e.currentTarget);
+    const email = formData.get('email') as string;
+    const password = formData.get('password') as string;
+
+    try {
+      await signInWithEmailAndPassword(auth, email, password);
+      // Wait to redirect and trigger reload only if necessary on the new path! 
+      const intendedUrl = searchParams.get('from') || '/dashboard';
+      navigate(intendedUrl, { replace: true });
+    } catch (err: any) {
+      if (err?.code === 'auth/invalid-credential' || err?.code === 'auth/user-not-found' || err?.code === 'auth/wrong-password') {
+        setError(
+          <span>
+            Email or Password are incorrect.{' '}
+            <Link to="/reset-password" className="font-bold underline hover:text-red-400 transition-colors">Reset password?</Link>
+          </span>
+        );
+      } else {
+        setError(err?.message || 'Invalid credentials.');
+      }
+      setLoading(false);
+    }
+  };
+
+  const handleGoogle = async () => {
+    setLoading(true);
+    try {
+      const provider = new GoogleAuthProvider();
+      await signInWithPopup(auth, provider);
+      const intendedUrl = searchParams.get('from') || '/dashboard';
+      navigate(intendedUrl, { replace: true });
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex-1 flex items-center justify-center w-full z-10 px-4 mt-6 md:mt-8 mb-8">
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="w-full max-w-[480px] p-6 sm:p-8 lg:p-10 rounded-3xl md:rounded-3xl glass-panel relative glow-hover shadow-[0_8px_32px_rgba(0,0,0,0.08)]"
+      >
+        <div className="absolute -inset-[1px] bg-gradient-to-br from-[var(--primary-glow)] to-transparent opacity-30 blur-[20px] rounded-3xl md:rounded-3xl -z-10" />
+
+        <div className="mb-6 text-center">
+          <h3 className="text-2xl sm:text-3xl font-extrabold mb-2 text-foreground tracking-tight">Welcome back</h3>
+          <p className="text-[14px] md:text-[15px] font-medium text-foreground/60 tracking-wide">Sign in to Firebase OS.</p>
+        </div>
+
+        {error && <div className="p-3 mb-6 text-[14px] font-medium text-red-400 bg-red-500/10 rounded-xl border border-red-500/20">{error}</div>}
+
+        <form className="space-y-4" onSubmit={handleSubmit}>
+          <Input name="email" label="Email" type="email" defaultValue={emailValue} placeholder="name@example.com" required />
+          <div className="space-y-2">
+            <div className="flex justify-between items-center pr-1">
+              <label className="text-[14px] md:text-[15px] tracking-wide font-medium text-foreground/80 select-none pb-1">Password</label>
+              <Link to="/reset-password" className="text-[13px] md:text-[14px] text-accent hover:underline font-bold tracking-wide">Forgot Password?</Link>
+            </div>
+            <Input name="password" type="password" placeholder="••••••••" required />
+          </div>
+
+          <div className="pt-2">
+            <Button type="submit" className="w-full py-3 text-base font-bold tracking-wide rounded-xl transition-all hover:-translate-y-0.5" isLoading={loading}>
+              Sign In <ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform shrink-0" />
+            </Button>
+          </div>
+        </form>
+
+        <div className="mt-6 pt-5 border-t border-[var(--panel-border)] space-y-4 text-center">
+          <Button variant="secondary" onClick={handleGoogle} className="w-full py-3 text-base font-bold tracking-wide rounded-xl transition-all hover:-translate-y-0.5" disabled={loading}>
+            <svg className="w-5 h-5 mr-3" viewBox="0 0 24 24"><path fill="currentColor" 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" /><path fill="currentColor" 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" /><path fill="currentColor" 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" /><path fill="currentColor" 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" /></svg>
+            Sign in with Google
+          </Button>
+          <p className="text-[14px] text-foreground/70 font-medium pt-2 tracking-wide">
+            New here? <Link to="/register" className="text-accent hover:underline font-bold ml-1">Create account</Link>
+          </p>
+        </div>
+      </motion.div>
+    </div>
+  );
+}

package/src/pages/PagesAdmin.test.tsx

@@ -0,0 +1,98 @@
+// @generated-test
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from '../lib/AuthContext';
+import { ThemeProvider } from '../lib/ThemeContext';
+import { PagesAdmin } from './PagesAdmin';
+
+// Global mocks
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+vi.mock('../lib/AuthContext', () => ({
+  AuthProvider: ({ children }: any) => <>{children}</>,
+  useAuth: () => ({ 
+    user: { uid: 'mock-user-123', email: 'test@example.com' }, 
+    userWorkspaces: [], 
+    activeWorkspace: null,
+    activeOrg: null,
+    loading: false
+  })
+}));
+
+vi.mock('../lib/ThemeContext', () => ({
+  ThemeProvider: ({ children }: any) => <>{children}</>,
+  useTheme: () => ({ themeMode: 'light', setThemeMode: vi.fn(), activeConfig: {} })
+}));
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(() => ({})),
+  onAuthStateChanged: vi.fn((auth, cb) => { cb({ uid: 'mock-user-123', email: 'test@example.com', getIdToken: vi.fn(() => Promise.resolve('mock-token')) }); return () => {}; })
+}));
+vi.mock('firebase/firestore', () => ({
+  getFirestore: vi.fn(() => ({})),
+  collection: vi.fn(),
+  doc: vi.fn(),
+  setDoc: vi.fn(() => Promise.resolve()),
+  addDoc: vi.fn(() => Promise.resolve()),
+  updateDoc: vi.fn(() => Promise.resolve()),
+  deleteDoc: vi.fn(() => Promise.resolve()),
+  query: vi.fn(),
+  where: vi.fn(),
+  orderBy: vi.fn(),
+  limit: vi.fn(),
+  getDoc: vi.fn(() => Promise.resolve({ exists: () => true, data: () => ({ role: 'super_admin' }) })),
+  getDocs: vi.fn(() => Promise.resolve({ docs: [], forEach: vi.fn() })),
+  onSnapshot: vi.fn((...args: any[]) => {
+    let cb = args[1];
+    if (typeof args[2] === 'function') {
+      cb = args[2];
+    }
+    if (typeof cb === 'function') {
+      cb({docs: [], forEach: vi.fn(), data: () => ({}), exists: () => true});
+    }
+    return () => {};
+  })
+}));
+vi.mock('firebase/storage', () => ({
+  getStorage: vi.fn(() => ({})),
+  ref: vi.fn(),
+  listAll: vi.fn(() => Promise.resolve({ items: [], prefixes: [] })),
+  getDownloadURL: vi.fn(() => Promise.resolve('mock-url')),
+  getMetadata: vi.fn(() => Promise.resolve({ size: 1024, timeCreated: new Date().toISOString() }))
+}));
+
+describe('PagesAdmin Component', () => {
+  it('renders without crashing', async () => {
+    // Wrap in standard application providers inside act to process async side effects and prevent warnings
+    await act(async () => {
+      render(
+        <BrowserRouter>
+          <AuthProvider>
+            <ThemeProvider>
+              {/* @ts-ignore */}
+              <PagesAdmin />
+            </ThemeProvider>
+          </AuthProvider>
+        </BrowserRouter>
+      );
+      // Wait a tick to flush background state updates
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+    
+    // Check if the document has anything rendered without throwing
+    expect(document.body).toBeDefined();
+  });
+});