tinacms 0.59.0 → 0.60.2

package/dist/index.js

@@ -30,8 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("graphql"), require("lodash.set"), require("graphql-tag"), require("@tinacms/toolkit"), require("react"), require("styled-components"), require("yup"), require("final-form"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "graphql", "lodash.set", "graphql-tag", "@tinacms/toolkit", "react", "styled-components", "yup", "final-form", "react-router-dom", "@headlessui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, graphql, set, gql$1, toolkit, React, styled, yup, finalForm, reactRouterDom, react) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("graphql-tag"), require("react"), require("styled-components"), require("yup"), require("@tinacms/sharedctx"), require("final-form"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "graphql-tag", "react", "styled-components", "yup", "@tinacms/sharedctx", "final-form", "react-router-dom", "@headlessui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, toolkit, graphql, set, gql$1, React, styled, yup, sharedctx, finalForm, reactRouterDom, react) {
   "use strict";
   function _interopDefaultLegacy(e) {
     return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -444,10 +444,10 @@ mutation addPendingDocumentMutation(
       this.clientId = options.clientId;
       switch (tokenStorage) {
         case "LOCAL_STORAGE":
-          this.getToken = function() {
+          this.getToken = async function() {
             const tokens = localStorage.getItem(AUTH_TOKEN_KEY) || null;
             if (tokens) {
-              return JSON.parse(tokens);
+              return await this.getRefreshedToken(tokens);
             } else {
               return {
                 access_token: null,
@@ -461,9 +461,9 @@ mutation addPendingDocumentMutation(
           };
           break;
         case "MEMORY":
-          this.getToken = () => {
+          this.getToken = async () => {
             if (this.token) {
-              return JSON.parse(this.token);
+              return await this.getRefreshedToken(this.token);
             } else {
               return {
                 access_token: null,
@@ -502,13 +502,16 @@ mutation addPendingDocumentMutation(
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          Authorization: "Bearer " + this.getToken().id_token
+          Authorization: "Bearer " + (await this.getToken()).id_token
         },
         body: JSON.stringify({
           query: typeof query === "function" ? graphql.print(query(gql__default["default"])) : query,
           variables
         })
       });
+      if (res.status !== 200) {
+        throw new Error(`Unable to complete request, ${res.statusText}`);
+      }
       const json = await res.json();
       if (json.errors) {
         throw new Error(`Unable to fetch, errors: 
@@ -516,6 +519,47 @@ mutation addPendingDocumentMutation(
       }
       return json.data;
     }
+    parseJwt(token) {
+      const base64Url = token.split(".")[1];
+      const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+      const jsonPayload = decodeURIComponent(atob(base64).split("").map(function(c) {
+        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+      }).join(""));
+      return JSON.parse(jsonPayload);
+    }
+    async getRefreshedToken(tokens) {
+      const { access_token, id_token, refresh_token } = JSON.parse(tokens);
+      const { exp, iss, client_id } = this.parseJwt(access_token);
+      if (Date.now() / 1e3 >= exp) {
+        const refreshResponse = await fetch(iss, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-amz-json-1.1",
+            "x-amz-target": "AWSCognitoIdentityProviderService.InitiateAuth"
+          },
+          body: JSON.stringify({
+            ClientId: client_id,
+            AuthFlow: "REFRESH_TOKEN_AUTH",
+            AuthParameters: {
+              REFRESH_TOKEN: refresh_token,
+              DEVICE_KEY: null
+            }
+          })
+        });
+        if (refreshResponse.status !== 200) {
+          throw new Error("Unable to refresh auth tokens");
+        }
+        const responseJson = await refreshResponse.json();
+        const newToken = {
+          access_token: responseJson.AuthenticationResult.AccessToken,
+          id_token: responseJson.AuthenticationResult.IdToken,
+          refresh_token
+        };
+        this.setToken(newToken);
+        return Promise.resolve(newToken);
+      }
+      return Promise.resolve({ access_token, id_token, refresh_token });
+    }
     async isAuthorized() {
       return this.isAuthenticated();
     }
@@ -531,7 +575,7 @@ mutation addPendingDocumentMutation(
       const headers = (init == null ? void 0 : init.headers) || {};
       return await fetch(input, __spreadProps(__spreadValues({}, init), {
         headers: new Headers(__spreadValues({
-          Authorization: "Bearer " + this.getToken().id_token
+          Authorization: "Bearer " + (await this.getToken()).id_token
         }, headers))
       }));
     }
@@ -673,24 +717,6 @@ mutation addPendingDocumentMutation(
       return false;
     }
   }
-  const LOCALSTORAGEKEY = "tina.isEditing";
-  const isSSR = typeof window === "undefined";
-  const isEditing = () => {
-    if (!isSSR) {
-      const isEdit = window.localStorage.getItem(LOCALSTORAGEKEY);
-      return isEdit && isEdit === "true";
-    }
-    return false;
-  };
-  const setEditing = (isEditing2) => {
-    if (!isSSR) {
-      window.localStorage.setItem(LOCALSTORAGEKEY, isEditing2 ? "true" : "false");
-    }
-  };
-  React__default["default"].createContext({
-    edit: isEditing(),
-    setEdit: void 0
-  });
   function sleep(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
@@ -736,7 +762,7 @@ mutation addPendingDocumentMutation(
         ...otherModalActions,
         {
           action: async () => {
-            setEditing(false);
+            sharedctx.setEditing(false);
             window.location.reload();
           },
           name: "Close",
@@ -913,6 +939,9 @@ mutation addPendingDocumentMutation(
   function BiLogIn(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 16 5-4-5-4v3H4v2h9z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
   }
+  function BiLogOut(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M16 13v-2H7V8l-5 4 5 4v-3z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
+  }
   function useGraphqlForms({
     query,
     variables,
@@ -1030,25 +1059,30 @@ mutation addPendingDocumentMutation(
               setPendingReset(queryName);
             },
             onSubmit: async (payload2) => {
-              const params = transformDocumentIntoMutationRequestPayload(payload2, result.form.mutationInfo);
-              const variables2 = { params };
-              const mutationString = result.form.mutationInfo.string;
-              if (onSubmit) {
-                onSubmit({
-                  queryString: mutationString,
-                  mutationString,
-                  variables: variables2
-                });
-              } else {
-                try {
-                  await cms.api.tina.request(mutationString, {
+              try {
+                const params = transformDocumentIntoMutationRequestPayload(payload2, result.form.mutationInfo);
+                const variables2 = { params };
+                const mutationString = result.form.mutationInfo.string;
+                if (onSubmit) {
+                  onSubmit({
+                    queryString: mutationString,
+                    mutationString,
                     variables: variables2
                   });
-                  cms.alerts.success("Document saved!");
-                } catch (e) {
-                  cms.alerts.error("There was a problem saving your document");
-                  console.error(e);
+                } else {
+                  try {
+                    await cms.api.tina.request(mutationString, {
+                      variables: variables2
+                    });
+                    cms.alerts.success("Document saved!");
+                  } catch (e) {
+                    cms.alerts.error("There was a problem saving your document");
+                    console.error(e);
+                  }
                 }
+              } catch (e) {
+                console.error(e);
+                cms.alerts.error("There was a problem saving your document");
               }
             }
           };
@@ -1160,6 +1194,9 @@ mutation addPendingDocumentMutation(
       return { [_template]: nested };
     } catch (e) {
       if (e.message === "Failed to assertShape - _template is a required field") {
+        if (!data) {
+          return [];
+        }
         const accum = {};
         Object.entries(data).map(([keyName, value]) => {
           accum[keyName] = transformParams(value);
@@ -1617,12 +1654,6 @@ This will work when developing locally but NOT when deployed to production.
     });
     return str;
   }
-  function ImFilesEmpty(props) {
-    return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M14.341 5.579c-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.689 0.561 1.25 1.25 1.25h9.5c0.689 0 1.25-0.561 1.25-1.25v-7.75c0-0.224-0.068-0.615-0.659-1.421zM12.271 4.729c0.48 0.48 0.856 0.912 1.134 1.271h-2.406v-2.405c0.359 0.278 0.792 0.654 1.271 1.134v0zM14 14.75c0 0.136-0.114 0.25-0.25 0.25h-9.5c-0.136 0-0.25-0.114-0.25-0.25v-11.5c0-0.135 0.114-0.25 0.25-0.25 0 0 5.749-0 5.75 0v3.5c0 0.276 0.224 0.5 0.5 0.5h3.5v7.75z" } }, { "tag": "path", "attr": { "d": "M9.421 0.659c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.604 0.43 1.109 1 1.225v-12.725c0-0.135 0.115-0.25 0.25-0.25h7.607c-0.151-0.124-0.297-0.238-0.437-0.341z" } }] })(props);
-  }
-  function VscOpenPreview(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 16 16", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "clipRule": "evenodd", "d": "M3 1h11l1 1v5.3a3.21 3.21 0 0 0-1-.3V2H9v10.88L7.88 14H3l-1-1V2l1-1zm0 12h5V2H3v11zm10.379-4.998a2.53 2.53 0 0 0-1.19.348h-.03a2.51 2.51 0 0 0-.799 3.53L9 14.23l.71.71 2.35-2.36c.325.22.7.358 1.09.4a2.47 2.47 0 0 0 1.14-.13 2.51 2.51 0 0 0 1-.63 2.46 2.46 0 0 0 .58-1 2.63 2.63 0 0 0 .07-1.15 2.53 2.53 0 0 0-1.35-1.81 2.53 2.53 0 0 0-1.211-.258zm.24 3.992a1.5 1.5 0 0 1-.979-.244 1.55 1.55 0 0 1-.56-.68 1.49 1.49 0 0 1-.08-.86 1.49 1.49 0 0 1 1.18-1.18 1.49 1.49 0 0 1 .86.08c.276.117.512.311.68.56a1.5 1.5 0 0 1-1.1 2.324z" } }] })(props);
-  }
   const Layout = ({ children }) => {
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       style: {
@@ -1637,14 +1668,12 @@ This will work when developing locally but NOT when deployed to production.
       }
     }, children);
   };
-  const GetCMS = ({ children }) => {
-    try {
-      const cms = toolkit.useCMS();
-      return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(cms));
-    } catch (e) {
-      return null;
-    }
-  };
+  function ImFilesEmpty(props) {
+    return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M14.341 5.579c-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.689 0.561 1.25 1.25 1.25h9.5c0.689 0 1.25-0.561 1.25-1.25v-7.75c0-0.224-0.068-0.615-0.659-1.421zM12.271 4.729c0.48 0.48 0.856 0.912 1.134 1.271h-2.406v-2.405c0.359 0.278 0.792 0.654 1.271 1.134v0zM14 14.75c0 0.136-0.114 0.25-0.25 0.25h-9.5c-0.136 0-0.25-0.114-0.25-0.25v-11.5c0-0.135 0.114-0.25 0.25-0.25 0 0 5.749-0 5.75 0v3.5c0 0.276 0.224 0.5 0.5 0.5h3.5v7.75z" } }, { "tag": "path", "attr": { "d": "M9.421 0.659c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.604 0.43 1.109 1 1.225v-12.725c0-0.135 0.115-0.25 0.25-0.25h7.607c-0.151-0.124-0.297-0.238-0.437-0.341z" } }] })(props);
+  }
+  function VscOpenPreview(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 16 16", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "clipRule": "evenodd", "d": "M3 1h11l1 1v5.3a3.21 3.21 0 0 0-1-.3V2H9v10.88L7.88 14H3l-1-1V2l1-1zm0 12h5V2H3v11zm10.379-4.998a2.53 2.53 0 0 0-1.19.348h-.03a2.51 2.51 0 0 0-.799 3.53L9 14.23l.71.71 2.35-2.36c.325.22.7.358 1.09.4a2.47 2.47 0 0 0 1.14-.13 2.51 2.51 0 0 0 1-.63 2.46 2.46 0 0 0 .58-1 2.63 2.63 0 0 0 .07-1.15 2.53 2.53 0 0 0-1.35-1.81 2.53 2.53 0 0 0-1.211-.258zm.24 3.992a1.5 1.5 0 0 1-.979-.244 1.55 1.55 0 0 1-.56-.68 1.49 1.49 0 0 1-.08-.86 1.49 1.49 0 0 1 1.18-1.18 1.49 1.49 0 0 1 .86.08c.276.117.512.311.68.56a1.5 1.5 0 0 1-1.1 2.324z" } }] })(props);
+  }
   const useGetCollections = (cms) => {
     const [collections, setCollections] = React.useState([]);
     React.useEffect(() => {
@@ -1662,14 +1691,98 @@ This will work when developing locally but NOT when deployed to production.
       return null;
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collections));
   };
+  const Sidebar = ({ cms }) => {
+    const { setEdit } = sharedctx.useEditState();
+    const logout2 = () => setEdit(false);
+    return /* @__PURE__ */ React__default["default"].createElement(GetCollections, {
+      cms
+    }, (collections) => /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex flex-col w-80 lg:w-96 flex-shrink-0 bg-gradient-to-b from-white to-gray-50 border-r border-gray-200"
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "border-b border-gray-200"
+    }, /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
+      as: "div",
+      className: "relative block"
+    }, ({ open }) => /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Button, {
+      className: `group w-full px-6 py-4 flex justify-between items-center transition-colors duration-150 ease-out ${open ? `bg-gray-50` : `bg-transparent`}`
+    }, /* @__PURE__ */ React__default["default"].createElement("span", {
+      className: "text-left inline-flex items-center text-2xl tracking-wide text-gray-800 flex-1 gap-1 opacity-80 group-hover:opacity-100 transition-opacity duration-150 ease-out"
+    }, /* @__PURE__ */ React__default["default"].createElement("svg", {
+      viewBox: "0 0 32 32",
+      fill: "#EC4815",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "w-10 h-auto -ml-1"
+    }, /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z"
+    }), /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z"
+    })), /* @__PURE__ */ React__default["default"].createElement("span", null, "Tina Admin")), /* @__PURE__ */ React__default["default"].createElement("svg", {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: `flex-0 inline-block opacity-50 group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open ? `rotate-90 opacity-100` : `rotate-0`}`
+    }, /* @__PURE__ */ React__default["default"].createElement("g", {
+      opacity: "0.3"
+    }, /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M7.91675 13.8086L9.16675 15.0586L14.2253 10L9.16675 4.9414L7.91675 6.1914L11.7253 10L7.91675 13.8086Z",
+      fill: "currentColor"
+    })))), /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "transform translate-y-full absolute bottom-3 right-5 w-2/3 z-50"
+    }, /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
+      enter: "transition duration-150 ease-out",
+      enterFrom: "transform opacity-0 -translate-y-2",
+      enterTo: "transform opacity-100 translate-y-0",
+      leave: "transition duration-75 ease-in",
+      leaveFrom: "transform opacity-100 translate-y-0",
+      leaveTo: "transform opacity-0 -translate-y-2"
+    }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Items, {
+      className: "w-full py-1 bg-white border border-gray-150 rounded-lg shadow-lg"
+    }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, null, ({ active }) => /* @__PURE__ */ React__default["default"].createElement("a", {
+      className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
+      href: "/"
+    }, /* @__PURE__ */ React__default["default"].createElement(VscOpenPreview, {
+      className: "w-6 h-auto mr-1.5 text-blue-400"
+    }), " ", "View Website")), /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, null, ({ active }) => /* @__PURE__ */ React__default["default"].createElement("button", {
+      className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
+      onClick: () => logout2()
+    }, /* @__PURE__ */ React__default["default"].createElement(BiExit, {
+      className: "w-6 h-auto mr-1.5 text-blue-400"
+    }), " ", "Log out")))))))), /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "px-6 py-7 flex-1"
+    }, /* @__PURE__ */ React__default["default"].createElement("h4", {
+      className: "uppercase font-bold text-sm mb-3"
+    }, "Collections"), /* @__PURE__ */ React__default["default"].createElement("ul", {
+      className: "flex flex-col gap-4"
+    }, collections.map((collection) => {
+      return /* @__PURE__ */ React__default["default"].createElement("li", {
+        key: `${collection.name}-link`
+      }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.NavLink, {
+        className: ({ isActive }) => {
+          return `text-lg tracking-wide ${isActive ? "text-blue-600" : ""} hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`;
+        },
+        to: `/admin/collections/${collection.name}`
+      }, /* @__PURE__ */ React__default["default"].createElement(ImFilesEmpty, {
+        className: "mr-2 h-6 opacity-80 w-auto"
+      }), " ", collection.label));
+    })))));
+  };
+  const GetCMS = ({ children }) => {
+    try {
+      const cms = toolkit.useCMS();
+      return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(cms));
+    } catch (e) {
+      return null;
+    }
+  };
   function MdOutlineArrowBack(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" } }] })(props);
   }
-  const login = () => {
-    setEditing(true);
-    window.location.reload();
-  };
-  const LoginPage = () => {
+  const AuthTemplate = ({
+    message,
+    children
+  }) => {
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "h-screen w-full bg-gradient-to-b from-blue-900 to-gray-900 flex items-center justify-center px-4 py-6"
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -1687,12 +1800,19 @@ This will work when developing locally but NOT when deployed to production.
       d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z"
     }), /* @__PURE__ */ React__default["default"].createElement("path", {
       d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z"
-    })), /* @__PURE__ */ React__default["default"].createElement("span", null, "Tina Admin"))), /* @__PURE__ */ React__default["default"].createElement("div", {
+    })), /* @__PURE__ */ React__default["default"].createElement("span", null, "Tina Admin"))), message && /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "px-5 py-4 "
     }, /* @__PURE__ */ React__default["default"].createElement("p", {
       className: "text-base font-sans leading-normal"
-    }, "Please log in to Tina Cloud to access your admin dashboard.")), /* @__PURE__ */ React__default["default"].createElement("div", {
+    }, message)), /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "px-5 py-4 flex gap-4 w-full justify-between"
+    }, children)));
+  };
+  const LoginPage = () => {
+    const { setEdit } = sharedctx.useEditState();
+    const login = () => setEdit(true);
+    return /* @__PURE__ */ React__default["default"].createElement(AuthTemplate, {
+      message: "Please log in to Tina Cloud to access your content."
     }, /* @__PURE__ */ React__default["default"].createElement("a", {
       href: "/",
       className: "flex-1 text-center inline-flex justify-center items-center px-8 py-3 shadow-sm text-sm leading-4 font-medium rounded-full text-gray-600 border border-gray-150 hover:opacity-80 hover:bg-gray-50 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out"
@@ -1705,7 +1825,26 @@ This will work when developing locally but NOT when deployed to production.
       style: { background: "#0084FF" }
     }, /* @__PURE__ */ React__default["default"].createElement(BiLogIn, {
       className: "w-6 h-auto mr-1.5 opacity-80"
-    }), " Log in"))));
+    }), " Log in"));
+  };
+  const logout = () => {
+    sharedctx.setEditing(false);
+    window.location.href = "/";
+  };
+  const LogoutPage = () => {
+    return /* @__PURE__ */ React__default["default"].createElement(AuthTemplate, null, /* @__PURE__ */ React__default["default"].createElement("a", {
+      href: "/",
+      className: "flex-1 text-center inline-flex justify-center items-center px-8 py-3 shadow-sm text-sm leading-4 font-medium rounded-full text-gray-600 border border-gray-150 hover:opacity-80 hover:bg-gray-50 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out"
+    }, /* @__PURE__ */ React__default["default"].createElement(MdOutlineArrowBack, {
+      className: "w-6 h-auto mr-1.5 opacity-80"
+    }), " Back to site"), /* @__PURE__ */ React__default["default"].createElement("button", {
+      type: "submit",
+      onClick: () => logout(),
+      className: "flex-1 justify-center text-center inline-flex items-center px-8 py-3 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out",
+      style: { background: "#0084FF" }
+    }, /* @__PURE__ */ React__default["default"].createElement(BiLogOut, {
+      className: "w-6 h-auto mr-1.5 opacity-80"
+    }), " Log out"));
   };
   const DashboardPage = () => {
     return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -1951,7 +2090,7 @@ This will work when developing locally but NOT when deployed to production.
   };
   const CollectionCreatePage = () => {
     const { collectionName, templateName } = reactRouterDom.useParams();
-    const history = reactRouterDom.useHistory();
+    const navigate = reactRouterDom.useNavigate();
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetDocumentFields, {
       cms,
       collectionName,
@@ -1972,7 +2111,7 @@ This will work when developing locally but NOT when deployed to production.
         ],
         onSubmit: async (values) => {
           await createDocument(cms, collection, template, mutationInfo, values);
-          history.push(`/admin/collections/${collection.name}`);
+          navigate(`/admin/collections/${collection.name}`);
         }
       });
       const formLabel = template ? `${collection.label} - Create New ${template.label}` : `${collection.label} - Create New`;
@@ -2039,7 +2178,7 @@ This will work when developing locally but NOT when deployed to production.
   };
   const CollectionUpdatePage = () => {
     const { collectionName, filename } = reactRouterDom.useParams();
-    const history = reactRouterDom.useHistory();
+    const navigate = reactRouterDom.useNavigate();
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetDocumentFields, {
       cms,
       collectionName
@@ -2057,7 +2196,7 @@ This will work when developing locally but NOT when deployed to production.
           initialValues: document2.values,
           onSubmit: async (values) => {
             await updateDocument(cms, relativePath, collection, mutationInfo, values);
-            history.push(`/admin/collections/${collection.name}`);
+            navigate(`/collections/${collection.name}`);
           }
         });
         return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -2073,8 +2212,8 @@ This will work when developing locally but NOT when deployed to production.
   };
   const useEmbedTailwind = () => {
     React.useEffect(() => {
-      const isSSR2 = typeof window === "undefined";
-      if (!isSSR2) {
+      const isSSR = typeof window === "undefined";
+      if (!isSSR) {
         const head = document.head;
         const link = document.createElement("link");
         link.id = "tina-admin-stylesheet";
@@ -2085,106 +2224,59 @@ This will work when developing locally but NOT when deployed to production.
       }
     }, []);
   };
-  const logout = () => {
-    setEditing(false);
-    window.location.reload();
+  const Redirect = () => {
+    React__default["default"].useEffect(() => {
+      if (window) {
+        window.location.assign("/");
+      }
+    }, []);
+    return null;
   };
   const TinaAdmin = () => {
     useEmbedTailwind();
-    const isSSR2 = typeof window === "undefined";
-    if (isSSR2) {
+    const isSSR = typeof window === "undefined";
+    const { edit } = sharedctx.useEditState();
+    if (isSSR) {
       return null;
     }
-    const isEdit = isEditing();
-    if (!isEdit) {
+    if (!edit) {
       return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(LoginPage, null));
     }
-    return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetCollections, {
-      cms
-    }, (collections) => /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, null, /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "flex items-stretch h-screen overflow-hidden"
-    }, /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "flex flex-col w-80 lg:w-96 flex-shrink-0 bg-gradient-to-b from-white to-gray-50 border-r border-gray-200"
-    }, /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "border-b border-gray-200"
-    }, /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
-      as: "div",
-      className: "relative block"
-    }, ({ open }) => /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Button, {
-      className: `group w-full px-6 py-4 flex justify-between items-center transition-colors duration-150 ease-out ${open ? `bg-gray-50` : `bg-transparent`}`
-    }, /* @__PURE__ */ React__default["default"].createElement("span", {
-      className: "text-left inline-flex items-center text-2xl tracking-wide text-gray-800 flex-1 gap-1 opacity-80 group-hover:opacity-100 transition-opacity duration-150 ease-out"
-    }, /* @__PURE__ */ React__default["default"].createElement("svg", {
-      viewBox: "0 0 32 32",
-      fill: "#EC4815",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: "w-10 h-auto -ml-1"
-    }, /* @__PURE__ */ React__default["default"].createElement("path", {
-      d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z"
-    }), /* @__PURE__ */ React__default["default"].createElement("path", {
-      d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z"
-    })), /* @__PURE__ */ React__default["default"].createElement("span", null, "Tina Admin")), /* @__PURE__ */ React__default["default"].createElement("svg", {
-      width: "20",
-      height: "20",
-      viewBox: "0 0 20 20",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: `flex-0 inline-block opacity-50 group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open ? `rotate-90 opacity-100` : `rotate-0`}`
-    }, /* @__PURE__ */ React__default["default"].createElement("g", {
-      opacity: "0.3"
-    }, /* @__PURE__ */ React__default["default"].createElement("path", {
-      d: "M7.91675 13.8086L9.16675 15.0586L14.2253 10L9.16675 4.9414L7.91675 6.1914L11.7253 10L7.91675 13.8086Z",
-      fill: "currentColor"
-    })))), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "transform translate-y-full absolute bottom-3 right-5 w-2/3 z-50"
-    }, /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
-      enter: "transition duration-150 ease-out",
-      enterFrom: "transform opacity-0 -translate-y-2",
-      enterTo: "transform opacity-100 translate-y-0",
-      leave: "transition duration-75 ease-in",
-      leaveFrom: "transform opacity-100 translate-y-0",
-      leaveTo: "transform opacity-0 -translate-y-2"
-    }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Items, {
-      className: "w-full py-1 bg-white border border-gray-150 rounded-lg shadow-lg"
-    }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, null, ({ active }) => /* @__PURE__ */ React__default["default"].createElement("a", {
-      className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
-      href: "/"
-    }, /* @__PURE__ */ React__default["default"].createElement(VscOpenPreview, {
-      className: "w-6 h-auto mr-1.5 text-blue-400"
-    }), " ", "View Website")), /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, null, ({ active }) => /* @__PURE__ */ React__default["default"].createElement("button", {
-      className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
-      onClick: () => logout()
-    }, /* @__PURE__ */ React__default["default"].createElement(BiExit, {
-      className: "w-6 h-auto mr-1.5 text-blue-400"
-    }), " ", "Log out")))))))), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "px-6 py-7 flex-1"
-    }, /* @__PURE__ */ React__default["default"].createElement("h4", {
-      className: "uppercase font-bold text-sm mb-3"
-    }, "Collections"), /* @__PURE__ */ React__default["default"].createElement("ul", {
-      className: "flex flex-col gap-4"
-    }, collections.map((collection) => {
-      return /* @__PURE__ */ React__default["default"].createElement("li", {
-        key: `${collection.name}-link`
-      }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.NavLink, {
-        className: `text-lg tracking-wide hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`,
-        activeClassName: "text-blue-600",
-        to: `/admin/collections/${collection.name}`
-      }, /* @__PURE__ */ React__default["default"].createElement(ImFilesEmpty, {
-        className: "mr-2 h-6 opacity-80 w-auto"
-      }), " ", collection.label));
-    })))), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "flex-1"
-    }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-      path: `/admin/collections/:collectionName/new`
-    }, /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-      path: `/admin/collections/:collectionName/:templateName/new`
-    }, /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-      path: `/admin/collections/:collectionName/:filename`
-    }, /* @__PURE__ */ React__default["default"].createElement(CollectionUpdatePage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-      path: `/admin/collections/:collectionName`
-    }, /* @__PURE__ */ React__default["default"].createElement(CollectionListPage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-      path: `/admin`
-    }, /* @__PURE__ */ React__default["default"].createElement(DashboardPage, null)))))))));
+    return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
+      const isTinaAdminEnabled = cms.flags.get("tina-admin");
+      if (isTinaAdminEnabled) {
+        return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "flex items-stretch h-screen overflow-hidden"
+        }, /* @__PURE__ */ React__default["default"].createElement(Sidebar, {
+          cms
+        }), /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "flex-1"
+        }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "/admin/collections/:collectionName/new",
+          element: /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "/admin/collections/:collectionName/:templateName/new",
+          element: /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "/admin/collections/:collectionName/:filename",
+          element: /* @__PURE__ */ React__default["default"].createElement(CollectionUpdatePage, null)
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "/admin/collections/:collectionName",
+          element: /* @__PURE__ */ React__default["default"].createElement(CollectionListPage, null)
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "/admin",
+          element: /* @__PURE__ */ React__default["default"].createElement(DashboardPage, null)
+        }))))));
+      } else {
+        return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "/admin/logout",
+          element: /* @__PURE__ */ React__default["default"].createElement(LogoutPage, null)
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "/admin",
+          element: /* @__PURE__ */ React__default["default"].createElement(Redirect, null)
+        }))));
+      }
+    });
   };
   class RouteMappingPlugin {
     constructor(mapper) {