@sqrzro/auth 4.0.0-alpha.10 → 4.0.0-alpha.11

package/dist/forms/LoginForm/index.js

@@ -8,6 +8,6 @@ function LoginForm({ classNames }) {
     const { fieldProps, formData, formProps } = useForm({
         onSubmit: submit,
     });
-    return (_jsxs(Fragment, { children: [_jsx("h1", { className: classNames?.title, children: "Sign in to continue" }), _jsxs(Form, { classNames: { root: classNames?.form }, ...formProps, children: [_jsx(TextFormField, { ...fieldProps('email'), hasAssistiveError: true }), _jsx(PasswordFormField, { ...fieldProps('password'), hasAssistiveError: true }), _jsx("div", { className: classNames?.actions, children: _jsx(FormSubmit, { isFullWidth: true, children: "Sign In" }) }), _jsx("footer", { className: classNames?.footer, children: _jsx(Link, { className: classNames?.link, href: `/auth/password${formData.email ? `?email=${formData.email}` : ''}`, children: "Forgot Password?" }) })] })] }));
+    return (_jsxs(Fragment, { children: [_jsx("h1", { className: classNames?.title, children: "Sign in to continue" }), _jsxs(Form, { classNames: { root: classNames?.form }, ...formProps, children: [_jsx("div", { className: classNames?.field, children: _jsx(TextFormField, { ...fieldProps('email'), hasAssistiveError: true }) }), _jsx("div", { className: classNames?.field, children: _jsx(PasswordFormField, { ...fieldProps('password'), hasAssistiveError: true }) }), _jsx("div", { className: classNames?.actions, children: _jsx(FormSubmit, { isFullWidth: true, children: "Sign In" }) }), _jsx("footer", { className: classNames?.footer, children: _jsx(Link, { className: classNames?.link, href: `/auth/password${formData.email ? `?email=${formData.email}` : ''}`, children: "Forgot Password?" }) })] })] }));
 }
 export default LoginForm;

package/dist/forms/PasswordForm/index.js

@@ -22,6 +22,6 @@ function PasswordForm({ classNames, defaults }) {
         setFormData('email', '');
         setSentCount(0);
     }
-    return (_jsxs(Fragment, { children: [_jsx("div", { style: { display: sentCount === 0 ? 'block' : 'none' }, children: _jsxs(Form, { ...formProps, children: [_jsx("h1", { className: classNames?.title, children: "Reset Your Password" }), _jsx("p", { className: "text-sm", children: "Enter the email address associated with your account and we'll send you a link to reset your password." }), _jsx(TextFormField, { ...fieldProps('email'), hasAssistiveError: true }), _jsx("div", { className: classNames?.actions, children: _jsx(FormSubmit, { isFullWidth: true, children: "Send Email" }) }), _jsx("footer", { className: classNames?.footer, children: _jsx(Link, { className: classNames?.link, href: "/auth/login", children: "Back" }) })] }) }), _jsx("div", { style: { display: sentCount === 0 ? 'none' : 'block' }, children: _jsxs("div", { className: classNames?.form, children: [_jsx("h1", { className: classNames?.title, children: "Check Your Email" }), sentCount === 1 ? (_jsxs(Fragment, { children: [_jsxs("p", { className: "text-sm", children: ["If ", _jsx("strong", { children: formData.email }), " matches an email we have on file, then we've sent you an email containing further instructions for resetting your password."] }), _jsxs("p", { className: "text-sm", children: ["If you haven't received an email in 5 minutes, check your spam,", ' ', _jsx(Link, { className: classNames?.link, onClick: handleResend, children: "resend" }), ", or", ' ', _jsx(Link, { className: classNames?.link, onClick: handleReset, children: "try a different email address" }), "."] })] })) : (_jsxs(Fragment, { children: [_jsxs("p", { className: "text-sm", children: ["We've resent password reset instructions to", ' ', _jsx("strong", { children: formData.email }), ", if it is an email we have on file."] }), _jsxs("p", { className: "text-sm", children: ["Please check again. If you still haven't received an email,", ' ', _jsx(Link, { className: classNames?.link, onClick: handleReset, children: "try a different email address" }), "."] })] }))] }) })] }));
+    return (_jsxs(Fragment, { children: [_jsx("div", { style: { display: sentCount === 0 ? 'block' : 'none' }, children: _jsxs(Form, { classNames: { root: classNames?.form }, ...formProps, children: [_jsx("h1", { className: classNames?.title, children: "Reset Your Password" }), _jsx("div", { className: classNames?.content, children: _jsx("p", { children: "Enter the email address associated with your account and we'll send you a link to reset your password." }) }), _jsx("div", { className: classNames?.field, children: _jsx(TextFormField, { ...fieldProps('email'), hasAssistiveError: true }) }), _jsx("div", { className: classNames?.actions, children: _jsx(FormSubmit, { isFullWidth: true, children: "Send Email" }) }), _jsx("footer", { className: classNames?.footer, children: _jsx(Link, { className: classNames?.link, href: "/auth/login", children: "Back" }) })] }) }), _jsx("div", { style: { display: sentCount === 0 ? 'none' : 'block' }, children: _jsxs("div", { className: classNames?.form, children: [_jsx("h1", { className: classNames?.title, children: "Check Your Email" }), sentCount === 1 ? (_jsxs("div", { className: classNames?.content, children: [_jsxs("p", { children: ["If ", _jsx("strong", { children: formData.email }), " matches an email we have on file, then we've sent you an email containing further instructions for resetting your password."] }), _jsxs("p", { children: ["If you haven't received an email in 5 minutes, check your spam,", ' ', _jsx(Link, { className: classNames?.link, onClick: handleResend, children: "resend" }), ", or", ' ', _jsx(Link, { className: classNames?.link, onClick: handleReset, children: "try a different email address" }), "."] })] })) : (_jsxs("div", { className: classNames?.content, children: [_jsxs("p", { children: ["We've resent password reset instructions to", ' ', _jsx("strong", { children: formData.email }), ", if it is an email we have on file."] }), _jsxs("p", { children: ["Please check again. If you still haven't received an email,", ' ', _jsx(Link, { className: classNames?.link, onClick: handleReset, children: "try a different email address" }), "."] })] }))] }) })] }));
 }
 export default PasswordForm;

package/dist/forms/PasswordResetForm/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import { Form, FormSubmit, useForm } from '@sqrzro/ui/forms';
 import PasswordComplexityFormField from '../../components/PasswordComplexityFormField';
 import submit from './server';
@@ -10,6 +10,6 @@ function PasswordResetForm({ classNames, token, }) {
         defaults: { token },
         onSubmit: submit,
     });
-    return (_jsx(Fragment, { children: _jsxs(Form, { ...formProps, children: [_jsx(PasswordComplexityFormField, { ...fieldProps('password'), onComplexity: (isValid) => setIsDisabled(!isValid) }), _jsx(FormSubmit, { isDisabled: isDisabled, children: "Reset Password" })] }) }));
+    return (_jsxs(Form, { classNames: { root: classNames?.form }, ...formProps, children: [_jsx("h1", { className: classNames?.title, children: "Reset Your Password" }), _jsx("div", { className: classNames?.field, children: _jsx(PasswordComplexityFormField, { ...fieldProps('password'), onComplexity: (isValid) => setIsDisabled(!isValid) }) }), _jsx("div", { className: classNames?.actions, children: _jsx(FormSubmit, { isDisabled: isDisabled, children: "Reset Password" }) })] }));
 }
 export default PasswordResetForm;

package/dist/index.d.ts

@@ -2,4 +2,6 @@ export type { AuthClassNames, AuthConfigObject } from './interfaces';
 export type { AuthProps } from './components/Auth';
 export { default as Auth } from './components/Auth';
 export { default as LogoutButton } from './components/LogoutButton';
+export { default as PasswordComplexityFormField } from './components/PasswordComplexityFormField';
+export { default as getComplexityRule } from './rules/complexity';
 export { default as getAuthProxy } from './get-auth-proxy';

package/dist/index.js

@@ -1,3 +1,5 @@
 export { default as Auth } from './components/Auth';
 export { default as LogoutButton } from './components/LogoutButton';
+export { default as PasswordComplexityFormField } from './components/PasswordComplexityFormField';
+export { default as getComplexityRule } from './rules/complexity';
 export { default as getAuthProxy } from './get-auth-proxy';

package/dist/interfaces.d.ts

@@ -3,6 +3,8 @@ export interface AuthConfigObject {
 }
 export interface AuthClassNames {
     actions: string;
+    content: string;
+    field: string;
     footer: string;
     form: string;
     link: string;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@sqrzro/auth",
   "type": "module",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.11",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
     "zod": "^4.3.6",
-    "@sqrzro/server": "^4.0.0-alpha.20",
     "@sqrzro/ui": "^4.0.0-alpha.20",
-    "@sqrzro/utility": "^4.0.0-alpha.7"
+    "@sqrzro/utility": "^4.0.0-alpha.7",
+    "@sqrzro/server": "^4.0.0-alpha.20"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",

package/src/forms/LoginForm/index.tsx

@@ -18,8 +18,12 @@ function LoginForm({ classNames }: AuthClassNameProps): React.ReactElement | nul
         <Fragment>
             <h1 className={classNames?.title}>Sign in to continue</h1>
             <Form classNames={{ root: classNames?.form }} {...formProps}>
-                <TextFormField {...fieldProps('email')} hasAssistiveError />
-                <PasswordFormField {...fieldProps('password')} hasAssistiveError />
+                <div className={classNames?.field}>
+                    <TextFormField {...fieldProps('email')} hasAssistiveError />
+                </div>
+                <div className={classNames?.field}>
+                    <PasswordFormField {...fieldProps('password')} hasAssistiveError />
+                </div>
                 <div className={classNames?.actions}>
                     <FormSubmit isFullWidth>Sign In</FormSubmit>
                 </div>

package/src/forms/PasswordForm/index.tsx

@@ -40,13 +40,17 @@ function PasswordForm({ classNames, defaults }: PasswordFormProps): React.ReactE
     return (
         <Fragment>
             <div style={{ display: sentCount === 0 ? 'block' : 'none' }}>
-                <Form {...formProps}>
+                <Form classNames={{ root: classNames?.form }} {...formProps}>
                     <h1 className={classNames?.title}>Reset Your Password</h1>
-                    <p className="text-sm">
-                        Enter the email address associated with your account and we&#39;ll send you
-                        a link to reset your password.
-                    </p>
-                    <TextFormField {...fieldProps('email')} hasAssistiveError />
+                    <div className={classNames?.content}>
+                        <p>
+                            Enter the email address associated with your account and we&#39;ll send
+                            you a link to reset your password.
+                        </p>
+                    </div>
+                    <div className={classNames?.field}>
+                        <TextFormField {...fieldProps('email')} hasAssistiveError />
+                    </div>
                     <div className={classNames?.actions}>
                         <FormSubmit isFullWidth>Send Email</FormSubmit>
                     </div>
@@ -61,13 +65,13 @@ function PasswordForm({ classNames, defaults }: PasswordFormProps): React.ReactE
                 <div className={classNames?.form}>
                     <h1 className={classNames?.title}>Check Your Email</h1>
                     {sentCount === 1 ? (
-                        <Fragment>
-                            <p className="text-sm">
+                        <div className={classNames?.content}>
+                            <p>
                                 If <strong>{formData.email}</strong> matches an email we have on
                                 file, then we&#39;ve sent you an email containing further
                                 instructions for resetting your password.
                             </p>
-                            <p className="text-sm">
+                            <p>
                                 If you haven&#39;t received an email in 5 minutes, check your spam,{' '}
                                 <Link className={classNames?.link} onClick={handleResend}>
                                     resend
@@ -78,22 +82,22 @@ function PasswordForm({ classNames, defaults }: PasswordFormProps): React.ReactE
                                 </Link>
                                 .
                             </p>
-                        </Fragment>
+                        </div>
                     ) : (
-                        <Fragment>
-                            <p className="text-sm">
+                        <div className={classNames?.content}>
+                            <p>
                                 We&#39;ve resent password reset instructions to{' '}
                                 <strong>{formData.email}</strong>, if it is an email we have on
                                 file.
                             </p>
-                            <p className="text-sm">
+                            <p>
                                 Please check again. If you still haven&#39;t received an email,{' '}
                                 <Link className={classNames?.link} onClick={handleReset}>
                                     try a different email address
                                 </Link>
                                 .
                             </p>
-                        </Fragment>
+                        </div>
                     )}
                 </div>
             </div>

package/src/forms/PasswordResetForm/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 
 import { Form, FormSubmit, useForm } from '@sqrzro/ui/forms';
 
@@ -25,15 +25,18 @@ function PasswordResetForm({
     });
 
     return (
-        <Fragment>
-            <Form {...formProps}>
+        <Form classNames={{ root: classNames?.form }} {...formProps}>
+            <h1 className={classNames?.title}>Reset Your Password</h1>
+            <div className={classNames?.field}>
                 <PasswordComplexityFormField
                     {...fieldProps('password')}
                     onComplexity={(isValid) => setIsDisabled(!isValid)}
                 />
+            </div>
+            <div className={classNames?.actions}>
                 <FormSubmit isDisabled={isDisabled}>Reset Password</FormSubmit>
-            </Form>
-        </Fragment>
+            </div>
+        </Form>
     );
 }
 

package/src/index.ts

@@ -4,5 +4,8 @@ export type { AuthProps } from './components/Auth';
 export { default as Auth } from './components/Auth';
 
 export { default as LogoutButton } from './components/LogoutButton';
+export { default as PasswordComplexityFormField } from './components/PasswordComplexityFormField';
+
+export { default as getComplexityRule } from './rules/complexity';
 
 export { default as getAuthProxy } from './get-auth-proxy';

package/src/interfaces.ts

@@ -4,6 +4,8 @@ export interface AuthConfigObject {
 
 export interface AuthClassNames {
     actions: string;
+    content: string;
+    field: string;
     footer: string;
     form: string;
     link: string;