@sqrzro/auth 4.0.0-alpha.6 → 4.0.0-alpha.7

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

@@ -1,3 +1,7 @@
 import type { NextPageProps } from '@sqrzro/ui/utility';
-declare function Auth(props: NextPageProps): React.ReactElement;
+import type { AuthClassNameProps } from '../../interfaces';
+interface AuthPageProps extends AuthClassNameProps, NextPageProps {
+    logo?: React.ReactElement;
+}
+declare function Auth({ classNames, logo, ...props }: AuthPageProps): React.ReactElement;
 export default Auth;

package/dist/components/Auth/index.js

@@ -3,23 +3,23 @@ import { Suspense } from 'react';
 import { notFound } from 'next/navigation';
 import LoginForm from '../../forms/LoginForm';
 import Password from '../Password';
-async function AuthComponent({ params, searchParams }) {
+async function AuthComponent({ classNames, params, searchParams, }) {
     const awaitedParams = await params;
     if (!awaitedParams || !Array.isArray(awaitedParams.auth) || awaitedParams.auth.length !== 1) {
         return notFound();
     }
     if (awaitedParams.auth[0] === 'login') {
-        return _jsx(LoginForm, {});
+        return _jsx(LoginForm, { classNames: classNames });
     }
     if (awaitedParams.auth[0] === 'mfa') {
         return _jsx("div", { children: "[MFA NOT DONE]" });
     }
     if (awaitedParams.auth[0] === 'password') {
-        return _jsx(Password, { searchParams: searchParams });
+        return _jsx(Password, { classNames: classNames, searchParams: searchParams });
     }
     return notFound();
 }
-function Auth(props) {
-    return (_jsxs("div", { children: ["AUTH PAGE HEADER", _jsx(Suspense, { children: _jsx(AuthComponent, { ...props }) })] }));
+function Auth({ classNames, logo, ...props }) {
+    return (_jsxs("div", { className: classNames?.root, children: [_jsx("div", { className: classNames?.logo, children: logo }), _jsx("div", { className: classNames?.panel, children: _jsx(Suspense, { children: _jsx(AuthComponent, { classNames: classNames, ...props }) }) })] }));
 }
 export default Auth;

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

@@ -1,5 +1,6 @@
-interface PasswordProps {
+import type { AuthClassNameProps } from '../../interfaces';
+interface PasswordProps extends AuthClassNameProps {
     searchParams?: Promise<Record<string, string>> | null;
 }
-declare function Password({ searchParams }: Readonly<PasswordProps>): Promise<React.ReactElement>;
+declare function Password({ classNames, searchParams, }: Readonly<PasswordProps>): Promise<React.ReactElement>;
 export default Password;

package/dist/components/Password/index.js

@@ -2,17 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { validateReset } from '@sqrzro/server/auth';
 import PasswordForm from '../../forms/PasswordForm';
 import PasswordResetForm from '../../forms/PasswordResetForm';
-async function Password({ searchParams }) {
+async function Password({ classNames, searchParams, }) {
     const awaitedSearchParams = await searchParams;
     if (awaitedSearchParams?.token) {
         const validated = await validateReset('PASSWORD', awaitedSearchParams.token);
         if (validated) {
-            return _jsx(PasswordResetForm, { token: awaitedSearchParams.token });
+            return _jsx(PasswordResetForm, { token: awaitedSearchParams.token, classNames: classNames });
         }
         else {
             return _jsx("div", { children: "Invalid or Expired Token" });
         }
     }
-    return _jsx(PasswordForm, {});
+    return _jsx(PasswordForm, { classNames: classNames });
 }
 export default Password;

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

@@ -1,2 +1,3 @@
-declare function LoginForm(): React.ReactElement | null;
+import type { AuthClassNameProps } from '../../interfaces';
+declare function LoginForm({ classNames }: AuthClassNameProps): React.ReactElement | null;
 export default LoginForm;

package/dist/forms/LoginForm/index.js

@@ -4,10 +4,10 @@ import { Fragment } from 'react';
 import { Link } from '@sqrzro/ui/components';
 import { Form, FormSubmit, PasswordFormField, TextFormField, useForm } from '@sqrzro/ui/forms';
 import submit from './server';
-function LoginForm() {
+function LoginForm({ classNames }) {
     const { fieldProps, formData, formProps } = useForm({
         onSubmit: submit,
     });
-    return (_jsx(Fragment, { children: _jsxs(Form, { ...formProps, children: [_jsx(TextFormField, { ...fieldProps('email'), hasAssistiveError: true }), _jsx(PasswordFormField, { ...fieldProps('password'), hasAssistiveError: true }), _jsx(FormSubmit, { children: "Sign In" }), _jsx("footer", { children: _jsx(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, { ...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?" }) })] })] }));
 }
 export default LoginForm;

package/dist/forms/PasswordForm/index.d.ts

@@ -1,2 +1,3 @@
-declare function PasswordForm(): React.ReactElement | null;
+import type { AuthClassNameProps } from '../../interfaces';
+declare function PasswordForm({ classNames }: AuthClassNameProps): React.ReactElement | null;
 export default PasswordForm;

package/dist/forms/PasswordForm/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { Form, FormSubmit, TextFormField, useForm } from '@sqrzro/ui/forms';
 import submit from './server';
-function PasswordForm() {
+function PasswordForm({ classNames }) {
     const { fieldProps, formProps } = useForm({
         onSubmit: submit,
     });

package/dist/forms/PasswordResetForm/index.d.ts

@@ -1,5 +1,6 @@
-interface PasswordResetFormProps {
+import type { AuthClassNameProps } from '../../interfaces';
+interface PasswordResetFormProps extends AuthClassNameProps {
     token: string;
 }
-declare function PasswordResetForm({ token }: Readonly<PasswordResetFormProps>): React.ReactElement | null;
+declare function PasswordResetForm({ classNames, token, }: Readonly<PasswordResetFormProps>): React.ReactElement | null;
 export default PasswordResetForm;

package/dist/forms/PasswordResetForm/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { Form, FormSubmit, PasswordFormField, useForm } from '@sqrzro/ui/forms';
 import submit from './server';
-function PasswordResetForm({ token }) {
+function PasswordResetForm({ classNames, token, }) {
     const { fieldProps, formProps } = useForm({
         defaults: { token },
         onSubmit: submit,

package/dist/interfaces.d.ts

@@ -8,3 +8,6 @@ export interface AuthClassNames {
     panel: string;
     title: string;
 }
+export interface AuthClassNameProps {
+    classNames?: Partial<AuthClassNames>;
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sqrzro/auth",
   "type": "module",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-alpha.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
     "zod": "^4.3.6",
-    "@sqrzro/server": "^4.0.0-alpha.15",
+    "@sqrzro/server": "^4.0.0-alpha.16",
     "@sqrzro/ui": "^4.0.0-alpha.13"
   },
   "devDependencies": {

package/src/components/Auth/index.tsx

@@ -4,10 +4,19 @@ import type { NextPageProps } from '@sqrzro/ui/utility';
 import { notFound } from 'next/navigation';
 
 import LoginForm from '../../forms/LoginForm';
+import type { AuthClassNameProps } from '../../interfaces';
 
 import Password from '../Password';
 
-async function AuthComponent({ params, searchParams }: NextPageProps): Promise<React.ReactElement> {
+interface AuthPageProps extends AuthClassNameProps, NextPageProps {
+    logo?: React.ReactElement;
+}
+
+async function AuthComponent({
+    classNames,
+    params,
+    searchParams,
+}: AuthPageProps): Promise<React.ReactElement> {
     const awaitedParams = await params;
 
     if (!awaitedParams || !Array.isArray(awaitedParams.auth) || awaitedParams.auth.length !== 1) {
@@ -15,7 +24,7 @@ async function AuthComponent({ params, searchParams }: NextPageProps): Promise<R
     }
 
     if (awaitedParams.auth[0] === 'login') {
-        return <LoginForm />;
+        return <LoginForm classNames={classNames} />;
     }
 
     if (awaitedParams.auth[0] === 'mfa') {
@@ -23,19 +32,21 @@ async function AuthComponent({ params, searchParams }: NextPageProps): Promise<R
     }
 
     if (awaitedParams.auth[0] === 'password') {
-        return <Password searchParams={searchParams} />;
+        return <Password classNames={classNames} searchParams={searchParams} />;
     }
 
     return notFound();
 }
 
-function Auth(props: NextPageProps): React.ReactElement {
+function Auth({ classNames, logo, ...props }: AuthPageProps): React.ReactElement {
     return (
-        <div>
-            AUTH PAGE HEADER
-            <Suspense>
-                <AuthComponent {...props} />
-            </Suspense>
+        <div className={classNames?.root}>
+            <div className={classNames?.logo}>{logo}</div>
+            <div className={classNames?.panel}>
+                <Suspense>
+                    <AuthComponent classNames={classNames} {...props} />
+                </Suspense>
+            </div>
         </div>
     );
 }

package/src/components/Password/index.tsx

@@ -2,25 +2,29 @@ import { validateReset } from '@sqrzro/server/auth';
 
 import PasswordForm from '../../forms/PasswordForm';
 import PasswordResetForm from '../../forms/PasswordResetForm';
+import type { AuthClassNameProps } from '../../interfaces';
 
-interface PasswordProps {
+interface PasswordProps extends AuthClassNameProps {
     searchParams?: Promise<Record<string, string>> | null;
 }
 
-async function Password({ searchParams }: Readonly<PasswordProps>): Promise<React.ReactElement> {
+async function Password({
+    classNames,
+    searchParams,
+}: Readonly<PasswordProps>): Promise<React.ReactElement> {
     const awaitedSearchParams = await searchParams;
 
     if (awaitedSearchParams?.token) {
         const validated = await validateReset('PASSWORD', awaitedSearchParams.token);
 
         if (validated) {
-            return <PasswordResetForm token={awaitedSearchParams.token} />;
+            return <PasswordResetForm token={awaitedSearchParams.token} classNames={classNames} />;
         } else {
             return <div>Invalid or Expired Token</div>;
         }
     }
 
-    return <PasswordForm />;
+    return <PasswordForm classNames={classNames} />;
 }
 
 export default Password;

package/src/forms/LoginForm/index.tsx

@@ -5,21 +5,27 @@ import { Fragment } from 'react';
 import { Link } from '@sqrzro/ui/components';
 import { Form, FormSubmit, PasswordFormField, TextFormField, useForm } from '@sqrzro/ui/forms';
 
+import type { AuthClassNameProps } from '../../interfaces';
+
 import submit from './server';
 
-function LoginForm(): React.ReactElement | null {
+function LoginForm({ classNames }: AuthClassNameProps): React.ReactElement | null {
     const { fieldProps, formData, formProps } = useForm({
         onSubmit: submit,
     });
 
     return (
         <Fragment>
+            <h1 className={classNames?.title}>Sign in to continue</h1>
             <Form {...formProps}>
                 <TextFormField {...fieldProps('email')} hasAssistiveError />
                 <PasswordFormField {...fieldProps('password')} hasAssistiveError />
-                <FormSubmit>Sign In</FormSubmit>
-                <footer>
+                <div className={classNames?.actions}>
+                    <FormSubmit isFullWidth>Sign In</FormSubmit>
+                </div>
+                <footer className={classNames?.footer}>
                     <Link
+                        className={classNames?.link}
                         href={`/auth/password${formData.email ? `?email=${formData.email}` : ''}`}
                     >
                         Forgot Password?

package/src/forms/PasswordForm/index.tsx

@@ -4,9 +4,11 @@ import { Fragment } from 'react';
 
 import { Form, FormSubmit, TextFormField, useForm } from '@sqrzro/ui/forms';
 
+import type { AuthClassNameProps } from '../../interfaces';
+
 import submit from './server';
 
-function PasswordForm(): React.ReactElement | null {
+function PasswordForm({ classNames }: AuthClassNameProps): React.ReactElement | null {
     const { fieldProps, formProps } = useForm({
         onSubmit: submit,
     });

package/src/forms/PasswordResetForm/index.tsx

@@ -4,13 +4,18 @@ import { Fragment } from 'react';
 
 import { Form, FormSubmit, PasswordFormField, useForm } from '@sqrzro/ui/forms';
 
+import type { AuthClassNameProps } from '../../interfaces';
+
 import submit from './server';
 
-interface PasswordResetFormProps {
+interface PasswordResetFormProps extends AuthClassNameProps {
     token: string;
 }
 
-function PasswordResetForm({ token }: Readonly<PasswordResetFormProps>): React.ReactElement | null {
+function PasswordResetForm({
+    classNames,
+    token,
+}: Readonly<PasswordResetFormProps>): React.ReactElement | null {
     const { fieldProps, formProps } = useForm({
         defaults: { token },
         onSubmit: submit,

package/src/interfaces.ts

@@ -7,4 +7,8 @@ export interface AuthClassNames {
     root: string;
     panel: string;
     title: string;
-}
+}
+
+export interface AuthClassNameProps {
+    classNames?: Partial<AuthClassNames>;
+}