tinacms 1.5.18 → 1.5.20

package/dist/admin/components/ErrorDialog.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const ErrorDialog: (props: {
+    title: string;
+    message: string;
+    error: Error;
+}) => JSX.Element;

package/dist/admin/pages/CollectionListPage.d.ts

@@ -3,6 +3,6 @@ import { NavigateFunction } from 'react-router-dom';
 import { TinaCMS } from '@tinacms/toolkit';
 import type { CollectionResponse, DocumentSys } from '../types';
 import type { Collection } from '@tinacms/schema-tools';
-export declare const handleNavigate: (navigate: NavigateFunction, cms: TinaCMS, collection: CollectionResponse, collectionDefinition: Collection<true>, document: DocumentSys) => any;
+export declare const handleNavigate: (navigate: NavigateFunction, cms: TinaCMS, collection: CollectionResponse, collectionDefinition: Collection<true>, document: DocumentSys) => Promise<any>;
 declare const CollectionListPage: () => JSX.Element;
 export default CollectionListPage;

package/dist/client.js

@@ -2,7 +2,9 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("fetch-ponyfill")) : typeof define === "function" && define.amd ? define(["exports", "fetch-ponyfill"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP));
 })(this, function(exports2, fetchPonyfill) {
   "use strict";
-  const { fetch, Headers } = fetchPonyfill();
+  const { fetch: fetchPonyfillFN, Headers: HeadersPonyfill } = fetchPonyfill();
+  const fetchDefined = typeof fetch === "undefined" ? fetchPonyfillFN : fetch;
+  const HeadersDefined = typeof Headers === "undefined" ? HeadersPonyfill : Headers;
   const TINA_HOST = "content.tinajs.io";
   class TinaClient {
     constructor({ token, url, queries }) {
@@ -11,7 +13,7 @@
       this.queries = queries(this);
     }
     async request(args) {
-      const headers = new Headers();
+      const headers = new HeadersDefined();
       if (this.readonlyToken) {
         headers.append("X-API-KEY", this.readonlyToken);
       }
@@ -21,7 +23,7 @@
         variables: (args == null ? void 0 : args.variables) || {}
       });
       const url = (args == null ? void 0 : args.url) || this.apiUrl;
-      const res = await fetch(url, {
+      const res = await fetchDefined(url, {
         method: "POST",
         headers,
         body: bodyString,

package/dist/client.mjs

@@ -1,5 +1,7 @@
 import fetchPonyfill from "fetch-ponyfill";
-const { fetch, Headers } = fetchPonyfill();
+const { fetch: fetchPonyfillFN, Headers: HeadersPonyfill } = fetchPonyfill();
+const fetchDefined = typeof fetch === "undefined" ? fetchPonyfillFN : fetch;
+const HeadersDefined = typeof Headers === "undefined" ? HeadersPonyfill : Headers;
 const TINA_HOST = "content.tinajs.io";
 class TinaClient {
   constructor({ token, url, queries }) {
@@ -8,7 +10,7 @@ class TinaClient {
     this.queries = queries(this);
   }
   async request(args) {
-    const headers = new Headers();
+    const headers = new HeadersDefined();
     if (this.readonlyToken) {
       headers.append("X-API-KEY", this.readonlyToken);
     }
@@ -18,7 +20,7 @@ class TinaClient {
       variables: (args == null ? void 0 : args.variables) || {}
     });
     const url = (args == null ? void 0 : args.url) || this.apiUrl;
-    const res = await fetch(url, {
+    const res = await fetchDefined(url, {
       method: "POST",
       headers,
       body: bodyString,

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { useDocumentCreatorPlugin } from './hooks/use-content-creator';
 export { TinaAdmin } from './admin';
 export { RouteMappingPlugin } from './admin/plugins/route-mapping';
 export { TinaAdminApi } from './admin/api';
+export { ErrorDialog } from './admin/components/ErrorDialog';
 export * from './toolkit';
 export { Form } from './toolkit/forms/form';
 export { MdxFieldPluginExtendible } from '@tinacms/toolkit';

package/dist/index.js

@@ -8485,8 +8485,12 @@ var __publicField = (obj, key, value) => {
     const [error, setError] = React.useState(void 0);
     React__namespace.useEffect(() => {
       const fetchEvents = async () => {
-        var _a, _b;
-        if (!((_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi) && cms.api.tina.isAuthorized()) {
+        var _a, _b, _c, _d;
+        let doFetchEvents = false;
+        if (!((_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi)) {
+          doFetchEvents = await ((_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.isAuthenticated());
+        }
+        if (doFetchEvents) {
           try {
             const { events: nextEvents, cursor: nextCursor2 } = await cms.api.tina.fetchEvents(15, cursor);
             setEvents([...existingEvents, ...nextEvents]);
@@ -8510,11 +8514,16 @@ var __publicField = (obj, key, value) => {
     return { events, cursor: nextCursor, loading, error };
   };
   function useSyncStatus$1(cms) {
+    var _a, _b;
     const [syncStatus, setSyncStatus] = React.useState({ state: "loading", message: "Loading..." });
     React__namespace.useEffect(() => {
       const interval = setInterval(async () => {
-        var _a, _b;
-        if (!((_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi) && cms.api.tina.isAuthorized()) {
+        var _a2, _b2, _c, _d;
+        let doFetchEvents = false;
+        if (!((_b2 = (_a2 = cms.api) == null ? void 0 : _a2.tina) == null ? void 0 : _b2.isCustomContentApi)) {
+          doFetchEvents = await ((_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.isAuthenticated());
+        }
+        if (doFetchEvents) {
           const { events } = await cms.api.tina.fetchEvents();
           if (events.length === 0) {
             setSyncStatus({ state: "success", message: "No Events" });
@@ -8533,7 +8542,7 @@ var __publicField = (obj, key, value) => {
         }
       }, 5e3);
       return () => clearInterval(interval);
-    }, [cms]);
+    }, [(_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi]);
     return syncStatus;
   }
   const SyncErrorWidget = ({ cms }) => {
@@ -8646,6 +8655,9 @@ var __publicField = (obj, key, value) => {
     function closeEventsModal() {
       setEventsOpen(false);
     }
+    const WrappedSyncStatus = React__namespace.forwardRef(
+      (props2, ref) => /* @__PURE__ */ React__namespace.createElement(SyncStatus, { ...props2 })
+    );
     return /* @__PURE__ */ React__namespace.createElement(
       "div",
       {
@@ -8697,18 +8709,30 @@ var __publicField = (obj, key, value) => {
                 sidebarWidth: null,
                 resizingSidebar: false
               });
-              if ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.logout) {
-                await cms.api.tina.logout();
-                if ((_d = (_c = cms == null ? void 0 : cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.onLogout) {
-                  await ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.onLogout());
+              try {
+                if ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.logout) {
+                  await cms.api.tina.logout();
+                  if ((_d = (_c = cms == null ? void 0 : cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.onLogout) {
+                    await ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.onLogout());
+                  }
                 }
+                setEdit(false);
+              } catch (e) {
+                cms.alerts.error(`Error logging out: ${e}`);
+                console.error("Unexpected error calling logout");
+                console.error(e);
               }
-              setEdit(false);
             }
           },
           /* @__PURE__ */ React__namespace.createElement(BiExit, { className: "w-6 h-auto mr-2 text-blue-400" }),
           " Log Out"
-        )), /* @__PURE__ */ React__namespace.createElement(react.Menu.Item, null, /* @__PURE__ */ React__namespace.createElement(SyncStatus, { cms, setEventsOpen })))
+        )), /* @__PURE__ */ React__namespace.createElement(react.Menu.Item, null, /* @__PURE__ */ React__namespace.createElement(
+          WrappedSyncStatus,
+          {
+            cms,
+            setEventsOpen
+          }
+        )))
       ))))),
       eventsOpen && /* @__PURE__ */ React__namespace.createElement(SyncStatusModal, { cms, closeEventsModal }),
       children,
@@ -26368,7 +26392,7 @@ var __publicField = (obj, key, value) => {
   }
   class Client {
     constructor({ tokenStorage = "MEMORY", ...options }) {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X;
       this.events = new EventBus();
       this.protectedBranches = [];
       this.usingEditorialWorkflow = false;
@@ -26433,6 +26457,9 @@ mutation addPendingDocumentMutation(
       if ((_B = (_A = (_z = (_y = options.schema) == null ? void 0 : _y.config) == null ? void 0 : _z.admin) == null ? void 0 : _A.auth) == null ? void 0 : _B.authenticate) {
         this.authenticate = (_F = (_E = (_D = (_C = options.schema) == null ? void 0 : _C.config) == null ? void 0 : _D.admin) == null ? void 0 : _E.auth) == null ? void 0 : _F.authenticate;
       }
+      if ((_J = (_I = (_H = (_G = options.schema) == null ? void 0 : _G.config) == null ? void 0 : _H.admin) == null ? void 0 : _I.auth) == null ? void 0 : _J.authorize) {
+        this.authorize = (_N = (_M = (_L = (_K = options.schema) == null ? void 0 : _K.config) == null ? void 0 : _L.admin) == null ? void 0 : _M.auth) == null ? void 0 : _N.authorize;
+      }
       if (options.schema) {
         const enrichedSchema = new schemaTools.TinaSchema({
           version: { fullVersion: "", major: "", minor: "", patch: "" },
@@ -26442,7 +26469,7 @@ mutation addPendingDocumentMutation(
         this.schema = enrichedSchema;
       }
       this.options = options;
-      if ((_H = (_G = options.schema) == null ? void 0 : _G.config) == null ? void 0 : _H.contentApiUrlOverride) {
+      if ((_P = (_O = options.schema) == null ? void 0 : _O.config) == null ? void 0 : _P.contentApiUrlOverride) {
         this.options.customContentApiUrl = options.schema.config.contentApiUrlOverride;
       }
       this.setBranch(options.branch);
@@ -26496,8 +26523,8 @@ mutation addPendingDocumentMutation(
           this.getToken = options.getTokenFn;
           break;
       }
-      if ((_L = (_K = (_J = (_I = options.schema) == null ? void 0 : _I.config) == null ? void 0 : _J.admin) == null ? void 0 : _K.auth) == null ? void 0 : _L.getToken) {
-        this.getToken = (_P = (_O = (_N = (_M = options.schema) == null ? void 0 : _M.config) == null ? void 0 : _N.admin) == null ? void 0 : _O.auth) == null ? void 0 : _P.getToken;
+      if ((_T = (_S = (_R = (_Q = options.schema) == null ? void 0 : _Q.config) == null ? void 0 : _R.admin) == null ? void 0 : _S.auth) == null ? void 0 : _T.getToken) {
+        this.getToken = (_X = (_W = (_V = (_U = options.schema) == null ? void 0 : _U.config) == null ? void 0 : _V.admin) == null ? void 0 : _W.auth) == null ? void 0 : _X.getToken;
       }
     }
     get isLocalMode() {
@@ -26541,12 +26568,14 @@ mutation addPendingDocumentMutation(
         if (resBody.message) {
           errorMessage = `${errorMessage}, Response: ${resBody.message}`;
         }
-        errorMessage = `${errorMessage}, Please check that the following information is correct: 
+        if (!this.isCustomContentApi) {
+          errorMessage = `${errorMessage}, Please check that the following information is correct: 
 	clientId: ${this.options.clientId}
 	branch: ${this.branch}.`;
-        if (this.branch !== "main") {
-          errorMessage = `${errorMessage}
+          if (this.branch !== "main") {
+            errorMessage = `${errorMessage}
 	Note: This error can occur if the branch does not exist on GitHub or on Tina Cloud`;
+          }
         }
         throw new Error(errorMessage);
       }
@@ -26673,8 +26702,8 @@ mutation addPendingDocumentMutation(
       }
       return Promise.resolve({ access_token, id_token, refresh_token });
     }
-    async isAuthorized() {
-      return this.isAuthenticated();
+    async isAuthorized(context) {
+      return !!await this.authorize(context);
     }
     async isAuthenticated() {
       return !!await this.getUser();
@@ -26687,6 +26716,9 @@ mutation addPendingDocumentMutation(
       this.setToken(token);
       return token;
     }
+    async authorize(context) {
+      return this.getToken();
+    }
     /**
      * Wraps the normal fetch function with same API but adds the authorization header token.
      *
@@ -27376,26 +27408,49 @@ mutation addPendingDocumentMutation(
     const client = cms.api.tina;
     const isTinaCloud = !client.isLocalMode && !((_e = (_d = (_c = (_b = (_a = client.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.config) == null ? void 0 : _c.admin) == null ? void 0 : _d.auth) == null ? void 0 : _e.customAuth);
     const [activeModal, setActiveModal] = React.useState(null);
+    const [errorMessage, setErrorMessage] = React.useState();
     const [showChildren, setShowChildren] = React.useState(false);
     React.useEffect(() => {
       client.isAuthenticated().then((isAuthenticated) => {
         if (isAuthenticated) {
-          setShowChildren(true);
-          cms.enable();
+          client.isAuthorized().then((isAuthorized) => {
+            if (isAuthorized) {
+              setShowChildren(true);
+              cms.enable();
+            } else {
+              setErrorMessage({
+                title: "Access Denied:",
+                message: "Not Authorized To Edit"
+              });
+              setActiveModal("error");
+            }
+          }).catch((e) => {
+            console.error(e);
+            setErrorMessage({ title: "Unexpected Error:", message: `${e}` });
+            setActiveModal("error");
+          });
         } else {
           sleep(500).then(() => {
             setActiveModal("authenticate");
           });
         }
+      }).catch((e) => {
+        console.error(e);
+        setErrorMessage({ title: "Unexpected Error:", message: `${e}` });
+        setActiveModal("error");
       });
     }, []);
-    const onAuthSuccess = async () => {
-      if (await client.isAuthenticated()) {
+    const onAuthenticated = async () => {
+      if (await client.isAuthorized()) {
         setShowChildren(true);
         setActiveModal(null);
         cms.events.dispatch({ type: "cms:login" });
       } else {
-        throw new Error("No access to repo");
+        setErrorMessage({
+          title: "Access Denied:",
+          message: "Not Authorized To Edit"
+        });
+        setActiveModal("error");
       }
     };
     const otherModalActions = getModalActions ? getModalActions({
@@ -27407,7 +27462,7 @@ mutation addPendingDocumentMutation(
       ModalBuilder,
       {
         title: isTinaCloud ? "Tina Cloud Authorization" : "Enter into edit mode",
-        message: isTinaCloud ? "To save edits, Tina Cloud authorization is required. On save, changes will get commited using your account." : "To save edits, enter into edit mode. On save, changes will saved to the local filesystem.",
+        message: isTinaCloud ? "To save edits, Tina Cloud authorization is required. On save, changes will get committed using your account." : "To save edits, enter into edit mode. On save, changes will saved to the local filesystem.",
         close,
         actions: [
           ...otherModalActions,
@@ -27422,11 +27477,55 @@ mutation addPendingDocumentMutation(
           {
             name: isTinaCloud ? "Continue to Tina Cloud" : "Enter Edit Mode",
             action: async () => {
-              const token = await client.authenticate();
-              if (typeof (client == null ? void 0 : client.onLogin) === "function") {
-                await (client == null ? void 0 : client.onLogin({ token }));
+              try {
+                const token = await client.authenticate();
+                if (typeof (client == null ? void 0 : client.onLogin) === "function") {
+                  await (client == null ? void 0 : client.onLogin({ token }));
+                }
+                return onAuthenticated();
+              } catch (e) {
+                console.error(e);
+                setActiveModal("error");
+                setErrorMessage({
+                  title: "Unexpected Error:",
+                  message: `${e}`
+                });
+              }
+            },
+            primary: true
+          }
+        ]
+      }
+    ), activeModal === "error" && errorMessage && /* @__PURE__ */ React.createElement(
+      ModalBuilder,
+      {
+        title: isTinaCloud ? "Tina Cloud Authorization" : "Enter into edit mode",
+        message: errorMessage.title,
+        error: errorMessage.message,
+        close,
+        actions: [
+          ...otherModalActions,
+          {
+            name: "Retry",
+            action: async () => {
+              try {
+                setActiveModal(null);
+                setErrorMessage(void 0);
+                await client.logout();
+                await client.onLogout();
+                const token = await client.authenticate();
+                if (typeof (client == null ? void 0 : client.onLogin) === "function") {
+                  await (client == null ? void 0 : client.onLogin({ token }));
+                }
+                return onAuthenticated();
+              } catch (e) {
+                console.error(e);
+                setActiveModal("error");
+                setErrorMessage({
+                  title: "Unexpected Error:",
+                  message: `${e}`
+                });
               }
-              onAuthSuccess();
             },
             primary: true
           }
@@ -28776,15 +28875,15 @@ This will work when developing locally but NOT when deployed to production.
       )))))
     )));
   };
-  const handleNavigate = (navigate, cms, collection, collectionDefinition, document2) => {
+  const handleNavigate = async (navigate, cms, collection, collectionDefinition, document2) => {
     var _a, _b;
     const plugins2 = cms.plugins.all("tina-admin");
     const routeMapping = plugins2.find(({ name }) => name === "route-mapping");
     const tinaPreview = cms.flags.get("tina-preview") || false;
-    let routeOverride = ((_a = collectionDefinition.ui) == null ? void 0 : _a.router) ? (_b = collectionDefinition.ui) == null ? void 0 : _b.router({
+    let routeOverride = ((_a = collectionDefinition.ui) == null ? void 0 : _a.router) ? await ((_b = collectionDefinition.ui) == null ? void 0 : _b.router({
       document: document2,
       collection: collectionDefinition
-    }) : routeMapping ? routeMapping.mapper(collection, document2) : void 0;
+    })) : routeMapping ? routeMapping.mapper(collection, document2) : void 0;
     if (routeOverride) {
       if (routeOverride.startsWith("/")) {
         routeOverride = routeOverride.slice(1);
@@ -29432,6 +29531,54 @@ This will work when developing locally but NOT when deployed to production.
       "Rename"
     ))));
   };
+  const ErrorDialog = (props) => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          background: "#efefef",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }
+      },
+      /* @__PURE__ */ React.createElement("style", null, "        body {          margin: 0;        }      "),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            background: "#fff",
+            maxWidth: "400px",
+            padding: "20px",
+            fontFamily: "'Inter', sans-serif",
+            borderRadius: "5px",
+            boxShadow: "0 6px 24px rgb(0 37 91 / 5%), 0 2px 4px rgb(0 37 91 / 3%)"
+          }
+        },
+        /* @__PURE__ */ React.createElement("h3", { style: { color: "#eb6337" } }, props.title),
+        /* @__PURE__ */ React.createElement("p", null, props.message, ":"),
+        /* @__PURE__ */ React.createElement(
+          "pre",
+          {
+            style: { marginTop: "1rem", overflowX: "auto" }
+          },
+          `${props.error}`
+        ),
+        /* @__PURE__ */ React.createElement("p", null, "See our", " ", /* @__PURE__ */ React.createElement(
+          "a",
+          {
+            className: "text-gray-600",
+            style: { textDecoration: "underline" },
+            href: "https://tina.io/docs/errors/faq/",
+            target: "_blank"
+          },
+          " ",
+          "Error FAQ",
+          " "
+        ), " ", "for more information.")
+      )
+    );
+  };
   const createDocument = async (cms, collection, template, mutationInfo, folder, values) => {
     const api = new TinaAdminApi(cms);
     const { filename, ...leftover } = values;
@@ -29645,10 +29792,16 @@ This will work when developing locally but NOT when deployed to production.
             const defaultErrorText = "There was a problem saving your document.";
             if (error.message.includes("already exists")) {
               cms.alerts.error(
-                `${defaultErrorText} The "Filename" is alredy used for another document, please modify it.`
+                `${defaultErrorText} The "Filename" is already used for another document, please modify it.`
               );
             } else {
-              cms.alerts.error(defaultErrorText);
+              cms.alerts.error(
+                () => ErrorDialog({
+                  title: defaultErrorText,
+                  message: "Tina caught an error while creating the page",
+                  error
+                })
+              );
             }
             throw new Error(
               `[${error.name}] CreateDocument failed: ${error.message}`
@@ -29873,6 +30026,13 @@ This will work when developing locally but NOT when deployed to production.
             );
             cms.alerts.success("Document updated!");
           } catch (error) {
+            cms.alerts.error(
+              () => ErrorDialog({
+                title: "There was a problem saving your document",
+                message: "Tina caught an error while updating the page",
+                error
+              })
+            );
             console.error(error);
             throw new Error(
               `[${error.name}] UpdateDocument failed: ${error.message}`
@@ -30153,6 +30313,7 @@ This will work when developing locally but NOT when deployed to production.
           if (e.message.includes("has not been indexed by Tina Cloud")) {
             setSchemaMissingError(true);
           } else {
+            cms.alerts.error(`Unexpected error checking schema: ${e}`);
             throw e;
           }
         });
@@ -30400,6 +30561,7 @@ This will work when developing locally but NOT when deployed to production.
   exports2.EditIcon = EditIcon;
   exports2.EditoralBranchSwitcher = EditoralBranchSwitcher;
   exports2.EllipsisVerticalIcon = EllipsisVerticalIcon;
+  exports2.ErrorDialog = ErrorDialog;
   exports2.ErrorIcon = ErrorIcon;
   exports2.EventBus = EventBus;
   exports2.ExitIcon = ExitIcon;

package/dist/index.mjs

@@ -8491,8 +8491,12 @@ const useGetEvents = (cms, cursor, existingEvents) => {
   const [error, setError] = useState(void 0);
   React.useEffect(() => {
     const fetchEvents = async () => {
-      var _a, _b;
-      if (!((_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi) && cms.api.tina.isAuthorized()) {
+      var _a, _b, _c, _d;
+      let doFetchEvents = false;
+      if (!((_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi)) {
+        doFetchEvents = await ((_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.isAuthenticated());
+      }
+      if (doFetchEvents) {
         try {
           const { events: nextEvents, cursor: nextCursor2 } = await cms.api.tina.fetchEvents(15, cursor);
           setEvents([...existingEvents, ...nextEvents]);
@@ -8516,11 +8520,16 @@ const useGetEvents = (cms, cursor, existingEvents) => {
   return { events, cursor: nextCursor, loading, error };
 };
 function useSyncStatus$1(cms) {
+  var _a, _b;
   const [syncStatus, setSyncStatus] = useState({ state: "loading", message: "Loading..." });
   React.useEffect(() => {
     const interval = setInterval(async () => {
-      var _a, _b;
-      if (!((_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi) && cms.api.tina.isAuthorized()) {
+      var _a2, _b2, _c, _d;
+      let doFetchEvents = false;
+      if (!((_b2 = (_a2 = cms.api) == null ? void 0 : _a2.tina) == null ? void 0 : _b2.isCustomContentApi)) {
+        doFetchEvents = await ((_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.isAuthenticated());
+      }
+      if (doFetchEvents) {
         const { events } = await cms.api.tina.fetchEvents();
         if (events.length === 0) {
           setSyncStatus({ state: "success", message: "No Events" });
@@ -8539,7 +8548,7 @@ function useSyncStatus$1(cms) {
       }
     }, 5e3);
     return () => clearInterval(interval);
-  }, [cms]);
+  }, [(_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi]);
   return syncStatus;
 }
 const SyncErrorWidget = ({ cms }) => {
@@ -8652,6 +8661,9 @@ const Nav = ({
   function closeEventsModal() {
     setEventsOpen(false);
   }
+  const WrappedSyncStatus = React.forwardRef(
+    (props2, ref) => /* @__PURE__ */ React.createElement(SyncStatus, { ...props2 })
+  );
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -8703,18 +8715,30 @@ const Nav = ({
               sidebarWidth: null,
               resizingSidebar: false
             });
-            if ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.logout) {
-              await cms.api.tina.logout();
-              if ((_d = (_c = cms == null ? void 0 : cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.onLogout) {
-                await ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.onLogout());
+            try {
+              if ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.logout) {
+                await cms.api.tina.logout();
+                if ((_d = (_c = cms == null ? void 0 : cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.onLogout) {
+                  await ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.onLogout());
+                }
               }
+              setEdit(false);
+            } catch (e) {
+              cms.alerts.error(`Error logging out: ${e}`);
+              console.error("Unexpected error calling logout");
+              console.error(e);
             }
-            setEdit(false);
           }
         },
         /* @__PURE__ */ React.createElement(BiExit, { className: "w-6 h-auto mr-2 text-blue-400" }),
         " Log Out"
-      )), /* @__PURE__ */ React.createElement(Menu.Item, null, /* @__PURE__ */ React.createElement(SyncStatus, { cms, setEventsOpen })))
+      )), /* @__PURE__ */ React.createElement(Menu.Item, null, /* @__PURE__ */ React.createElement(
+        WrappedSyncStatus,
+        {
+          cms,
+          setEventsOpen
+        }
+      )))
     ))))),
     eventsOpen && /* @__PURE__ */ React.createElement(SyncStatusModal, { cms, closeEventsModal }),
     children,
@@ -26374,7 +26398,7 @@ function asyncPoll(fn, pollInterval = 5 * 1e3, pollTimeout = 30 * 1e3) {
 }
 class Client {
   constructor({ tokenStorage = "MEMORY", ...options }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X;
     this.events = new EventBus();
     this.protectedBranches = [];
     this.usingEditorialWorkflow = false;
@@ -26439,6 +26463,9 @@ mutation addPendingDocumentMutation(
     if ((_B = (_A = (_z = (_y = options.schema) == null ? void 0 : _y.config) == null ? void 0 : _z.admin) == null ? void 0 : _A.auth) == null ? void 0 : _B.authenticate) {
       this.authenticate = (_F = (_E = (_D = (_C = options.schema) == null ? void 0 : _C.config) == null ? void 0 : _D.admin) == null ? void 0 : _E.auth) == null ? void 0 : _F.authenticate;
     }
+    if ((_J = (_I = (_H = (_G = options.schema) == null ? void 0 : _G.config) == null ? void 0 : _H.admin) == null ? void 0 : _I.auth) == null ? void 0 : _J.authorize) {
+      this.authorize = (_N = (_M = (_L = (_K = options.schema) == null ? void 0 : _K.config) == null ? void 0 : _L.admin) == null ? void 0 : _M.auth) == null ? void 0 : _N.authorize;
+    }
     if (options.schema) {
       const enrichedSchema = new TinaSchema({
         version: { fullVersion: "", major: "", minor: "", patch: "" },
@@ -26448,7 +26475,7 @@ mutation addPendingDocumentMutation(
       this.schema = enrichedSchema;
     }
     this.options = options;
-    if ((_H = (_G = options.schema) == null ? void 0 : _G.config) == null ? void 0 : _H.contentApiUrlOverride) {
+    if ((_P = (_O = options.schema) == null ? void 0 : _O.config) == null ? void 0 : _P.contentApiUrlOverride) {
       this.options.customContentApiUrl = options.schema.config.contentApiUrlOverride;
     }
     this.setBranch(options.branch);
@@ -26502,8 +26529,8 @@ mutation addPendingDocumentMutation(
         this.getToken = options.getTokenFn;
         break;
     }
-    if ((_L = (_K = (_J = (_I = options.schema) == null ? void 0 : _I.config) == null ? void 0 : _J.admin) == null ? void 0 : _K.auth) == null ? void 0 : _L.getToken) {
-      this.getToken = (_P = (_O = (_N = (_M = options.schema) == null ? void 0 : _M.config) == null ? void 0 : _N.admin) == null ? void 0 : _O.auth) == null ? void 0 : _P.getToken;
+    if ((_T = (_S = (_R = (_Q = options.schema) == null ? void 0 : _Q.config) == null ? void 0 : _R.admin) == null ? void 0 : _S.auth) == null ? void 0 : _T.getToken) {
+      this.getToken = (_X = (_W = (_V = (_U = options.schema) == null ? void 0 : _U.config) == null ? void 0 : _V.admin) == null ? void 0 : _W.auth) == null ? void 0 : _X.getToken;
     }
   }
   get isLocalMode() {
@@ -26547,12 +26574,14 @@ mutation addPendingDocumentMutation(
       if (resBody.message) {
         errorMessage = `${errorMessage}, Response: ${resBody.message}`;
       }
-      errorMessage = `${errorMessage}, Please check that the following information is correct: 
+      if (!this.isCustomContentApi) {
+        errorMessage = `${errorMessage}, Please check that the following information is correct: 
 	clientId: ${this.options.clientId}
 	branch: ${this.branch}.`;
-      if (this.branch !== "main") {
-        errorMessage = `${errorMessage}
+        if (this.branch !== "main") {
+          errorMessage = `${errorMessage}
 	Note: This error can occur if the branch does not exist on GitHub or on Tina Cloud`;
+        }
       }
       throw new Error(errorMessage);
     }
@@ -26679,8 +26708,8 @@ mutation addPendingDocumentMutation(
     }
     return Promise.resolve({ access_token, id_token, refresh_token });
   }
-  async isAuthorized() {
-    return this.isAuthenticated();
+  async isAuthorized(context) {
+    return !!await this.authorize(context);
   }
   async isAuthenticated() {
     return !!await this.getUser();
@@ -26693,6 +26722,9 @@ mutation addPendingDocumentMutation(
     this.setToken(token);
     return token;
   }
+  async authorize(context) {
+    return this.getToken();
+  }
   /**
    * Wraps the normal fetch function with same API but adds the authorization header token.
    *
@@ -27382,26 +27414,49 @@ const AuthWallInner = ({
   const client = cms.api.tina;
   const isTinaCloud = !client.isLocalMode && !((_e = (_d = (_c = (_b = (_a = client.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.config) == null ? void 0 : _c.admin) == null ? void 0 : _d.auth) == null ? void 0 : _e.customAuth);
   const [activeModal, setActiveModal] = useState(null);
+  const [errorMessage, setErrorMessage] = useState();
   const [showChildren, setShowChildren] = useState(false);
   React__default.useEffect(() => {
     client.isAuthenticated().then((isAuthenticated) => {
       if (isAuthenticated) {
-        setShowChildren(true);
-        cms.enable();
+        client.isAuthorized().then((isAuthorized) => {
+          if (isAuthorized) {
+            setShowChildren(true);
+            cms.enable();
+          } else {
+            setErrorMessage({
+              title: "Access Denied:",
+              message: "Not Authorized To Edit"
+            });
+            setActiveModal("error");
+          }
+        }).catch((e) => {
+          console.error(e);
+          setErrorMessage({ title: "Unexpected Error:", message: `${e}` });
+          setActiveModal("error");
+        });
       } else {
         sleep(500).then(() => {
           setActiveModal("authenticate");
         });
       }
+    }).catch((e) => {
+      console.error(e);
+      setErrorMessage({ title: "Unexpected Error:", message: `${e}` });
+      setActiveModal("error");
     });
   }, []);
-  const onAuthSuccess = async () => {
-    if (await client.isAuthenticated()) {
+  const onAuthenticated = async () => {
+    if (await client.isAuthorized()) {
       setShowChildren(true);
       setActiveModal(null);
       cms.events.dispatch({ type: "cms:login" });
     } else {
-      throw new Error("No access to repo");
+      setErrorMessage({
+        title: "Access Denied:",
+        message: "Not Authorized To Edit"
+      });
+      setActiveModal("error");
     }
   };
   const otherModalActions = getModalActions ? getModalActions({
@@ -27413,7 +27468,7 @@ const AuthWallInner = ({
     ModalBuilder,
     {
       title: isTinaCloud ? "Tina Cloud Authorization" : "Enter into edit mode",
-      message: isTinaCloud ? "To save edits, Tina Cloud authorization is required. On save, changes will get commited using your account." : "To save edits, enter into edit mode. On save, changes will saved to the local filesystem.",
+      message: isTinaCloud ? "To save edits, Tina Cloud authorization is required. On save, changes will get committed using your account." : "To save edits, enter into edit mode. On save, changes will saved to the local filesystem.",
       close,
       actions: [
         ...otherModalActions,
@@ -27428,11 +27483,55 @@ const AuthWallInner = ({
         {
           name: isTinaCloud ? "Continue to Tina Cloud" : "Enter Edit Mode",
           action: async () => {
-            const token = await client.authenticate();
-            if (typeof (client == null ? void 0 : client.onLogin) === "function") {
-              await (client == null ? void 0 : client.onLogin({ token }));
+            try {
+              const token = await client.authenticate();
+              if (typeof (client == null ? void 0 : client.onLogin) === "function") {
+                await (client == null ? void 0 : client.onLogin({ token }));
+              }
+              return onAuthenticated();
+            } catch (e) {
+              console.error(e);
+              setActiveModal("error");
+              setErrorMessage({
+                title: "Unexpected Error:",
+                message: `${e}`
+              });
+            }
+          },
+          primary: true
+        }
+      ]
+    }
+  ), activeModal === "error" && errorMessage && /* @__PURE__ */ React__default.createElement(
+    ModalBuilder,
+    {
+      title: isTinaCloud ? "Tina Cloud Authorization" : "Enter into edit mode",
+      message: errorMessage.title,
+      error: errorMessage.message,
+      close,
+      actions: [
+        ...otherModalActions,
+        {
+          name: "Retry",
+          action: async () => {
+            try {
+              setActiveModal(null);
+              setErrorMessage(void 0);
+              await client.logout();
+              await client.onLogout();
+              const token = await client.authenticate();
+              if (typeof (client == null ? void 0 : client.onLogin) === "function") {
+                await (client == null ? void 0 : client.onLogin({ token }));
+              }
+              return onAuthenticated();
+            } catch (e) {
+              console.error(e);
+              setActiveModal("error");
+              setErrorMessage({
+                title: "Unexpected Error:",
+                message: `${e}`
+              });
             }
-            onAuthSuccess();
           },
           primary: true
         }
@@ -28782,15 +28881,15 @@ const TemplateMenu = ({
     )))))
   )));
 };
-const handleNavigate = (navigate, cms, collection, collectionDefinition, document2) => {
+const handleNavigate = async (navigate, cms, collection, collectionDefinition, document2) => {
   var _a, _b;
   const plugins2 = cms.plugins.all("tina-admin");
   const routeMapping = plugins2.find(({ name }) => name === "route-mapping");
   const tinaPreview = cms.flags.get("tina-preview") || false;
-  let routeOverride = ((_a = collectionDefinition.ui) == null ? void 0 : _a.router) ? (_b = collectionDefinition.ui) == null ? void 0 : _b.router({
+  let routeOverride = ((_a = collectionDefinition.ui) == null ? void 0 : _a.router) ? await ((_b = collectionDefinition.ui) == null ? void 0 : _b.router({
     document: document2,
     collection: collectionDefinition
-  }) : routeMapping ? routeMapping.mapper(collection, document2) : void 0;
+  })) : routeMapping ? routeMapping.mapper(collection, document2) : void 0;
   if (routeOverride) {
     if (routeOverride.startsWith("/")) {
       routeOverride = routeOverride.slice(1);
@@ -29438,6 +29537,54 @@ const RenameModal = ({
     "Rename"
   ))));
 };
+const ErrorDialog = (props) => {
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      style: {
+        background: "#efefef",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement("style", null, "        body {          margin: 0;        }      "),
+    /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: {
+          background: "#fff",
+          maxWidth: "400px",
+          padding: "20px",
+          fontFamily: "'Inter', sans-serif",
+          borderRadius: "5px",
+          boxShadow: "0 6px 24px rgb(0 37 91 / 5%), 0 2px 4px rgb(0 37 91 / 3%)"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement("h3", { style: { color: "#eb6337" } }, props.title),
+      /* @__PURE__ */ React__default.createElement("p", null, props.message, ":"),
+      /* @__PURE__ */ React__default.createElement(
+        "pre",
+        {
+          style: { marginTop: "1rem", overflowX: "auto" }
+        },
+        `${props.error}`
+      ),
+      /* @__PURE__ */ React__default.createElement("p", null, "See our", " ", /* @__PURE__ */ React__default.createElement(
+        "a",
+        {
+          className: "text-gray-600",
+          style: { textDecoration: "underline" },
+          href: "https://tina.io/docs/errors/faq/",
+          target: "_blank"
+        },
+        " ",
+        "Error FAQ",
+        " "
+      ), " ", "for more information.")
+    )
+  );
+};
 const createDocument = async (cms, collection, template, mutationInfo, folder, values) => {
   const api = new TinaAdminApi(cms);
   const { filename, ...leftover } = values;
@@ -29651,10 +29798,16 @@ const RenderForm$1 = ({
           const defaultErrorText = "There was a problem saving your document.";
           if (error.message.includes("already exists")) {
             cms.alerts.error(
-              `${defaultErrorText} The "Filename" is alredy used for another document, please modify it.`
+              `${defaultErrorText} The "Filename" is already used for another document, please modify it.`
             );
           } else {
-            cms.alerts.error(defaultErrorText);
+            cms.alerts.error(
+              () => ErrorDialog({
+                title: defaultErrorText,
+                message: "Tina caught an error while creating the page",
+                error
+              })
+            );
           }
           throw new Error(
             `[${error.name}] CreateDocument failed: ${error.message}`
@@ -29879,6 +30032,13 @@ const RenderForm = ({
           );
           cms.alerts.success("Document updated!");
         } catch (error) {
+          cms.alerts.error(
+            () => ErrorDialog({
+              title: "There was a problem saving your document",
+              message: "Tina caught an error while updating the page",
+              error
+            })
+          );
           console.error(error);
           throw new Error(
             `[${error.name}] UpdateDocument failed: ${error.message}`
@@ -30159,6 +30319,7 @@ const CheckSchema = ({
         if (e.message.includes("has not been indexed by Tina Cloud")) {
           setSchemaMissingError(true);
         } else {
+          cms.alerts.error(`Unexpected error checking schema: ${e}`);
           throw e;
         }
       });
@@ -30399,6 +30560,7 @@ export {
   EditIcon,
   EditoralBranchSwitcher,
   EllipsisVerticalIcon,
+  ErrorDialog,
   ErrorIcon,
   EventBus,
   ExitIcon,

package/dist/internalClient/index.d.ts

@@ -189,10 +189,11 @@ export declare class Client {
     }>;
     parseJwt(token: any): any;
     getRefreshedToken(tokens: string): Promise<TokenObject>;
-    isAuthorized(): Promise<boolean>;
+    isAuthorized(context?: any): Promise<boolean>;
     isAuthenticated(): Promise<boolean>;
     logout(): Promise<void>;
     authenticate(): Promise<TokenObject>;
+    authorize(context?: any): Promise<any>;
     /**
      * Wraps the normal fetch function with same API but adds the authorization header token.
      *

package/dist/unifiedClient/index.d.ts

@@ -1,6 +1,3 @@
-/**
-
-*/
 export declare const TINA_HOST = "content.tinajs.io";
 export interface TinaClientArgs<GenQueries = Record<string, unknown>> {
     url: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "1.5.18",
+  "version": "1.5.20",
   "main": "dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {
@@ -69,8 +69,8 @@
     "@react-types/combobox": "^3.2.0",
     "@react-types/shared": "^3.10.0",
     "@sambego/storybook-styles": "^1.0.0",
-    "@tinacms/schema-tools": "1.4.10",
-    "@tinacms/search": "1.0.8",
+    "@tinacms/schema-tools": "1.4.12",
+    "@tinacms/search": "1.0.10",
     "@tinacms/sharedctx": "1.0.2",
     "@udecode/plate-headless": "^21.4.0",
     "atob": "2.1.2",