@payloadcms/next 3.0.0-canary.cee5702 → 3.0.0-canary.cf66341

package/dist/views/LivePreview/index.d.ts

@@ -1,4 +1,4 @@
-import type { EditViewComponent } from 'payload/types';
+import type { EditViewComponent, PayloadServerReactComponent } from 'payload';
 import './index.scss';
-export declare const LivePreviewView: EditViewComponent;
+export declare const LivePreviewView: PayloadServerReactComponent<EditViewComponent>;
 //# sourceMappingURL=index.d.ts.map

package/dist/views/LivePreview/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAc,MAAM,eAAe,CAAA;AAMlE,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,eAAe,EAAE,iBAgF7B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EAEjB,2BAA2B,EAE5B,MAAM,SAAS,CAAA;AAMhB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,eAAe,EAAE,2BAA2B,CAAC,iBAAiB,CAgF1E,CAAA"}

package/dist/views/LivePreview/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/LivePreview/index.tsx"],"sourcesContent":["import type { LivePreviewConfig } from 'payload/config'\nimport type { EditViewComponent, TypeWithID } from 'payload/types'\n\nimport { notFound } from 'next/navigation.js'\nimport React from 'react'\n\nimport { LivePreviewClient } from './index.client.js'\nimport './index.scss'\n\nexport const LivePreviewView: EditViewComponent = async (props) => {\n  const { initPageResult } = props\n\n  const {\n    collectionConfig,\n    docID,\n    globalConfig,\n    locale,\n    req: {\n      payload: {\n        config: {\n          admin: { livePreview: topLevelLivePreviewConfig },\n        },\n      } = {},\n    } = {},\n  } = initPageResult\n\n  let data: TypeWithID\n\n  try {\n    if (collectionConfig) {\n      data = await initPageResult.req.payload.findByID({\n        id: docID,\n        collection: collectionConfig.slug,\n        depth: 0,\n        draft: true,\n        fallbackLocale: null,\n      })\n    }\n\n    if (globalConfig) {\n      data = await initPageResult.req.payload.findGlobal({\n        slug: globalConfig.slug,\n        depth: 0,\n        draft: true,\n        fallbackLocale: null,\n      })\n    }\n  } catch (error) {\n    notFound()\n  }\n\n  let livePreviewConfig: LivePreviewConfig = topLevelLivePreviewConfig\n\n  if (collectionConfig) {\n    livePreviewConfig = {\n      ...(livePreviewConfig || {}),\n      ...(collectionConfig.admin.livePreview || {}),\n    }\n  }\n\n  if (globalConfig) {\n    livePreviewConfig = {\n      ...(livePreviewConfig || {}),\n      ...(globalConfig.admin.livePreview || {}),\n    }\n  }\n\n  const breakpoints: LivePreviewConfig['breakpoints'] = [\n    ...(livePreviewConfig?.breakpoints || []),\n    {\n      name: 'responsive',\n      height: '100%',\n      label: 'Responsive',\n      width: '100%',\n    },\n  ]\n\n  const url =\n    typeof livePreviewConfig?.url === 'function'\n      ? await livePreviewConfig.url({\n          collectionConfig,\n          data,\n          globalConfig,\n          locale,\n          payload: initPageResult.req.payload,\n        })\n      : livePreviewConfig?.url\n\n  return <LivePreviewClient breakpoints={breakpoints} initialData={data} url={url} />\n}\n"],"names":["notFound","React","LivePreviewClient","LivePreviewView","props","initPageResult","collectionConfig","docID","globalConfig","locale","req","payload","config","admin","livePreview","topLevelLivePreviewConfig","data","findByID","id","collection","slug","depth","draft","fallbackLocale","findGlobal","error","livePreviewConfig","breakpoints","name","height","label","width","url","initialData"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAGA,SAASA,QAAQ,QAAQ,qBAAoB;AAC7C,OAAOC,WAAW,QAAO;AAEzB,SAASC,iBAAiB,QAAQ,oBAAmB;AAGrD,OAAO,MAAMC,kBAAqC,OAAOC;IACvD,MAAM,EAAEC,cAAc,EAAE,GAAGD;IAE3B,MAAM,EACJE,gBAAgB,EAChBC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,KAAK,EACHC,SAAS,EACPC,QAAQ,EACNC,OAAO,EAAEC,aAAaC,yBAAyB,EAAE,EAClD,EACF,GAAG,CAAC,CAAC,EACP,GAAG,CAAC,CAAC,EACP,GAAGV;IAEJ,IAAIW;IAEJ,IAAI;QACF,IAAIV,kBAAkB;YACpBU,OAAO,MAAMX,eAAeK,GAAG,CAACC,OAAO,CAACM,QAAQ,CAAC;gBAC/CC,IAAIX;gBACJY,YAAYb,iBAAiBc,IAAI;gBACjCC,OAAO;gBACPC,OAAO;gBACPC,gBAAgB;YAClB;QACF;QAEA,IAAIf,cAAc;YAChBQ,OAAO,MAAMX,eAAeK,GAAG,CAACC,OAAO,CAACa,UAAU,CAAC;gBACjDJ,MAAMZ,aAAaY,IAAI;gBACvBC,OAAO;gBACPC,OAAO;gBACPC,gBAAgB;YAClB;QACF;IACF,EAAE,OAAOE,OAAO;QACdzB;IACF;IAEA,IAAI0B,oBAAuCX;IAE3C,IAAIT,kBAAkB;QACpBoB,oBAAoB;YAClB,GAAIA,qBAAqB,CAAC,CAAC;YAC3B,GAAIpB,iBAAiBO,KAAK,CAACC,WAAW,IAAI,CAAC,CAAC;QAC9C;IACF;IAEA,IAAIN,cAAc;QAChBkB,oBAAoB;YAClB,GAAIA,qBAAqB,CAAC,CAAC;YAC3B,GAAIlB,aAAaK,KAAK,CAACC,WAAW,IAAI,CAAC,CAAC;QAC1C;IACF;IAEA,MAAMa,cAAgD;WAChDD,mBAAmBC,eAAe,EAAE;QACxC;YACEC,MAAM;YACNC,QAAQ;YACRC,OAAO;YACPC,OAAO;QACT;KACD;IAED,MAAMC,MACJ,OAAON,mBAAmBM,QAAQ,aAC9B,MAAMN,kBAAkBM,GAAG,CAAC;QAC1B1B;QACAU;QACAR;QACAC;QACAE,SAASN,eAAeK,GAAG,CAACC,OAAO;IACrC,KACAe,mBAAmBM;IAEzB,qBAAO,KAAC9B;QAAkByB,aAAaA;QAAaM,aAAajB;QAAMgB,KAAKA;;AAC9E,EAAC"}
+{"version":3,"sources":["../../../src/views/LivePreview/index.tsx"],"sourcesContent":["import type {\n  EditViewComponent,\n  LivePreviewConfig,\n  PayloadServerReactComponent,\n  TypeWithID,\n} from 'payload'\n\nimport { notFound } from 'next/navigation.js'\nimport React from 'react'\n\nimport { LivePreviewClient } from './index.client.js'\nimport './index.scss'\n\nexport const LivePreviewView: PayloadServerReactComponent<EditViewComponent> = async (props) => {\n  const { initPageResult } = props\n\n  const {\n    collectionConfig,\n    docID,\n    globalConfig,\n    locale,\n    req: {\n      payload: {\n        config: {\n          admin: { livePreview: topLevelLivePreviewConfig },\n        },\n      } = {},\n    } = {},\n  } = initPageResult\n\n  let data: Record<string, unknown> | TypeWithID\n\n  try {\n    if (collectionConfig) {\n      data = await initPageResult.req.payload.findByID({\n        id: docID,\n        collection: collectionConfig.slug,\n        depth: 0,\n        draft: true,\n        fallbackLocale: null,\n      })\n    }\n\n    if (globalConfig) {\n      data = await initPageResult.req.payload.findGlobal({\n        slug: globalConfig.slug,\n        depth: 0,\n        draft: true,\n        fallbackLocale: null,\n      })\n    }\n  } catch (error) {\n    notFound()\n  }\n\n  let livePreviewConfig: LivePreviewConfig = topLevelLivePreviewConfig\n\n  if (collectionConfig) {\n    livePreviewConfig = {\n      ...(livePreviewConfig || {}),\n      ...(collectionConfig.admin.livePreview || {}),\n    }\n  }\n\n  if (globalConfig) {\n    livePreviewConfig = {\n      ...(livePreviewConfig || {}),\n      ...(globalConfig.admin.livePreview || {}),\n    }\n  }\n\n  const breakpoints: LivePreviewConfig['breakpoints'] = [\n    ...(livePreviewConfig?.breakpoints || []),\n    {\n      name: 'responsive',\n      height: '100%',\n      label: 'Responsive',\n      width: '100%',\n    },\n  ]\n\n  const url =\n    typeof livePreviewConfig?.url === 'function'\n      ? await livePreviewConfig.url({\n          collectionConfig,\n          data,\n          globalConfig,\n          locale,\n          payload: initPageResult.req.payload,\n        })\n      : livePreviewConfig?.url\n\n  return <LivePreviewClient breakpoints={breakpoints} initialData={data} url={url} />\n}\n"],"names":["notFound","React","LivePreviewClient","LivePreviewView","props","initPageResult","collectionConfig","docID","globalConfig","locale","req","payload","config","admin","livePreview","topLevelLivePreviewConfig","data","findByID","id","collection","slug","depth","draft","fallbackLocale","findGlobal","error","livePreviewConfig","breakpoints","name","height","label","width","url","initialData"],"mappings":";AAOA,SAASA,QAAQ,QAAQ,qBAAoB;AAC7C,OAAOC,WAAW,QAAO;AAEzB,SAASC,iBAAiB,QAAQ,oBAAmB;AAGrD,OAAO,MAAMC,kBAAkE,OAAOC;IACpF,MAAM,EAAEC,cAAc,EAAE,GAAGD;IAE3B,MAAM,EACJE,gBAAgB,EAChBC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,KAAK,EACHC,SAAS,EACPC,QAAQ,EACNC,OAAO,EAAEC,aAAaC,yBAAyB,EAAE,EAClD,EACF,GAAG,CAAC,CAAC,EACP,GAAG,CAAC,CAAC,EACP,GAAGV;IAEJ,IAAIW;IAEJ,IAAI;QACF,IAAIV,kBAAkB;YACpBU,OAAO,MAAMX,eAAeK,GAAG,CAACC,OAAO,CAACM,QAAQ,CAAC;gBAC/CC,IAAIX;gBACJY,YAAYb,iBAAiBc,IAAI;gBACjCC,OAAO;gBACPC,OAAO;gBACPC,gBAAgB;YAClB;QACF;QAEA,IAAIf,cAAc;YAChBQ,OAAO,MAAMX,eAAeK,GAAG,CAACC,OAAO,CAACa,UAAU,CAAC;gBACjDJ,MAAMZ,aAAaY,IAAI;gBACvBC,OAAO;gBACPC,OAAO;gBACPC,gBAAgB;YAClB;QACF;IACF,EAAE,OAAOE,OAAO;QACdzB;IACF;IAEA,IAAI0B,oBAAuCX;IAE3C,IAAIT,kBAAkB;QACpBoB,oBAAoB;YAClB,GAAIA,qBAAqB,CAAC,CAAC;YAC3B,GAAIpB,iBAAiBO,KAAK,CAACC,WAAW,IAAI,CAAC,CAAC;QAC9C;IACF;IAEA,IAAIN,cAAc;QAChBkB,oBAAoB;YAClB,GAAIA,qBAAqB,CAAC,CAAC;YAC3B,GAAIlB,aAAaK,KAAK,CAACC,WAAW,IAAI,CAAC,CAAC;QAC1C;IACF;IAEA,MAAMa,cAAgD;WAChDD,mBAAmBC,eAAe,EAAE;QACxC;YACEC,MAAM;YACNC,QAAQ;YACRC,OAAO;YACPC,OAAO;QACT;KACD;IAED,MAAMC,MACJ,OAAON,mBAAmBM,QAAQ,aAC9B,MAAMN,kBAAkBM,GAAG,CAAC;QAC1B1B;QACAU;QACAR;QACAC;QACAE,SAASN,eAAeK,GAAG,CAACC,OAAO;IACrC,KACAe,mBAAmBM;IAEzB,qBAAO,KAAC9B;QAAkByB,aAAaA;QAAaM,aAAajB;QAAMgB,KAAKA;;AAC9E,EAAC"}

package/dist/views/LivePreview/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/meta.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAA;AAI/E,eAAO,MAAM,gBAAgB,EAAE,wBAa3B,CAAA"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/meta.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAA;AAI/E,eAAO,MAAM,gBAAgB,EAAE,wBAc3B,CAAA"}

package/dist/views/LivePreview/meta.js

@@ -4,7 +4,8 @@ export const generateMetadata = async ({ collectionConfig, config, globalConfig,
         config,
         globalConfig,
         i18n,
-        isEditing
+        isEditing,
+        view: 'livePreview'
     });
 
 //# sourceMappingURL=meta.js.map

package/dist/views/LivePreview/meta.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/LivePreview/meta.ts"],"sourcesContent":["import type { Metadata } from 'next'\n\nimport type { GenerateEditViewMetadata } from '../Document/getMetaBySegment.js'\n\nimport { generateMetadata as generateDocumentMetadata } from '../Edit/meta.js'\n\nexport const generateMetadata: GenerateEditViewMetadata = async ({\n  collectionConfig,\n  config,\n  globalConfig,\n  i18n,\n  isEditing,\n}): Promise<Metadata> =>\n  generateDocumentMetadata({\n    collectionConfig,\n    config,\n    globalConfig,\n    i18n,\n    isEditing,\n  })\n"],"names":["generateMetadata","generateDocumentMetadata","collectionConfig","config","globalConfig","i18n","isEditing"],"rangeMappings":";;;;;;;","mappings":"AAIA,SAASA,oBAAoBC,wBAAwB,QAAQ,kBAAiB;AAE9E,OAAO,MAAMD,mBAA6C,OAAO,EAC/DE,gBAAgB,EAChBC,MAAM,EACNC,YAAY,EACZC,IAAI,EACJC,SAAS,EACV,GACCL,yBAAyB;QACvBC;QACAC;QACAC;QACAC;QACAC;IACF,GAAE"}
+{"version":3,"sources":["../../../src/views/LivePreview/meta.ts"],"sourcesContent":["import type { Metadata } from 'next'\n\nimport type { GenerateEditViewMetadata } from '../Document/getMetaBySegment.js'\n\nimport { generateMetadata as generateDocumentMetadata } from '../Edit/meta.js'\n\nexport const generateMetadata: GenerateEditViewMetadata = async ({\n  collectionConfig,\n  config,\n  globalConfig,\n  i18n,\n  isEditing,\n}): Promise<Metadata> =>\n  generateDocumentMetadata({\n    collectionConfig,\n    config,\n    globalConfig,\n    i18n,\n    isEditing,\n    view: 'livePreview',\n  })\n"],"names":["generateMetadata","generateDocumentMetadata","collectionConfig","config","globalConfig","i18n","isEditing","view"],"mappings":"AAIA,SAASA,oBAAoBC,wBAAwB,QAAQ,kBAAiB;AAE9E,OAAO,MAAMD,mBAA6C,OAAO,EAC/DE,gBAAgB,EAChBC,MAAM,EACNC,YAAY,EACZC,IAAI,EACJC,SAAS,EACV,GACCL,yBAAyB;QACvBC;QACAC;QACAC;QACAC;QACAC;QACAC,MAAM;IACR,GAAE"}

package/dist/views/LivePreview/usePopupWindow.d.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 export interface PopupMessage {
     searchParams: {
         [key: string]: string | undefined;
@@ -9,11 +10,11 @@ export interface PopupMessage {
 }
 export declare const usePopupWindow: (props: {
     eventType?: string;
-    onMessage?: (searchParams: PopupMessage['searchParams']) => Promise<void>;
+    onMessage?: (searchParams: PopupMessage["searchParams"]) => Promise<void>;
     url: string;
 }) => {
     isPopupOpen: boolean;
     openPopupWindow: () => void;
-    popupRef?: React.MutableRefObject<Window | null>;
+    popupRef?: React.RefObject<Window | null>;
 };
 //# sourceMappingURL=usePopupWindow.d.ts.map

package/dist/views/LivePreview/usePopupWindow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupWindow.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/usePopupWindow.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IAC3B,YAAY,EAAE;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;QACjC,IAAI,EAAE,MAAM,CAAA;QACZ,eAAe,EAAE,MAAM,CAAA;QACvB,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,IAAI,EAAE,MAAM,CAAA;CACb;AAED,eAAO,MAAM,cAAc,UAAW;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAA;IACzE,GAAG,EAAE,MAAM,CAAA;CACZ,KAAG;IACF,WAAW,EAAE,OAAO,CAAA;IACpB,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;CAiHjD,CAAA"}
+{"version":3,"file":"usePopupWindow.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/usePopupWindow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,YAAY;IAC3B,YAAY,EAAE;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;QACjC,IAAI,EAAE,MAAM,CAAA;QACZ,eAAe,EAAE,MAAM,CAAA;QACvB,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,IAAI,EAAE,MAAM,CAAA;CACb;AAED,eAAO,MAAM,cAAc,UAAW;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACzE,GAAG,EAAE,MAAM,CAAA;CACZ,KAAG;IACF,WAAW,EAAE,OAAO,CAAA;IACpB,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;CAmH1C,CAAA"}

package/dist/views/LivePreview/usePopupWindow.js

@@ -1,11 +1,11 @@
 'use client';
-import { useConfig } from '@payloadcms/ui/providers/Config';
+import { useConfig } from '@payloadcms/ui';
 import { useCallback, useEffect, useRef, useState } from 'react';
 export const usePopupWindow = (props)=>{
     const { eventType, onMessage, url } = props;
     const isReceivingMessage = useRef(false);
     const [isOpen, setIsOpen] = useState(false);
-    const { serverURL } = useConfig();
+    const { config: { serverURL } } = useConfig();
     const popupRef = useRef(null);
     // Optionally broadcast messages back out to the parent component
     useEffect(()=>{

package/dist/views/LivePreview/usePopupWindow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/LivePreview/usePopupWindow.ts"],"sourcesContent":["'use client'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nexport interface PopupMessage {\n  searchParams: {\n    [key: string]: string | undefined\n    code: string\n    installation_id: string\n    state: string\n  }\n  type: string\n}\n\nexport const usePopupWindow = (props: {\n  eventType?: string\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onMessage?: (searchParams: PopupMessage['searchParams']) => Promise<void>\n  url: string\n}): {\n  isPopupOpen: boolean\n  openPopupWindow: () => void\n  popupRef?: React.MutableRefObject<Window | null>\n} => {\n  const { eventType, onMessage, url } = props\n  const isReceivingMessage = useRef(false)\n  const [isOpen, setIsOpen] = useState(false)\n  const { serverURL } = useConfig()\n  const popupRef = useRef<Window | null>(null)\n\n  // Optionally broadcast messages back out to the parent component\n  useEffect(() => {\n    const receiveMessage = async (event: MessageEvent): Promise<void> => {\n      if (\n        event.origin !== window.location.origin ||\n        event.origin !== url ||\n        event.origin !== serverURL\n      ) {\n        // console.warn(`Message received by ${event.origin}; IGNORED.`) // eslint-disable-line no-console\n        return\n      }\n\n      if (\n        typeof onMessage === 'function' &&\n        event.data?.type === eventType &&\n        !isReceivingMessage.current\n      ) {\n        isReceivingMessage.current = true\n        await onMessage(event.data?.searchParams)\n        isReceivingMessage.current = false\n      }\n    }\n\n    if (isOpen && popupRef.current) {\n      window.addEventListener('message', receiveMessage, false)\n    }\n\n    return () => {\n      window.removeEventListener('message', receiveMessage)\n    }\n  }, [onMessage, eventType, url, serverURL, isOpen])\n\n  // Customize the size, position, and style of the popup window\n  const openPopupWindow = useCallback(\n    (e?: MouseEvent) => {\n      if (e) {\n        e.preventDefault()\n      }\n\n      const features = {\n        height: 700,\n        left: 'auto',\n        menubar: 'no',\n        popup: 'yes',\n        toolbar: 'no',\n        top: 'auto',\n        width: 800,\n      }\n\n      const popupOptions = Object.entries(features)\n        .reduce((str, [key, value]) => {\n          let strCopy = str\n          if (value === 'auto') {\n            if (key === 'top') {\n              const v = Math.round(window.innerHeight / 2 - features.height / 2)\n              strCopy += `top=${v},`\n            } else if (key === 'left') {\n              const v = Math.round(window.innerWidth / 2 - features.width / 2)\n              strCopy += `left=${v},`\n            }\n            return strCopy\n          }\n\n          strCopy += `${key}=${value},`\n          return strCopy\n        }, '')\n        .slice(0, -1) // remove last ',' (comma)\n\n      const newWindow = window.open(url, '_blank', popupOptions)\n\n      popupRef.current = newWindow\n\n      setIsOpen(true)\n    },\n    [url],\n  )\n\n  // this is the most stable and widely supported way to check if a popup window is no longer open\n  // we poll its ref every x ms and use the popup window's `closed` property\n  useEffect(() => {\n    let timer: NodeJS.Timeout\n\n    if (isOpen) {\n      timer = setInterval(function () {\n        if (popupRef.current.closed) {\n          clearInterval(timer)\n          setIsOpen(false)\n        }\n      }, 1000)\n    } else {\n      clearInterval(timer)\n    }\n\n    return () => {\n      if (timer) {\n        clearInterval(timer)\n      }\n    }\n  }, [isOpen, popupRef])\n\n  return {\n    isPopupOpen: isOpen,\n    openPopupWindow,\n    popupRef,\n  }\n}\n"],"names":["useConfig","useCallback","useEffect","useRef","useState","usePopupWindow","props","eventType","onMessage","url","isReceivingMessage","isOpen","setIsOpen","serverURL","popupRef","receiveMessage","event","origin","window","location","data","type","current","searchParams","addEventListener","removeEventListener","openPopupWindow","e","preventDefault","features","height","left","menubar","popup","toolbar","top","width","popupOptions","Object","entries","reduce","str","key","value","strCopy","v","Math","round","innerHeight","innerWidth","slice","newWindow","open","timer","setInterval","closed","clearInterval","isPopupOpen"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAYhE,OAAO,MAAMC,iBAAiB,CAACC;IAU7B,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,GAAG,EAAE,GAAGH;IACtC,MAAMI,qBAAqBP,OAAO;IAClC,MAAM,CAACQ,QAAQC,UAAU,GAAGR,SAAS;IACrC,MAAM,EAAES,SAAS,EAAE,GAAGb;IACtB,MAAMc,WAAWX,OAAsB;IAEvC,iEAAiE;IACjED,UAAU;QACR,MAAMa,iBAAiB,OAAOC;YAC5B,IACEA,MAAMC,MAAM,KAAKC,OAAOC,QAAQ,CAACF,MAAM,IACvCD,MAAMC,MAAM,KAAKR,OACjBO,MAAMC,MAAM,KAAKJ,WACjB;gBACA,kGAAkG;gBAClG;YACF;YAEA,IACE,OAAOL,cAAc,cACrBQ,MAAMI,IAAI,EAAEC,SAASd,aACrB,CAACG,mBAAmBY,OAAO,EAC3B;gBACAZ,mBAAmBY,OAAO,GAAG;gBAC7B,MAAMd,UAAUQ,MAAMI,IAAI,EAAEG;gBAC5Bb,mBAAmBY,OAAO,GAAG;YAC/B;QACF;QAEA,IAAIX,UAAUG,SAASQ,OAAO,EAAE;YAC9BJ,OAAOM,gBAAgB,CAAC,WAAWT,gBAAgB;QACrD;QAEA,OAAO;YACLG,OAAOO,mBAAmB,CAAC,WAAWV;QACxC;IACF,GAAG;QAACP;QAAWD;QAAWE;QAAKI;QAAWF;KAAO;IAEjD,8DAA8D;IAC9D,MAAMe,kBAAkBzB,YACtB,CAAC0B;QACC,IAAIA,GAAG;YACLA,EAAEC,cAAc;QAClB;QAEA,MAAMC,WAAW;YACfC,QAAQ;YACRC,MAAM;YACNC,SAAS;YACTC,OAAO;YACPC,SAAS;YACTC,KAAK;YACLC,OAAO;QACT;QAEA,MAAMC,eAAeC,OAAOC,OAAO,CAACV,UACjCW,MAAM,CAAC,CAACC,KAAK,CAACC,KAAKC,MAAM;YACxB,IAAIC,UAAUH;YACd,IAAIE,UAAU,QAAQ;gBACpB,IAAID,QAAQ,OAAO;oBACjB,MAAMG,IAAIC,KAAKC,KAAK,CAAC7B,OAAO8B,WAAW,GAAG,IAAInB,SAASC,MAAM,GAAG;oBAChEc,WAAW,CAAC,IAAI,EAAEC,EAAE,CAAC,CAAC;gBACxB,OAAO,IAAIH,QAAQ,QAAQ;oBACzB,MAAMG,IAAIC,KAAKC,KAAK,CAAC7B,OAAO+B,UAAU,GAAG,IAAIpB,SAASO,KAAK,GAAG;oBAC9DQ,WAAW,CAAC,KAAK,EAAEC,EAAE,CAAC,CAAC;gBACzB;gBACA,OAAOD;YACT;YAEAA,WAAW,CAAC,EAAEF,IAAI,CAAC,EAAEC,MAAM,CAAC,CAAC;YAC7B,OAAOC;QACT,GAAG,IACFM,KAAK,CAAC,GAAG,CAAC,GAAG,0BAA0B;;QAE1C,MAAMC,YAAYjC,OAAOkC,IAAI,CAAC3C,KAAK,UAAU4B;QAE7CvB,SAASQ,OAAO,GAAG6B;QAEnBvC,UAAU;IACZ,GACA;QAACH;KAAI;IAGP,gGAAgG;IAChG,0EAA0E;IAC1EP,UAAU;QACR,IAAImD;QAEJ,IAAI1C,QAAQ;YACV0C,QAAQC,YAAY;gBAClB,IAAIxC,SAASQ,OAAO,CAACiC,MAAM,EAAE;oBAC3BC,cAAcH;oBACdzC,UAAU;gBACZ;YACF,GAAG;QACL,OAAO;YACL4C,cAAcH;QAChB;QAEA,OAAO;YACL,IAAIA,OAAO;gBACTG,cAAcH;YAChB;QACF;IACF,GAAG;QAAC1C;QAAQG;KAAS;IAErB,OAAO;QACL2C,aAAa9C;QACbe;QACAZ;IACF;AACF,EAAC"}
+{"version":3,"sources":["../../../src/views/LivePreview/usePopupWindow.ts"],"sourcesContent":["'use client'\nimport type React from 'react'\n\nimport { useConfig } from '@payloadcms/ui'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nexport interface PopupMessage {\n  searchParams: {\n    [key: string]: string | undefined\n    code: string\n    installation_id: string\n    state: string\n  }\n  type: string\n}\n\nexport const usePopupWindow = (props: {\n  eventType?: string\n\n  onMessage?: (searchParams: PopupMessage['searchParams']) => Promise<void>\n  url: string\n}): {\n  isPopupOpen: boolean\n  openPopupWindow: () => void\n  popupRef?: React.RefObject<Window | null>\n} => {\n  const { eventType, onMessage, url } = props\n  const isReceivingMessage = useRef(false)\n  const [isOpen, setIsOpen] = useState(false)\n  const {\n    config: { serverURL },\n  } = useConfig()\n  const popupRef = useRef<Window | null>(null)\n\n  // Optionally broadcast messages back out to the parent component\n  useEffect(() => {\n    const receiveMessage = async (event: MessageEvent): Promise<void> => {\n      if (\n        event.origin !== window.location.origin ||\n        event.origin !== url ||\n        event.origin !== serverURL\n      ) {\n        // console.warn(`Message received by ${event.origin}; IGNORED.`) // eslint-disable-line no-console\n        return\n      }\n\n      if (\n        typeof onMessage === 'function' &&\n        event.data?.type === eventType &&\n        !isReceivingMessage.current\n      ) {\n        isReceivingMessage.current = true\n        await onMessage(event.data?.searchParams)\n        isReceivingMessage.current = false\n      }\n    }\n\n    if (isOpen && popupRef.current) {\n      window.addEventListener('message', receiveMessage, false)\n    }\n\n    return () => {\n      window.removeEventListener('message', receiveMessage)\n    }\n  }, [onMessage, eventType, url, serverURL, isOpen])\n\n  // Customize the size, position, and style of the popup window\n  const openPopupWindow = useCallback(\n    (e?: MouseEvent) => {\n      if (e) {\n        e.preventDefault()\n      }\n\n      const features = {\n        height: 700,\n        left: 'auto',\n        menubar: 'no',\n        popup: 'yes',\n        toolbar: 'no',\n        top: 'auto',\n        width: 800,\n      }\n\n      const popupOptions = Object.entries(features)\n        .reduce((str, [key, value]) => {\n          let strCopy = str\n          if (value === 'auto') {\n            if (key === 'top') {\n              const v = Math.round(window.innerHeight / 2 - features.height / 2)\n              strCopy += `top=${v},`\n            } else if (key === 'left') {\n              const v = Math.round(window.innerWidth / 2 - features.width / 2)\n              strCopy += `left=${v},`\n            }\n            return strCopy\n          }\n\n          strCopy += `${key}=${value},`\n          return strCopy\n        }, '')\n        .slice(0, -1) // remove last ',' (comma)\n\n      const newWindow = window.open(url, '_blank', popupOptions)\n\n      popupRef.current = newWindow\n\n      setIsOpen(true)\n    },\n    [url],\n  )\n\n  // this is the most stable and widely supported way to check if a popup window is no longer open\n  // we poll its ref every x ms and use the popup window's `closed` property\n  useEffect(() => {\n    let timer: NodeJS.Timeout\n\n    if (isOpen) {\n      timer = setInterval(function () {\n        if (popupRef.current.closed) {\n          clearInterval(timer)\n          setIsOpen(false)\n        }\n      }, 1000)\n    } else {\n      clearInterval(timer)\n    }\n\n    return () => {\n      if (timer) {\n        clearInterval(timer)\n      }\n    }\n  }, [isOpen, popupRef])\n\n  return {\n    isPopupOpen: isOpen,\n    openPopupWindow,\n    popupRef,\n  }\n}\n"],"names":["useConfig","useCallback","useEffect","useRef","useState","usePopupWindow","props","eventType","onMessage","url","isReceivingMessage","isOpen","setIsOpen","config","serverURL","popupRef","receiveMessage","event","origin","window","location","data","type","current","searchParams","addEventListener","removeEventListener","openPopupWindow","e","preventDefault","features","height","left","menubar","popup","toolbar","top","width","popupOptions","Object","entries","reduce","str","key","value","strCopy","v","Math","round","innerHeight","innerWidth","slice","newWindow","open","timer","setInterval","closed","clearInterval","isPopupOpen"],"mappings":"AAAA;AAGA,SAASA,SAAS,QAAQ,iBAAgB;AAC1C,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAYhE,OAAO,MAAMC,iBAAiB,CAACC;IAU7B,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,GAAG,EAAE,GAAGH;IACtC,MAAMI,qBAAqBP,OAAO;IAClC,MAAM,CAACQ,QAAQC,UAAU,GAAGR,SAAS;IACrC,MAAM,EACJS,QAAQ,EAAEC,SAAS,EAAE,EACtB,GAAGd;IACJ,MAAMe,WAAWZ,OAAsB;IAEvC,iEAAiE;IACjED,UAAU;QACR,MAAMc,iBAAiB,OAAOC;YAC5B,IACEA,MAAMC,MAAM,KAAKC,OAAOC,QAAQ,CAACF,MAAM,IACvCD,MAAMC,MAAM,KAAKT,OACjBQ,MAAMC,MAAM,KAAKJ,WACjB;gBACA,kGAAkG;gBAClG;YACF;YAEA,IACE,OAAON,cAAc,cACrBS,MAAMI,IAAI,EAAEC,SAASf,aACrB,CAACG,mBAAmBa,OAAO,EAC3B;gBACAb,mBAAmBa,OAAO,GAAG;gBAC7B,MAAMf,UAAUS,MAAMI,IAAI,EAAEG;gBAC5Bd,mBAAmBa,OAAO,GAAG;YAC/B;QACF;QAEA,IAAIZ,UAAUI,SAASQ,OAAO,EAAE;YAC9BJ,OAAOM,gBAAgB,CAAC,WAAWT,gBAAgB;QACrD;QAEA,OAAO;YACLG,OAAOO,mBAAmB,CAAC,WAAWV;QACxC;IACF,GAAG;QAACR;QAAWD;QAAWE;QAAKK;QAAWH;KAAO;IAEjD,8DAA8D;IAC9D,MAAMgB,kBAAkB1B,YACtB,CAAC2B;QACC,IAAIA,GAAG;YACLA,EAAEC,cAAc;QAClB;QAEA,MAAMC,WAAW;YACfC,QAAQ;YACRC,MAAM;YACNC,SAAS;YACTC,OAAO;YACPC,SAAS;YACTC,KAAK;YACLC,OAAO;QACT;QAEA,MAAMC,eAAeC,OAAOC,OAAO,CAACV,UACjCW,MAAM,CAAC,CAACC,KAAK,CAACC,KAAKC,MAAM;YACxB,IAAIC,UAAUH;YACd,IAAIE,UAAU,QAAQ;gBACpB,IAAID,QAAQ,OAAO;oBACjB,MAAMG,IAAIC,KAAKC,KAAK,CAAC7B,OAAO8B,WAAW,GAAG,IAAInB,SAASC,MAAM,GAAG;oBAChEc,WAAW,CAAC,IAAI,EAAEC,EAAE,CAAC,CAAC;gBACxB,OAAO,IAAIH,QAAQ,QAAQ;oBACzB,MAAMG,IAAIC,KAAKC,KAAK,CAAC7B,OAAO+B,UAAU,GAAG,IAAIpB,SAASO,KAAK,GAAG;oBAC9DQ,WAAW,CAAC,KAAK,EAAEC,EAAE,CAAC,CAAC;gBACzB;gBACA,OAAOD;YACT;YAEAA,WAAW,CAAC,EAAEF,IAAI,CAAC,EAAEC,MAAM,CAAC,CAAC;YAC7B,OAAOC;QACT,GAAG,IACFM,KAAK,CAAC,GAAG,CAAC,GAAG,0BAA0B;;QAE1C,MAAMC,YAAYjC,OAAOkC,IAAI,CAAC5C,KAAK,UAAU6B;QAE7CvB,SAASQ,OAAO,GAAG6B;QAEnBxC,UAAU;IACZ,GACA;QAACH;KAAI;IAGP,gGAAgG;IAChG,0EAA0E;IAC1EP,UAAU;QACR,IAAIoD;QAEJ,IAAI3C,QAAQ;YACV2C,QAAQC,YAAY;gBAClB,IAAIxC,SAASQ,OAAO,CAACiC,MAAM,EAAE;oBAC3BC,cAAcH;oBACd1C,UAAU;gBACZ;YACF,GAAG;QACL,OAAO;YACL6C,cAAcH;QAChB;QAEA,OAAO;YACL,IAAIA,OAAO;gBACTG,cAAcH;YAChB;QACF;IACF,GAAG;QAAC3C;QAAQI;KAAS;IAErB,OAAO;QACL2C,aAAa/C;QACbgB;QACAZ;IACF;AACF,EAAC"}

package/dist/views/Login/LoginField/index.d.ts

@@ -0,0 +1,9 @@
+import type { Validate } from 'payload';
+import React from 'react';
+export type LoginFieldProps = {
+    readonly required?: boolean;
+    readonly type: 'email' | 'emailOrUsername' | 'username';
+    readonly validate?: Validate;
+};
+export declare const LoginField: React.FC<LoginFieldProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/Login/LoginField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Login/LoginField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAmB,MAAM,SAAS,CAAA;AAIxD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,iBAAiB,GAAG,UAAU,CAAA;IACvD,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwDhD,CAAA"}

package/dist/views/Login/LoginField/index.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmailField, TextField, useTranslation } from '@payloadcms/ui';
+import { email, username } from 'payload/shared';
+import React from 'react';
+export const LoginField = ({ type, required = true })=>{
+    const { t } = useTranslation();
+    if (type === 'email') {
+        return /*#__PURE__*/ _jsx(EmailField, {
+            autoComplete: "email",
+            field: {
+                name: 'email',
+                label: t('general:email'),
+                required
+            },
+            validate: email
+        });
+    }
+    if (type === 'username') {
+        return /*#__PURE__*/ _jsx(TextField, {
+            field: {
+                name: 'username',
+                label: t('authentication:username'),
+                required
+            },
+            validate: username
+        });
+    }
+    if (type === 'emailOrUsername') {
+        return /*#__PURE__*/ _jsx(TextField, {
+            field: {
+                name: 'username',
+                label: t('authentication:emailOrUsername'),
+                required
+            },
+            validate: (value, options)=>{
+                const passesUsername = username(value, options);
+                const passesEmail = email(value, options);
+                if (!passesEmail && !passesUsername) {
+                    return `${t('general:email')}: ${passesEmail} ${t('general:username')}: ${passesUsername}`;
+                }
+                return true;
+            }
+        });
+    }
+    return null;
+};
+
+//# sourceMappingURL=index.js.map

package/dist/views/Login/LoginField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/views/Login/LoginField/index.tsx"],"sourcesContent":["'use client'\nimport type { Validate, ValidateOptions } from 'payload'\n\nimport { EmailField, TextField, useTranslation } from '@payloadcms/ui'\nimport { email, username } from 'payload/shared'\nimport React from 'react'\n\nexport type LoginFieldProps = {\n  readonly required?: boolean\n  readonly type: 'email' | 'emailOrUsername' | 'username'\n  readonly validate?: Validate\n}\n\nexport const LoginField: React.FC<LoginFieldProps> = ({ type, required = true }) => {\n  const { t } = useTranslation()\n\n  if (type === 'email') {\n    return (\n      <EmailField\n        autoComplete=\"email\"\n        field={{\n          name: 'email',\n          label: t('general:email'),\n          required,\n        }}\n        validate={email}\n      />\n    )\n  }\n\n  if (type === 'username') {\n    return (\n      <TextField\n        field={{\n          name: 'username',\n          label: t('authentication:username'),\n          required,\n        }}\n        validate={username}\n      />\n    )\n  }\n\n  if (type === 'emailOrUsername') {\n    return (\n      <TextField\n        field={{\n          name: 'username',\n          label: t('authentication:emailOrUsername'),\n          required,\n        }}\n        validate={(value, options) => {\n          const passesUsername = username(value, options)\n          const passesEmail = email(\n            value,\n            options as ValidateOptions<any, { username?: string }, any, any>,\n          )\n\n          if (!passesEmail && !passesUsername) {\n            return `${t('general:email')}: ${passesEmail} ${t('general:username')}: ${passesUsername}`\n          }\n\n          return true\n        }}\n      />\n    )\n  }\n\n  return null\n}\n"],"names":["EmailField","TextField","useTranslation","email","username","React","LoginField","type","required","t","autoComplete","field","name","label","validate","value","options","passesUsername","passesEmail"],"mappings":"AAAA;;AAGA,SAASA,UAAU,EAAEC,SAAS,EAAEC,cAAc,QAAQ,iBAAgB;AACtE,SAASC,KAAK,EAAEC,QAAQ,QAAQ,iBAAgB;AAChD,OAAOC,WAAW,QAAO;AAQzB,OAAO,MAAMC,aAAwC,CAAC,EAAEC,IAAI,EAAEC,WAAW,IAAI,EAAE;IAC7E,MAAM,EAAEC,CAAC,EAAE,GAAGP;IAEd,IAAIK,SAAS,SAAS;QACpB,qBACE,KAACP;YACCU,cAAa;YACbC,OAAO;gBACLC,MAAM;gBACNC,OAAOJ,EAAE;gBACTD;YACF;YACAM,UAAUX;;IAGhB;IAEA,IAAII,SAAS,YAAY;QACvB,qBACE,KAACN;YACCU,OAAO;gBACLC,MAAM;gBACNC,OAAOJ,EAAE;gBACTD;YACF;YACAM,UAAUV;;IAGhB;IAEA,IAAIG,SAAS,mBAAmB;QAC9B,qBACE,KAACN;YACCU,OAAO;gBACLC,MAAM;gBACNC,OAAOJ,EAAE;gBACTD;YACF;YACAM,UAAU,CAACC,OAAOC;gBAChB,MAAMC,iBAAiBb,SAASW,OAAOC;gBACvC,MAAME,cAAcf,MAClBY,OACAC;gBAGF,IAAI,CAACE,eAAe,CAACD,gBAAgB;oBACnC,OAAO,CAAC,EAAER,EAAE,iBAAiB,EAAE,EAAES,YAAY,CAAC,EAAET,EAAE,oBAAoB,EAAE,EAAEQ,eAAe,CAAC;gBAC5F;gBAEA,OAAO;YACT;;IAGN;IAEA,OAAO;AACT,EAAC"}

package/dist/views/Login/LoginForm/index.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import './index.scss';
 export declare const LoginForm: React.FC<{
+    prefillEmail?: string;
+    prefillPassword?: string;
+    prefillUsername?: string;
     searchParams: {
         [key: string]: string | string[] | undefined;
     };

package/dist/views/Login/LoginForm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Login/LoginForm/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,YAAY,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAA;KAAE,CAAA;CAC/D,CAoFA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Login/LoginForm/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAA;KAAE,CAAA;CAC/D,CA+EA,CAAA"}

package/dist/views/Login/LoginForm/index.js

@@ -4,90 +4,76 @@ import LinkImport from 'next/link.js';
 import React from 'react';
 const baseClass = 'login__form';
 const Link = LinkImport.default || LinkImport;
-import { Email } from '@payloadcms/ui/fields/Email';
-import { Password } from '@payloadcms/ui/fields/Password';
-import { Form } from '@payloadcms/ui/forms/Form';
-import { FormSubmit } from '@payloadcms/ui/forms/Submit';
-import { useConfig } from '@payloadcms/ui/providers/Config';
-import { useTranslation } from '@payloadcms/ui/providers/Translation';
-import { email, password } from 'payload/fields/validations';
-export const LoginForm = ({ searchParams })=>{
-    const config = useConfig();
-    const { admin: { autoLogin, routes: { forgot: forgotRoute }, user: userSlug }, routes: { admin, api } } = config;
+import { Form, FormSubmit, PasswordField, useConfig, useTranslation } from '@payloadcms/ui';
+import { formatAdminURL } from '@payloadcms/ui/shared';
+import { LoginField } from '../LoginField/index.js';
+export const LoginForm = ({ prefillEmail, prefillPassword, prefillUsername, searchParams })=>{
+    const { config } = useConfig();
+    const { admin: { routes: { forgot: forgotRoute }, user: userSlug }, routes: { admin: adminRoute, api: apiRoute } } = config;
+    const collectionConfig = config.collections?.find((collection)=>collection?.slug === userSlug);
+    const { auth: authOptions } = collectionConfig;
+    const loginWithUsername = authOptions.loginWithUsername;
+    const canLoginWithEmail = !authOptions.loginWithUsername || authOptions.loginWithUsername.allowEmailLogin;
+    const canLoginWithUsername = authOptions.loginWithUsername;
+    const [loginType] = React.useState(()=>{
+        if (canLoginWithEmail && canLoginWithUsername) return 'emailOrUsername';
+        if (canLoginWithUsername) return 'username';
+        return 'email';
+    });
     const { t } = useTranslation();
-    const prefillForm = autoLogin && autoLogin.prefillOnly;
     const initialState = {
-        email: {
-            initialValue: prefillForm ? autoLogin.email : undefined,
-            valid: true,
-            value: prefillForm ? autoLogin.email : undefined
-        },
         password: {
-            initialValue: prefillForm ? autoLogin.password : undefined,
+            initialValue: prefillPassword ?? undefined,
             valid: true,
-            value: prefillForm ? autoLogin.password : undefined
+            value: prefillPassword ?? undefined
         }
     };
+    if (loginWithUsername) {
+        initialState.username = {
+            initialValue: prefillUsername ?? undefined,
+            valid: true,
+            value: prefillUsername ?? undefined
+        };
+    } else {
+        initialState.email = {
+            initialValue: prefillEmail ?? undefined,
+            valid: true,
+            value: prefillEmail ?? undefined
+        };
+    }
     return /*#__PURE__*/ _jsxs(Form, {
-        action: `${api}/${userSlug}/login`,
+        action: `${apiRoute}/${userSlug}/login`,
         className: baseClass,
         disableSuccessStatus: true,
         initialState: initialState,
         method: "POST",
-        redirect: typeof searchParams?.redirect === 'string' ? searchParams.redirect : admin,
+        redirect: typeof searchParams?.redirect === 'string' ? searchParams.redirect : adminRoute,
         waitForAutocomplete: true,
         children: [
             /*#__PURE__*/ _jsxs("div", {
                 className: `${baseClass}__inputWrap`,
                 children: [
-                    /*#__PURE__*/ _jsx(Email, {
-                        autoComplete: "email",
-                        label: t('general:email'),
-                        name: "email",
-                        required: true,
-                        validate: (value)=>email(value, {
-                                name: 'email',
-                                type: 'email',
-                                data: {},
-                                preferences: {
-                                    fields: {}
-                                },
-                                req: {
-                                    t
-                                },
-                                required: true,
-                                siblingData: {}
-                            })
+                    /*#__PURE__*/ _jsx(LoginField, {
+                        type: loginType
                     }),
-                    /*#__PURE__*/ _jsx(Password, {
-                        autoComplete: "off",
-                        label: t('general:password'),
-                        name: "password",
-                        required: true,
-                        validate: (value)=>password(value, {
-                                name: 'password',
-                                type: 'text',
-                                data: {},
-                                preferences: {
-                                    fields: {}
-                                },
-                                req: {
-                                    payload: {
-                                        config
-                                    },
-                                    t
-                                },
-                                required: true,
-                                siblingData: {}
-                            })
+                    /*#__PURE__*/ _jsx(PasswordField, {
+                        field: {
+                            name: 'password',
+                            label: t('general:password'),
+                            required: true
+                        }
                     })
                 ]
             }),
             /*#__PURE__*/ _jsx(Link, {
-                href: `${admin}${forgotRoute}`,
+                href: formatAdminURL({
+                    adminRoute,
+                    path: forgotRoute
+                }),
                 children: t('authentication:forgotPasswordQuestion')
             }),
             /*#__PURE__*/ _jsx(FormSubmit, {
+                size: "large",
                 children: t('authentication:login')
             })
         ]

package/dist/views/Login/LoginForm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/Login/LoginForm/index.tsx"],"sourcesContent":["'use client'\n\nimport LinkImport from 'next/link.js'\nimport React from 'react'\n\nconst baseClass = 'login__form'\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nimport type { FormState, PayloadRequestWithData } from 'payload/types'\n\nimport { Email } from '@payloadcms/ui/fields/Email'\nimport { Password } from '@payloadcms/ui/fields/Password'\nimport { Form } from '@payloadcms/ui/forms/Form'\nimport { FormSubmit } from '@payloadcms/ui/forms/Submit'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport { email, password } from 'payload/fields/validations'\n\nimport './index.scss'\n\nexport const LoginForm: React.FC<{\n  searchParams: { [key: string]: string | string[] | undefined }\n}> = ({ searchParams }) => {\n  const config = useConfig()\n\n  const {\n    admin: {\n      autoLogin,\n      routes: { forgot: forgotRoute },\n      user: userSlug,\n    },\n    routes: { admin, api },\n  } = config\n\n  const { t } = useTranslation()\n\n  const prefillForm = autoLogin && autoLogin.prefillOnly\n\n  const initialState: FormState = {\n    email: {\n      initialValue: prefillForm ? autoLogin.email : undefined,\n      valid: true,\n      value: prefillForm ? autoLogin.email : undefined,\n    },\n    password: {\n      initialValue: prefillForm ? autoLogin.password : undefined,\n      valid: true,\n      value: prefillForm ? autoLogin.password : undefined,\n    },\n  }\n\n  return (\n    <Form\n      action={`${api}/${userSlug}/login`}\n      className={baseClass}\n      disableSuccessStatus\n      initialState={initialState}\n      method=\"POST\"\n      redirect={typeof searchParams?.redirect === 'string' ? searchParams.redirect : admin}\n      waitForAutocomplete\n    >\n      <div className={`${baseClass}__inputWrap`}>\n        <Email\n          autoComplete=\"email\"\n          label={t('general:email')}\n          name=\"email\"\n          required\n          validate={(value) =>\n            email(value, {\n              name: 'email',\n              type: 'email',\n              data: {},\n              preferences: { fields: {} },\n              req: { t } as PayloadRequestWithData,\n              required: true,\n              siblingData: {},\n            })\n          }\n        />\n        <Password\n          autoComplete=\"off\"\n          label={t('general:password')}\n          name=\"password\"\n          required\n          validate={(value) =>\n            password(value, {\n              name: 'password',\n              type: 'text',\n              data: {},\n              preferences: { fields: {} },\n              req: {\n                payload: {\n                  config,\n                },\n                t,\n              } as PayloadRequestWithData,\n              required: true,\n              siblingData: {},\n            })\n          }\n        />\n      </div>\n      <Link href={`${admin}${forgotRoute}`}>{t('authentication:forgotPasswordQuestion')}</Link>\n      <FormSubmit>{t('authentication:login')}</FormSubmit>\n    </Form>\n  )\n}\n"],"names":["LinkImport","React","baseClass","Link","default","Email","Password","Form","FormSubmit","useConfig","useTranslation","email","password","LoginForm","searchParams","config","admin","autoLogin","routes","forgot","forgotRoute","user","userSlug","api","t","prefillForm","prefillOnly","initialState","initialValue","undefined","valid","value","action","className","disableSuccessStatus","method","redirect","waitForAutocomplete","div","autoComplete","label","name","required","validate","type","data","preferences","fields","req","siblingData","payload","href"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,OAAOA,gBAAgB,eAAc;AACrC,OAAOC,WAAW,QAAO;AAEzB,MAAMC,YAAY;AAClB,MAAMC,OAAQH,WAAWI,OAAO,IAAIJ;AAIpC,SAASK,KAAK,QAAQ,8BAA6B;AACnD,SAASC,QAAQ,QAAQ,iCAAgC;AACzD,SAASC,IAAI,QAAQ,4BAA2B;AAChD,SAASC,UAAU,QAAQ,8BAA6B;AACxD,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,KAAK,EAAEC,QAAQ,QAAQ,6BAA4B;AAI5D,OAAO,MAAMC,YAER,CAAC,EAAEC,YAAY,EAAE;IACpB,MAAMC,SAASN;IAEf,MAAM,EACJO,OAAO,EACLC,SAAS,EACTC,QAAQ,EAAEC,QAAQC,WAAW,EAAE,EAC/BC,MAAMC,QAAQ,EACf,EACDJ,QAAQ,EAAEF,KAAK,EAAEO,GAAG,EAAE,EACvB,GAAGR;IAEJ,MAAM,EAAES,CAAC,EAAE,GAAGd;IAEd,MAAMe,cAAcR,aAAaA,UAAUS,WAAW;IAEtD,MAAMC,eAA0B;QAC9BhB,OAAO;YACLiB,cAAcH,cAAcR,UAAUN,KAAK,GAAGkB;YAC9CC,OAAO;YACPC,OAAON,cAAcR,UAAUN,KAAK,GAAGkB;QACzC;QACAjB,UAAU;YACRgB,cAAcH,cAAcR,UAAUL,QAAQ,GAAGiB;YACjDC,OAAO;YACPC,OAAON,cAAcR,UAAUL,QAAQ,GAAGiB;QAC5C;IACF;IAEA,qBACE,MAACtB;QACCyB,QAAQ,CAAC,EAAET,IAAI,CAAC,EAAED,SAAS,MAAM,CAAC;QAClCW,WAAW/B;QACXgC,oBAAoB;QACpBP,cAAcA;QACdQ,QAAO;QACPC,UAAU,OAAOtB,cAAcsB,aAAa,WAAWtB,aAAasB,QAAQ,GAAGpB;QAC/EqB,mBAAmB;;0BAEnB,MAACC;gBAAIL,WAAW,CAAC,EAAE/B,UAAU,WAAW,CAAC;;kCACvC,KAACG;wBACCkC,cAAa;wBACbC,OAAOhB,EAAE;wBACTiB,MAAK;wBACLC,QAAQ;wBACRC,UAAU,CAACZ,QACTpB,MAAMoB,OAAO;gCACXU,MAAM;gCACNG,MAAM;gCACNC,MAAM,CAAC;gCACPC,aAAa;oCAAEC,QAAQ,CAAC;gCAAE;gCAC1BC,KAAK;oCAAExB;gCAAE;gCACTkB,UAAU;gCACVO,aAAa,CAAC;4BAChB;;kCAGJ,KAAC3C;wBACCiC,cAAa;wBACbC,OAAOhB,EAAE;wBACTiB,MAAK;wBACLC,QAAQ;wBACRC,UAAU,CAACZ,QACTnB,SAASmB,OAAO;gCACdU,MAAM;gCACNG,MAAM;gCACNC,MAAM,CAAC;gCACPC,aAAa;oCAAEC,QAAQ,CAAC;gCAAE;gCAC1BC,KAAK;oCACHE,SAAS;wCACPnC;oCACF;oCACAS;gCACF;gCACAkB,UAAU;gCACVO,aAAa,CAAC;4BAChB;;;;0BAIN,KAAC9C;gBAAKgD,MAAM,CAAC,EAAEnC,MAAM,EAAEI,YAAY,CAAC;0BAAGI,EAAE;;0BACzC,KAAChB;0BAAYgB,EAAE;;;;AAGrB,EAAC"}
+{"version":3,"sources":["../../../../src/views/Login/LoginForm/index.tsx"],"sourcesContent":["'use client'\n\nimport LinkImport from 'next/link.js'\nimport React from 'react'\n\nconst baseClass = 'login__form'\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nimport type { FormState } from 'payload'\n\nimport { Form, FormSubmit, PasswordField, useConfig, useTranslation } from '@payloadcms/ui'\nimport { formatAdminURL } from '@payloadcms/ui/shared'\n\nimport type { LoginFieldProps } from '../LoginField/index.js'\n\nimport { LoginField } from '../LoginField/index.js'\nimport './index.scss'\n\nexport const LoginForm: React.FC<{\n  prefillEmail?: string\n  prefillPassword?: string\n  prefillUsername?: string\n  searchParams: { [key: string]: string | string[] | undefined }\n}> = ({ prefillEmail, prefillPassword, prefillUsername, searchParams }) => {\n  const { config } = useConfig()\n\n  const {\n    admin: {\n      routes: { forgot: forgotRoute },\n      user: userSlug,\n    },\n    routes: { admin: adminRoute, api: apiRoute },\n  } = config\n\n  const collectionConfig = config.collections?.find((collection) => collection?.slug === userSlug)\n  const { auth: authOptions } = collectionConfig\n  const loginWithUsername = authOptions.loginWithUsername\n  const canLoginWithEmail =\n    !authOptions.loginWithUsername || authOptions.loginWithUsername.allowEmailLogin\n  const canLoginWithUsername = authOptions.loginWithUsername\n\n  const [loginType] = React.useState<LoginFieldProps['type']>(() => {\n    if (canLoginWithEmail && canLoginWithUsername) return 'emailOrUsername'\n    if (canLoginWithUsername) return 'username'\n    return 'email'\n  })\n\n  const { t } = useTranslation()\n\n  const initialState: FormState = {\n    password: {\n      initialValue: prefillPassword ?? undefined,\n      valid: true,\n      value: prefillPassword ?? undefined,\n    },\n  }\n\n  if (loginWithUsername) {\n    initialState.username = {\n      initialValue: prefillUsername ?? undefined,\n      valid: true,\n      value: prefillUsername ?? undefined,\n    }\n  } else {\n    initialState.email = {\n      initialValue: prefillEmail ?? undefined,\n      valid: true,\n      value: prefillEmail ?? undefined,\n    }\n  }\n\n  return (\n    <Form\n      action={`${apiRoute}/${userSlug}/login`}\n      className={baseClass}\n      disableSuccessStatus\n      initialState={initialState}\n      method=\"POST\"\n      redirect={typeof searchParams?.redirect === 'string' ? searchParams.redirect : adminRoute}\n      waitForAutocomplete\n    >\n      <div className={`${baseClass}__inputWrap`}>\n        <LoginField type={loginType} />\n        <PasswordField\n          field={{\n            name: 'password',\n            label: t('general:password'),\n            required: true,\n          }}\n        />\n      </div>\n      <Link\n        href={formatAdminURL({\n          adminRoute,\n          path: forgotRoute,\n        })}\n      >\n        {t('authentication:forgotPasswordQuestion')}\n      </Link>\n      <FormSubmit size=\"large\">{t('authentication:login')}</FormSubmit>\n    </Form>\n  )\n}\n"],"names":["LinkImport","React","baseClass","Link","default","Form","FormSubmit","PasswordField","useConfig","useTranslation","formatAdminURL","LoginField","LoginForm","prefillEmail","prefillPassword","prefillUsername","searchParams","config","admin","routes","forgot","forgotRoute","user","userSlug","adminRoute","api","apiRoute","collectionConfig","collections","find","collection","slug","auth","authOptions","loginWithUsername","canLoginWithEmail","allowEmailLogin","canLoginWithUsername","loginType","useState","t","initialState","password","initialValue","undefined","valid","value","username","email","action","className","disableSuccessStatus","method","redirect","waitForAutocomplete","div","type","field","name","label","required","href","path","size"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,eAAc;AACrC,OAAOC,WAAW,QAAO;AAEzB,MAAMC,YAAY;AAClB,MAAMC,OAAQH,WAAWI,OAAO,IAAIJ;AAIpC,SAASK,IAAI,EAAEC,UAAU,EAAEC,aAAa,EAAEC,SAAS,EAAEC,cAAc,QAAQ,iBAAgB;AAC3F,SAASC,cAAc,QAAQ,wBAAuB;AAItD,SAASC,UAAU,QAAQ,yBAAwB;AAGnD,OAAO,MAAMC,YAKR,CAAC,EAAEC,YAAY,EAAEC,eAAe,EAAEC,eAAe,EAAEC,YAAY,EAAE;IACpE,MAAM,EAAEC,MAAM,EAAE,GAAGT;IAEnB,MAAM,EACJU,OAAO,EACLC,QAAQ,EAAEC,QAAQC,WAAW,EAAE,EAC/BC,MAAMC,QAAQ,EACf,EACDJ,QAAQ,EAAED,OAAOM,UAAU,EAAEC,KAAKC,QAAQ,EAAE,EAC7C,GAAGT;IAEJ,MAAMU,mBAAmBV,OAAOW,WAAW,EAAEC,KAAK,CAACC,aAAeA,YAAYC,SAASR;IACvF,MAAM,EAAES,MAAMC,WAAW,EAAE,GAAGN;IAC9B,MAAMO,oBAAoBD,YAAYC,iBAAiB;IACvD,MAAMC,oBACJ,CAACF,YAAYC,iBAAiB,IAAID,YAAYC,iBAAiB,CAACE,eAAe;IACjF,MAAMC,uBAAuBJ,YAAYC,iBAAiB;IAE1D,MAAM,CAACI,UAAU,GAAGrC,MAAMsC,QAAQ,CAA0B;QAC1D,IAAIJ,qBAAqBE,sBAAsB,OAAO;QACtD,IAAIA,sBAAsB,OAAO;QACjC,OAAO;IACT;IAEA,MAAM,EAAEG,CAAC,EAAE,GAAG/B;IAEd,MAAMgC,eAA0B;QAC9BC,UAAU;YACRC,cAAc7B,mBAAmB8B;YACjCC,OAAO;YACPC,OAAOhC,mBAAmB8B;QAC5B;IACF;IAEA,IAAIV,mBAAmB;QACrBO,aAAaM,QAAQ,GAAG;YACtBJ,cAAc5B,mBAAmB6B;YACjCC,OAAO;YACPC,OAAO/B,mBAAmB6B;QAC5B;IACF,OAAO;QACLH,aAAaO,KAAK,GAAG;YACnBL,cAAc9B,gBAAgB+B;YAC9BC,OAAO;YACPC,OAAOjC,gBAAgB+B;QACzB;IACF;IAEA,qBACE,MAACvC;QACC4C,QAAQ,CAAC,EAAEvB,SAAS,CAAC,EAAEH,SAAS,MAAM,CAAC;QACvC2B,WAAWhD;QACXiD,oBAAoB;QACpBV,cAAcA;QACdW,QAAO;QACPC,UAAU,OAAOrC,cAAcqC,aAAa,WAAWrC,aAAaqC,QAAQ,GAAG7B;QAC/E8B,mBAAmB;;0BAEnB,MAACC;gBAAIL,WAAW,CAAC,EAAEhD,UAAU,WAAW,CAAC;;kCACvC,KAACS;wBAAW6C,MAAMlB;;kCAClB,KAAC/B;wBACCkD,OAAO;4BACLC,MAAM;4BACNC,OAAOnB,EAAE;4BACToB,UAAU;wBACZ;;;;0BAGJ,KAACzD;gBACC0D,MAAMnD,eAAe;oBACnBc;oBACAsC,MAAMzC;gBACR;0BAECmB,EAAE;;0BAEL,KAAClC;gBAAWyD,MAAK;0BAASvB,EAAE;;;;AAGlC,EAAC"}

package/dist/views/Login/index.d.ts

@@ -1,4 +1,4 @@
-import type { AdminViewProps } from 'payload/types';
+import type { AdminViewProps } from 'payload';
 import React from 'react';
 import './index.scss';
 export { generateLoginMetadata } from './meta.js';

package/dist/views/Login/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Login/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAKnD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAA;AAEjD,eAAO,MAAM,cAAc,UAAU,CAAA;AAErC,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4E9C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Login/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAI7C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAA;AAEjD,eAAO,MAAM,cAAc,UAAU,CAAA;AAErC,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkF9C,CAAA"}

package/dist/views/Login/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { WithServerSideProps } from '@payloadcms/ui/elements/WithServerSideProps';
-import { Logo } from '@payloadcms/ui/graphics/Logo';
+import { RenderComponent, getCreateMappedComponent } from '@payloadcms/ui/shared';
 import { redirect } from 'next/navigation.js';
 import React, { Fragment } from 'react';
+import { Logo } from '../../elements/Logo/index.js';
 import { LoginForm } from './LoginForm/index.js';
 export { generateLoginMetadata } from './meta.js';
 export const loginBaseClass = 'login';
@@ -10,34 +10,28 @@ export const LoginView = ({ initPageResult, params, searchParams })=>{
     const { locale, permissions, req } = initPageResult;
     const { i18n, payload: { config }, payload, user } = req;
     const { admin: { components: { afterLogin, beforeLogin } = {}, user: userSlug }, collections, routes: { admin } } = config;
-    const BeforeLogins = Array.isArray(beforeLogin) ? beforeLogin.map((Component, i)=>/*#__PURE__*/ _jsx(WithServerSideProps, {
-            Component: Component,
-            serverOnlyProps: {
-                i18n,
-                locale,
-                params,
-                payload,
-                permissions,
-                searchParams,
-                user
-            }
-        }, i)) : null;
-    const AfterLogins = Array.isArray(afterLogin) ? afterLogin.map((Component, i)=>/*#__PURE__*/ _jsx(WithServerSideProps, {
-            Component: Component,
-            serverOnlyProps: {
-                i18n,
-                locale,
-                params,
-                payload,
-                permissions,
-                searchParams,
-                user
-            }
-        }, i)) : null;
+    const createMappedComponent = getCreateMappedComponent({
+        importMap: payload.importMap,
+        serverProps: {
+            i18n,
+            locale,
+            params,
+            payload,
+            permissions,
+            searchParams,
+            user
+        }
+    });
+    const mappedBeforeLogins = createMappedComponent(beforeLogin, undefined, undefined, 'beforeLogin');
+    const mappedAfterLogins = createMappedComponent(afterLogin, undefined, undefined, 'afterLogin');
     if (user) {
         redirect(admin);
     }
     const collectionConfig = collections.find(({ slug })=>slug === userSlug);
+    const prefillAutoLogin = typeof config.admin?.autoLogin === 'object' && config.admin?.autoLogin.prefillOnly;
+    const prefillUsername = prefillAutoLogin && typeof config.admin?.autoLogin === 'object' ? config.admin?.autoLogin.username : undefined;
+    const prefillEmail = prefillAutoLogin && typeof config.admin?.autoLogin === 'object' ? config.admin?.autoLogin.email : undefined;
+    const prefillPassword = prefillAutoLogin && typeof config.admin?.autoLogin === 'object' ? config.admin?.autoLogin.password : undefined;
     return /*#__PURE__*/ _jsxs(Fragment, {
         children: [
             /*#__PURE__*/ _jsx("div", {
@@ -52,11 +46,18 @@ export const LoginView = ({ initPageResult, params, searchParams })=>{
                     user: user
                 })
             }),
-            Array.isArray(BeforeLogins) && BeforeLogins.map((Component)=>Component),
+            /*#__PURE__*/ _jsx(RenderComponent, {
+                mappedComponent: mappedBeforeLogins
+            }),
             !collectionConfig?.auth?.disableLocalStrategy && /*#__PURE__*/ _jsx(LoginForm, {
+                prefillEmail: prefillEmail,
+                prefillPassword: prefillPassword,
+                prefillUsername: prefillUsername,
                 searchParams: searchParams
             }),
-            Array.isArray(AfterLogins) && AfterLogins.map((Component)=>Component)
+            /*#__PURE__*/ _jsx(RenderComponent, {
+                mappedComponent: mappedAfterLogins
+            })
         ]
     });
 };

package/dist/views/Login/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/Login/index.tsx"],"sourcesContent":["import type { AdminViewProps } from 'payload/types'\n\nimport { WithServerSideProps } from '@payloadcms/ui/elements/WithServerSideProps'\nimport { Logo } from '@payloadcms/ui/graphics/Logo'\nimport { redirect } from 'next/navigation.js'\nimport React, { Fragment } from 'react'\n\nimport { LoginForm } from './LoginForm/index.js'\nimport './index.scss'\n\nexport { generateLoginMetadata } from './meta.js'\n\nexport const loginBaseClass = 'login'\n\nexport const LoginView: React.FC<AdminViewProps> = ({ initPageResult, params, searchParams }) => {\n  const { locale, permissions, req } = initPageResult\n\n  const {\n    i18n,\n    payload: { config },\n    payload,\n    user,\n  } = req\n\n  const {\n    admin: { components: { afterLogin, beforeLogin } = {}, user: userSlug },\n    collections,\n    routes: { admin },\n  } = config\n\n  const BeforeLogins = Array.isArray(beforeLogin)\n    ? beforeLogin.map((Component, i) => (\n        <WithServerSideProps\n          Component={Component}\n          key={i}\n          serverOnlyProps={{\n            i18n,\n            locale,\n            params,\n            payload,\n            permissions,\n            searchParams,\n            user,\n          }}\n        />\n      ))\n    : null\n\n  const AfterLogins = Array.isArray(afterLogin)\n    ? afterLogin.map((Component, i) => (\n        <WithServerSideProps\n          Component={Component}\n          key={i}\n          serverOnlyProps={{\n            i18n,\n            locale,\n            params,\n            payload,\n            permissions,\n            searchParams,\n            user,\n          }}\n        />\n      ))\n    : null\n\n  if (user) {\n    redirect(admin)\n  }\n\n  const collectionConfig = collections.find(({ slug }) => slug === userSlug)\n\n  return (\n    <Fragment>\n      <div className={`${loginBaseClass}__brand`}>\n        <Logo\n          i18n={i18n}\n          locale={locale}\n          params={params}\n          payload={payload}\n          permissions={permissions}\n          searchParams={searchParams}\n          user={user}\n        />\n      </div>\n      {Array.isArray(BeforeLogins) && BeforeLogins.map((Component) => Component)}\n      {!collectionConfig?.auth?.disableLocalStrategy && <LoginForm searchParams={searchParams} />}\n      {Array.isArray(AfterLogins) && AfterLogins.map((Component) => Component)}\n    </Fragment>\n  )\n}\n"],"names":["WithServerSideProps","Logo","redirect","React","Fragment","LoginForm","generateLoginMetadata","loginBaseClass","LoginView","initPageResult","params","searchParams","locale","permissions","req","i18n","payload","config","user","admin","components","afterLogin","beforeLogin","userSlug","collections","routes","BeforeLogins","Array","isArray","map","Component","i","serverOnlyProps","AfterLogins","collectionConfig","find","slug","div","className","auth","disableLocalStrategy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAEA,SAASA,mBAAmB,QAAQ,8CAA6C;AACjF,SAASC,IAAI,QAAQ,+BAA8B;AACnD,SAASC,QAAQ,QAAQ,qBAAoB;AAC7C,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,SAAS,QAAQ,uBAAsB;AAGhD,SAASC,qBAAqB,QAAQ,YAAW;AAEjD,OAAO,MAAMC,iBAAiB,QAAO;AAErC,OAAO,MAAMC,YAAsC,CAAC,EAAEC,cAAc,EAAEC,MAAM,EAAEC,YAAY,EAAE;IAC1F,MAAM,EAAEC,MAAM,EAAEC,WAAW,EAAEC,GAAG,EAAE,GAAGL;IAErC,MAAM,EACJM,IAAI,EACJC,SAAS,EAAEC,MAAM,EAAE,EACnBD,OAAO,EACPE,IAAI,EACL,GAAGJ;IAEJ,MAAM,EACJK,OAAO,EAAEC,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAE,GAAG,CAAC,CAAC,EAAEJ,MAAMK,QAAQ,EAAE,EACvEC,WAAW,EACXC,QAAQ,EAAEN,KAAK,EAAE,EAClB,GAAGF;IAEJ,MAAMS,eAAeC,MAAMC,OAAO,CAACN,eAC/BA,YAAYO,GAAG,CAAC,CAACC,WAAWC,kBAC1B,KAAC/B;YACC8B,WAAWA;YAEXE,iBAAiB;gBACfjB;gBACAH;gBACAF;gBACAM;gBACAH;gBACAF;gBACAO;YACF;WATKa,MAYT;IAEJ,MAAME,cAAcN,MAAMC,OAAO,CAACP,cAC9BA,WAAWQ,GAAG,CAAC,CAACC,WAAWC,kBACzB,KAAC/B;YACC8B,WAAWA;YAEXE,iBAAiB;gBACfjB;gBACAH;gBACAF;gBACAM;gBACAH;gBACAF;gBACAO;YACF;WATKa,MAYT;IAEJ,IAAIb,MAAM;QACRhB,SAASiB;IACX;IAEA,MAAMe,mBAAmBV,YAAYW,IAAI,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKA,SAASb;IAEjE,qBACE,MAACnB;;0BACC,KAACiC;gBAAIC,WAAW,CAAC,EAAE/B,eAAe,OAAO,CAAC;0BACxC,cAAA,KAACN;oBACCc,MAAMA;oBACNH,QAAQA;oBACRF,QAAQA;oBACRM,SAASA;oBACTH,aAAaA;oBACbF,cAAcA;oBACdO,MAAMA;;;YAGTS,MAAMC,OAAO,CAACF,iBAAiBA,aAAaG,GAAG,CAAC,CAACC,YAAcA;YAC/D,CAACI,kBAAkBK,MAAMC,sCAAwB,KAACnC;gBAAUM,cAAcA;;YAC1EgB,MAAMC,OAAO,CAACK,gBAAgBA,YAAYJ,GAAG,CAAC,CAACC,YAAcA;;;AAGpE,EAAC"}
+{"version":3,"sources":["../../../src/views/Login/index.tsx"],"sourcesContent":["import type { AdminViewProps } from 'payload'\n\nimport { RenderComponent, getCreateMappedComponent } from '@payloadcms/ui/shared'\nimport { redirect } from 'next/navigation.js'\nimport React, { Fragment } from 'react'\n\nimport { Logo } from '../../elements/Logo/index.js'\nimport { LoginForm } from './LoginForm/index.js'\nimport './index.scss'\n\nexport { generateLoginMetadata } from './meta.js'\n\nexport const loginBaseClass = 'login'\n\nexport const LoginView: React.FC<AdminViewProps> = ({ initPageResult, params, searchParams }) => {\n  const { locale, permissions, req } = initPageResult\n\n  const {\n    i18n,\n    payload: { config },\n    payload,\n    user,\n  } = req\n\n  const {\n    admin: { components: { afterLogin, beforeLogin } = {}, user: userSlug },\n    collections,\n    routes: { admin },\n  } = config\n\n  const createMappedComponent = getCreateMappedComponent({\n    importMap: payload.importMap,\n    serverProps: {\n      i18n,\n      locale,\n      params,\n      payload,\n      permissions,\n      searchParams,\n      user,\n    },\n  })\n\n  const mappedBeforeLogins = createMappedComponent(beforeLogin, undefined, undefined, 'beforeLogin')\n\n  const mappedAfterLogins = createMappedComponent(afterLogin, undefined, undefined, 'afterLogin')\n\n  if (user) {\n    redirect(admin)\n  }\n\n  const collectionConfig = collections.find(({ slug }) => slug === userSlug)\n\n  const prefillAutoLogin =\n    typeof config.admin?.autoLogin === 'object' && config.admin?.autoLogin.prefillOnly\n\n  const prefillUsername =\n    prefillAutoLogin && typeof config.admin?.autoLogin === 'object'\n      ? config.admin?.autoLogin.username\n      : undefined\n\n  const prefillEmail =\n    prefillAutoLogin && typeof config.admin?.autoLogin === 'object'\n      ? config.admin?.autoLogin.email\n      : undefined\n\n  const prefillPassword =\n    prefillAutoLogin && typeof config.admin?.autoLogin === 'object'\n      ? config.admin?.autoLogin.password\n      : undefined\n\n  return (\n    <Fragment>\n      <div className={`${loginBaseClass}__brand`}>\n        <Logo\n          i18n={i18n}\n          locale={locale}\n          params={params}\n          payload={payload}\n          permissions={permissions}\n          searchParams={searchParams}\n          user={user}\n        />\n      </div>\n      <RenderComponent mappedComponent={mappedBeforeLogins} />\n      {!collectionConfig?.auth?.disableLocalStrategy && (\n        <LoginForm\n          prefillEmail={prefillEmail}\n          prefillPassword={prefillPassword}\n          prefillUsername={prefillUsername}\n          searchParams={searchParams}\n        />\n      )}\n      <RenderComponent mappedComponent={mappedAfterLogins} />\n    </Fragment>\n  )\n}\n"],"names":["RenderComponent","getCreateMappedComponent","redirect","React","Fragment","Logo","LoginForm","generateLoginMetadata","loginBaseClass","LoginView","initPageResult","params","searchParams","locale","permissions","req","i18n","payload","config","user","admin","components","afterLogin","beforeLogin","userSlug","collections","routes","createMappedComponent","importMap","serverProps","mappedBeforeLogins","undefined","mappedAfterLogins","collectionConfig","find","slug","prefillAutoLogin","autoLogin","prefillOnly","prefillUsername","username","prefillEmail","email","prefillPassword","password","div","className","mappedComponent","auth","disableLocalStrategy"],"mappings":";AAEA,SAASA,eAAe,EAAEC,wBAAwB,QAAQ,wBAAuB;AACjF,SAASC,QAAQ,QAAQ,qBAAoB;AAC7C,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,IAAI,QAAQ,+BAA8B;AACnD,SAASC,SAAS,QAAQ,uBAAsB;AAGhD,SAASC,qBAAqB,QAAQ,YAAW;AAEjD,OAAO,MAAMC,iBAAiB,QAAO;AAErC,OAAO,MAAMC,YAAsC,CAAC,EAAEC,cAAc,EAAEC,MAAM,EAAEC,YAAY,EAAE;IAC1F,MAAM,EAAEC,MAAM,EAAEC,WAAW,EAAEC,GAAG,EAAE,GAAGL;IAErC,MAAM,EACJM,IAAI,EACJC,SAAS,EAAEC,MAAM,EAAE,EACnBD,OAAO,EACPE,IAAI,EACL,GAAGJ;IAEJ,MAAM,EACJK,OAAO,EAAEC,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAE,GAAG,CAAC,CAAC,EAAEJ,MAAMK,QAAQ,EAAE,EACvEC,WAAW,EACXC,QAAQ,EAAEN,KAAK,EAAE,EAClB,GAAGF;IAEJ,MAAMS,wBAAwB1B,yBAAyB;QACrD2B,WAAWX,QAAQW,SAAS;QAC5BC,aAAa;YACXb;YACAH;YACAF;YACAM;YACAH;YACAF;YACAO;QACF;IACF;IAEA,MAAMW,qBAAqBH,sBAAsBJ,aAAaQ,WAAWA,WAAW;IAEpF,MAAMC,oBAAoBL,sBAAsBL,YAAYS,WAAWA,WAAW;IAElF,IAAIZ,MAAM;QACRjB,SAASkB;IACX;IAEA,MAAMa,mBAAmBR,YAAYS,IAAI,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKA,SAASX;IAEjE,MAAMY,mBACJ,OAAOlB,OAAOE,KAAK,EAAEiB,cAAc,YAAYnB,OAAOE,KAAK,EAAEiB,UAAUC;IAEzE,MAAMC,kBACJH,oBAAoB,OAAOlB,OAAOE,KAAK,EAAEiB,cAAc,WACnDnB,OAAOE,KAAK,EAAEiB,UAAUG,WACxBT;IAEN,MAAMU,eACJL,oBAAoB,OAAOlB,OAAOE,KAAK,EAAEiB,cAAc,WACnDnB,OAAOE,KAAK,EAAEiB,UAAUK,QACxBX;IAEN,MAAMY,kBACJP,oBAAoB,OAAOlB,OAAOE,KAAK,EAAEiB,cAAc,WACnDnB,OAAOE,KAAK,EAAEiB,UAAUO,WACxBb;IAEN,qBACE,MAAC3B;;0BACC,KAACyC;gBAAIC,WAAW,CAAC,EAAEtC,eAAe,OAAO,CAAC;0BACxC,cAAA,KAACH;oBACCW,MAAMA;oBACNH,QAAQA;oBACRF,QAAQA;oBACRM,SAASA;oBACTH,aAAaA;oBACbF,cAAcA;oBACdO,MAAMA;;;0BAGV,KAACnB;gBAAgB+C,iBAAiBjB;;YACjC,CAACG,kBAAkBe,MAAMC,sCACxB,KAAC3C;gBACCmC,cAAcA;gBACdE,iBAAiBA;gBACjBJ,iBAAiBA;gBACjB3B,cAAcA;;0BAGlB,KAACZ;gBAAgB+C,iBAAiBf;;;;AAGxC,EAAC"}

package/dist/views/Login/meta.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/Login/meta.ts"],"sourcesContent":["import type { GenerateViewMetadata } from '../Root/index.js'\n\nimport { meta } from '../../utilities/meta.js'\n\nexport const generateLoginMetadata: GenerateViewMetadata = async ({ config, i18n: { t } }) =>\n  meta({\n    description: `${t('authentication:login')}`,\n    keywords: `${t('authentication:login')}`,\n    serverURL: config.serverURL,\n    title: t('authentication:login'),\n    ...(config.admin.meta || {}),\n  })\n"],"names":["meta","generateLoginMetadata","config","i18n","t","description","keywords","serverURL","title","admin"],"rangeMappings":";;;;;;;","mappings":"AAEA,SAASA,IAAI,QAAQ,0BAAyB;AAE9C,OAAO,MAAMC,wBAA8C,OAAO,EAAEC,MAAM,EAAEC,MAAM,EAAEC,CAAC,EAAE,EAAE,GACvFJ,KAAK;QACHK,aAAa,CAAC,EAAED,EAAE,wBAAwB,CAAC;QAC3CE,UAAU,CAAC,EAAEF,EAAE,wBAAwB,CAAC;QACxCG,WAAWL,OAAOK,SAAS;QAC3BC,OAAOJ,EAAE;QACT,GAAIF,OAAOO,KAAK,CAACT,IAAI,IAAI,CAAC,CAAC;IAC7B,GAAE"}
+{"version":3,"sources":["../../../src/views/Login/meta.ts"],"sourcesContent":["import type { GenerateViewMetadata } from '../Root/index.js'\n\nimport { meta } from '../../utilities/meta.js'\n\nexport const generateLoginMetadata: GenerateViewMetadata = async ({ config, i18n: { t } }) =>\n  meta({\n    description: `${t('authentication:login')}`,\n    keywords: `${t('authentication:login')}`,\n    serverURL: config.serverURL,\n    title: t('authentication:login'),\n    ...(config.admin.meta || {}),\n  })\n"],"names":["meta","generateLoginMetadata","config","i18n","t","description","keywords","serverURL","title","admin"],"mappings":"AAEA,SAASA,IAAI,QAAQ,0BAAyB;AAE9C,OAAO,MAAMC,wBAA8C,OAAO,EAAEC,MAAM,EAAEC,MAAM,EAAEC,CAAC,EAAE,EAAE,GACvFJ,KAAK;QACHK,aAAa,CAAC,EAAED,EAAE,wBAAwB,CAAC;QAC3CE,UAAU,CAAC,EAAEF,EAAE,wBAAwB,CAAC;QACxCG,WAAWL,OAAOK,SAAS;QAC3BC,OAAOJ,EAAE;QACT,GAAIF,OAAOO,KAAK,CAACT,IAAI,IAAI,CAAC,CAAC;IAC7B,GAAE"}

package/dist/views/Logout/LogoutClient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LogoutClient.d.ts","sourceRoot":"","sources":["../../../src/views/Logout/LogoutClient.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;CACjB,CAkCA,CAAA"}
+{"version":3,"file":"LogoutClient.d.ts","sourceRoot":"","sources":["../../../src/views/Logout/LogoutClient.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;CACjB,CAsCA,CAAA"}

package/dist/views/Logout/LogoutClient.js

@@ -1,8 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '@payloadcms/ui/elements/Button';
-import { useAuth } from '@payloadcms/ui/providers/Auth';
-import { useTranslation } from '@payloadcms/ui/providers/Translation';
+import { Button, useAuth, useTranslation } from '@payloadcms/ui';
+import { formatAdminURL } from '@payloadcms/ui/shared';
 import LinkImport from 'next/link.js';
 import React, { Fragment, useEffect } from 'react';
 const Link = LinkImport.default || LinkImport;
@@ -14,7 +13,7 @@ export const LogoutClient = (props)=>{
     useEffect(()=>{
         if (!isLoggingOut) {
             setIsLoggingOut(true);
-            logOut();
+            void logOut();
         }
     }, [
         isLoggingOut,
@@ -33,7 +32,11 @@ export const LogoutClient = (props)=>{
                     Link: Link,
                     buttonStyle: "secondary",
                     el: "link",
-                    url: `${adminRoute}/login${redirect && redirect.length > 0 ? `?redirect=${encodeURIComponent(redirect)}` : ''}`,
+                    size: "large",
+                    url: formatAdminURL({
+                        adminRoute,
+                        path: `/login${redirect && redirect.length > 0 ? `?redirect=${encodeURIComponent(redirect)}` : ''}`
+                    }),
                     children: t('authentication:logBackIn')
                 })
             ]