@sqrzro/admin 1.0.0-beta.7 → 2.0.0

package/dist/components/FilterLink/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { FilterMap } from '../../utility/interfaces';
+interface FilterLinkProps {
+    children: React.ReactNode;
+    filters: FilterMap;
+}
+declare function FilterLink({ children, filters }: FilterLinkProps): React.ReactElement;
+declare namespace FilterLink {
+    var propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+}
+export default FilterLink;

package/dist/components/FilterLink/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from '../../components/Link';
+import Icon from '../../core/Icon';
+import FilterService from '../../services/FilterService';
+function FilterLink({ children, filters }) {
+    return (React.createElement(Link, { className: "/*styles.root*/", to: FilterService.setFiltersUrlFromContext(null, filters) },
+        React.createElement("i", { className: "/*styles.icon*/" },
+            React.createElement(Icon, { icon: "filter", size: 12 })),
+        children));
+}
+FilterLink.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+export default FilterLink;

package/dist/components/Form/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export interface FormProps {
+    children: React.ReactNode;
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+}
+declare function Form({ children, onSubmit }: FormProps): React.ReactElement;
+declare namespace Form {
+    var propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        onSubmit: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default Form;

package/dist/components/Form/index.js

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+import PropTypes from 'prop-types';
+function Form({ children, onSubmit }) {
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        onSubmit(event);
+    };
+    return React.createElement("form", { onSubmit: handleSubmit }, children);
+}
+Form.propTypes = {
+    children: PropTypes.node.isRequired,
+    onSubmit: PropTypes.func,
+};
+export default Form;

package/dist/components/FormActions/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+interface FormActionsProps {
+    children?: React.ReactNode;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    label: string;
+}
+declare function FormActions({ children, label, isDisabled, isLoading, }: FormActionsProps): React.ReactElement;
+declare namespace FormActions {
+    var propTypes: {
+        label: PropTypes.Validator<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        isDisabled: PropTypes.Requireable<boolean>;
+        isLoading: PropTypes.Requireable<boolean>;
+    };
+}
+export default FormActions;

package/dist/components/FormActions/index.js

@@ -0,0 +1,14 @@
+'use client';
+import React from 'react';
+import PropTypes from 'prop-types';
+import FixedActions from '../../core/FixedActions';
+function FormActions({ children, label, isDisabled, isLoading, }) {
+    return (React.createElement(FixedActions, { isDisabled: isDisabled, isLoading: isLoading, label: label, type: "submit" }, children));
+}
+FormActions.propTypes = {
+    label: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    isDisabled: PropTypes.bool,
+    isLoading: PropTypes.bool,
+};
+export default FormActions;

package/dist/{types/components → components}/FormField/index.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-import type { Action, InputEvent, InputProps, InputValue } from '../../utility/interfaces';
-interface FormFieldProps<T extends InputValue> extends InputProps<T> {
-    action?: Action | null;
-    error?: string;
-    isShallow?: boolean;
-    isFullWidth?: boolean;
-    isOptional?: boolean;
-    label?: string;
-    $onChange?: (event: InputEvent<T>) => void;
-    render: (props: InputProps<T>) => React.ReactElement | null;
-}
-declare const FormField: <T extends InputValue>({ action, error, id, isAutoFocus, isDisabled, isFullWidth, isOptional, isShallow, label, name, $onChange, onChange, onKeyDown, render, value, }: FormFieldProps<T>) => React.ReactElement;
-export default FormField;
+import React from 'react';
+import type { Action, InputEvent, InputProps, InputValue } from '../../utility/interfaces';
+interface FormFieldProps<T extends InputValue> extends InputProps<T> {
+    action?: Action | null;
+    error?: string;
+    isShallow?: boolean;
+    isFullWidth?: boolean;
+    isOptional?: boolean;
+    label?: string;
+    $onChange?: (event: InputEvent<T>) => void;
+    render: (props: InputProps<T>) => React.ReactElement | null;
+}
+declare function FormField<T extends InputValue>({ action, error, id, isAutoFocus, isDisabled, isFullWidth, isOptional, isShallow, label, name, $onChange, onChange, onKeyDown, render, value, }: FormFieldProps<T>): React.ReactElement;
+export default FormField;

package/dist/components/FormField/index.js

@@ -0,0 +1,40 @@
+'use client';
+import React from 'react';
+import Button from '../../components/Button';
+import FormError from '../../core/FormError';
+import FormLabel from '../../core/FormLabel';
+function FormField({ action, error, id, isAutoFocus, isDisabled, isFullWidth, isOptional, isShallow, label, name, $onChange, onChange, onKeyDown, render, value, }) {
+    const inputId = id || `ff_${name}`;
+    /**
+     * The input might want it's own `onChange` handler, to run alongside the one handled by
+     * `useForm` (that changes the `formData` accordingly). We can handle that here.
+     */
+    const handleChange = (event) => {
+        if ($onChange) {
+            $onChange(event);
+        }
+        if (onChange) {
+            onChange(event);
+        }
+    };
+    const inputProps = {
+        id: inputId,
+        name,
+        hasError: Boolean(error),
+        isAutoFocus,
+        isDisabled,
+        isOptional,
+        onChange: handleChange,
+        onKeyDown,
+        value,
+    };
+    return (React.createElement("div", { className: "/*clsx(\n                styles.root,\n                error && styles.rootHasError,\n                isShallow && styles.rootIsShallow,\n                isFullWidth && styles.rootIsFullWidth\n            )*/", "data-testid": "form-field-root" },
+        label ? (React.createElement("div", { className: "/*styles.label*/" },
+            React.createElement(FormLabel, { htmlFor: inputId, isOptional: isOptional }, label))) : null,
+        React.createElement("div", { className: "/*styles.field*/" }, render(inputProps)),
+        action ? (React.createElement("div", { className: "/*styles.action*/" },
+            React.createElement(Button, { isDisabled: isDisabled || action.isDisabled, onClick: action.onClick, variant: action.variant }, action.label))) : null,
+        error ? (React.createElement("div", { className: "/*styles.error*/" },
+            React.createElement(FormError, { message: error }))) : null));
+}
+export default FormField;

package/dist/components/FormRepeater/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { InputProps } from '../../utility/interfaces';
+interface FormRepeaterProps extends InputProps<string[]> {
+    label?: string;
+    max?: number;
+    render: (props: InputProps<string>) => React.ReactElement;
+}
+declare function FormRepeater({ label, max, name, onChange, render, value, }: FormRepeaterProps): React.ReactElement;
+declare namespace FormRepeater {
+    var propTypes: {
+        name: PropTypes.Validator<string>;
+        label: PropTypes.Requireable<string>;
+        max: PropTypes.Requireable<number>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default FormRepeater;

package/dist/components/FormRepeater/index.js

@@ -0,0 +1,65 @@
+'use client';
+import React from 'react';
+import PropTypes from 'prop-types';
+import FormField from '../../components/FormField';
+// Parse the values that have been passed in as `value`, and prepare them for the `FormField`s.
+const parseValues = (value, max) => {
+    // If there is no value, or an empty value, then return an array.
+    if (!value || !Array.isArray(value) || !value.length) {
+        return [''];
+    }
+    /*
+     * Otherwise, return the existing array, and an empty string (for the new field, if the max is
+     * Not reached).
+     */
+    return max && value.length >= max ? [...value] : [...value, ''];
+};
+const getAction = (onClick, values, index, max) => {
+    if (index === values.length - 1 && index !== (max || 0) - 1) {
+        return null;
+    }
+    return {
+        label: 'Remove',
+        onClick,
+        variant: ['bordered', 'danger'],
+    };
+};
+function FormRepeater({ label, max, name, onChange, render, value, }) {
+    const values = parseValues(value, max);
+    const handleChange = (event, index) => {
+        if (!onChange) {
+            return;
+        }
+        const newValue = [
+            ...values.slice(0, index),
+            event.target.value,
+            ...values.slice(index + 1),
+        ];
+        onChange({
+            target: {
+                name,
+                value: newValue.filter(Boolean),
+            },
+        });
+    };
+    const handleRemove = (index) => {
+        if (!onChange) {
+            return;
+        }
+        const newValue = [...values.slice(0, index), ...values.slice(index + 1)];
+        onChange({
+            target: {
+                name,
+                value: newValue.filter(Boolean),
+            },
+        });
+    };
+    return (React.createElement("div", { className: "/*styles.root*/" }, values.map((_item, index) => (React.createElement(FormField, { key: index, action: getAction(() => handleRemove(index), values, index, max), id: `f_${name}_${index}`, label: index === 0 ? label : '', name: name, onChange: (event) => handleChange(event, index), render: render, value: values[index], isShallow: true })))));
+}
+FormRepeater.propTypes = {
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    max: PropTypes.number,
+    onChange: PropTypes.func,
+};
+export default FormRepeater;

package/dist/{types/components → components}/ImageInput/index.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import type { InputProps } from '../../utility/interfaces';
-declare const ImageInput: {
-    ({ name, isDisabled, hasError, onChange, }: InputProps<File>): React.ReactElement;
-    propTypes: {
-        name: PropTypes.Validator<string>;
-        hasError: PropTypes.Requireable<boolean>;
-        isDisabled: PropTypes.Requireable<boolean>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-};
-export default ImageInput;
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { InputProps } from '../../utility/interfaces';
+declare function ImageInput({ name, isDisabled, hasError, onChange, }: InputProps<File>): React.ReactElement;
+declare namespace ImageInput {
+    var propTypes: {
+        name: PropTypes.Validator<string>;
+        hasError: PropTypes.Requireable<boolean>;
+        isDisabled: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default ImageInput;

package/dist/components/ImageInput/index.js

@@ -0,0 +1,45 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import Icon from '../../core/Icon';
+function ImageInput({ name, isDisabled, hasError, onChange, }) {
+    const reader = useRef(new FileReader());
+    const [preview, setPreview] = useState('');
+    const handleReaderLoad = () => {
+        /*
+         * `reader.result` can technically be null, but there's no way to set it to null via a file
+         * input, so we can 'handle' the possibility of null to keep typescript happy, but ignore
+         * this line in code coverage
+         */
+        /* istanbul ignore next */
+        setPreview(reader.current.result?.toString() || '');
+    };
+    const handleChange = (event) => {
+        const { target } = event;
+        if (target.files.length) {
+            reader.current.readAsDataURL(target.files[0]);
+            if (onChange) {
+                onChange({ target: { name, value: target.files[0] } });
+            }
+        }
+    };
+    useEffect(() => {
+        reader.current.addEventListener('load', handleReaderLoad);
+        return () => {
+            reader.current.removeEventListener('load', handleReaderLoad);
+        };
+    }, []);
+    return (React.createElement("div", { className: "/*clsx(\n                styles.root,\n                hasError && styles.rootHasError,\n                isDisabled && styles.rootIsDisabled\n            )*/", "data-testid": "image-input-root" },
+        preview ? (React.createElement("img", { className: "/*styles.preview*/", src: preview })) : (React.createElement("div", { className: "/*styles.placeholder*/" },
+            React.createElement(Icon, { icon: "upload", size: 30 }),
+            React.createElement("span", { className: "/*styles.placeholderTitle*/" }, "Click to Upload"),
+            React.createElement("em", { className: "/*styles.placeholderDescription*/" }, "(or drop an image here)"))),
+        React.createElement("input", { className: "/*styles.input*/", "data-testid": "image-input-input", name: name, onChange: handleChange, type: "file" })));
+}
+ImageInput.propTypes = {
+    name: PropTypes.string.isRequired,
+    hasError: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    onChange: PropTypes.func,
+};
+export default ImageInput;

package/dist/components/InfoPanel/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { StyleVariant } from '../../utility/interfaces';
+export interface InfoPanelProps {
+    children: React.ReactNode;
+    variant?: StyleVariant;
+}
+declare function InfoPanel({ children, variant }: InfoPanelProps): React.ReactElement;
+declare namespace InfoPanel {
+    var propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+}
+export default InfoPanel;

package/dist/components/InfoPanel/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import useVariant from '../../hooks/useVariant';
+function InfoPanel({ children, variant }) {
+    const { applyVariantClassName } = useVariant(variant);
+    return React.createElement("div", { className: "/*clsx(styles.root, applyVariantClassName(styles))*/" }, children);
+}
+InfoPanel.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+export default InfoPanel;

package/dist/{types/components → components}/Link/__mocks__/index.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-interface LinkProps {
-    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-}
-declare const Link: React.FunctionComponent<LinkProps>;
-export default Link;
+import React from 'react';
+interface LinkProps {
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+}
+declare function Link({ onClick, ...props }: LinkProps): React.ReactElement;
+export default Link;

package/dist/components/Link/__mocks__/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+function Link({ onClick, ...props }) {
+    const { default: ActualLink } = jest.requireActual('@/components/Link');
+    const handleClick = (event) => {
+        event.preventDefault();
+        if (onClick) {
+            onClick(event);
+        }
+    };
+    return React.createElement(ActualLink, { ...props, onClick: handleClick });
+}
+export default Link;

package/dist/components/Link/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+interface DataProps {
+    'data-test-id'?: string;
+}
+interface LinkProps extends DataProps {
+    children: React.ReactNode;
+    className?: string;
+    isNewWindow?: boolean;
+    to: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+}
+declare function Link({ children, className, isNewWindow, onClick, to, ...dataProps }: LinkProps): React.ReactElement;
+declare namespace Link {
+    var propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        to: PropTypes.Validator<string>;
+        className: PropTypes.Requireable<string>;
+        isNewWindow: PropTypes.Requireable<boolean>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default Link;

package/dist/components/Link/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import NextLink from 'next/link';
+function Link({ children, className, isNewWindow, onClick, to, ...dataProps }) {
+    const newWindowProps = isNewWindow
+        ? { target: '_blank', rel: 'noopener noreferrer' }
+        : {};
+    const props = { ...newWindowProps, ...dataProps, className, onClick };
+    if (/^http/u.exec(to) || /^mailto:/u.exec(to) || /^tel:/u.exec(to)) {
+        return (React.createElement("a", { href: to, ...props }, children));
+    }
+    return (React.createElement(NextLink, { href: /^\//u.exec(to) ? to : `/${to}`, ...props }, children));
+}
+Link.propTypes = {
+    children: PropTypes.node.isRequired,
+    to: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    isNewWindow: PropTypes.bool,
+    onClick: PropTypes.func,
+};
+export default Link;

package/dist/{types/components → components}/List/index.d.ts

@@ -1,36 +1,36 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import type { EmptyMessageProps } from '../../core/EmptyMessage';
-import type { SimpleObject, TransformerWithActions } from '../../utility/interfaces';
-export interface ListProps<T extends SimpleObject> {
-    data?: T[];
-    empty?: EmptyMessageProps;
-    isDisabled?: boolean;
-    pagination?: {
-        activePage: number;
-        pageCount: number;
-    } | null;
-    transformer?: TransformerWithActions<T>;
-}
-/**
- * Displays a list of items. Each item in the `data` prop is passed through the `transformer`
- * function and then displayed. For more information about what `transformer` options are
- * available, take a look at the `ListItem` documentation.
- *
- * The only value that is required for each transformed item is an `$id` as this is used for the
- * `key` prop.
- *
- * If there is no data, an `EmptyMessage` is displayed.
- */
-declare const List: {
-    <T extends SimpleObject>({ data, empty, pagination, transformer, isDisabled, }: ListProps<T>): React.ReactElement;
-    propTypes: {
-        data: PropTypes.Requireable<PropTypes.InferProps<{}>[]>;
-        isDisabled: PropTypes.Requireable<boolean>;
-        pagination: PropTypes.Requireable<PropTypes.InferProps<{
-            activePage: PropTypes.Validator<number>;
-            pageCount: PropTypes.Validator<number>;
-        }>>;
-    };
-};
-export default List;
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { EmptyMessageProps } from '../../core/EmptyMessage';
+import type { SimpleObject, TransformerWithActions } from '../../utility/interfaces';
+export interface ListProps<T extends SimpleObject> {
+    data?: T[];
+    empty?: EmptyMessageProps;
+    isDisabled?: boolean;
+    pagination?: {
+        activePage: number;
+        pageCount: number;
+    } | null;
+    transformer?: TransformerWithActions<T>;
+}
+/**
+ * Displays a list of items. Each item in the `data` prop is passed through the `transformer`
+ * function and then displayed. For more information about what `transformer` options are
+ * available, take a look at the `ListItem` documentation.
+ *
+ * The only value that is required for each transformed item is an `$id` as this is used for the
+ * `key` prop.
+ *
+ * If there is no data, an `EmptyMessage` is displayed.
+ */
+declare function List<T extends SimpleObject>({ data, empty, pagination, transformer, isDisabled, }: ListProps<T>): React.ReactElement;
+declare namespace List {
+    var propTypes: {
+        data: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{}>>[]>;
+        isDisabled: PropTypes.Requireable<boolean>;
+        pagination: PropTypes.Requireable<PropTypes.InferProps<{
+            activePage: PropTypes.Validator<number>;
+            pageCount: PropTypes.Validator<number>;
+        }>>;
+    };
+}
+export default List;

package/dist/components/List/index.js

@@ -0,0 +1,46 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import EmptyMessage from '../../core/EmptyMessage';
+import ListItem from '../../core/ListItem';
+import Pagination from '../../core/Pagination';
+// Import styles from './List.module.css';
+const defaultTransformer = (item) => ({
+    ...item,
+    $id: String(item.id),
+    $original: item,
+});
+const transformData = (data, transformer) => {
+    const [transformFn, actions] = Array.isArray(transformer)
+        ? transformer
+        : [transformer || defaultTransformer];
+    return data.map((item) => ({ ...transformFn(item), $actions: actions, $original: item }));
+};
+/**
+ * Displays a list of items. Each item in the `data` prop is passed through the `transformer`
+ * function and then displayed. For more information about what `transformer` options are
+ * available, take a look at the `ListItem` documentation.
+ *
+ * The only value that is required for each transformed item is an `$id` as this is used for the
+ * `key` prop.
+ *
+ * If there is no data, an `EmptyMessage` is displayed.
+ */
+function List({ data, empty, pagination, transformer, isDisabled, }) {
+    if (!data?.length) {
+        return React.createElement(EmptyMessage, { ...empty });
+    }
+    const transformed = transformData(data, transformer);
+    return (React.createElement(Fragment, null,
+        React.createElement("ul", { className: "/*clsx(styles.root, isDisabled && styles.rootIsDisabled)*/" }, transformed.map((item) => (React.createElement("li", { key: item.$id },
+            React.createElement(ListItem, { ...item }))))),
+        pagination ? React.createElement(Pagination, { isDisabled: isDisabled, ...pagination }) : null));
+}
+List.propTypes = {
+    data: PropTypes.arrayOf(PropTypes.shape({}).isRequired),
+    isDisabled: PropTypes.bool,
+    pagination: PropTypes.shape({
+        activePage: PropTypes.number.isRequired,
+        pageCount: PropTypes.number.isRequired,
+    }),
+};
+export default List;

package/dist/components/ListActions/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+interface ListActionsProps {
+    children?: React.ReactNode;
+    label: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    to?: string;
+}
+declare function ListActions({ children, label, to, onClick }: ListActionsProps): React.ReactElement;
+declare namespace ListActions {
+    var propTypes: {
+        label: PropTypes.Validator<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        to: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default ListActions;

package/dist/components/ListActions/index.js

@@ -0,0 +1,14 @@
+'use client';
+import React from 'react';
+import PropTypes from 'prop-types';
+import FixedActions from '../../core/FixedActions';
+function ListActions({ children, label, to, onClick }) {
+    return (React.createElement(FixedActions, { label: label, onClick: onClick, to: to }, children));
+}
+ListActions.propTypes = {
+    label: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    to: PropTypes.string,
+    onClick: PropTypes.func,
+};
+export default ListActions;

package/dist/components/LoginForm/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function LoginForm(): React.ReactElement;
+export default LoginForm;

package/dist/components/LoginForm/index.js

@@ -0,0 +1,47 @@
+'use client';
+import React, { Fragment } from 'react';
+import Head from 'next/head';
+import { useLoginForm } from '@sqrzro/hooks';
+import Alert from '../../components/Alert';
+import Button from '../../components/Button';
+import FormField from '../../components/FormField';
+import Link from '../../components/Link';
+import PasswordInput from '../../components/PasswordInput';
+import TextInput from '../../components/TextInput';
+import AuthForm from '../../core/AuthForm';
+import TwoFactor from '../../core/TwoFactor';
+import TwoFactorSetup from '../../core/TwoFactorSetup';
+import useAlert from '../../hooks/useAlert';
+import useAppConfig from '../../hooks/useAppConfig';
+function LoginForm() {
+    const { alertProps, openAlert, closeAlert } = useAlert();
+    const { alertProps: setupAlertProps, openAlert: openSetupAlert, closeAlert: closeSetupAlert, } = useAlert();
+    const { auth, name } = useAppConfig();
+    const { fieldProps, formData, formProps, handleSubmit, isLoading, setFormData } = useLoginForm(auth, openAlert, openSetupAlert);
+    function handleKeyDown(event) {
+        if (event.key === 'Enter') {
+            handleSubmit();
+        }
+    }
+    function handleAlertClose() {
+        setFormData('provider', '');
+        setFormData('twofactor_code', '');
+        closeAlert();
+        closeSetupAlert();
+    }
+    return (React.createElement(Fragment, null,
+        React.createElement(Head, null,
+            React.createElement("title", null,
+                "Login | ",
+                name)),
+        React.createElement(AuthForm, { ...formProps, footer: React.createElement(Link, { to: `/auth/password${formData.identifier ? `?${auth.identifier}=${formData.identifier}` : ''}` }, "Forgot Password?") },
+            React.createElement(FormField, { ...fieldProps('identifier'), label: auth.identifierLabel, onKeyDown: handleKeyDown, render: TextInput, isAutoFocus: true }),
+            React.createElement(FormField, { ...fieldProps('password'), label: "Password", onKeyDown: handleKeyDown, render: PasswordInput }),
+            React.createElement("hr", null),
+            React.createElement(Button, { isDisabled: isLoading, type: "submit", isFullWidth: true }, isLoading ? 'Loading...' : 'Log In')),
+        React.createElement(Alert, { ...alertProps, icon: "lockClosed", onClose: handleAlertClose, title: "2-Step Authentication", variant: "warning", width: "sm" },
+            React.createElement(TwoFactor, { formData: formData, isLoading: isLoading, onSubmit: handleSubmit, setFormData: setFormData })),
+        React.createElement(Alert, { ...setupAlertProps, icon: "lockClosed", onClose: handleAlertClose, title: "Setup 2-Step Authentication", variant: "warning", width: "sm" },
+            React.createElement(TwoFactorSetup, { data: formData }))));
+}
+export default LoginForm;