@snapdragonsnursery/react-components 1.0.0

package/README.md

@@ -0,0 +1,63 @@
+# react-components
+
+Reusable React components for Snapdragons projects.
+
+## Components
+
+- **AuthButtons**: Profile button with authentication, user image, dropdown menu (sign out, dark mode), and login/logout handling for MSAL (Azure AD).
+- **ThemeToggle**: Simple theme (light/dark/system) toggle button.
+
+## Installation
+
+Install via npm (local path or published package):
+
+```
+npm install /path/to/react-components
+```
+
+Or, if published:
+
+```
+npm install snaps-react-components
+```
+
+## Peer Dependencies
+
+Your project must have the following installed:
+- `react` (>=18)
+- `react-dom` (>=18)
+- `@azure/msal-react` (>=1.0.0)
+
+## Usage
+
+```jsx
+import { AuthButtons, ThemeToggle } from 'react-components';
+
+// Example usage in your header:
+<AuthButtons
+  theme={theme}
+  setTheme={setTheme}
+  authState={authState}
+  setAuthState={setAuthState}
+/>
+
+// Standalone theme toggle:
+<ThemeToggle theme={theme} setTheme={setTheme} />
+```
+
+- `theme` and `setTheme` should be managed by your app (e.g., via context or state).
+- `authState` and `setAuthState` should be managed by your app, typically using MSAL hooks.
+
+## Telemetry
+
+This package includes stub telemetry functions by default. You can replace or extend these in your app as needed by providing your own implementations in place of `src/telemetry.js`.
+
+## Development
+
+- Components are in `src/`.
+- Exported via `src/index.js`.
+- Update or add new components as needed.
+
+---
+
+For questions or contributions, contact the Snapdragons development team.

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@snapdragonsnursery/react-components",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Snapdragons-Nursery/react-components.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "bugs": {
+    "url": "https://github.com/Snapdragons-Nursery/react-components/issues"
+  },
+  "homepage": "https://github.com/Snapdragons-Nursery/react-components#readme",
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "@azure/msal-react": ">=1.0.0"
+  },
+  "module": "src/index.js",
+  "files": [
+    "src"
+  ]
+}

package/src/AuthButtons.jsx

@@ -0,0 +1,320 @@
+import { useEffect, useState, useRef } from "react";
+import { useMsal, useIsAuthenticated } from "@azure/msal-react";
+import {
+  trackAuthEvent,
+  trackError,
+  setUserContext,
+  clearUserContext,
+} from "./telemetry";
+import ThemeToggle from "./ThemeToggle";
+
+const isMobile = window.innerWidth < 640;
+
+function AuthButtons({ theme, setTheme, authState, setAuthState }) {
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const [profilePicture, setProfilePicture] = useState(null);
+  const [showProfileMenu, setShowProfileMenu] = useState(false);
+  const menuRef = useRef();
+  const isLocalhost = window.location.hostname === "localhost";
+
+  // Use MSAL hooks - parent app should ensure MSAL is initialized
+  const { instance, accounts } = useMsal();
+  const isAuthenticated = useIsAuthenticated();
+
+  // Close profile menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setShowProfileMenu(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  // Update auth state when MSAL state changes
+  useEffect(() => {
+    if (instance) {
+      const account = accounts[0] || instance.getActiveAccount();
+      const newAuthState = {
+        isAuthenticated,
+        accountsCount: accounts.length,
+        account,
+        instance,
+      };
+
+      setAuthState(newAuthState);
+
+      // Track authentication state changes
+      if (isAuthenticated && account) {
+        trackAuthEvent("login_success", true);
+        setUserContext(true, "authenticated");
+      } else if (!isAuthenticated) {
+        trackAuthEvent("not_authenticated", false);
+        setUserContext(false, "anonymous");
+      }
+    }
+  }, [instance, accounts, isAuthenticated, setAuthState]);
+
+  // Fetch profile picture when user is authenticated
+  useEffect(() => {
+    const fetchProfilePicture = async () => {
+      if (!authState.account || !authState.instance) return;
+
+      try {
+        // Get access token for Microsoft Graph
+        const response = await authState.instance.acquireTokenSilent({
+          scopes: ["User.Read", "User.Read.All"],
+          account: authState.account,
+        });
+
+        // Fetch user's profile picture
+        const photoResponse = await fetch(
+          "https://graph.microsoft.com/v1.0/me/photo/$value",
+          {
+            headers: {
+              Authorization: `Bearer ${response.accessToken}`,
+            },
+          }
+        );
+
+        if (photoResponse.ok) {
+          const blob = await photoResponse.blob();
+          const imageUrl = URL.createObjectURL(blob);
+          setProfilePicture(imageUrl);
+        } else {
+          // If no profile picture, clear any existing one
+          setProfilePicture(null);
+        }
+      } catch (error) {
+        console.error("Failed to fetch profile picture:", error);
+        setProfilePicture(null);
+      }
+    };
+
+    if (authState.isAuthenticated && authState.account) {
+      fetchProfilePicture();
+    } else {
+      setProfilePicture(null);
+    }
+
+    // Cleanup function to revoke object URL when component unmounts or dependencies change
+    return () => {
+      if (profilePicture) {
+        URL.revokeObjectURL(profilePicture);
+      }
+    };
+  }, [
+    authState.isAuthenticated,
+    authState.account,
+    authState.instance,
+    profilePicture,
+  ]);
+
+  // Debug logging - only log on state changes
+  const prevAuthState = useRef();
+  useEffect(() => {
+    if (
+      isLocalhost &&
+      JSON.stringify(prevAuthState.current) !== JSON.stringify(authState)
+    ) {
+      console.log("Auth state changed:", authState);
+      prevAuthState.current = authState;
+    }
+  }, [authState, isLocalhost]);
+
+  const handleLogin = async () => {
+    if (isLoggingIn || !instance) return;
+
+    console.log("Attempting login...");
+    setIsLoggingIn(true);
+
+    try {
+      // Track login attempt
+      trackAuthEvent("login_attempt", false);
+
+      // Check if we're in an iframe and break out first
+      if (window !== window.top) {
+        console.log("Breaking out of iframe before login");
+        trackAuthEvent("iframe_detected", false);
+        window.top.location.href = window.location.href;
+        return;
+      }
+
+      const loginRequest = {
+        scopes: ["User.Read", "User.Read.All"],
+        prompt: "select_account", // Force account selection
+      };
+
+      console.log("Starting redirect login with request:", loginRequest);
+
+      // Use redirect flow only - no fallback to popup
+      await instance.loginRedirect(loginRequest);
+    } catch (error) {
+      console.error("Login failed:", error);
+      console.error("Error details:", {
+        name: error.name,
+        errorCode: error.errorCode,
+        message: error.message,
+      });
+
+      // Track login failure
+      trackAuthEvent("login_failed", false);
+      trackError(error, { context: "login_attempt" });
+
+      setIsLoggingIn(false);
+    }
+  };
+
+  const handleLogout = async () => {
+    if (!instance) return;
+
+    console.log("Attempting logout...");
+    try {
+      // Track logout
+      trackAuthEvent("logout", true);
+      clearUserContext();
+
+      // Clear all accounts from MSAL cache
+      instance.clearCache();
+
+      // Clear any stored tokens from localStorage/sessionStorage
+      const msalKeys = Object.keys(localStorage).filter((key) =>
+        key.startsWith("msal.")
+      );
+      msalKeys.forEach((key) => localStorage.removeItem(key));
+
+      const msalSessionKeys = Object.keys(sessionStorage).filter((key) =>
+        key.startsWith("msal.")
+      );
+      msalSessionKeys.forEach((key) => sessionStorage.removeItem(key));
+
+      // Force a re-render by updating the auth state
+      setAuthState({
+        isAuthenticated: false,
+        accountsCount: 0,
+        account: null,
+        instance: null,
+      });
+
+      // Clear profile picture
+      setProfilePicture(null);
+
+      console.log("Local logout completed - user remains on site");
+    } catch (error) {
+      console.error("Logout failed:", error);
+      trackError(error, { context: "logout" });
+    }
+  };
+
+  const displayName =
+    authState.account?.name ?? authState.account?.idTokenClaims?.name ?? "User";
+
+  if (!authState.account) {
+    return (
+      <div className="flex items-center gap-2">
+        {isLocalhost && (
+          <span className="hidden sm:block text-xs text-red-500">
+            Not authenticated
+          </span>
+        )}
+        <button
+          onClick={handleLogin}
+          disabled={isLoggingIn}
+          className={`rounded-full p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors border border-gray-300 dark:border-gray-600 ${
+            isLoggingIn
+              ? "bg-gray-100 dark:bg-gray-700"
+              : "bg-white dark:bg-gray-800"
+          }`}
+          title={isLoggingIn ? "Signing in..." : "Employee Login"}
+        >
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+            />
+          </svg>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative">
+      {/* Profile picture as trigger */}
+      {profilePicture ? (
+        <img
+          src={profilePicture}
+          alt={`${displayName}'s profile picture`}
+          className="w-8 h-8 rounded-full object-cover border-2 border-blue-500 cursor-pointer"
+          onClick={() => setShowProfileMenu((v) => !v)}
+        />
+      ) : (
+        <div
+          className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center cursor-pointer border-2 border-blue-500"
+          onClick={() => setShowProfileMenu((v) => !v)}
+        >
+          <span className="text-white text-sm font-medium">
+            {displayName
+              .split(" ")
+              .map((n) => n[0])
+              .join("")
+              .toUpperCase()
+              .slice(0, 2)}
+          </span>
+        </div>
+      )}
+      {showProfileMenu && (
+        <div
+          ref={menuRef}
+          className="absolute right-0 mt-2 min-w-[220px] max-w-xs w-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg z-50 py-2 border border-gray-200 dark:border-gray-700"
+        >
+          <div className="px-4 py-2 text-xs text-gray-500 dark:text-gray-300 border-b border-gray-100 dark:border-gray-700">
+            Signed in as <span className="font-semibold">{displayName}</span>
+          </div>
+          {/* Theme toggle inside dropdown */}
+          <div className="px-4 py-2">
+            <ThemeToggle theme={theme} setTheme={setTheme} />
+          </div>
+          <button
+            className="flex items-center w-full px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+            onClick={() => {
+              setShowProfileMenu(false);
+              handleLogout();
+            }}
+          >
+            <span className="mr-2">
+              {/* Logout icon */}
+              <svg
+                className="w-5 h-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                />
+              </svg>
+            </span>
+            Logout
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default AuthButtons;