@torq-north/react-tools 1.0.0 → 1.1.1

package/README.md

@@ -1,6 +1,6 @@
-# Torq Tools
+# Torq North Tools
 
-A collection of react components, hooks and other utilities used in various Crew 2 projects
+A collection of react components, hooks and other utilities used in various projects
 
 ## Getting it running
 
@@ -8,6 +8,32 @@ Upon pulling down the repo, in order to get the component browser running, all y
 
 ![image](https://user-images.githubusercontent.com/68865874/229501155-90c89bfb-e29b-4664-9eab-bd6313b53c14.png)
 
+## Session expiry redirects
+
+The API helpers (`sendGet`, `sendPost`, etc.) can automatically detect when a user's session has expired and redirect them to the login page. This is triggered when any API call receives a 401 response, or when the server issues a redirect to `/auth/login`, which is the typical behaviour of a Symfony OAuth firewall that redirects rather than returning 401 directly.
+
+This behaviour is opt-in. Call `enableAuthRedirect` once at app startup with the login URL to activate it:
+
+```typescript
+import { enableAuthRedirect } from "@torq-north/react-tools";
+
+enableAuthRedirect("/auth/login");
+```
+
+If `enableAuthRedirect` is never called, session expiry responses are left for the call site to handle as normal errors.
+
+### Dev environments
+
+In local development the frontend and backend often run on different ports. If the backend is on a different port than the Vite dev server, navigating to `/auth/login` will hit Vite instead of the backend and the login page won't render correctly. Pass the full backend URL for dev:
+
+```typescript
+enableAuthRedirect(
+  import.meta.env.DEV ? "http://localhost:8103/auth/login" : "/auth/login"
+);
+```
+
+Replace `8103` with whichever port your backend is exposed on locally. In production the relative URL is used and no special configuration is needed.
+
 ## Adding your own component
 
 1. Copy/paste in component from IRC project

package/dist/index.cjs

@@ -146,8 +146,12 @@ var sendGet = function (url, params) { return __awaiter(void 0, void 0, void 0,
         switch (_a.label) {
             case 0:
                 params &&
-                    Object.keys(params).forEach(function (key) { return params[key] === undefined && delete params[key]; });
-                fetchUrl = params ? "".concat(url, "?").concat(new URLSearchParams(params).toString()) : url;
+                    Object.keys(params).forEach(function (key) {
+                        return params[key] === undefined && delete params[key];
+                    });
+                fetchUrl = params
+                    ? "".concat(url, "?").concat(new URLSearchParams(params).toString())
+                    : url;
                 return [4 /*yield*/, fetch(fetchUrl)];
             case 1:
                 response = _a.sent();
@@ -248,11 +252,29 @@ function isJson(response) {
     }
     return contentType.indexOf("application/json") >= 0;
 }
+var authLoginUrl = "/auth/login";
+var authRedirectEnabled = false;
+function enableAuthRedirect(loginUrl) {
+    if (loginUrl === void 0) { loginUrl = "/auth/login"; }
+    authLoginUrl = loginUrl;
+    authRedirectEnabled = true;
+}
+function isSessionExpired(response) {
+    return (response.status === 401 ||
+        (response.redirected && response.url.includes("/auth/login")));
+}
 function process$1(response) {
     return __awaiter(this, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, checkResponse(response)];
+                case 0:
+                    if (authRedirectEnabled && isSessionExpired(response)) {
+                        window.location.href = authLoginUrl;
+                        // Return a never-resolving promise to suspend execution while the browser navigates away,
+                        // preventing any error handling or UI updates from firing before the page unloads.
+                        return [2 /*return*/, new Promise(function () { })];
+                    }
+                    return [4 /*yield*/, checkResponse(response)];
                 case 1:
                     _a.sent();
                     if (isJson(response)) {
@@ -770,7 +792,11 @@ var ErrorNotification = function (_a) {
     return (jsxRuntime.jsx(material.Snackbar, { open: open, autoHideDuration: 6000, onClose: onClose, children: jsxRuntime.jsx(material.Alert, { onClose: onClose, severity: "error", sx: { width: "100%" }, elevation: 6, variant: "filled", children: message !== null && message !== void 0 ? message : "An error has occured" }) }));
 };
 
-var DropIndicator = material.styled(material.Box)(function (_a) {
+var DropIndicator = material.styled(material.Box, {
+    shouldForwardProp: function (propName) {
+        return propName != "dragOver" && propName != "multiple" && propName != "disabled";
+    },
+})(function (_a) {
     var theme = _a.theme, dragOver = _a.dragOver, multiple = _a.multiple, disabled = _a.disabled;
     return ({
         padding: dragOver ? "1px" : "4px",
@@ -779,7 +805,7 @@ var DropIndicator = material.styled(material.Box)(function (_a) {
         borderRadius: 1,
         cursor: multiple ? undefined : "pointer",
         transition: "0.2s opacity",
-        "&:hover": disabled
+        "&:hover": disabled || multiple
             ? undefined
             : {
                 opacity: 0.8,
@@ -4780,7 +4806,7 @@ function useFileEditorField(name, options) {
     var _c = React.useState(""), errorMessage = _c[0], setErrorMessage = _c[1];
     var _d = React.useState(false), dragOverDropzone = _d[0], setDragOverDropzone = _d[1];
     var multiple = options.multiple, disabled = options.disabled, otherOptions = __rest(options, ["multiple", "disabled"]);
-    var _e = useDropzone(__assign({ multiple: multiple, noClick: multiple, noKeyboard: multiple, disabled: disabled, onDragEnter: function () { return setDragOverDropzone(true); }, onDragOver: function (e) {
+    var _e = useDropzone(__assign({ multiple: multiple, noClick: multiple || values.length == 0, noKeyboard: multiple, disabled: disabled, onDragEnter: function () { return setDragOverDropzone(true); }, onDragOver: function (e) {
             e.preventDefault();
             e.stopPropagation();
         }, onDragLeave: function () { return setDragOverDropzone(false); }, onDrop: function () { return setDragOverDropzone(false); }, onDropAccepted: function (acceptedFiles) {
@@ -4883,9 +4909,9 @@ function IndividualFile(_a) {
 function FileDisplay(_a) {
     var files = _a.files, individualFileProps = __rest(_a, ["files"]);
     if (!Array.isArray(files)) {
-        return (jsxRuntime.jsx(material.Box, { p: 1, children: jsxRuntime.jsx(IndividualFile, __assign({ file: files }, individualFileProps)) }));
+        return (jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsx(IndividualFile, __assign({ file: files }, individualFileProps)) }));
     }
-    return (jsxRuntime.jsx(material.Stack, { p: 1, children: files.map(function (f) { return (jsxRuntime.jsx(IndividualFile, __assign({ file: f }, individualFileProps), isAsset(f) ? f.id : f.name)); }) }));
+    return (jsxRuntime.jsx(material.Stack, { children: files.map(function (f) { return (jsxRuntime.jsx(IndividualFile, __assign({ file: f }, individualFileProps), isAsset(f) ? f.id : f.name)); }) }));
 }
 
 function FileEditorField(_a) {
@@ -4897,7 +4923,7 @@ function FileEditorField(_a) {
         required: required,
         fieldProps: slotProps === null || slotProps === void 0 ? void 0 : slotProps.field,
     }), getInputProps = _b.getInputProps, getRootProps = _b.getRootProps, dragOverDropzone = _b.dragOverDropzone, values = _b.values, removeFile = _b.removeFile, open = _b.open, showError = _b.showError, setShowError = _b.setShowError, errorMessage = _b.errorMessage, meta = _b.meta;
-    return (jsxRuntime.jsxs(FieldWrapper, { icon: icon, showSpace: showSpace, children: [jsxRuntime.jsxs(material.FormControl, { fullWidth: true, sx: { position: "relative" }, children: [label && (jsxRuntime.jsx(material.FormLabel, { disabled: disabled, error: meta.touched && meta.error, children: label })), jsxRuntime.jsx("input", __assign({}, getInputProps())), jsxRuntime.jsxs(DropIndicator, __assign({ multiple: multiple, dragOver: dragOverDropzone, disabled: disabled }, getRootProps(), { children: [jsxRuntime.jsx(material.Box, { sx: { opacity: disabled ? 0.4 : 1 }, children: jsxRuntime.jsx(FileDisplay, { files: values !== null && values !== void 0 ? values : [], disableLink: true, allowDelete: !disabled, onDelete: removeFile }) }), (multiple || (values === null || values === void 0 ? void 0 : values.length) == 0) && (jsxRuntime.jsx(material.Button, { onClick: open, startIcon: jsxRuntime.jsx(AddIcon, {}), fullWidth: true, disabled: disabled, children: placeholder !== null && placeholder !== void 0 ? placeholder : "Add File".concat(multiple ? "s" : "") }))] })), dragOverDropzone && (jsxRuntime.jsx(material.Stack, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, justifyContent: "center", alignItems: "center", sx: { pointerEvents: "none" }, children: jsxRuntime.jsx(NoteAddIcon, { sx: { fontSize: 50 } }) })), jsxRuntime.jsx(material.FormHelperText, { error: meta.touched && meta.error, children: (meta.touched && meta.error) || helperText })] }), jsxRuntime.jsx(ErrorNotification, { open: showError, onClose: function () { return setShowError(false); }, message: errorMessage })] }));
+    return (jsxRuntime.jsxs(FieldWrapper, { icon: icon, showSpace: showSpace, children: [jsxRuntime.jsxs(material.FormControl, { fullWidth: true, sx: { position: "relative" }, children: [label && (jsxRuntime.jsx(material.FormLabel, { disabled: disabled, error: meta.touched && meta.error, children: label })), jsxRuntime.jsx("input", __assign({}, getInputProps())), jsxRuntime.jsx(DropIndicator, __assign({ multiple: multiple, dragOver: dragOverDropzone, disabled: disabled }, getRootProps(), { children: jsxRuntime.jsxs(material.Stack, { gap: 1, children: [values.length > 0 && (jsxRuntime.jsx(material.Box, { sx: { opacity: disabled ? 0.4 : 1 }, children: jsxRuntime.jsx(FileDisplay, { files: values !== null && values !== void 0 ? values : [], disableLink: true, allowDelete: !disabled, onDelete: removeFile }) })), (multiple || (values === null || values === void 0 ? void 0 : values.length) == 0) && (jsxRuntime.jsx(material.Button, { onClick: open, startIcon: jsxRuntime.jsx(AddIcon, {}), fullWidth: true, disabled: disabled, children: placeholder !== null && placeholder !== void 0 ? placeholder : "Add File".concat(multiple ? "s" : "") }))] }) })), dragOverDropzone && (jsxRuntime.jsx(material.Stack, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, justifyContent: "center", alignItems: "center", sx: { pointerEvents: "none" }, children: jsxRuntime.jsx(NoteAddIcon, { sx: { fontSize: 50 } }) })), jsxRuntime.jsx(material.FormHelperText, { error: meta.touched && meta.error, children: (meta.touched && meta.error) || helperText })] }), jsxRuntime.jsx(ErrorNotification, { open: showError, onClose: function () { return setShowError(false); }, message: errorMessage })] }));
 }
 
 function asInteger(value) {
@@ -5205,6 +5231,7 @@ exports.TabSet = TabSet;
 exports.TextFormField = TextFormField;
 exports.asInteger = asInteger;
 exports.asPhoneNumber = asPhoneNumber;
+exports.enableAuthRedirect = enableAuthRedirect;
 exports.isEmail = isEmail;
 exports.isPostalCode = isPostalCode;
 exports.sendDelete = sendDelete;