firebase-os 1.1.4 → 1.1.6

package/src/pages/Profile.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 { Profile } from './Profile';
+
+// 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('Profile 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 */}
+              <Profile />
+            </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/Profile.tsx

@@ -0,0 +1,319 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useAuth } from '../lib/AuthContext';
+import { storage, auth, db } from '../lib/firebase';
+import { updateProfile, verifyBeforeUpdateEmail, updatePassword, fetchSignInMethodsForEmail } from 'firebase/auth';
+import { ref, uploadBytes, getDownloadURL, deleteObject } from 'firebase/storage';
+import { doc, updateDoc, collection, getDocs, query, where, writeBatch } from 'firebase/firestore';
+import { Input } from '../components/Input';
+import { Button } from '../components/Button';
+import { User, CheckCircle2, AlertCircle, Camera, Trash2, Loader2 } from 'lucide-react';
+import { DashboardNav } from '../components/DashboardNav';
+
+export function Profile() {
+  const { user, refreshUser } = useAuth();
+
+  const [name, setName] = useState(user?.displayName || '');
+  const [email, setEmail] = useState(user?.email || '');
+  const [photoURL, setPhotoURL] = useState(user?.photoURL || '');
+
+  const [loading, setLoading] = useState(false);
+  const [msg, setMsg] = useState<{ text: string; type: 'success' | 'error' } | null>(null);
+
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [photoError, setPhotoError] = useState(false);
+  const [photoLoading, setPhotoLoading] = useState(false);
+  const [imageFetching, setImageFetching] = useState(true);
+
+  React.useEffect(() => {
+    setName(user?.displayName || '');
+    setEmail(user?.email || '');
+    setPhotoURL(user?.photoURL || '');
+  }, [user?.uid, user?.displayName, user?.email, user?.photoURL]);
+
+  // Propagate avatar changes to all shared/admin records owned by this user
+  const propagateAvatarToRecords = async (newAvatarURL: string) => {
+    if (!user) return;
+    try {
+      // Find all mem_ and admin_ collections that might contain this user's records
+      // We target the known file collections + dynamically query tab records
+      const collectionsToUpdate: string[] = ['mem_files', 'admin_files'];
+
+      // Also find mem_* and admin_* record collections from sys_tabs
+      const tabsSnap = await getDocs(collection(db, 'sys_tabs'));
+      tabsSnap.forEach(d => {
+        const data = d.data();
+        const tabName = (data.tabName || d.id).toLowerCase().replace(/[^a-z0-9]+/g, '_');
+        if (data.pageType === 'shared') collectionsToUpdate.push(`mem_${tabName}_records`);
+        if (data.pageType === 'admin') collectionsToUpdate.push(`admin_${tabName}_records`);
+      });
+
+      for (const col of collectionsToUpdate) {
+        try {
+          const q = query(collection(db, col), where('uid', '==', user.uid));
+          const snap = await getDocs(q);
+          if (snap.empty) continue;
+          const batch = writeBatch(db);
+          snap.docs.forEach(d => batch.update(d.ref, { creatorAvatar: newAvatarURL }));
+          await batch.commit();
+        } catch (e) {
+          // Collection might not exist yet — that's fine
+        }
+      }
+    } catch (e) {
+      console.error('Error propagating avatar to records:', e);
+    }
+  };
+
+  const handlePhotoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !user) return;
+
+    // Size limit (2MB) - Responsive for faster uploads
+    if (file.size > 2 * 1024 * 1024) {
+      setMsg({ text: 'File too large. Please select an image under 2MB.', type: 'error' });
+      return;
+    }
+
+    setPhotoLoading(true);
+    setPhotoError(false);
+    setImageFetching(true);
+    try {
+      const storagePath = `user_avatars/${user.uid}/file.png`;
+      const fileRef = ref(storage, storagePath);
+
+      // Upload to Storage
+      await uploadBytes(fileRef, file, {
+        customMetadata: { ownerId: user.uid }
+      });
+      const newPhotoURL = await getDownloadURL(fileRef);
+
+      // Update Firebase Auth Profile
+      await updateProfile(user, { photoURL: newPhotoURL });
+
+      // Update Firestore User Profile
+      const userRef = doc(db, 'user_profiles', user.uid);
+      await updateDoc(userRef, {
+        avatar: newPhotoURL
+      });
+
+      setPhotoURL(newPhotoURL);
+      await refreshUser();
+      // Propagate to shared/admin records in background
+      propagateAvatarToRecords(newPhotoURL);
+      setMsg({ text: 'Avatar successfully updated!', type: 'success' });
+    } catch (err) {
+      console.error(err);
+      setMsg({ text: 'Failed to upload photo.', type: 'error' });
+    } finally {
+      setPhotoLoading(false);
+    }
+  };
+
+  const handlePhotoDelete = async () => {
+    if (!user) return;
+    setPhotoLoading(true);
+    setPhotoError(false);
+    setImageFetching(false);
+    try {
+      const storagePath = `user_avatars/${user.uid}/file.png`;
+      const fileRef = ref(storage, storagePath);
+      await deleteObject(fileRef).catch((e) => console.error(e));
+
+      // Update Auth
+      await updateProfile(user, { photoURL: '' });
+
+      // Update Firestore
+      const userRef = doc(db, 'user_profiles', user.uid);
+      await updateDoc(userRef, { avatar: '' });
+
+      setPhotoURL('');
+      await refreshUser();
+      // Clear avatar in shared/admin records
+      propagateAvatarToRecords('');
+      setMsg({ text: 'Avatar removed.', type: 'success' });
+    } catch (err) {
+      console.error(err);
+      setMsg({ text: 'Failed to delete photo.', type: 'error' });
+    } finally {
+      setPhotoLoading(false);
+    }
+  };
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!user) return;
+
+    setLoading(true);
+    setMsg(null);
+
+    try {
+      // Update display name
+      if (name !== user.displayName) {
+        await updateProfile(user, { displayName: name });
+      }
+
+      // Update email (requires re-verification)
+      let emailUpdated = false;
+      if (email !== user.email) {
+        const methods = await fetchSignInMethodsForEmail(auth, email);
+        if (methods && methods.length > 0) {
+          throw new Error('An account with this email already exists.');
+        }
+        await verifyBeforeUpdateEmail(user, email);
+        emailUpdated = true;
+      }
+
+      // Update password
+      if (password) {
+        if (password !== confirmPassword) {
+          throw new Error('Passwords do not match.');
+        }
+        if (password.length < 6) {
+          throw new Error('Password must be at least 6 characters.');
+        }
+        await updatePassword(user, password);
+        setPassword('');
+        setConfirmPassword('');
+      }
+
+      await refreshUser();
+
+      if (emailUpdated) {
+        setMsg({ text: 'Profile updated. A verification link has been sent to your new email address.', type: 'success' });
+      } else {
+        setMsg({ text: 'Profile successfully updated.', type: 'success' });
+      }
+    } catch (err: any) {
+      console.error(err);
+      if (err.code === 'auth/requires-recent-login') {
+        setMsg({ text: 'For security, please sign out and sign back in before changing your email or password.', type: 'error' });
+      } else {
+        setMsg({ text: err.message || 'Failed to update profile.', type: 'error' });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col">
+
+      {/* Header */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="mb-8"
+      >
+        <h1 className="w-fit inline-block text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-3 text-gradient mt-1">
+          Profile Settings
+        </h1>
+        <div className="flex items-center gap-2 text-foreground/40 font-bold uppercase tracking-[0.2em] text-[11px]">
+          <span className="w-8 h-[1px] bg-foreground/10" />
+          /profile
+        </div>
+      </motion.div>
+
+      <div className="flex flex-col gap-6 animate-in fade-in duration-500 pb-20">
+        <div className="flex justify-start">
+          <DashboardNav />
+        </div>
+
+      <AnimatePresence>
+        {msg && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.98, y: -10 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.98, y: -10 }}
+            className={`p-4 mb-6 rounded-2xl border flex flex-col sm:flex-row sm:items-center gap-3 ${msg.type === 'error' ? 'bg-red-500/10 border-red-500/20 text-red-400' : 'bg-accent/10 border-accent/20 text-accent'}`}
+          >
+            {msg.type === 'success' ? <CheckCircle2 className="w-5 h-5 shrink-0" /> : <AlertCircle className="w-5 h-5 shrink-0" />}
+            <span className="text-[14px] font-semibold tracking-wide leading-relaxed">{msg.text}</span>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <form onSubmit={handleSave} className="w-full flex flex-col">
+        <div className="glass-panel w-full p-8 md:p-12 rounded-3xl border border-[var(--panel-border)] shadow-2xl space-y-8 min-h-[500px]">
+
+          {/* Avatar section */}
+          <div className="flex flex-col sm:flex-row items-center gap-6 pb-6 border-b border-[var(--panel-border)]/50">
+            <div className="w-24 h-24 md:w-28 md:h-28 rounded-full glass-panel border-4 border-[var(--panel-border)] shadow-xl bg-accent/10 flex items-center justify-center relative overflow-hidden shrink-0 group transition-transform duration-300 hover:scale-[1.02]">
+              {(photoLoading || (photoURL && imageFetching && !photoError)) && (
+                <div className="absolute inset-0 flex items-center justify-center bg-accent/5 backdrop-blur-sm z-10">
+                  <Loader2 className="w-8 h-8 text-accent animate-spin" />
+                </div>
+              )}
+              {photoURL && !photoError ? (
+                <img 
+                  src={photoURL} 
+                  alt="Avatar" 
+                  className={`w-full h-full object-cover transition-opacity duration-300 ${imageFetching ? 'opacity-0' : 'opacity-100'}`} 
+                  onLoad={() => setImageFetching(false)}
+                  onError={() => { setPhotoError(true); setImageFetching(false); }} 
+                />
+              ) : (
+                <User className="w-10 h-10 md:w-12 md:h-12 text-accent" />
+              )}
+
+              {!photoLoading && (
+                <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2 z-10 backdrop-blur-sm">
+                  <label className="flex flex-col items-center justify-center cursor-pointer p-2 rounded-full hover:bg-white/20 transition-colors text-white" title="Upload Photo">
+                    <Camera className="w-5 h-5" />
+                    <input type="file" accept="image/*" onChange={handlePhotoUpload} className="hidden" />
+                  </label>
+                  {photoURL && (
+                    <button type="button" onClick={handlePhotoDelete} className="p-2 rounded-full hover:bg-red-500/80 text-white transition-colors" title="Delete Photo">
+                      <Trash2 className="w-5 h-5" />
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+            <div className="flex-1 text-center sm:text-left">
+              <h3 className="font-extrabold text-2xl text-foreground mb-1">{name || 'Firebase OS User'}</h3>
+              <div className="text-[12px] font-mono uppercase tracking-widest text-accent bg-accent/10 px-2.5 py-1 rounded-md border border-accent/20 inline-block">
+                {user?.emailVerified ? 'Verified Account' : 'Unverified'}
+              </div>
+              <p className="text-[13px] text-foreground/40 mt-2 font-medium">{user?.email}</p>
+            </div>
+          </div>
+
+          {/* Profile fields */}
+          <div className="space-y-6">
+            <h3 className="text-[16px] font-extrabold text-foreground flex items-center gap-2">
+              Account Details
+            </h3>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-6">
+              <Input name="name" value={name} onChange={(e) => setName(e.target.value)} label="Display Name" placeholder="John Doe" />
+              <div className="flex flex-col">
+                <Input name="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} label="Email Address" placeholder="name@example.com" required />
+                <p className="text-[11px] text-foreground/40 mt-1.5 px-2 font-medium">Changing email sends a verification link to the new address.</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Password */}
+          <div className="pt-6 border-t border-[var(--panel-border)]/50">
+            <h3 className="text-[15px] font-bold text-foreground mb-4 flex items-center gap-2">
+              Change Password
+            </h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-6">
+              <Input name="password" type="password" label="New Password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Minimum 6 characters" />
+              <Input name="confirmPassword" type="password" label="Confirm Password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} placeholder="Repeat password" />
+            </div>
+          </div>
+
+          <div className="pt-8 border-t border-[var(--panel-border)]/50 flex justify-start w-full">
+            <Button type="submit" isLoading={loading} className="px-12 py-3 md:py-2.5 text-[14px] md:text-[15px] font-bold tracking-wide rounded-xl hover:-translate-y-0.5">
+              Save Changes
+            </Button>
+          </div>
+        </div>
+      </form>
+      </div>
+    </main>
+  );
+}

package/src/pages/Register.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 { Register } from './Register';
+
+// 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('Register 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 */}
+              <Register />
+            </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/Register.tsx

@@ -0,0 +1,116 @@
+import { useState } from 'react';
+import { Link, 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 { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
+import { useAuth } from '../lib/AuthContext';
+
+export function Register() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<React.ReactNode | null>(null);
+  const navigate = useNavigate();
+  const { registerUser } = useAuth();
+
+  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;
+    const firstName = formData.get('firstName') as string;
+    const lastName = formData.get('lastName') as string;
+
+    if (password.length < 6) {
+      setError('Password must be at least 6 characters.');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      await registerUser(email, password, firstName, lastName);
+      navigate('/verify');
+    } catch (err: any) {
+      if (err?.code === 'auth/email-already-in-use') {
+        setError(
+          <span>
+            An account with this email already exists.{' '}
+            <Link to={`/login?email=${encodeURIComponent(email)}`} className="font-bold underline hover:text-accent transition-colors">Sign in?</Link>
+          </span>
+        );
+      } else if (err?.code === 'auth/weak-password') {
+        setError('Password must be at least 6 characters.');
+      } else {
+        setError(err?.message || 'An error occurred during registration.');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGoogle = async () => {
+    setLoading(true);
+    try {
+      const provider = new GoogleAuthProvider();
+      await signInWithPopup(auth, provider);
+      // Auth listener will detect login → redirect to dashboard
+    } 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-[500px] 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">Create an account</h3>
+          <p className="text-[14px] md:text-[15px] font-medium text-foreground/60 tracking-wide">
+            Join Firebase OS and start building today.
+          </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}>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Input name="firstName" label="First Name" type="text" placeholder="John" required />
+            <Input name="lastName" label="Last Name" type="text" placeholder="Doe" required />
+          </div>
+          <Input name="email" label="Email" type="email" placeholder="name@example.com" required />
+          <Input name="password" label="Password" type="password" placeholder="••••••••" required />
+
+          <div className="pt-2">
+            <Button type="submit" className="w-full py-3 text-[15px] font-bold tracking-wide rounded-xl transition-all hover:-translate-y-0.5" isLoading={loading}>
+              Create Account <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-[15px] 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 up with Google
+          </Button>
+          <p className="text-[14px] text-foreground/70 font-medium pt-2 tracking-wide">
+            Already have an account? <Link to="/login" className="text-accent hover:underline font-bold ml-1">Sign in</Link>
+          </p>
+        </div>
+      </motion.div>
+    </div>
+  );
+}