@axa-fr/react-oidc 5.7.0-alpha0

package/src/oidc/vanilla/timer.ts

@@ -0,0 +1,157 @@
+const timer = (function () {
+    const workerPort = (function () {
+        let worker;
+        let blobURL;
+
+        const workerCode = function () {
+            const innerIdsByOuterIds = {};
+
+            const methods = {
+                setTimeout: function (port, id, timeout) {
+                    innerIdsByOuterIds[id] = setTimeout(function () {
+                        port.postMessage(id);
+                        innerIdsByOuterIds[id] = null;
+                    }, timeout);
+                },
+
+                setInterval: function (port, id, timeout) {
+                    innerIdsByOuterIds[id] = setInterval(function () {
+                        port.postMessage(id);
+                    }, timeout);
+                },
+
+                clearTimeout: function (port, id) {
+                    clearTimeout(innerIdsByOuterIds[id]);
+                    innerIdsByOuterIds[id] = null;
+                },
+
+                clearInterval: function (port, id) {
+                    clearInterval(innerIdsByOuterIds[id]);
+                    innerIdsByOuterIds[id] = null;
+                }
+            };
+
+            function onMessage(port, event) {
+                var method = event.data[0];
+                var id = event.data[1];
+                var option = event.data[2];
+
+                if (methods[method]) {
+                    methods[method](port, id, option);
+                }
+            }
+
+            // For Dedicated Worker
+            this.onmessage = function (event) {
+                onMessage(self, event);
+            };
+
+            // For Shared Worker
+            this.onconnect = function (event) {
+                const port = event.ports[0];
+
+                port.onmessage = function (event) {
+                    onMessage(port, event);
+                };
+            };
+        }.toString();
+
+        try {
+            const blob = new Blob(['(', workerCode, ')()'], {type: 'application/javascript'});
+            blobURL = URL.createObjectURL(blob);
+        } catch (error) {
+            return null;
+        }
+        
+        try {
+            if (SharedWorker) {
+                worker = new SharedWorker(blobURL);
+               return worker.port;
+            } 
+        } catch (error)
+        {
+            console.log("SharedWorker not available");
+        }
+        try {
+            if (Worker) {
+                worker = new Worker(blobURL);
+                return worker;
+            }
+        } catch (error)
+        {
+            console.log("Worker not available");
+        }
+
+        return null;
+    }());
+
+    if (!workerPort) {
+        return {
+            setTimeout: setTimeout.bind(window),
+            clearTimeout: clearTimeout.bind(window),
+            setInterval: setInterval.bind(window),
+            clearInterval: clearInterval.bind(window)
+        };
+    }
+
+    const getId = (function () {
+        let currentId = 0;
+
+        return function () {
+            currentId++;
+            return currentId;
+        };
+    }());
+
+    const timeoutCallbacksById = {};
+    const intervalCallbacksById = {};
+
+    workerPort.onmessage = function (event) {
+        const id = event.data;
+
+        const timeoutCallback = timeoutCallbacksById[id];
+        if (timeoutCallback) {
+            timeoutCallback();
+            timeoutCallbacksById[id] = null;
+            return;
+        }
+
+        const intervalCallback = intervalCallbacksById[id];
+        if (intervalCallback) {
+            intervalCallback();
+        }
+    };
+
+    function setTimeoutWorker(callback, timeout) {
+        const id = getId();
+        workerPort.postMessage(['setTimeout', id, timeout]);
+        timeoutCallbacksById[id] = callback;
+        return id;
+    }
+
+    function clearTimeoutWorker(id) {
+        workerPort.postMessage(['clearTimeout', id]);
+        timeoutCallbacksById[id] = null;
+    }
+
+    function setIntervalWorker(callback, timeout) {
+        const id = getId();
+        workerPort.postMessage(['setInterval', id, timeout]);
+        intervalCallbacksById[id] = callback;
+        return id;
+    }
+
+    function clearIntervalWorker(id) {
+        workerPort.postMessage(['clearInterval', id]);
+        intervalCallbacksById[id] = null;
+    }
+
+    return {
+        setTimeout: setTimeoutWorker,
+        clearTimeout: clearTimeoutWorker,
+        setInterval: setIntervalWorker,
+        clearInterval: clearIntervalWorker
+    };
+}());
+
+export default timer;

package/src/override/AuthenticateError.component.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {ComponentType, PropsWithChildren} from "react";
+import {style} from "./style";
+
+const AuthenticatingError:  ComponentType<any> = ({configurationName}) => (
+     <div className="oidc-authenticating" style={style}>
+        <div className="oidc-authenticating__container">
+          <h1 className="oidc-authenticating__title">Error authentication for {configurationName}</h1>
+          <p className="oidc-authenticating__content">An error occurred during authentication.</p>
+        </div>
+     </div>
+);
+
+export default AuthenticatingError;

package/src/override/Authenticating.component.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {PropsWithChildren} from "react";
+import {style} from "./style";
+
+const Authenticating :  PropsWithChildren<any> = ({configurationName}) => (
+      <div className="oidc-authenticating" style={style}>
+    <div className="oidc-authenticating__container">
+      <h1 className="oidc-authenticating__title">Authentication in progress for {configurationName}</h1>
+      <p className="oidc-authenticating__content">You will be redirected to the login page.</p>
+    </div>
+  </div>
+);
+
+export default Authenticating;

package/src/override/Callback.component.tsx

@@ -0,0 +1,13 @@
+import React, {ComponentType, PropsWithChildren} from 'react';
+import {style} from "./style";
+
+export const CallBackSuccess: ComponentType<any> = ({configurationName}) =>  (<><div className="oidc-callback"  style={style}>
+  <div className="oidc-callback__container">
+    <h1 className="oidc-callback__title">Authentication complete for {configurationName}</h1>
+    <p className="oidc-callback__content">You will be redirected to your application.</p>
+  </div>
+</div>
+<div>
+</div>
+</>
+);

package/src/override/Loading.component.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import {ComponentType, PropsWithChildren} from "react";
+import {style} from "./style";
+
+const Loading :  ComponentType<any> = ({children, configurationName}) => (
+  <>
+      <span className="oidc-loading" style={style}>
+    Loading for {configurationName}
+  </span>
+      </>
+);
+
+export default Loading;

package/src/override/ServiceWorkerNotSupported.component.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import {ComponentType, PropsWithChildren} from "react";
+import {style} from "./style";
+
+const ServiceWorkerNotSupported :  ComponentType<any> = ({configurationName}) => (
+  <><div className="oidc-serviceworker" style={style}>
+    <div className="oidc-serviceworker__container">
+      <h1 className="oidc-serviceworker__title">Unable to authenticate on this browser for {configurationName}</h1>
+      <p className="oidc-serviceworker__content">Your browser is not secure enough to make authentication work. Try updating your browser or use a newer browser.</p>
+    </div>
+  </div>
+      </>
+);
+
+export default ServiceWorkerNotSupported;

package/src/override/SessionLost.component.tsx

@@ -0,0 +1,21 @@
+import React, {ComponentType, PropsWithChildren} from 'react';
+import {style} from "./style"
+import {useOidc} from "../oidc";
+
+export const SessionLost: ComponentType<any> = ({configurationName}) => {
+    const { login} = useOidc(configurationName);
+
+    return (<>
+      <div className="oidc-session-lost" style={style}>
+        <div className="oidc-session-lost__container">
+          <h1 className="oidc-session-lost__title">Session timed out for {configurationName}</h1>
+          <p className="oidc-session-lost__content">
+              Your session has expired. Please re-authenticate.
+          </p>
+            <button type="button" className="btn btn-primary" onClick={() => login(null)}>Login</button>
+        </div>
+      </div>
+    </>)
+};
+
+export default SessionLost;

package/src/override/style.ts

@@ -0,0 +1,10 @@
+export const style = {
+    "color": "rgb(53,110,255)",
+    "backgroundColor": "rgb(255 255 255 / 88%)",
+    "position": "absolute",
+    "zIndex": 1000,
+    "top": "0px",
+    "bottom": "0px",
+    "right": "0px",
+    "left": "0px",
+};

package/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';

package/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es2015", "dom"],
+    "outDir": "dist",
+    "jsx": "react",
+    "module": "commonjs",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "strict": false,
+    "noImplicitAny": false,
+    "strictNullChecks": false,
+    "strictFunctionTypes": false,
+    "strictPropertyInitialization": false,
+    "noImplicitThis": false,
+    "alwaysStrict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": false,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src/oidc"],
+  "exclude": [
+    "node_modules",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.stories.tsx",
+    "./src/setupTests.ts"
+  ],
+  "files": ["./src/oidc/index.ts"]
+}