formreader-session-timeout 0.2.0 → 0.2.1

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
 /**
  * Session Timeout Micro Frontend Types
  * Configurable, reusable types for multi-application token refresh management
@@ -213,4 +215,10 @@ declare function useSessionTimeout(options?: UseSessionTimeoutOptions): {
     manager: SessionManager;
 };
 
-export { DEFAULT_SESSION_CONFIG, JWTPayload, RefreshTokenResponse, SessionConfig, SessionManager, SessionState, TokenInfo, UseSessionTimeoutOptions, clearToken, getSessionManager, getStoredToken, getTimeUntilExpiry, getTokenInfo, isTokenExpired, resetSessionManager, storeToken, useSessionTimeout, validateToken };
+/**
+ * SessionStatus - Displays countdown timer
+ * Drop this component in your header to show session time remaining
+ */
+declare function SessionStatus(): react_jsx_runtime.JSX.Element;
+
+export { DEFAULT_SESSION_CONFIG, JWTPayload, RefreshTokenResponse, SessionConfig, SessionManager, SessionState, SessionStatus, TokenInfo, UseSessionTimeoutOptions, clearToken, getSessionManager, getStoredToken, getTimeUntilExpiry, getTokenInfo, isTokenExpired, resetSessionManager, storeToken, useSessionTimeout, validateToken };

package/dist/index.js

@@ -21,6 +21,7 @@ var session_timeout_exports = {};
 __export(session_timeout_exports, {
   DEFAULT_SESSION_CONFIG: () => DEFAULT_SESSION_CONFIG,
   SessionManager: () => SessionManager,
+  SessionStatus: () => SessionStatus,
   clearToken: () => clearToken,
   getSessionManager: () => getSessionManager,
   getStoredToken: () => getStoredToken,
@@ -573,10 +574,53 @@ function useSessionTimeout(options = {}) {
     manager: managerRef.current
   };
 }
+
+// components/SessionStatus.tsx
+var import_react2 = require("react");
+var import_react_router_dom = require("react-router-dom");
+var import_jsx_runtime = require("react/jsx-runtime");
+function SessionStatus() {
+  const [displayTime, setDisplayTime] = (0, import_react2.useState)("--:--");
+  const [isActive, setIsActive] = (0, import_react2.useState)(true);
+  const navigate = (0, import_react_router_dom.useNavigate)();
+  (0, import_react2.useEffect)(() => {
+    const updateTime = () => {
+      try {
+        const token = getStoredToken();
+        if (!token)
+          return;
+        const info = getTokenInfo(token);
+        if (info) {
+          const seconds = Math.round(info.expiresIn / 1e3);
+          const minutes = Math.floor(seconds / 60);
+          const secs = seconds % 60;
+          setDisplayTime(`${minutes}:${secs.toString().padStart(2, "0")}`);
+          setIsActive(info.expiresIn > 0);
+        }
+      } catch (error) {
+        console.error("[SessionStatus] Error:", error);
+      }
+    };
+    updateTime();
+    const interval = setInterval(updateTime, 1e3);
+    return () => clearInterval(interval);
+  }, [navigate]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-white border-b border-gray-200 px-4 py-2 flex justify-between items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-sm font-medium text-gray-700", children: [
+      "Session expires: ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono font-bold text-blue-600", children: displayTime })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `w-2 h-2 rounded-full ${isActive ? "bg-green-500" : "bg-red-500"}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-gray-600", children: isActive ? "Active" : "Expired" })
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_SESSION_CONFIG,
   SessionManager,
+  SessionStatus,
   clearToken,
   getSessionManager,
   getStoredToken,

package/dist/index.mjs

@@ -537,9 +537,52 @@ function useSessionTimeout(options = {}) {
     manager: managerRef.current
   };
 }
+
+// components/SessionStatus.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useNavigate } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SessionStatus() {
+  const [displayTime, setDisplayTime] = useState2("--:--");
+  const [isActive, setIsActive] = useState2(true);
+  const navigate = useNavigate();
+  useEffect2(() => {
+    const updateTime = () => {
+      try {
+        const token = getStoredToken();
+        if (!token)
+          return;
+        const info = getTokenInfo(token);
+        if (info) {
+          const seconds = Math.round(info.expiresIn / 1e3);
+          const minutes = Math.floor(seconds / 60);
+          const secs = seconds % 60;
+          setDisplayTime(`${minutes}:${secs.toString().padStart(2, "0")}`);
+          setIsActive(info.expiresIn > 0);
+        }
+      } catch (error) {
+        console.error("[SessionStatus] Error:", error);
+      }
+    };
+    updateTime();
+    const interval = setInterval(updateTime, 1e3);
+    return () => clearInterval(interval);
+  }, [navigate]);
+  return /* @__PURE__ */ jsxs("div", { className: "bg-white border-b border-gray-200 px-4 py-2 flex justify-between items-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-gray-700", children: [
+      "Session expires: ",
+      /* @__PURE__ */ jsx("span", { className: "font-mono font-bold text-blue-600", children: displayTime })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full ${isActive ? "bg-green-500" : "bg-red-500"}` }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-600", children: isActive ? "Active" : "Expired" })
+    ] })
+  ] });
+}
 export {
   DEFAULT_SESSION_CONFIG,
   SessionManager,
+  SessionStatus,
   clearToken,
   getSessionManager,
   getStoredToken,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "formreader-session-timeout",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Session timeout microfrontend: configurable JWT expiry decoding and refresh with idle tracking",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -13,7 +13,8 @@
     "clean": "rm -rf dist"
   },
   "peerDependencies": {
-    "react": "^16 || ^17 || ^18"
+    "react": "^16 || ^17 || ^18",
+    "react-router-dom": "^6"
   },
   "dependencies": {
     "whatwg-fetch": "^3.6.2"
@@ -21,6 +22,8 @@
   "devDependencies": {
     "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
+    "@types/react-router-dom": "^5.3.3",
+    "react-router-dom": "^7.11.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5"
   },