payload 1.0.28 → 1.0.31

package/dist/admin/components/views/Versions/index.js

@@ -1,179 +1,179 @@
-import React, { useEffect, useState } from 'react';
-import { useRouteMatch } from 'react-router-dom';
-import format from 'date-fns/format';
-import { useConfig } from '../../utilities/Config';
-import usePayloadAPI from '../../../hooks/usePayloadAPI';
-import Eyebrow from '../../elements/Eyebrow';
-import Loading from '../../elements/Loading';
-import { useStepNav } from '../../elements/StepNav';
-import Meta from '../../utilities/Meta';
-import IDLabel from '../../elements/IDLabel';
-import { getColumns } from './columns';
-import Table from '../../elements/Table';
-import Paginator from '../../elements/Paginator';
-import PerPage from '../../elements/PerPage';
-import { useSearchParams } from '../../utilities/SearchParams';
-import { Banner, Pill } from '../..';
-import { shouldIncrementVersionCount } from '../../../../versions/shouldIncrementVersionCount';
-import { Gutter } from '../../elements/Gutter';
-import './index.scss';
-const baseClass = 'versions';
-const Versions = ({ collection, global }) => {
-    var _a, _b, _c;
-    const { serverURL, routes: { admin, api }, admin: { dateFormat } } = useConfig();
-    const { setStepNav } = useStepNav();
-    const { params: { id } } = useRouteMatch();
-    const [tableColumns] = useState(() => getColumns(collection, global));
-    const [fetchURL, setFetchURL] = useState('');
-    const { page, sort, limit } = useSearchParams();
-    let docURL;
-    let entityLabel;
-    let slug;
-    let entity;
-    let editURL;
-    if (collection) {
-        ({ slug } = collection);
-        docURL = `${serverURL}${api}/${slug}/${id}`;
-        entityLabel = collection.labels.singular;
-        entity = collection;
-        editURL = `${admin}/collections/${collection.slug}/${id}`;
-    }
-    if (global) {
-        ({ slug } = global);
-        docURL = `${serverURL}${api}/globals/${slug}`;
-        entityLabel = global.label;
-        entity = global;
-        editURL = `${admin}/globals/${global.slug}`;
-    }
-    const useAsTitle = ((_a = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _a === void 0 ? void 0 : _a.useAsTitle) || 'id';
-    const [{ data: doc }] = usePayloadAPI(docURL, { initialParams: { draft: 'true' } });
-    const [{ data: versionsData, isLoading: isLoadingVersions }, { setParams }] = usePayloadAPI(fetchURL);
-    useEffect(() => {
-        let nav = [];
-        if (collection) {
-            let docLabel = '';
-            if (doc) {
-                if (useAsTitle) {
-                    if (doc[useAsTitle]) {
-                        docLabel = doc[useAsTitle];
-                    }
-                    else {
-                        docLabel = '[Untitled]';
-                    }
-                }
-                else {
-                    docLabel = doc.id;
-                }
-            }
-            nav = [
-                {
-                    url: `${admin}/collections/${collection.slug}`,
-                    label: collection.labels.plural,
-                },
-                {
-                    label: docLabel,
-                    url: editURL,
-                },
-                {
-                    label: 'Versions',
-                },
-            ];
-        }
-        if (global) {
-            nav = [
-                {
-                    url: editURL,
-                    label: global.label,
-                },
-                {
-                    label: 'Versions',
-                },
-            ];
-        }
-        setStepNav(nav);
-    }, [setStepNav, collection, global, useAsTitle, doc, admin, id, editURL]);
-    useEffect(() => {
-        const params = {
-            depth: 1,
-            page: undefined,
-            sort: undefined,
-            limit,
-            where: {},
-        };
-        if (page)
-            params.page = page;
-        if (sort)
-            params.sort = sort;
-        let fetchURLToSet;
-        if (collection) {
-            fetchURLToSet = `${serverURL}${api}/${collection.slug}/versions`;
-            params.where = {
-                parent: {
-                    equals: id,
-                },
-            };
-        }
-        if (global) {
-            fetchURLToSet = `${serverURL}${api}/globals/${global.slug}/versions`;
-        }
-        // Performance enhancement
-        // Setting the Fetch URL this way
-        // prevents a double-fetch
-        setFetchURL(fetchURLToSet);
-        setParams(params);
-    }, [setParams, page, sort, limit, serverURL, api, id, global, collection]);
-    let useIDLabel = doc[useAsTitle] === (doc === null || doc === void 0 ? void 0 : doc.id);
-    let heading;
-    let metaDesc;
-    let metaTitle;
-    if (collection) {
-        metaTitle = `Versions - ${doc[useAsTitle]} - ${entityLabel}`;
-        metaDesc = `Viewing versions for the ${entityLabel} ${doc[useAsTitle]}`;
-        heading = (doc === null || doc === void 0 ? void 0 : doc[useAsTitle]) || '[Untitled]';
-    }
-    if (global) {
-        metaTitle = `Versions - ${entityLabel}`;
-        metaDesc = `Viewing versions for the global ${entityLabel}`;
-        heading = entityLabel;
-        useIDLabel = false;
-    }
-    const docStatus = doc === null || doc === void 0 ? void 0 : doc._status;
-    const docUpdatedAt = doc === null || doc === void 0 ? void 0 : doc.updatedAt;
-    const showParentDoc = (versionsData === null || versionsData === void 0 ? void 0 : versionsData.page) === 1 && shouldIncrementVersionCount({ entity, docStatus, versions: versionsData });
-    return (React.createElement("div", { className: baseClass },
-        React.createElement(Meta, { title: metaTitle, description: metaDesc }),
-        React.createElement(Eyebrow, null),
-        React.createElement(Gutter, { className: `${baseClass}__wrap` },
-            React.createElement("header", { className: `${baseClass}__header` },
-                React.createElement("div", { className: `${baseClass}__intro` }, "Showing versions for:"),
-                useIDLabel && (React.createElement(IDLabel, { id: doc === null || doc === void 0 ? void 0 : doc.id })),
-                !useIDLabel && (React.createElement("h1", null, heading))),
-            isLoadingVersions && (React.createElement(Loading, null)),
-            showParentDoc && (React.createElement(Banner, { type: docStatus === 'published' ? 'success' : undefined, className: `${baseClass}__parent-doc` },
-                "Current",
-                ' ',
-                docStatus,
-                ' ',
-                "document -",
-                ' ',
-                format(new Date(docUpdatedAt), dateFormat),
-                React.createElement("div", { className: `${baseClass}__parent-doc-pills` },
-                    "\u00A0\u00A0",
-                    React.createElement(Pill, { pillStyle: "white", to: editURL }, "Edit")))),
-            (versionsData === null || versionsData === void 0 ? void 0 : versionsData.totalDocs) > 0 && (React.createElement(React.Fragment, null,
-                React.createElement(Table, { data: versionsData === null || versionsData === void 0 ? void 0 : versionsData.docs, columns: tableColumns }),
-                React.createElement("div", { className: `${baseClass}__page-controls` },
-                    React.createElement(Paginator, { limit: versionsData.limit, totalPages: versionsData.totalPages, page: versionsData.page, hasPrevPage: versionsData.hasPrevPage, hasNextPage: versionsData.hasNextPage, prevPage: versionsData.prevPage, nextPage: versionsData.nextPage, numberOfNeighbors: 1 }),
-                    (versionsData === null || versionsData === void 0 ? void 0 : versionsData.totalDocs) > 0 && (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: `${baseClass}__page-info` },
-                            (versionsData.page * versionsData.limit) - (versionsData.limit - 1),
-                            "-",
-                            versionsData.totalPages > 1 && versionsData.totalPages !== versionsData.page ? (versionsData.limit * versionsData.page) : versionsData.totalDocs,
-                            ' ',
-                            "of",
-                            ' ',
-                            versionsData.totalDocs),
-                        React.createElement(PerPage, { limits: (_c = (_b = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.limits, limit: limit ? Number(limit) : 10 })))))),
-            (versionsData === null || versionsData === void 0 ? void 0 : versionsData.totalDocs) === 0 && (React.createElement("div", { className: `${baseClass}__no-versions` }, "No further versions found")))));
-};
-export default Versions;
+import React, { useEffect, useState } from 'react';
+import { useRouteMatch } from 'react-router-dom';
+import format from 'date-fns/format';
+import { useConfig } from '../../utilities/Config';
+import usePayloadAPI from '../../../hooks/usePayloadAPI';
+import Eyebrow from '../../elements/Eyebrow';
+import Loading from '../../elements/Loading';
+import { useStepNav } from '../../elements/StepNav';
+import Meta from '../../utilities/Meta';
+import IDLabel from '../../elements/IDLabel';
+import { getColumns } from './columns';
+import Table from '../../elements/Table';
+import Paginator from '../../elements/Paginator';
+import PerPage from '../../elements/PerPage';
+import { useSearchParams } from '../../utilities/SearchParams';
+import { Banner, Pill } from '../..';
+import { shouldIncrementVersionCount } from '../../../../versions/shouldIncrementVersionCount';
+import { Gutter } from '../../elements/Gutter';
+import './index.scss';
+const baseClass = 'versions';
+const Versions = ({ collection, global }) => {
+    var _a, _b, _c;
+    const { serverURL, routes: { admin, api }, admin: { dateFormat } } = useConfig();
+    const { setStepNav } = useStepNav();
+    const { params: { id } } = useRouteMatch();
+    const [tableColumns] = useState(() => getColumns(collection, global));
+    const [fetchURL, setFetchURL] = useState('');
+    const { page, sort, limit } = useSearchParams();
+    let docURL;
+    let entityLabel;
+    let slug;
+    let entity;
+    let editURL;
+    if (collection) {
+        ({ slug } = collection);
+        docURL = `${serverURL}${api}/${slug}/${id}`;
+        entityLabel = collection.labels.singular;
+        entity = collection;
+        editURL = `${admin}/collections/${collection.slug}/${id}`;
+    }
+    if (global) {
+        ({ slug } = global);
+        docURL = `${serverURL}${api}/globals/${slug}`;
+        entityLabel = global.label;
+        entity = global;
+        editURL = `${admin}/globals/${global.slug}`;
+    }
+    const useAsTitle = ((_a = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _a === void 0 ? void 0 : _a.useAsTitle) || 'id';
+    const [{ data: doc }] = usePayloadAPI(docURL, { initialParams: { draft: 'true' } });
+    const [{ data: versionsData, isLoading: isLoadingVersions }, { setParams }] = usePayloadAPI(fetchURL);
+    useEffect(() => {
+        let nav = [];
+        if (collection) {
+            let docLabel = '';
+            if (doc) {
+                if (useAsTitle) {
+                    if (doc[useAsTitle]) {
+                        docLabel = doc[useAsTitle];
+                    }
+                    else {
+                        docLabel = '[Untitled]';
+                    }
+                }
+                else {
+                    docLabel = doc.id;
+                }
+            }
+            nav = [
+                {
+                    url: `${admin}/collections/${collection.slug}`,
+                    label: collection.labels.plural,
+                },
+                {
+                    label: docLabel,
+                    url: editURL,
+                },
+                {
+                    label: 'Versions',
+                },
+            ];
+        }
+        if (global) {
+            nav = [
+                {
+                    url: editURL,
+                    label: global.label,
+                },
+                {
+                    label: 'Versions',
+                },
+            ];
+        }
+        setStepNav(nav);
+    }, [setStepNav, collection, global, useAsTitle, doc, admin, id, editURL]);
+    useEffect(() => {
+        const params = {
+            depth: 1,
+            page: undefined,
+            sort: undefined,
+            limit,
+            where: {},
+        };
+        if (page)
+            params.page = page;
+        if (sort)
+            params.sort = sort;
+        let fetchURLToSet;
+        if (collection) {
+            fetchURLToSet = `${serverURL}${api}/${collection.slug}/versions`;
+            params.where = {
+                parent: {
+                    equals: id,
+                },
+            };
+        }
+        if (global) {
+            fetchURLToSet = `${serverURL}${api}/globals/${global.slug}/versions`;
+        }
+        // Performance enhancement
+        // Setting the Fetch URL this way
+        // prevents a double-fetch
+        setFetchURL(fetchURLToSet);
+        setParams(params);
+    }, [setParams, page, sort, limit, serverURL, api, id, global, collection]);
+    let useIDLabel = doc[useAsTitle] === (doc === null || doc === void 0 ? void 0 : doc.id);
+    let heading;
+    let metaDesc;
+    let metaTitle;
+    if (collection) {
+        metaTitle = `Versions - ${doc[useAsTitle]} - ${entityLabel}`;
+        metaDesc = `Viewing versions for the ${entityLabel} ${doc[useAsTitle]}`;
+        heading = (doc === null || doc === void 0 ? void 0 : doc[useAsTitle]) || '[Untitled]';
+    }
+    if (global) {
+        metaTitle = `Versions - ${entityLabel}`;
+        metaDesc = `Viewing versions for the global ${entityLabel}`;
+        heading = entityLabel;
+        useIDLabel = false;
+    }
+    const docStatus = doc === null || doc === void 0 ? void 0 : doc._status;
+    const docUpdatedAt = doc === null || doc === void 0 ? void 0 : doc.updatedAt;
+    const showParentDoc = (versionsData === null || versionsData === void 0 ? void 0 : versionsData.page) === 1 && shouldIncrementVersionCount({ entity, docStatus, versions: versionsData });
+    return (React.createElement("div", { className: baseClass },
+        React.createElement(Meta, { title: metaTitle, description: metaDesc }),
+        React.createElement(Eyebrow, null),
+        React.createElement(Gutter, { className: `${baseClass}__wrap` },
+            React.createElement("header", { className: `${baseClass}__header` },
+                React.createElement("div", { className: `${baseClass}__intro` }, "Showing versions for:"),
+                useIDLabel && (React.createElement(IDLabel, { id: doc === null || doc === void 0 ? void 0 : doc.id })),
+                !useIDLabel && (React.createElement("h1", null, heading))),
+            isLoadingVersions && (React.createElement(Loading, null)),
+            showParentDoc && (React.createElement(Banner, { type: docStatus === 'published' ? 'success' : undefined, className: `${baseClass}__parent-doc` },
+                "Current",
+                ' ',
+                docStatus,
+                ' ',
+                "document -",
+                ' ',
+                format(new Date(docUpdatedAt), dateFormat),
+                React.createElement("div", { className: `${baseClass}__parent-doc-pills` },
+                    "\u00A0\u00A0",
+                    React.createElement(Pill, { pillStyle: "white", to: editURL }, "Edit")))),
+            (versionsData === null || versionsData === void 0 ? void 0 : versionsData.totalDocs) > 0 && (React.createElement(React.Fragment, null,
+                React.createElement(Table, { data: versionsData === null || versionsData === void 0 ? void 0 : versionsData.docs, columns: tableColumns }),
+                React.createElement("div", { className: `${baseClass}__page-controls` },
+                    React.createElement(Paginator, { limit: versionsData.limit, totalPages: versionsData.totalPages, page: versionsData.page, hasPrevPage: versionsData.hasPrevPage, hasNextPage: versionsData.hasNextPage, prevPage: versionsData.prevPage, nextPage: versionsData.nextPage, numberOfNeighbors: 1 }),
+                    (versionsData === null || versionsData === void 0 ? void 0 : versionsData.totalDocs) > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: `${baseClass}__page-info` },
+                            (versionsData.page * versionsData.limit) - (versionsData.limit - 1),
+                            "-",
+                            versionsData.totalPages > 1 && versionsData.totalPages !== versionsData.page ? (versionsData.limit * versionsData.page) : versionsData.totalDocs,
+                            ' ',
+                            "of",
+                            ' ',
+                            versionsData.totalDocs),
+                        React.createElement(PerPage, { limits: (_c = (_b = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.limits, limit: limit ? Number(limit) : 10 })))))),
+            (versionsData === null || versionsData === void 0 ? void 0 : versionsData.totalDocs) === 0 && (React.createElement("div", { className: `${baseClass}__no-versions` }, "No further versions found")))));
+};
+export default Versions;

package/dist/admin/components/views/Versions/types.d.ts

@@ -1,6 +1,6 @@
-import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-import { SanitizedGlobalConfig } from '../../../../globals/config/types';
-export declare type Props = {
-    collection?: SanitizedCollectionConfig;
-    global?: SanitizedGlobalConfig;
-};
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import { SanitizedGlobalConfig } from '../../../../globals/config/types';
+export declare type Props = {
+    collection?: SanitizedCollectionConfig;
+    global?: SanitizedGlobalConfig;
+};

package/dist/admin/components/views/Versions/types.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/admin/components/views/collections/Edit/Auth/APIKey.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-declare const APIKey: React.FC;
-export default APIKey;
+import React from 'react';
+declare const APIKey: React.FC;
+export default APIKey;

package/dist/admin/components/views/collections/Edit/Auth/APIKey.js

@@ -1,60 +1,60 @@
-import React, { useMemo, useState, useEffect } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import useField from '../../../../forms/useField';
-import Label from '../../../../forms/Label';
-import CopyToClipboard from '../../../../elements/CopyToClipboard';
-import { text } from '../../../../../../fields/validations';
-import { useWatchForm } from '../../../../forms/Form/context';
-import GenerateConfirmation from '../../../../elements/GenerateConfirmation';
-const path = 'apiKey';
-const baseClass = 'api-key';
-const validate = (val) => text(val, { minLength: 24, maxLength: 48, data: {}, siblingData: {} });
-const APIKey = () => {
-    const [initialAPIKey, setInitialAPIKey] = useState(null);
-    const [highlightedField, setHighlightedField] = useState(false);
-    const { getField } = useWatchForm();
-    const apiKey = getField(path);
-    const apiKeyValue = apiKey === null || apiKey === void 0 ? void 0 : apiKey.value;
-    const APIKeyLabel = useMemo(() => (React.createElement("div", { className: `${baseClass}__label` },
-        React.createElement("span", null, "API Key"),
-        React.createElement(CopyToClipboard, { value: apiKeyValue }))), [apiKeyValue]);
-    const fieldType = useField({
-        path: 'apiKey',
-        validate,
-    });
-    const highlightField = () => {
-        if (highlightedField) {
-            setHighlightedField(false);
-        }
-        setTimeout(() => {
-            setHighlightedField(true);
-        }, 1);
-    };
-    const { value, setValue, } = fieldType;
-    useEffect(() => {
-        setInitialAPIKey(uuidv4());
-    }, []);
-    useEffect(() => {
-        if (!apiKeyValue) {
-            setValue(initialAPIKey);
-        }
-    }, [apiKeyValue, setValue, initialAPIKey]);
-    useEffect(() => {
-        if (highlightedField) {
-            setTimeout(() => {
-                setHighlightedField(false);
-            }, 10000);
-        }
-    }, [highlightedField]);
-    const classes = [
-        'field-type',
-        'api-key',
-        'read-only',
-    ].filter(Boolean).join(' ');
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: classes },
-            React.createElement(Label, { htmlFor: path, label: APIKeyLabel }),
-            React.createElement("input", { value: value || '', className: highlightedField ? 'highlight' : undefined, disabled: true, type: "text", id: "apiKey", name: "apiKey" })),
-        React.createElement(GenerateConfirmation, { setKey: () => setValue(uuidv4()), highlightField: highlightField })));
-};
-export default APIKey;
+import React, { useMemo, useState, useEffect } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import useField from '../../../../forms/useField';
+import Label from '../../../../forms/Label';
+import CopyToClipboard from '../../../../elements/CopyToClipboard';
+import { text } from '../../../../../../fields/validations';
+import { useWatchForm } from '../../../../forms/Form/context';
+import GenerateConfirmation from '../../../../elements/GenerateConfirmation';
+const path = 'apiKey';
+const baseClass = 'api-key';
+const validate = (val) => text(val, { minLength: 24, maxLength: 48, data: {}, siblingData: {} });
+const APIKey = () => {
+    const [initialAPIKey, setInitialAPIKey] = useState(null);
+    const [highlightedField, setHighlightedField] = useState(false);
+    const { getField } = useWatchForm();
+    const apiKey = getField(path);
+    const apiKeyValue = apiKey === null || apiKey === void 0 ? void 0 : apiKey.value;
+    const APIKeyLabel = useMemo(() => (React.createElement("div", { className: `${baseClass}__label` },
+        React.createElement("span", null, "API Key"),
+        React.createElement(CopyToClipboard, { value: apiKeyValue }))), [apiKeyValue]);
+    const fieldType = useField({
+        path: 'apiKey',
+        validate,
+    });
+    const highlightField = () => {
+        if (highlightedField) {
+            setHighlightedField(false);
+        }
+        setTimeout(() => {
+            setHighlightedField(true);
+        }, 1);
+    };
+    const { value, setValue, } = fieldType;
+    useEffect(() => {
+        setInitialAPIKey(uuidv4());
+    }, []);
+    useEffect(() => {
+        if (!apiKeyValue) {
+            setValue(initialAPIKey);
+        }
+    }, [apiKeyValue, setValue, initialAPIKey]);
+    useEffect(() => {
+        if (highlightedField) {
+            setTimeout(() => {
+                setHighlightedField(false);
+            }, 10000);
+        }
+    }, [highlightedField]);
+    const classes = [
+        'field-type',
+        'api-key',
+        'read-only',
+    ].filter(Boolean).join(' ');
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: classes },
+            React.createElement(Label, { htmlFor: path, label: APIKeyLabel }),
+            React.createElement("input", { value: value || '', className: highlightedField ? 'highlight' : undefined, disabled: true, type: "text", id: "apiKey", name: "apiKey" })),
+        React.createElement(GenerateConfirmation, { setKey: () => setValue(uuidv4()), highlightField: highlightField })));
+};
+export default APIKey;

package/dist/admin/components/views/collections/Edit/Auth/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Props } from './types';
-import './index.scss';
-declare const Auth: React.FC<Props>;
-export default Auth;
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const Auth: React.FC<Props>;
+export default Auth;

package/dist/admin/components/views/collections/Edit/Auth/index.js

@@ -1,59 +1,59 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { toast } from 'react-toastify';
-import { useConfig } from '../../../../utilities/Config';
-import Email from '../../../../forms/field-types/Email';
-import Password from '../../../../forms/field-types/Password';
-import Checkbox from '../../../../forms/field-types/Checkbox';
-import Button from '../../../../elements/Button';
-import ConfirmPassword from '../../../../forms/field-types/ConfirmPassword';
-import { useWatchForm, useFormModified } from '../../../../forms/Form/context';
-import APIKey from './APIKey';
-import './index.scss';
-const baseClass = 'auth-fields';
-const Auth = (props) => {
-    const { useAPIKey, requirePassword, verify, collection: { slug }, collection, email, operation } = props;
-    const [changingPassword, setChangingPassword] = useState(requirePassword);
-    const { getField } = useWatchForm();
-    const modified = useFormModified();
-    const enableAPIKey = getField('enableAPIKey');
-    useEffect(() => {
-        if (!modified) {
-            setChangingPassword(false);
-        }
-    }, [modified]);
-    const { serverURL, routes: { api, }, } = useConfig();
-    const unlock = useCallback(async () => {
-        const url = `${serverURL}${api}/${slug}/unlock`;
-        const response = await fetch(url, {
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                email,
-            }),
-            method: 'post',
-        });
-        if (response.status === 200) {
-            toast.success('Successfully unlocked', { autoClose: 3000 });
-        }
-        else {
-            toast.error('Successfully unlocked');
-        }
-    }, [serverURL, api, slug, email]);
-    if (collection.auth.disableLocalStrategy) {
-        return null;
-    }
-    return (React.createElement("div", { className: baseClass },
-        React.createElement(Email, { required: true, name: "email", label: "Email", admin: { autoComplete: 'email' } }),
-        (changingPassword || requirePassword) && (React.createElement("div", { className: `${baseClass}__changing-password` },
-            React.createElement(Password, { autoComplete: "off", required: true, name: "password", label: "New Password" }),
-            React.createElement(ConfirmPassword, null),
-            !requirePassword && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => setChangingPassword(false) }, "Cancel")))),
-        (!changingPassword && !requirePassword) && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => setChangingPassword(true) }, "Change Password")),
-        operation === 'update' && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => unlock() }, "Force Unlock")),
-        useAPIKey && (React.createElement("div", { className: `${baseClass}__api-key` },
-            React.createElement(Checkbox, { label: "Enable API Key", name: "enableAPIKey" }),
-            (enableAPIKey === null || enableAPIKey === void 0 ? void 0 : enableAPIKey.value) && (React.createElement(APIKey, null)))),
-        verify && (React.createElement(Checkbox, { label: "Verified", name: "_verified" }))));
-};
-export default Auth;
+import React, { useState, useEffect, useCallback } from 'react';
+import { toast } from 'react-toastify';
+import { useConfig } from '../../../../utilities/Config';
+import Email from '../../../../forms/field-types/Email';
+import Password from '../../../../forms/field-types/Password';
+import Checkbox from '../../../../forms/field-types/Checkbox';
+import Button from '../../../../elements/Button';
+import ConfirmPassword from '../../../../forms/field-types/ConfirmPassword';
+import { useWatchForm, useFormModified } from '../../../../forms/Form/context';
+import APIKey from './APIKey';
+import './index.scss';
+const baseClass = 'auth-fields';
+const Auth = (props) => {
+    const { useAPIKey, requirePassword, verify, collection: { slug }, collection, email, operation } = props;
+    const [changingPassword, setChangingPassword] = useState(requirePassword);
+    const { getField } = useWatchForm();
+    const modified = useFormModified();
+    const enableAPIKey = getField('enableAPIKey');
+    useEffect(() => {
+        if (!modified) {
+            setChangingPassword(false);
+        }
+    }, [modified]);
+    const { serverURL, routes: { api, }, } = useConfig();
+    const unlock = useCallback(async () => {
+        const url = `${serverURL}${api}/${slug}/unlock`;
+        const response = await fetch(url, {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                email,
+            }),
+            method: 'post',
+        });
+        if (response.status === 200) {
+            toast.success('Successfully unlocked', { autoClose: 3000 });
+        }
+        else {
+            toast.error('Successfully unlocked');
+        }
+    }, [serverURL, api, slug, email]);
+    if (collection.auth.disableLocalStrategy) {
+        return null;
+    }
+    return (React.createElement("div", { className: baseClass },
+        React.createElement(Email, { required: true, name: "email", label: "Email", admin: { autoComplete: 'email' } }),
+        (changingPassword || requirePassword) && (React.createElement("div", { className: `${baseClass}__changing-password` },
+            React.createElement(Password, { autoComplete: "off", required: true, name: "password", label: "New Password" }),
+            React.createElement(ConfirmPassword, null),
+            !requirePassword && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => setChangingPassword(false) }, "Cancel")))),
+        (!changingPassword && !requirePassword) && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => setChangingPassword(true) }, "Change Password")),
+        operation === 'update' && (React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => unlock() }, "Force Unlock")),
+        useAPIKey && (React.createElement("div", { className: `${baseClass}__api-key` },
+            React.createElement(Checkbox, { label: "Enable API Key", name: "enableAPIKey" }),
+            (enableAPIKey === null || enableAPIKey === void 0 ? void 0 : enableAPIKey.value) && (React.createElement(APIKey, null)))),
+        verify && (React.createElement(Checkbox, { label: "Verified", name: "_verified" }))));
+};
+export default Auth;