@sqrzro/admin 1.0.0-beta.7 → 2.0.0

package/dist/core/TabItem/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Link from '../../components/Link';
+// Import styles from './TabItem.module.css';
+function TabItem({ isActive, isDisabled, label, onClick, to, }) {
+    // Const rootClass = clsx(styles.root, { [styles.rootIsDisabled]: isDisabled });
+    if (to) {
+        return (React.createElement("li", { className: "rootClass" },
+            React.createElement(Link, { className: "clsx(styles.link, { [styles.linkIsActive]: isActive })", onClick: onClick, to: to }, label)));
+    }
+    return (React.createElement("li", { className: "rootClass" },
+        React.createElement("button", { className: "/*styles.link*/", onClick: onClick, type: "button" }, label)));
+}
+export default TabItem;

package/dist/{types/core → core}/TableActionsCell/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import type { Action, ActionFunction, SimpleObject } from '../../utility/interfaces';
-interface TableActionsCellProps<T> {
-    actions: Action[] | ActionFunction<T>;
-    data?: T;
-}
-declare const TableActionsCell: <T extends SimpleObject>({ actions, data, }: TableActionsCellProps<T>) => React.ReactElement;
-export default TableActionsCell;
+import React from 'react';
+import type { Action, ActionFunction, SimpleObject } from '../../utility/interfaces';
+interface TableActionsCellProps<T> {
+    actions: Action[] | ActionFunction<T>;
+    data?: T;
+}
+declare function TableActionsCell<T extends SimpleObject>({ actions, data, }: TableActionsCellProps<T>): React.ReactElement;
+export default TableActionsCell;

package/dist/core/TableActionsCell/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ListItemActions from '../../core/ListItemActions';
+function TableActionsCell({ actions, data, }) {
+    return (React.createElement("td", { className: "cellStyles.root" },
+        React.createElement("div", { className: "/*styles.inner*/" },
+            React.createElement(ListItemActions, { actions: actions, data: data }))));
+}
+export default TableActionsCell;

package/dist/core/TableCell/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export type Columns = Record<string, string | [string, boolean?]>;
+interface TableCellProps {
+    value?: React.ReactElement | string;
+    isRightAligned?: boolean;
+}
+declare function TableCell({ isRightAligned, value }: TableCellProps): React.ReactElement;
+declare namespace TableCell {
+    var propTypes: {
+        value: PropTypes.Validator<NonNullable<NonNullable<string | PropTypes.ReactElementLike | null | undefined>>>;
+        isRightAligned: PropTypes.Requireable<boolean>;
+    };
+}
+export default TableCell;

package/dist/core/TableCell/index.js

@@ -0,0 +1,20 @@
+import React, { isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import Styled from '../../core/Styled';
+const renderCellValue = (value) => {
+    if (!value) {
+        return null;
+    }
+    if (isValidElement(value)) {
+        return value;
+    }
+    return React.createElement(Styled, null, value);
+};
+function TableCell({ isRightAligned, value }) {
+    return (React.createElement("td", { className: "/*clsx(styles.root, isRightAligned && styles.rootIsRightAligned)*/" }, renderCellValue(value)));
+}
+TableCell.propTypes = {
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+    isRightAligned: PropTypes.bool,
+};
+export default TableCell;

package/dist/core/TableHead/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { TransformedColumn } from '../../core/TableRow';
+interface TableHeadProps {
+    hasActions?: boolean;
+    columns: TransformedColumn[];
+}
+declare function TableHead({ hasActions, columns }: TableHeadProps): React.ReactElement;
+declare namespace TableHead {
+    var propTypes: {
+        columns: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            key: PropTypes.Validator<string>;
+            title: PropTypes.Validator<string>;
+        }>>[]>;
+        hasActions: PropTypes.Requireable<boolean>;
+    };
+}
+export default TableHead;

package/dist/core/TableHead/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Assistive from '../../core/Assistive';
+function TableHead({ hasActions, columns }) {
+    return (React.createElement("thead", null,
+        React.createElement("tr", null,
+            columns.map((item) => (React.createElement("th", { key: item.key, className: "clsx(styles.root, item.isRightAligned && styles.rootIsRightAligned)" }, item.title))),
+            hasActions ? (React.createElement("th", { className: "/*clsx(styles.root)*/" },
+                React.createElement(Assistive, null, "Actions"))) : null)));
+}
+TableHead.propTypes = {
+    columns: PropTypes.arrayOf(PropTypes.shape({
+        key: PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired,
+    }).isRequired).isRequired,
+    hasActions: PropTypes.bool,
+};
+export default TableHead;

package/dist/{types/core → core}/TableRow/index.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-import type { SimpleObject, TransformedObject } from '../../utility/interfaces';
-export interface TransformedColumn {
-    key: number | string;
-    title: string;
-    isRightAligned?: boolean;
-}
-interface TableRowProps<T extends SimpleObject> {
-    columns: TransformedColumn[];
-    data: TransformedObject<T>;
-}
-declare const TableRow: <T extends SimpleObject>({ columns, data, }: TableRowProps<T>) => React.ReactElement;
-export default TableRow;
+import React from 'react';
+import type { SimpleObject, TransformedObject } from '../../utility/interfaces';
+export interface TransformedColumn {
+    key: number | string;
+    title: string;
+    isRightAligned?: boolean;
+}
+interface TableRowProps<T extends SimpleObject> {
+    columns: TransformedColumn[];
+    data: TransformedObject<T>;
+}
+declare function TableRow<T extends SimpleObject>({ columns, data }: TableRowProps<T>): React.ReactElement;
+export default TableRow;

package/dist/core/TableRow/index.js

@@ -0,0 +1,18 @@
+import React, { isValidElement } from 'react';
+import TableActionsCell from '../../core/TableActionsCell';
+import TableCell from '../../core/TableCell';
+const parseValue = (value) => {
+    if (!value) {
+        return '';
+    }
+    if (typeof value === 'object' && isValidElement(value)) {
+        return value;
+    }
+    return value.toString();
+};
+function TableRow({ columns, data }) {
+    return (React.createElement("tr", null,
+        columns.map((item) => (React.createElement(TableCell, { key: item.key, isRightAligned: item.isRightAligned, value: parseValue(data[item.key]) }))),
+        data.$actions?.length ? (React.createElement(TableActionsCell, { actions: data.$actions, data: data.$original })) : null));
+}
+export default TableRow;

package/dist/core/Tabs/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { NavigationObject } from '../../utility/interfaces';
+interface TabsProps {
+    data: NavigationObject[];
+}
+export declare function Tabs({ data }: TabsProps): React.ReactElement;
+export default Tabs;

package/dist/core/Tabs/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Allow from '../../components/Allow';
+import TabItem from '../../core/TabItem';
+import useLayout from '../../hooks/useLayout';
+import useNavigation from '../../hooks/useNavigation';
+export function Tabs({ data }) {
+    const { applyLayoutClassName } = useLayout();
+    const navigation = useNavigation(data);
+    return (React.createElement("nav", { className: "/*clsx(styles.root, applyLayoutClassName(styles))*/" },
+        React.createElement("ul", { className: "/*styles.list*/" }, navigation.map((item) => (React.createElement(Allow, { key: item.label, permission: item.permission },
+            React.createElement(TabItem, { ...item })))))));
+}
+export default Tabs;

package/dist/core/TextInputAncillary/index.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+interface TextInputAncillaryProps {
+    hasError?: boolean;
+    isClearable?: boolean;
+    isLoading?: boolean;
+    onClear: () => void;
+    prefix?: string | null;
+    suffix?: string | null;
+    value: string;
+}
+declare function TextInputAncillary({ hasError, isClearable, isLoading, onClear, prefix, suffix, value, }: TextInputAncillaryProps): React.ReactElement;
+declare namespace TextInputAncillary {
+    var propTypes: {
+        value: PropTypes.Validator<string>;
+        onClear: PropTypes.Validator<(...args: any[]) => any>;
+        /** If set to trute, the `TextInput` will be styled to indicate this */
+        hasError: PropTypes.Requireable<boolean>;
+        isClearable: PropTypes.Requireable<boolean>;
+        isLoading: PropTypes.Requireable<boolean>;
+        /**
+         * For uses of `TextInput` that involve an asynchronous process, setting this to true will add a
+         * mini version of the `Loader` component, to indicate that a process is taking place
+         */
+        prefix: PropTypes.Requireable<string>;
+        suffix: PropTypes.Requireable<string>;
+    };
+}
+export default TextInputAncillary;

package/dist/core/TextInputAncillary/index.js

@@ -0,0 +1,31 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '../../core/IconButton';
+import Loader from '../../core/Loader';
+function TextInputAncillary({ hasError, isClearable, isLoading, onClear, prefix, suffix, value, }) {
+    return (React.createElement(Fragment, null,
+        prefix ? (React.createElement("div", { className: "/*clsx(styles.prefix, hasError && styles.hasError)*/", "data-testid": "text-input-ancillary-prefix" },
+            React.createElement("span", { className: "/*styles.inner*/" }, prefix))) : null,
+        !prefix && suffix ? (React.createElement("div", { className: "/*clsx(styles.suffix, hasError && styles.hasError)*/", "data-testid": "text-input-ancillary-suffix" },
+            React.createElement("span", { className: "/*styles.inner*/" }, suffix))) : null,
+        isClearable && value ? (React.createElement("div", { className: "/*clsx(styles.clear, hasError && styles.hasError)*/", "data-testid": "text-input-ancillary-clear" },
+            React.createElement("span", { className: "/*styles.inner*/" },
+                React.createElement(IconButton, { icon: "x", onClick: () => onClear(), size: "sm" }, "Clear")))) : null,
+        isLoading ? (React.createElement("div", { className: "/*styles.loader*/" },
+            React.createElement(Loader, { isMini: true }))) : null));
+}
+TextInputAncillary.propTypes = {
+    value: PropTypes.string.isRequired,
+    onClear: PropTypes.func.isRequired,
+    /** If set to trute, the `TextInput` will be styled to indicate this */
+    hasError: PropTypes.bool,
+    isClearable: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    /**
+     * For uses of `TextInput` that involve an asynchronous process, setting this to true will add a
+     * mini version of the `Loader` component, to indicate that a process is taking place
+     */
+    prefix: PropTypes.string,
+    suffix: PropTypes.string,
+};
+export default TextInputAncillary;

package/dist/{types/core → core}/Toast/index.d.ts

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

package/dist/core/Toast/index.js

@@ -0,0 +1,47 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import { EventService } from '@sqrzro/utility';
+import IconButton from '../../core/IconButton';
+import RadialProgress from '../../core/RadialProgress';
+// Import styles from './Toast.module.css';
+const TTL = 6000;
+const iconMap = {
+    success: 'checkCircle',
+    error: 'exclamationCircle',
+};
+function Toast() {
+    const timeout = useRef();
+    const [type, setType] = useState('');
+    const [message, setMessage] = useState('');
+    const closeToast = (existingType) => {
+        EventService.publish('@toast/send', { type: existingType });
+        window.clearTimeout(timeout.current);
+    };
+    useEffect(() => {
+        const sub = EventService.subscribe('@toast/send', (_key, data) => {
+            setType(data.type);
+            setMessage(data.message);
+            if (timeout.current) {
+                window.clearTimeout(timeout.current);
+            }
+            /*
+             * A test checks if setTimeout is called in this circumstance. However, due to the
+             * nature of asynchronous code in tests, coverage does not count this as covered. It
+             * can therefore be safely ignored.
+             */
+            /* istanbul ignore next */
+            timeout.current = window.setTimeout(() => closeToast(data.type), TTL);
+        });
+        return () => {
+            EventService.unsubscribe(sub);
+        };
+    }, []);
+    return (React.createElement("aside", { className: "clsx(styles.root, message && styles.rootIsOpen, type && styles[`root${ucwords(type)}`])", "data-testid": "toast-root" },
+        React.createElement("div", { className: "/*styles.inner*/" },
+            message ? (React.createElement("div", { className: "/*styles.progress*/" },
+                React.createElement(RadialProgress, { duration: TTL, icon: iconMap[type], variant: type }))) : null,
+            React.createElement("p", { className: "/*styles.content*/" }, message),
+            React.createElement("div", { className: "/*styles.close*/" },
+                React.createElement(IconButton, { icon: "x", onClick: () => closeToast(type), variant: "white" }, "Close")))));
+}
+export default Toast;

package/dist/core/TwoFactor/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface TwoFactorFields {
+    provider: string;
+    twofactor_code: string;
+}
+interface TwoFactorProps<T = TwoFactorFields> {
+    formData: T;
+    isLoading: boolean;
+    onSubmit: (event?: React.FormEvent<HTMLFormElement>) => void;
+    setFormData: (key: keyof T, value: T[keyof T]) => void;
+}
+declare function TwoFactor({ formData, isLoading, onSubmit, setFormData, }: TwoFactorProps): React.ReactElement;
+export default TwoFactor;

package/dist/core/TwoFactor/index.js

@@ -0,0 +1,49 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import ContentBlock from '../../components/ContentBlock';
+import TwoFactorAuthenticator from '../../core/TwoFactorAuthenticator';
+import TwoFactorYubikey from '../../core/TwoFactorYubikey';
+import TwoFactorMethodList, { TwoFactorMethods } from '../../core/TwoFactorMethodList';
+const MIN_KEYDOWN_TIME = 50;
+function TwoFactor({ formData, isLoading, onSubmit, setFormData, }) {
+    const [activePanel, setActivePanel] = useState(null);
+    const lastKeyDown = useRef(0);
+    const handlePanel = (panel) => {
+        setActivePanel(panel);
+        setFormData('provider', panel);
+    };
+    const handleChange = (event) => {
+        setFormData('twofactor_code', event.target.value);
+    };
+    const handleKeyDown = (event) => {
+        if (activePanel) {
+            return;
+        }
+        if (/[0-9]/u.test(event.key)) {
+            handlePanel(TwoFactorMethods.google);
+            return;
+        }
+        if (Date.now() - lastKeyDown.current < MIN_KEYDOWN_TIME) {
+            setFormData('twofactor_code', event.key);
+            handlePanel(TwoFactorMethods.yubikey);
+        }
+        lastKeyDown.current = Date.now();
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    });
+    switch (activePanel) {
+        case TwoFactorMethods.google:
+            return (React.createElement(TwoFactorAuthenticator, { isDisabled: isLoading, onChange: handleChange, onSubmit: onSubmit, value: formData.twofactor_code }));
+        case TwoFactorMethods.yubikey:
+            return (React.createElement(TwoFactorYubikey, { onChange: handleChange, onSubmit: onSubmit, value: formData.twofactor_code }));
+        default:
+            return (React.createElement("div", null,
+                React.createElement(ContentBlock, { isCentered: true }, "Please verify your identity using one of the following methods:"),
+                React.createElement(TwoFactorMethodList, { onSelect: handlePanel })));
+    }
+}
+export default TwoFactor;

package/dist/{types/core/LoginFormAuthenticator → core/TwoFactorAuthenticator}/index.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import type { InputEvent } from '../../utility/interfaces';
-interface LoginFormAuthenticatorProps {
-    isDisabled: boolean;
-    onChange: (event: InputEvent<string>) => void;
-    onSubmit: (event?: React.FormEvent<HTMLFormElement>) => void;
-    value: string;
-}
-declare const LoginFormAuthenticator: ({ isDisabled, onChange, onSubmit, value, }: LoginFormAuthenticatorProps) => React.ReactElement;
-export default LoginFormAuthenticator;
+import React from 'react';
+import type { InputEvent } from '../../utility/interfaces';
+interface TwoFactorAuthenticatorProps {
+    isDisabled: boolean;
+    onChange: (event: InputEvent<string>) => void;
+    onSubmit: (event?: React.FormEvent<HTMLFormElement>) => void;
+    value: string;
+}
+declare function TwoFactorAuthenticator({ isDisabled, onChange, onSubmit, value, }: TwoFactorAuthenticatorProps): React.ReactElement;
+export default TwoFactorAuthenticator;

package/dist/core/TwoFactorAuthenticator/index.js

@@ -0,0 +1,9 @@
+import React, { Fragment } from 'react';
+import CodeInput from '../../components/CodeInput';
+import ContentBlock from '../../components/ContentBlock';
+function TwoFactorAuthenticator({ isDisabled, onChange, onSubmit, value, }) {
+    return (React.createElement(Fragment, null,
+        React.createElement(ContentBlock, { isCentered: true }, "Please verify your identity by entering the code generated by your Authenticator app:"),
+        React.createElement(CodeInput, { isDisabled: isDisabled, name: "twofactor_code", onChange: onChange, onFinalChange: () => onSubmit(), value: value, isAutoFocus: true })));
+}
+export default TwoFactorAuthenticator;

package/dist/core/TwoFactorMethodList/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare enum TwoFactorMethods {
+    google = "google",
+    yubikey = "yubikey"
+}
+interface TwoFactorMethodListProps {
+    onSelect: (method: TwoFactorMethods) => void;
+}
+declare function TwoFactorMethodList({ onSelect }: TwoFactorMethodListProps): React.ReactElement;
+export default TwoFactorMethodList;

package/dist/core/TwoFactorMethodList/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { AuthenticatorIcon, YubikeyIcon } from '../../utility/icons';
+// Import styles from './TwoFactorMethodList.module.css';
+export var TwoFactorMethods;
+(function (TwoFactorMethods) {
+    TwoFactorMethods["google"] = "google";
+    TwoFactorMethods["yubikey"] = "yubikey";
+})(TwoFactorMethods || (TwoFactorMethods = {}));
+function TwoFactorMethodList({ onSelect }) {
+    return (React.createElement("ul", { className: "/*styles.root*/" },
+        React.createElement("li", { className: "/*styles.option*/" },
+            React.createElement("div", { className: "/*styles.icon*/" },
+                React.createElement(AuthenticatorIcon, null)),
+            React.createElement("span", { className: "/*styles.label*/" }, "Authenticator"),
+            React.createElement("button", { className: "/*styles.control*/", onClick: () => onSelect(TwoFactorMethods.google), type: "button" }, "Select")),
+        React.createElement("li", { className: "/*styles.option*/" },
+            React.createElement("div", { className: "/*styles.icon*/" },
+                React.createElement(YubikeyIcon, null)),
+            React.createElement("span", { className: "/*styles.label*/" }, "Yubikey"),
+            React.createElement("button", { className: "/*styles.control*/", onClick: () => onSelect(TwoFactorMethods.yubikey), type: "button" }, "Select"))));
+}
+export default TwoFactorMethodList;

package/dist/core/TwoFactorSetup/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface TwoFactorData {
+    identifier: string;
+    password: string;
+    provider: string;
+    twofactor_code: string;
+}
+interface TwoFactorProps {
+    data: TwoFactorData;
+}
+declare function TwoFactor({ data }: TwoFactorProps): React.ReactElement;
+export default TwoFactor;

package/dist/core/TwoFactorSetup/index.js

@@ -0,0 +1,43 @@
+'use client';
+import React, { useState } from 'react';
+import { useForm, useUniqid } from '@sqrzro/hooks';
+import { AuthService } from '@sqrzro/utility';
+import ContentBlock from '../../components/ContentBlock';
+import TwoFactorMethodList, { TwoFactorMethods } from '../../core/TwoFactorMethodList';
+import TwoFactorSetupAuthenticator from '../../core/TwoFactorSetupAuthenticator';
+import TwoFactorSetupYubikey from '../../core/TwoFactorSetupYubikey';
+function TwoFactor({ data }) {
+    const uniqid = useUniqid();
+    const [activePanel, setActivePanel] = useState(null);
+    const { formData, isLoading, handleSubmit, setFormData } = useForm({
+        defaults: {
+            name: `${data.identifier}_${uniqid}`,
+            one_time_code: '',
+            password: data.password,
+            provider: data.provider,
+            secret: '',
+        },
+        errorMessage: false,
+        hasFieldErrors: false,
+        onSubmitSuccess: () => AuthService.login(),
+        successMessage: false,
+        url: 'auth/two-factor',
+    });
+    const handlePanel = (panel) => {
+        setActivePanel(panel);
+        setFormData('provider', panel);
+    };
+    switch (activePanel) {
+        case TwoFactorMethods.google:
+            return (React.createElement(TwoFactorSetupAuthenticator, { formData: formData, isLoading: isLoading, onSubmit: handleSubmit, setFormData: setFormData }));
+        case TwoFactorMethods.yubikey:
+            return (React.createElement(TwoFactorSetupYubikey, { formData: formData, isLoading: isLoading, onSubmit: handleSubmit, setFormData: setFormData }));
+        default:
+            return (React.createElement("div", null,
+                React.createElement(ContentBlock, { isCentered: true },
+                    React.createElement("p", null, "You will need to setup two factor authentication (2FA). This protects your account with an additional login step."),
+                    React.createElement("p", null, "To get started, select which device you would like to use:")),
+                React.createElement(TwoFactorMethodList, { onSelect: handlePanel })));
+    }
+}
+export default TwoFactor;

package/dist/core/TwoFactorSetupAuthenticator/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare enum TwoFactorSetupAuthenticatorPanels {
+    image = "image",
+    code = "code"
+}
+interface TwoFactorFields {
+    name: string;
+    one_time_code: string;
+    password: string;
+    provider: string;
+    secret: string;
+}
+interface TwoFactorSetupAuthenticatorProps<T = TwoFactorFields> {
+    formData: T;
+    isLoading: boolean;
+    onSubmit: (event?: React.FormEvent<HTMLFormElement>) => void;
+    setFormData: (key: keyof T, value: T[keyof T]) => void;
+}
+declare function TwoFactorSetupAuthenticator({ formData, isLoading, onSubmit, setFormData, }: TwoFactorSetupAuthenticatorProps): React.ReactElement | null;
+export default TwoFactorSetupAuthenticator;

package/dist/core/TwoFactorSetupAuthenticator/index.js

@@ -0,0 +1,42 @@
+'use client';
+import React, { Fragment, useEffect, useState } from 'react';
+import Button from '../../components/Button';
+import CodeInput from '../../components/CodeInput';
+import ContentBlock from '../../components/ContentBlock';
+import { ApiService } from '@sqrzro/utility';
+// Import styles from './TwoFactorSetupAuthenticator.module.css';
+export var TwoFactorSetupAuthenticatorPanels;
+(function (TwoFactorSetupAuthenticatorPanels) {
+    TwoFactorSetupAuthenticatorPanels["image"] = "image";
+    TwoFactorSetupAuthenticatorPanels["code"] = "code";
+})(TwoFactorSetupAuthenticatorPanels || (TwoFactorSetupAuthenticatorPanels = {}));
+function TwoFactorSetupAuthenticator({ formData, isLoading, onSubmit, setFormData, }) {
+    const [imageUrl, setImageUrl] = useState('');
+    const [activePanel, setActivePanel] = useState(TwoFactorSetupAuthenticatorPanels.image);
+    const getSecret = async () => {
+        const response = await ApiService.get('auth/two_factor/google/secret');
+        setFormData('secret', response.data.secret);
+        setImageUrl(response.data.url);
+    };
+    useEffect(() => {
+        void getSecret();
+    }, []);
+    switch (activePanel) {
+        case TwoFactorSetupAuthenticatorPanels.image:
+            return (React.createElement(Fragment, null,
+                React.createElement(ContentBlock, { isCentered: true },
+                    React.createElement("strong", null, "Step One."),
+                    " Open your Authenticator app and scan the QR code below:"),
+                React.createElement("div", { className: "/*styles.image*/" }, imageUrl ? React.createElement("img", { height: "100", src: imageUrl, width: "100" }) : null),
+                React.createElement(Button, { onClick: () => setActivePanel(TwoFactorSetupAuthenticatorPanels.code), isFullWidth: true }, "Next")));
+        case TwoFactorSetupAuthenticatorPanels.code:
+            return (React.createElement(Fragment, null,
+                React.createElement(ContentBlock, { isCentered: true },
+                    React.createElement("strong", null, "Step Two."),
+                    " Verify your identity by entering the code generated by your Authenticator app:"),
+                React.createElement(CodeInput, { isDisabled: isLoading, name: "one_time_code", onChange: (event) => setFormData('one_time_code', event.target.value), onFinalChange: () => onSubmit(), value: formData.one_time_code, isAutoFocus: true })));
+        default:
+            return null;
+    }
+}
+export default TwoFactorSetupAuthenticator;

package/dist/core/TwoFactorSetupYubikey/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface TwoFactorFields {
+    name: string;
+    one_time_code: string;
+    password: string;
+    provider: string;
+    secret: string;
+}
+interface TwoFactorSetupYubikeyProps<T = TwoFactorFields> {
+    formData: T;
+    isLoading: boolean;
+    onSubmit: (event?: React.FormEvent<HTMLFormElement>) => void;
+    setFormData: (key: keyof T, value: T[keyof T]) => void;
+}
+declare function TwoFactorSetupYubikey({ formData, isLoading, onSubmit, setFormData, }: TwoFactorSetupYubikeyProps): React.ReactElement | null;
+export default TwoFactorSetupYubikey;

package/dist/core/TwoFactorSetupYubikey/index.js

@@ -0,0 +1,14 @@
+import React, { Fragment } from 'react';
+import ContentBlock from '../../components/ContentBlock';
+import YubikeyInput from '../../core/YubikeyInput';
+function TwoFactorSetupYubikey({ formData, isLoading, onSubmit, setFormData, }) {
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            onSubmit();
+        }
+    };
+    return (React.createElement(Fragment, null,
+        React.createElement(ContentBlock, { isCentered: true }, "Verify your identity by entering the code generated by your Authenticator app:"),
+        React.createElement(YubikeyInput, { isDisabled: isLoading, name: "secret", onChange: (event) => setFormData('secret', event.target.value), onKeyDown: handleKeyDown, value: formData.secret })));
+}
+export default TwoFactorSetupYubikey;

package/dist/{types/core/LoginFormYubikey → core/TwoFactorYubikey}/index.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-import type { InputEvent } from '../../utility/interfaces';
-interface LoginFormYubikeyProps {
-    onChange: (event: InputEvent<string>) => void;
-    onSubmit: (event?: React.FormEvent<HTMLFormElement>) => void;
-    value: string;
-}
-declare const LoginFormYubikey: ({ onChange, onSubmit, value, }: LoginFormYubikeyProps) => React.ReactElement;
-export default LoginFormYubikey;
+import React from 'react';
+import type { InputEvent } from '../../utility/interfaces';
+interface TwoFactorYubikeyProps {
+    onChange: (event: InputEvent<string>) => void;
+    onSubmit: (event?: React.FormEvent<HTMLFormElement>) => void;
+    value: string;
+}
+declare function TwoFactorYubikey({ onChange, onSubmit, value, }: TwoFactorYubikeyProps): React.ReactElement;
+export default TwoFactorYubikey;

package/dist/core/TwoFactorYubikey/index.js

@@ -0,0 +1,14 @@
+import React, { Fragment } from 'react';
+import ContentBlock from '../../components/ContentBlock';
+import YubikeyInput from '../../core/YubikeyInput';
+function TwoFactorYubikey({ onChange, onSubmit, value, }) {
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            onSubmit();
+        }
+    };
+    return (React.createElement(Fragment, null,
+        React.createElement(ContentBlock, { isCentered: true }, "Please verify your identity by pressing the button or gold disc on your Yubikey."),
+        React.createElement(YubikeyInput, { name: "twofactor_code", onChange: onChange, onKeyDown: handleKeyDown, value: value })));
+}
+export default TwoFactorYubikey;