Initial Commit

frontend/src/contexts/AuthContext.jsx

@@ -0,0 +1,58 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+import { api } from '../utils/api.js';
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [mustChangePassword, setMustChangePassword] = useState(false);
+
+  useEffect(() => {
+    const token = localStorage.getItem('tc_token') || sessionStorage.getItem('tc_token');
+    if (token) {
+      api.me()
+        .then(({ user }) => {
+          setUser(user);
+          setMustChangePassword(!!user.must_change_password);
+        })
+        .catch(() => {
+          localStorage.removeItem('tc_token');
+          sessionStorage.removeItem('tc_token');
+        })
+        .finally(() => setLoading(false));
+    } else {
+      setLoading(false);
+    }
+  }, []);
+
+  const login = async (email, password, rememberMe) => {
+    const data = await api.login({ email, password, rememberMe });
+    if (rememberMe) {
+      localStorage.setItem('tc_token', data.token);
+    } else {
+      sessionStorage.setItem('tc_token', data.token);
+    }
+    setUser(data.user);
+    setMustChangePassword(!!data.mustChangePassword);
+    return data;
+  };
+
+  const logout = async () => {
+    try { await api.logout(); } catch {}
+    localStorage.removeItem('tc_token');
+    sessionStorage.removeItem('tc_token');
+    setUser(null);
+    setMustChangePassword(false);
+  };
+
+  const updateUser = (updates) => setUser(prev => ({ ...prev, ...updates }));
+
+  return (
+    <AuthContext.Provider value={{ user, loading, mustChangePassword, setMustChangePassword, login, logout, updateUser }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => useContext(AuthContext);

frontend/src/contexts/SocketContext.jsx

@@ -0,0 +1,46 @@
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { io } from 'socket.io-client';
+import { useAuth } from './AuthContext.jsx';
+
+const SocketContext = createContext(null);
+
+export function SocketProvider({ children }) {
+  const { user } = useAuth();
+  const socketRef = useRef(null);
+  const [connected, setConnected] = useState(false);
+  const [onlineUsers, setOnlineUsers] = useState(new Set());
+
+  useEffect(() => {
+    if (!user) {
+      if (socketRef.current) {
+        socketRef.current.disconnect();
+        socketRef.current = null;
+        setConnected(false);
+      }
+      return;
+    }
+
+    const token = localStorage.getItem('tc_token') || sessionStorage.getItem('tc_token');
+    const socket = io('/', { auth: { token }, transports: ['websocket'] });
+    socketRef.current = socket;
+
+    socket.on('connect', () => {
+      setConnected(true);
+      socket.emit('users:online');
+    });
+    socket.on('disconnect', () => setConnected(false));
+    socket.on('users:online', ({ userIds }) => setOnlineUsers(new Set(userIds)));
+    socket.on('user:online', ({ userId }) => setOnlineUsers(prev => new Set([...prev, userId])));
+    socket.on('user:offline', ({ userId }) => setOnlineUsers(prev => { const s = new Set(prev); s.delete(userId); return s; }));
+
+    return () => { socket.disconnect(); socketRef.current = null; };
+  }, [user?.id]);
+
+  return (
+    <SocketContext.Provider value={{ socket: socketRef.current, connected, onlineUsers }}>
+      {children}
+    </SocketContext.Provider>
+  );
+}
+
+export const useSocket = () => useContext(SocketContext);

frontend/src/contexts/ToastContext.jsx

@@ -0,0 +1,28 @@
+import { useState, useEffect, createContext, useContext, useCallback } from 'react';
+
+const ToastContext = createContext(null);
+
+let toastIdCounter = 0;
+
+export function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+
+  const toast = useCallback((msg, type = 'default', duration = 3000) => {
+    const id = ++toastIdCounter;
+    setToasts(prev => [...prev, { id, msg, type }]);
+    setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), duration);
+  }, []);
+
+  return (
+    <ToastContext.Provider value={toast}>
+      {children}
+      <div className="toast-container">
+        {toasts.map(t => (
+          <div key={t.id} className={`toast ${t.type}`}>{t.msg}</div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export const useToast = () => useContext(ToastContext);