bananas-commerce-admin 0.1.0

package/dist/esm/containers/LoadingScreen.js

@@ -0,0 +1,79 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import { useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import Fade from "@mui/material/Fade";
+import { alpha } from "@mui/system";
+import Logo from "../components/Logo";
+import { ss } from "../util/select_styles";
+var styles = function (theme) {
+    return ({
+        root: {
+            position: "relative",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        backdrop: {
+            position: "absolute",
+            zIndex: 2000,
+            backgroundColor: alpha(theme.palette.background.default, 0.666),
+        },
+        backdropPrimary: {
+            backgroundColor: alpha(theme.palette.primary.main, 0.666),
+        },
+        backdropSecondary: {
+            backgroundColor: alpha(theme.palette.secondary.main, 0.666),
+        },
+        backdropPaper: {
+            backgroundColor: alpha(theme.palette.background.paper, 0.666),
+        },
+        spinner: {
+            color: theme.palette.primary.main,
+        },
+        spinnerContrast: {
+            color: theme.palette.primary.contrastText,
+        },
+        logo: {
+            position: "absolute",
+            margin: 0,
+            marginTop: theme.spacing(-36),
+        },
+    });
+};
+var LoadingScreenInner = function (_a) {
+    var loading = _a.loading, logo = _a.logo, classes = _a.classes, backdrop = _a.backdrop, color = _a.color;
+    return (React.createElement(Box, { sx: ss(classes.root, [classes.backdrop, backdrop], [classes.backdropPrimary, backdrop && color === "primary"], [classes.backdropSecondary, backdrop && color === "secondary"], [classes.backdropPaper, backdrop && color === "paper"]) },
+        React.createElement(Box, { sx: classes.logo }, logo && React.createElement(Logo, { src: logo })),
+        loading && (React.createElement(CircularProgress, { sx: ss(classes.spinner, [classes.spinnerContrast, !color]) }))));
+};
+var LoadingScreen = function (props) {
+    var _a = __assign({}, props), loading = _a.loading, logo = _a.logo, backdrop = _a.backdrop, color = _a.color, classes = _a.classes;
+    classes !== null && classes !== void 0 ? classes : (classes = styles(useTheme()));
+    loading !== null && loading !== void 0 ? loading : (loading = true);
+    backdrop !== null && backdrop !== void 0 ? backdrop : (backdrop = false);
+    return backdrop
+        ? (React.createElement(Fade, { in: loading, timeout: {
+                enter: 750,
+                exit: 250,
+            } },
+            React.createElement(LoadingScreenInner, { loading: loading, logo: logo, backdrop: backdrop, color: color, classes: classes })))
+        : (React.createElement(LoadingScreenInner, { loading: loading, logo: logo, backdrop: backdrop, color: color, classes: classes }));
+};
+export default LoadingScreen;

package/dist/esm/containers/PageErrorBoundary.js

@@ -0,0 +1,38 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React from "react";
+var PageErrorBoundary = /** @class */ (function (_super) {
+    __extends(PageErrorBoundary, _super);
+    function PageErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = { error: null };
+        _this.errorPage = props.errorPage;
+        return _this;
+    }
+    PageErrorBoundary.prototype.componentDidCatch = function (error) {
+        this.setState({ error: error });
+    };
+    PageErrorBoundary.prototype.render = function () {
+        var error = this.state.error;
+        if (error) {
+            var ErrorPage = this.errorPage;
+            return React.createElement(ErrorPage, { error: error });
+        }
+        return this.props.children;
+    };
+    return PageErrorBoundary;
+}(React.Component));
+export default PageErrorBoundary;

package/dist/esm/containers/PageLoader.js

@@ -0,0 +1,117 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from "react";
+import { Suspense } from "react";
+import { useParams, useSearchParams } from "react-router-dom";
+import { useApi } from "../contexts/ApiContext";
+import useAsyncError from "../hooks/useAsyncError";
+import LoadingScreen from "./LoadingScreen";
+var PageLoadFailedError = /** @class */ (function (_super) {
+    __extends(PageLoadFailedError, _super);
+    function PageLoadFailedError(response, message) {
+        var _this = _super.call(this, message) || this;
+        _this.response = response;
+        return _this;
+    }
+    return PageLoadFailedError;
+}(Error));
+export { PageLoadFailedError };
+var PageLoader = function (_a) {
+    var route = _a.route, page = _a.page;
+    var Page = React.lazy(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = {};
+                    return [4 /*yield*/, Promise.resolve(page)];
+                case 1: return [2 /*return*/, (_a.default = _b.sent(),
+                        _a)];
+            }
+        });
+    }); });
+    var api = useApi();
+    var params = useParams();
+    var searchParams = useSearchParams()[0];
+    var _b = React.useState(null), data = _b[0], setData = _b[1];
+    var throwError = useAsyncError();
+    React.useEffect(function () {
+        if (data === null) {
+            api.operations[route.id].call({
+                params: params,
+                query: Object.fromEntries(searchParams.entries()),
+            })
+                .then(function (response) { return __awaiter(void 0, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!response.ok) return [3 /*break*/, 2];
+                            _a = setData;
+                            return [4 /*yield*/, response.json()];
+                        case 1:
+                            _a.apply(void 0, [_b.sent()]);
+                            return [3 /*break*/, 3];
+                        case 2:
+                            throwError(new PageLoadFailedError(response, "Page data load failed with ".concat(response.status, " ").concat(response.statusText)));
+                            _b.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); })
+                .catch(throwError);
+        }
+    }, [api, params, searchParams, data]);
+    return (React.createElement(Suspense, { fallback: React.createElement(LoadingScreen, null) },
+        React.createElement(Page, { data: data })));
+};
+export default PageLoader;

package/dist/esm/contexts/ApiContext.js

@@ -0,0 +1,77 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { useSnackbar } from "notistack";
+import * as React from "react";
+import { ApiClient } from "../api";
+import { getCookie } from "../util/get_cookie";
+var ApiContext = React.createContext(undefined);
+export var useApi = function () { return React.useContext(ApiContext); };
+export var ApiContextProvider = function (_a) {
+    var children = _a.children, init = _a.api;
+    var _b = React.useState(), api = _b[0], setApi = _b[1];
+    var enqueueSnackbar = useSnackbar().enqueueSnackbar;
+    React.useEffect(function () {
+        if (api === undefined) {
+            (init instanceof ApiClient
+                ? Promise.resolve(init)
+                : typeof init === "string" ||
+                    init instanceof URL
+                    ? ApiClient.load(init)
+                    : ApiClient.load(init.schema, init.server)).then(function (api) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            setApi(api);
+                            if (!(getCookie("csrftoken") === undefined)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, api.operations["bananas.csrf:list"].call()];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); }).catch(function (e) {
+                enqueueSnackbar("Failed to load schema, view console for more info", {
+                    variant: "error",
+                });
+                throw e;
+            });
+        }
+    }, [api]);
+    return (React.createElement(ApiContext.Provider, { value: api }, children));
+};
+export default ApiContext;

package/dist/esm/contexts/I18nContext.js

@@ -0,0 +1,77 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import * as React from "react";
+import useLocalStorage from "../hooks/useLocalStorage";
+import { useApi } from "./ApiContext";
+export function interpolateString(string, params) {
+    return Array.isArray(params)
+        ? params.reduce(function (s, value) { return s.replace(/%[sd]|\{\}/, value); }, string)
+        : Object.entries(params).reduce(function (s, _a) {
+            var key = _a[0], value = _a[1];
+            return s.replace(new RegExp("%\\(".concat(key, "\\)[sd]|\\{").concat(key, "\\}"), "g"), value);
+        }, string);
+}
+var I18nContext = React.createContext(undefined);
+export var useI18n = function () { return React.useContext(I18nContext); };
+export var I18nContextProvider = function (_a) {
+    var children = _a.children;
+    var api = useApi();
+    var _b = useLocalStorage("i18n", undefined), i18n = _b[0], setI18n = _b[1];
+    React.useEffect(function () {
+        if (api && i18n === undefined) {
+            api.operations["bananas.i18n:list"].call().then(function (response) { return __awaiter(void 0, void 0, void 0, function () {
+                var i18n;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, response.json()];
+                        case 1:
+                            i18n = (_a.sent()).catalog;
+                            setI18n(i18n);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        }
+    }, [api, i18n]);
+    var t = function (key, params) {
+        var _a;
+        var value = (_a = i18n === null || i18n === void 0 ? void 0 : i18n[key]) !== null && _a !== void 0 ? _a : key;
+        return params ? interpolateString(value, params) : value;
+    };
+    return (React.createElement(I18nContext.Provider, { value: { i18n: i18n, t: t } }, children));
+};
+export default I18nContext;

package/dist/esm/contexts/RouterContext.js

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import { getPage, getPath, getTitle, isNavigation, parseOperationId, } from "../router/routes";
+import { useApi } from "./ApiContext";
+var RouterContext = React.createContext({
+    routes: [],
+    getRoute: function (reverse) { return void reverse; },
+    navigate: function (route, options) { return void [route, options]; },
+});
+export var useRouter = function () { return React.useContext(RouterContext); };
+export var RouterContextProvider = function (_a) {
+    var children = _a.children;
+    var routes = [];
+    var api = useApi();
+    var routerNavigate = useNavigate();
+    for (var _i = 0, _b = Object.values(api.operations); _i < _b.length; _i++) {
+        var operation = _b[_i];
+        var parsedOperationId = parseOperationId(operation.id);
+        if (!parsedOperationId) {
+            throw new TypeError("Could not parse operation id ".concat(operation.id));
+        }
+        var app = parsedOperationId.app, view = parsedOperationId.view, action = parsedOperationId.action;
+        var title = getTitle(view, operation.summary);
+        var navigation = isNavigation(operation.tags);
+        var path = getPath(operation.endpoint, operation.method, action);
+        var page = getPage(path, action);
+        routes.push({
+            id: operation.id,
+            app: app,
+            view: view,
+            action: action,
+            title: title,
+            navigation: navigation,
+            path: path,
+            page: page,
+        });
+    }
+    var getRoute = function (reverse) {
+        return routes.find(function (_a) {
+            var id = _a.id;
+            return reverse === id;
+        });
+    };
+    var navigate = function (route, options) {
+        var _a;
+        // Relative history, e.g. go back or forward x steps
+        if (typeof route === "number") {
+            routerNavigate(route);
+            return;
+        }
+        // Direct operation id routes, requires reversing the operation id
+        if (typeof route === "string") {
+            var routeInfo = getRoute(route);
+            if (routeInfo === undefined) {
+                throw new Error("Could not find route with reverse: ".concat(route));
+            }
+            route = routeInfo;
+        }
+        var path = route.path;
+        for (var _i = 0, _b = Object.entries((_a = options === null || options === void 0 ? void 0 : options.params) !== null && _a !== void 0 ? _a : {}); _i < _b.length; _i++) {
+            var _c = _b[_i], key = _c[0], value = _c[1];
+            path = path.replace(":".concat(key), encodeURIComponent(value));
+        }
+        routerNavigate({
+            pathname: path,
+            search: new URLSearchParams(options === null || options === void 0 ? void 0 : options.query).toString(),
+        }, { replace: options === null || options === void 0 ? void 0 : options.replace });
+    };
+    return (React.createElement(RouterContext.Provider, { value: { routes: routes, getRoute: getRoute, navigate: navigate } }, children));
+};
+export default RouterContext;

package/dist/esm/contexts/UserContext.js

@@ -0,0 +1,113 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import * as React from "react";
+import useLocalStorage from "../hooks/useLocalStorage";
+import { useApi } from "./ApiContext";
+var UserContext = React.createContext(undefined);
+export var useUser = function () { return React.useContext(UserContext); };
+export var UserContextProvider = function (_a) {
+    var children = _a.children;
+    var api = useApi();
+    var _b = useLocalStorage("user", null), user = _b[0], setUser = _b[1];
+    React.useEffect(function () {
+        if (api !== undefined) {
+            api.isAuthenticated().then(function (authenticated) {
+                if (!authenticated) {
+                    setUser(null);
+                }
+            });
+        }
+    }, [user, api]);
+    var login = function (username, password) { return __awaiter(void 0, void 0, void 0, function () {
+        var response, user_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, (api === null || api === void 0 ? void 0 : api.operations["bananas.login:create"].call({
+                        body: { username: username, password: password },
+                    }))];
+                case 1:
+                    response = _a.sent();
+                    if (!(response !== undefined && response.ok)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    user_1 = _a.sent();
+                    setUser(user_1);
+                    return [2 /*return*/, user_1];
+                case 3:
+                    setUser(null);
+                    return [2 /*return*/, null];
+            }
+        });
+    }); };
+    var changePassword = function (oldPassword, newPassword1, newPassword2) { return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, (api === null || api === void 0 ? void 0 : api.operations["bananas.change_password:create"].call({
+                        body: {
+                            old_password: oldPassword,
+                            new_password1: newPassword1,
+                            new_password2: newPassword2,
+                        },
+                    }))];
+                case 1:
+                    response = _a.sent();
+                    if (!response.ok) {
+                        throw new Error("Failed to change password");
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var logout = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, (api === null || api === void 0 ? void 0 : api.operations["bananas.logout:create"].call())];
+                case 1:
+                    response = _a.sent();
+                    if (response !== undefined && response.ok) {
+                        setUser(null);
+                        return [2 /*return*/];
+                    }
+                    throw new Error("Could not log out");
+            }
+        });
+    }); };
+    return (React.createElement(UserContext.Provider, { value: { user: user, login: login, logout: logout, changePassword: changePassword } }, children));
+};
+export default UserContext;

package/dist/esm/extensions/bananas/components/PasswordChangeForm.js

@@ -0,0 +1,80 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useSnackbar } from "notistack";
+import React from "react";
+import Box from "@mui/material/Box";
+import FormControl from "@mui/material/FormControl";
+import FormGroup from "@mui/material/FormGroup";
+import FormLabel from "@mui/material/FormLabel";
+import { useTheme } from "@mui/material/styles";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { useApi } from "../../../contexts/ApiContext";
+import { useI18n } from "../../../contexts/I18nContext";
+import { useUser } from "../../../contexts/UserContext";
+import LoadingButton from "@mui/lab/LoadingButton";
+var PasswordChangeForm = function () {
+    var theme = useTheme();
+    var t = useI18n().t;
+    var api = useApi();
+    var enqueueSnackbar = useSnackbar().enqueueSnackbar;
+    var _a = React.useState(false), loading = _a[0], setLoading = _a[1];
+    var operation = api.operations["bananas.change_password:create"];
+    var properties = operation.request.body.schema.properties;
+    var _b = React.useState({
+        "old_password": "",
+        "new_password1": "",
+        "new_password2": "",
+    }), fields = _b[0], setFields = _b[1];
+    var changePassword = useUser().changePassword;
+    var onSubmit = function (event) {
+        event.preventDefault();
+        setLoading(true);
+        changePassword(fields.old_password, fields.new_password1, fields.new_password2).then(function () {
+            enqueueSnackbar(t("Password changed successfully."), {
+                variant: "success",
+            });
+            setFields({
+                "old_password": "",
+                "new_password1": "",
+                "new_password2": "",
+            });
+        }).catch(function () {
+            enqueueSnackbar(t("Incorrect authentication credentials."), {
+                variant: "error",
+            });
+        }).finally(function () { return setLoading(false); });
+    };
+    var onChange = function (event) {
+        var _a;
+        setFields(__assign(__assign({}, fields), (_a = {}, _a[event.target.name] = event.target.value, _a)));
+    };
+    return (React.createElement(Box, { component: "form", onSubmit: onSubmit, sx: {
+            maxWidth: 350,
+        }, "data-testid": "change-password-form" },
+        React.createElement(FormLabel, { component: "legend", sx: {
+                marginBottom: theme.spacing(2),
+            } }, operation.summary),
+        React.createElement(Typography, null, t("Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly.")),
+        React.createElement(FormControl, { fullWidth: true, component: "fieldset" },
+            React.createElement(FormGroup, null, ["old_password", "new_password1", "new_password2"].map(function (field) { return (React.createElement(TextField, { key: field, autoComplete: field, sx: {
+                    marginTop: theme.spacing(3),
+                }, label: properties[field].title, inputProps: { "aria-label": properties[field].title }, name: field, value: fields[field], type: "password", onChange: onChange, fullWidth: true, required: true, color: "secondary" })); }))),
+        React.createElement(FormControl, { fullWidth: true, margin: "normal", sx: {
+                marginTop: theme.spacing(3),
+                marginBottom: 0,
+            } },
+            React.createElement(LoadingButton, { sx: {
+                    margin: "auto",
+                }, variant: "outlined", type: "submit", color: "secondary", fullWidth: true, "aria-label": "login", loading: loading }, t("Change my password")))));
+};
+export default PasswordChangeForm;