@sqrzro/auth 2.0.0-bz.4 → 2.0.0-bz.5

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

@@ -1,8 +1,5 @@
 /// <reference types="react" />
-import type { AuthClassNames } from '../Auth';
 export interface MFAFormProps {
-    classNames?: Partial<AuthClassNames>;
-    hasAssistiveSubmit?: boolean;
 }
-declare function MFAForm({ hasAssistiveSubmit }: Readonly<MFAFormProps>): React.ReactElement;
+declare function MFAForm(): React.ReactElement;
 export default MFAForm;

package/dist/components/MFAForm/index.js

@@ -1,29 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { CodeFormField, Form, FormSubmit, tw } from '@sqrzro/components';
-import { useForm } from '@sqrzro/hooks';
-import { useRouter } from 'next/navigation';
+import { CodeFormField, Form, FormSubmit } from '@sqrzro/components';
+import useMFAForm from '../../hooks/useMFAForm';
 import { submitMFAForm } from '../../server';
-function MFAForm({ hasAssistiveSubmit }) {
-    const router = useRouter();
-    const [errorCount, setErrorCount] = useState(0);
-    const { fieldProps, formProps, resetForm, submitForm } = useForm({
-        onSubmit: submitMFAForm,
-        onSuccess: () => {
-            router.push('/');
-        },
-        onValidationError: () => {
-            setErrorCount((count) => count + 1);
-        },
-        toasts: {
-            success: false,
-            validation: "There seems to be an issue with the code you've entered. Please try again.",
-        },
-    });
-    useEffect(() => {
-        resetForm();
-    }, [errorCount]);
-    return (_jsxs(Form, { ...formProps, children: [_jsx(CodeFormField, { ...fieldProps('token'), onFinalChange: submitForm, hasAssistiveLabel: true, isAutoFocus: true }, errorCount), _jsx("div", { className: tw(hasAssistiveSubmit ? 'sr-only' : ''), children: _jsx(FormSubmit, { children: "Verify" }) })] }));
+function MFAForm() {
+    const { formProps, fieldProps, key, submitForm } = useMFAForm({ onSubmit: submitMFAForm });
+    return (_jsxs(Form, { ...formProps, children: [_jsx(CodeFormField, { ...fieldProps('token'), onFinalChange: submitForm, hasAssistiveLabel: true, isAutoFocus: true }, key), _jsx(FormSubmit, { children: "Verify" })] }));
 }
 export default MFAForm;

package/dist/components/MFAPage/index.js

@@ -16,6 +16,6 @@ async function MFAPage({ classNames }) {
     if (!userHasMFA) {
         return _jsx(MFASetup, { classNames: classNames });
     }
-    return (_jsxs("div", { children: [_jsx("h1", { className: tw('text-center', classNames?.title), children: "Multi-Factor Authentication" }), _jsx("p", { className: "mb-6 text-center", children: "Enter the 6-digit code listed in your authentication app:" }), _jsx(MFAForm, { classNames: classNames, hasAssistiveSubmit: true })] }));
+    return (_jsxs("div", { children: [_jsx("h1", { className: tw('text-center', classNames?.title), children: "Multi-Factor Authentication" }), _jsx("p", { className: "mb-6 text-center", children: "Enter the 6-digit code listed in your authentication app:" }), _jsx(MFAForm, {})] }));
 }
 export default MFAPage;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import type { AuthClassNames } from '../Auth';
-export interface MFASetupProps {
+export interface MFASetupFormProps {
     classNames?: Partial<AuthClassNames>;
     url: string;
 }
-declare function MFASetupForm({ classNames, url }: Readonly<MFASetupProps>): React.ReactElement;
+declare function MFASetupForm({ classNames, url }: Readonly<MFASetupFormProps>): React.ReactElement;
 export default MFASetupForm;

package/dist/components/MFASetupForm/index.js

@@ -12,9 +12,6 @@ function MFASetupForm({ classNames, url }) {
         event.preventDefault();
         setStep(1);
     }
-    if (step === 1) {
-        return (_jsxs(Fragment, { children: [_jsx("p", { className: "mb-4", children: "You'll need to setup an additional authentication step before you can continue." }), _jsx("figure", { className: "flex justify-center rounded border p-2", children: _jsx("img", { alt: "qrcode", src: url }) }), _jsxs("p", { className: "mb-4", children: [_jsx("strong", { children: "Step 1:" }), " Scan the QR code, or enter the secret below, in the Google Authentictor app."] }), _jsx(Button, { onClick: nextStep, variant: "primary", isFullWidth: true, children: "Continue" })] }));
-    }
-    return (_jsxs(Fragment, { children: [_jsxs("p", { className: "mb-4", children: [_jsx("strong", { children: "Step 2:" }), " Enter the 6-digit code listed in the Google Authenticator app:"] }), _jsx(MFAForm, {}), _jsx(Link, { className: classNames?.link, onClick: previousStep, children: "Scan QRcode again" })] }));
+    return (_jsxs(Fragment, { children: [_jsxs("div", { className: step === 1 ? null : 'sr-only', children: [_jsx("p", { className: "mb-4", children: "You'll need to setup an additional authentication step before you can continue." }), _jsx("figure", { className: "flex justify-center rounded border p-2", children: _jsx("img", { alt: "qrcode", src: url }) }), _jsxs("p", { className: "mb-4", children: [_jsx("strong", { children: "Step 1:" }), " Scan the QR code, or enter the secret below, in the Google Authentictor app."] }), _jsx(Button, { onClick: nextStep, variant: "primary", isFullWidth: true, children: "Continue" })] }), _jsxs("div", { className: step === 2 ? null : 'sr-only', children: [_jsxs("p", { className: "mb-4", children: [_jsx("strong", { children: "Step 2:" }), " Enter the 6-digit code listed in the Google Authenticator app:"] }), _jsx(MFAForm, {}), _jsx(Link, { className: classNames?.link, onClick: previousStep, children: "Scan QRcode again" })] })] }));
 }
 export default MFASetupForm;

package/dist/hooks/useMFAForm.d.ts

@@ -0,0 +1,10 @@
+import type { UseFormArgs, UseFormReturn } from '@sqrzro/hooks';
+import type { MFAFormFields } from '../server';
+export interface UseMFAFormArgs {
+    onSubmit: UseFormArgs<MFAFormFields, boolean>['onSubmit'];
+}
+export interface UseMFAFormReturn extends UseFormReturn<MFAFormFields> {
+    key: number;
+}
+declare function useMFAForm({ onSubmit }: UseMFAFormArgs): UseMFAFormReturn;
+export default useMFAForm;

package/dist/hooks/useMFAForm.js

@@ -0,0 +1,26 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { useForm } from '@sqrzro/hooks';
+import { useRouter } from 'next/navigation';
+function useMFAForm({ onSubmit }) {
+    const router = useRouter();
+    const [errorCount, setErrorCount] = useState(0);
+    const form = useForm({
+        onSubmit,
+        onSuccess: () => {
+            router.push('/');
+        },
+        onValidationError: () => {
+            setErrorCount((count) => count + 1);
+        },
+        toasts: {
+            success: false,
+            validation: "There seems to be an issue with the code you've entered. Please try again.",
+        },
+    });
+    useEffect(() => {
+        form.resetForm();
+    }, [errorCount]);
+    return { ...form, key: errorCount };
+}
+export default useMFAForm;

package/dist/index.d.ts

@@ -1,3 +1,7 @@
 export { default as Auth } from './components/Auth';
 export type { AuthClassNames, AuthProps } from './components/Auth';
+export type { MFASetupProps } from './components/MFASetup';
+export { default as MFASetup } from './components/MFASetup';
 export { default as LogoutButton } from './components/LogoutButton';
+export type { UseMFAFormArgs, UseMFAFormReturn } from './hooks/useMFAForm';
+export { default as useMFAForm } from './hooks/useMFAForm';

package/dist/index.js

@@ -1,2 +1,4 @@
 export { default as Auth } from './components/Auth';
+export { default as MFASetup } from './components/MFASetup';
 export { default as LogoutButton } from './components/LogoutButton';
+export { default as useMFAForm } from './hooks/useMFAForm';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/auth",
   "type": "module",
-  "version": "2.0.0-bz.4",
+  "version": "2.0.0-bz.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/components/MFAForm/index.tsx

@@ -1,57 +1,25 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-
-import { CodeFormField, Form, FormSubmit, tw } from '@sqrzro/components';
-import { useForm } from '@sqrzro/hooks';
-import { useRouter } from 'next/navigation';
+import { CodeFormField, Form, FormSubmit } from '@sqrzro/components';
 
+import useMFAForm from '../../hooks/useMFAForm';
 import { submitMFAForm } from '../../server';
-import type { MFAFormFields } from '../../server';
-
-import type { AuthClassNames } from '../Auth';
-
-export interface MFAFormProps {
-    classNames?: Partial<AuthClassNames>;
-    hasAssistiveSubmit?: boolean;
-}
-
-function MFAForm({ hasAssistiveSubmit }: Readonly<MFAFormProps>): React.ReactElement {
-    const router = useRouter();
-
-    const [errorCount, setErrorCount] = useState(0);
 
-    const { fieldProps, formProps, resetForm, submitForm } = useForm<MFAFormFields, boolean>({
-        onSubmit: submitMFAForm,
-        onSuccess: () => {
-            router.push('/');
-        },
-        onValidationError: () => {
-            setErrorCount((count) => count + 1);
-        },
-        toasts: {
-            success: false,
-            validation:
-                "There seems to be an issue with the code you've entered. Please try again.",
-        },
-    });
+export interface MFAFormProps {}
 
-    useEffect(() => {
-        resetForm();
-    }, [errorCount]);
+function MFAForm(): React.ReactElement {
+    const { formProps, fieldProps, key, submitForm } = useMFAForm({ onSubmit: submitMFAForm });
 
     return (
         <Form {...formProps}>
             <CodeFormField
-                key={errorCount}
+                key={key}
                 {...fieldProps('token')}
                 onFinalChange={submitForm}
                 hasAssistiveLabel
                 isAutoFocus
             />
-            <div className={tw(hasAssistiveSubmit ? 'sr-only' : '')}>
-                <FormSubmit>Verify</FormSubmit>
-            </div>
+            <FormSubmit>Verify</FormSubmit>
         </Form>
     );
 }

package/src/components/MFAPage/index.tsx

@@ -34,7 +34,7 @@ async function MFAPage({ classNames }: Readonly<MFAPageProps>): Promise<React.Re
             <p className="mb-6 text-center">
                 Enter the 6-digit code listed in your authentication app:
             </p>
-            <MFAForm classNames={classNames} hasAssistiveSubmit />
+            <MFAForm />
         </div>
     );
 }

package/src/components/MFASetupForm/index.tsx

@@ -7,12 +7,12 @@ import { Button, Link } from '@sqrzro/components';
 import type { AuthClassNames } from '../Auth';
 import MFAForm from '../MFAForm';
 
-export interface MFASetupProps {
+export interface MFASetupFormProps {
     classNames?: Partial<AuthClassNames>;
     url: string;
 }
 
-function MFASetupForm({ classNames, url }: Readonly<MFASetupProps>): React.ReactElement {
+function MFASetupForm({ classNames, url }: Readonly<MFASetupFormProps>): React.ReactElement {
     const [step, setStep] = useState(1);
 
     function nextStep(): void {
@@ -24,9 +24,9 @@ function MFASetupForm({ classNames, url }: Readonly<MFASetupProps>): React.React
         setStep(1);
     }
 
-    if (step === 1) {
-        return (
-            <Fragment>
+    return (
+        <Fragment>
+            <div className={step === 1 ? null : 'sr-only'}>
                 <p className="mb-4">
                     You&#39;ll need to setup an additional authentication step before you can
                     continue.
@@ -36,25 +36,22 @@ function MFASetupForm({ classNames, url }: Readonly<MFASetupProps>): React.React
                 </figure>
                 <p className="mb-4">
                     <strong>Step 1:</strong> Scan the QR code, or enter the secret below, in the
-                    Google Authentictor app.
+                    Google Authenticator app.
                 </p>
                 <Button onClick={nextStep} variant="primary" isFullWidth>
                     Continue
                 </Button>
-            </Fragment>
-        );
-    }
-
-    return (
-        <Fragment>
-            <p className="mb-4">
-                <strong>Step 2:</strong> Enter the 6-digit code listed in the Google Authenticator
-                app:
-            </p>
-            <MFAForm />
-            <Link className={classNames?.link} onClick={previousStep}>
-                Scan QRcode again
-            </Link>
+            </div>
+            <div className={step === 2 ? null : 'sr-only'}>
+                <p className="mb-4">
+                    <strong>Step 2:</strong> Enter the 6-digit code listed in the Google
+                    Authenticator app:
+                </p>
+                <MFAForm />
+                <Link className={classNames?.link} onClick={previousStep}>
+                    Scan QRcode again
+                </Link>
+            </div>
         </Fragment>
     );
 }

package/src/hooks/useMFAForm.ts

@@ -0,0 +1,46 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useForm } from '@sqrzro/hooks';
+import type { UseFormArgs, UseFormReturn } from '@sqrzro/hooks';
+import { useRouter } from 'next/navigation';
+
+import type { MFAFormFields } from '../server';
+
+export interface UseMFAFormArgs {
+    onSubmit: UseFormArgs<MFAFormFields, boolean>['onSubmit'];
+}
+
+export interface UseMFAFormReturn extends UseFormReturn<MFAFormFields> {
+    key: number;
+}
+
+function useMFAForm({ onSubmit }: UseMFAFormArgs): UseMFAFormReturn {
+    const router = useRouter();
+
+    const [errorCount, setErrorCount] = useState(0);
+
+    const form = useForm<MFAFormFields, boolean>({
+        onSubmit,
+        onSuccess: () => {
+            router.push('/');
+        },
+        onValidationError: () => {
+            setErrorCount((count) => count + 1);
+        },
+        toasts: {
+            success: false,
+            validation:
+                "There seems to be an issue with the code you've entered. Please try again.",
+        },
+    });
+
+    useEffect(() => {
+        form.resetForm();
+    }, [errorCount]);
+
+    return { ...form, key: errorCount };
+}
+
+export default useMFAForm;

package/src/index.ts

@@ -1,3 +1,10 @@
 export { default as Auth } from './components/Auth';
 export type { AuthClassNames, AuthProps } from './components/Auth';
+
+export type { MFASetupProps } from './components/MFASetup';
+export { default as MFASetup } from './components/MFASetup';
+
 export { default as LogoutButton } from './components/LogoutButton';
+
+export type { UseMFAFormArgs, UseMFAFormReturn } from './hooks/useMFAForm';
+export { default as useMFAForm } from './hooks/useMFAForm';

package/src/components/MFAPage/index.js

@@ -1,78 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var components_1 = require("@sqrzro/components");
-var navigation_1 = require("next/navigation");
-var MFAForm_1 = require("../MFAForm");
-var MFASetup_1 = require("../MFASetup");
-var server_1 = require("../../server");
-function MFAPage(_a) {
-    return __awaiter(this, arguments, void 0, function (_b) {
-        var user, userHasMFA;
-        var classNames = _b.classNames;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0: return [4 /*yield*/, (0, server_1.checkMFAEnabled)()];
-                case 1:
-                    if (!(_c.sent())) {
-                        return [2 /*return*/, (0, navigation_1.notFound)()];
-                    }
-                    return [4 /*yield*/, (0, server_1.getSessionUser)()];
-                case 2:
-                    user = _c.sent();
-                    if (!user) {
-                        return [2 /*return*/, <div>Error</div>];
-                    }
-                    return [4 /*yield*/, (0, server_1.checkUserHasMFA)(user)];
-                case 3:
-                    userHasMFA = _c.sent();
-                    if (!userHasMFA) {
-                        return [2 /*return*/, <MFASetup_1.default classNames={classNames}/>];
-                    }
-                    return [2 /*return*/, (<div>
-            <h1 className={(0, components_1.tw)('text-center', classNames === null || classNames === void 0 ? void 0 : classNames.title)}>Multi-Factor Authentication</h1>
-            <p className="mb-6 text-center">
-                Enter the 6-digit code listed in your authentication app:
-            </p>
-            <MFAForm_1.default classNames={classNames} hasAssistiveSubmit/>
-        </div>)];
-            }
-        });
-    });
-}
-exports.default = MFAPage;