Lots of frontend changes

frontend/src/hooks/useAuth.ts

@@ -0,0 +1,108 @@
+import { useState, useEffect, useCallback } from 'react';
+import pb from '../lib/pocketbase';
+
+export interface AuthUser {
+  id: string;
+  email: string;
+  name: string;
+  avatar: string;
+  verified: boolean;
+}
+
+// PocketBase RecordModel stores user fields as dynamic properties
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function recordToUser(record: any): AuthUser {
+  return {
+    id: record.id || '',
+    email: record.email || '',
+    name: record.name || '',
+    avatar: record.avatar || '',
+    verified: record.verified || false,
+  };
+}
+
+export function useAuth() {
+  const [user, setUser] = useState<AuthUser | null>(() => {
+    if (pb.authStore.isValid && pb.authStore.record) {
+      return recordToUser(pb.authStore.record);
+    }
+    return null;
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Sync with authStore changes (cross-tab, external updates)
+  useEffect(() => {
+    const unsubscribe = pb.authStore.onChange(() => {
+      if (pb.authStore.isValid && pb.authStore.record) {
+        setUser(recordToUser(pb.authStore.record));
+      } else {
+        setUser(null);
+      }
+    });
+    return unsubscribe;
+  }, []);
+
+  const login = useCallback(async (email: string, password: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await pb.collection('users').authWithPassword(email, password);
+      setUser(recordToUser(result.record));
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Login failed';
+      setError(msg);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const register = useCallback(async (email: string, password: string, name?: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      await pb.collection('users').create({
+        email,
+        password,
+        passwordConfirm: password,
+        name: name || '',
+      });
+      // Auto-login after registration
+      const result = await pb.collection('users').authWithPassword(email, password);
+      setUser(recordToUser(result.record));
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Registration failed';
+      setError(msg);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const loginWithOAuth = useCallback(async (provider: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await pb.collection('users').authWithOAuth2({ provider });
+      setUser(recordToUser(result.record));
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'OAuth login failed';
+      setError(msg);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const logout = useCallback(() => {
+    pb.authStore.clear();
+    setUser(null);
+  }, []);
+
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  return { user, loading, error, login, register, loginWithOAuth, logout, clearError };
+}