@snapdragonsnursery/react-components 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -25,7 +25,8 @@
     "react-dom": "^18.3.1"
   },
   "peerDependencies": {
-    "@azure/msal-react": ">=1.0.0"
+    "@azure/msal-react": ">=1.0.0",
+    "react": "^18.0.0 || ^19.0.0"
   },
   "module": "src/index.js",
   "files": [

package/src/AuthButtons.jsx

@@ -180,32 +180,10 @@ function AuthButtons({ theme, setTheme, authState, setAuthState }) {
       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,
+      // Use MSAL's built-in logout with redirect
+      await instance.logoutRedirect({
+        postLogoutRedirectUri: "/", // or your desired landing page
       });
-
-      // 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" });

package/src/LandingPage.jsx

@@ -0,0 +1,101 @@
+// LandingPage.jsx
+//
+// A reusable landing page component for Microsoft authentication
+// Designed to work across different applications with customizable branding
+//
+// Example usage:
+// import LandingPage from './LandingPage';
+// <LandingPage 
+//   logoUrl="https://your-logo-url.png"
+//   appName="Your App Name"
+//   appDescription="Your app description"
+//   onSignIn={handleSignIn}
+//   companyName="Your Company"
+// />
+//
+// Props:
+// - logoUrl: URL to the company logo (required)
+// - appName: Name of the application (required)
+// - appDescription: Description of the application (optional)
+// - onSignIn: Function to handle sign-in click (optional)
+// - companyName: Company name for footer text (optional)
+// - backgroundColor: Custom background gradient (optional)
+// - cardClassName: Additional CSS classes for the card (optional)
+
+import React from 'react';
+
+const LandingPage = ({
+  logoUrl,
+  appName,
+  appDescription = "Manage your application efficiently",
+  onSignIn,
+  companyName = "Your Company",
+  backgroundColor = "bg-gradient-to-br from-blue-50 to-indigo-100",
+  cardClassName = ""
+}) => {
+  const handleSignInClick = () => {
+    if (onSignIn) {
+      onSignIn();
+    } else {
+      console.log('Sign in with Microsoft clicked');
+    }
+  };
+
+  return (
+    <div className={`min-h-screen ${backgroundColor} flex items-center justify-center p-4`}>
+      <div className={`max-w-md w-full bg-white rounded-2xl shadow-xl p-8 ${cardClassName}`}>
+        {/* Logo Section */}
+        <div className="text-center mb-8">
+          <img 
+            src={logoUrl}
+            alt={`${companyName} Logo`}
+            className="h-16 mx-auto mb-4"
+          />
+          <h1 className="text-2xl font-bold text-gray-900 mb-2">
+            {appName}
+          </h1>
+          <p className="text-gray-600">
+            {appDescription}
+          </p>
+        </div>
+
+        {/* Sign In Section */}
+        <div className="space-y-6">
+          <div className="text-center">
+            <svg className="h-12 w-12 text-blue-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+            </svg>
+            <h2 className="text-xl font-semibold text-gray-900 mb-2">
+              Welcome Back
+            </h2>
+            <p className="text-gray-600 text-sm">
+              Sign in with your Microsoft account to access the system
+            </p>
+          </div>
+
+          {/* Microsoft Sign In Button */}
+          <button
+            onClick={handleSignInClick}
+            className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center space-x-2"
+          >
+            {/* Official Microsoft logo SVG */}
+            <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect x="2" y="2" width="9" height="9" fill="#F35325"/>
+              <rect x="13" y="2" width="9" height="9" fill="#81BC06"/>
+              <rect x="2" y="13" width="9" height="9" fill="#05A6F0"/>
+              <rect x="13" y="13" width="9" height="9" fill="#FFBA08"/>
+            </svg>
+            <span>Sign in with Microsoft</span>
+          </button>
+
+          {/* Additional Info */}
+          <div className="text-center text-xs text-gray-500">
+            <p>This application is for {companyName} employees only</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LandingPage; 

package/src/index.js

@@ -2,4 +2,5 @@ export { default as AuthButtons } from "./AuthButtons";
 export { default as ThemeToggle } from "./ThemeToggle";
 export { default as ChildSearchModal } from "./ChildSearchModal";
 export { default as ThemeToggleTest } from "./ThemeToggleTest";
+export { default as LandingPage } from "./LandingPage";
 export { configureTelemetry } from "./telemetry";