@rqdhw3n/react-auth-flow 1.0.3 → 1.0.4

package/README.md

@@ -69,7 +69,7 @@ function Header() {
 
 ## Usage Examples
 
-### LoginForm Component
+### LoginForm Component with Tailwind CSS
 
 ```tsx
 import { LoginForm } from '@rqdhw3n/react-auth-flow';
@@ -79,52 +79,74 @@ function LoginPage() {
   const navigate = useNavigate();
 
   return (
-    <LoginForm
-      className="my-login-form"
-      labels={{
-        email: 'Email Address',
-        password: 'Password',
-        rememberMe: 'Keep me signed in',
-      }}
-      placeholders={{
-        email: 'name@example.com',
-        password: 'Enter your password',
-      }}
-      submitButtonText="Sign In"
-      onSuccess={(user) => {
-        console.log('Logged in:', user);
-        navigate('/dashboard');
-      }}
-      onError={(error) => {
-        console.error('Login failed:', error);
-      }}
-    />
+    <div className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-12">
+      <LoginForm
+        title="Welcome back"
+        subtitle="Sign in to your account"
+        className="w-full max-w-md rounded-2xl border border-slate-200 bg-white p-8 shadow-lg"
+        formClassName="space-y-5"
+        fieldClassName="space-y-2"
+        labelClassName="block text-sm font-medium text-slate-700"
+        inputClassName="w-full rounded-lg border border-slate-300 px-4 py-2 text-sm focus:border-blue-500 focus:ring-4 focus:ring-blue-100"
+        buttonClassName="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-blue-700"
+        submitButtonText="Sign In"
+        loadingText="Signing in..."
+        labels={{
+          email: 'Email Address',
+          password: 'Password',
+          rememberMe: 'Keep me signed in',
+        }}
+        placeholders={{
+          email: 'you@example.com',
+          password: 'Enter your password',
+        }}
+        onSuccess={() => navigate('/dashboard')}
+        onError={(error) => console.error(error.message)}
+      />
+    </div>
   );
 }
 ```
 
-### RegisterForm Component
+### RegisterForm Component with Tailwind CSS
 
 ```tsx
 import { RegisterForm } from '@rqdhw3n/react-auth-flow';
+import { useNavigate, Link } from 'react-router-dom';
 
 function SignUpPage() {
+  const navigate = useNavigate();
+
   return (
-    <RegisterForm
-      submitButtonText="Create Account"
-      labels={{
-        name: 'Full Name',
-        email: 'Email Address',
-        password: 'Password',
-        confirmPassword: 'Confirm Password',
-      }}
-      onSuccess={() => {
-        // Navigate to email verification or login
-      }}
-      onError={(error) => {
-        alert(error.message);
-      }}
-    />
+    <div className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-12">
+      <div className="w-full max-w-md">
+        <RegisterForm
+          title="Create your account"
+          subtitle="Get started in seconds"
+          className="rounded-2xl border border-slate-200 bg-white p-8 shadow-lg"
+          formClassName="space-y-5"
+          fieldClassName="space-y-2"
+          labelClassName="block text-sm font-medium text-slate-700"
+          inputClassName="w-full rounded-lg border border-slate-300 px-4 py-2 text-sm focus:border-blue-500 focus:ring-4 focus:ring-blue-100"
+          buttonClassName="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-blue-700"
+          submitButtonText="Create Account"
+          loadingText="Creating..."
+          labels={{
+            name: 'Full Name',
+            email: 'Email',
+            password: 'Password',
+            confirmPassword: 'Confirm Password',
+          }}
+          onSuccess={() => navigate('/email-verify')}
+        />
+        <p className="mt-4 text-center text-sm text-slate-600">
+          Already have an account?{' '}
+          <Link to="/login" className="font-semibold text-blue-600 hover:text-blue-700">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
   );
 }
 ```
@@ -136,15 +158,25 @@ import { ForgotPasswordForm } from '@rqdhw3n/react-auth-flow';
 
 function ForgotPasswordPage() {
   return (
-    <ForgotPasswordForm
-      submitButtonText="Send Recovery Email"
-      labels={{
-        email: 'Enter your email address',
-      }}
-      onSuccess={() => {
-        alert('Recovery email sent! Check your inbox.');
-      }}
-    />
+    <div className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-12">
+      <ForgotPasswordForm
+        title="Reset your password"
+        subtitle="Enter your email to receive a reset link"
+        className="w-full max-w-md rounded-2xl border border-slate-200 bg-white p-8 shadow-lg"
+        formClassName="space-y-5"
+        fieldClassName="space-y-2"
+        labelClassName="block text-sm font-medium text-slate-700"
+        inputClassName="w-full rounded-lg border border-slate-300 px-4 py-2 text-sm focus:border-blue-500 focus:ring-4 focus:ring-blue-100"
+        buttonClassName="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-blue-700"
+        errorClassName="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600"
+        successClassName="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700"
+        submitButtonText="Send Reset Link"
+        loadingText="Sending..."
+        onSuccess={() => {
+          alert('Check your email for reset link');
+        }}
+      />
+    </div>
   );
 }
 ```
@@ -153,21 +185,30 @@ function ForgotPasswordPage() {
 
 ```tsx
 import { ResetPasswordForm } from '@rqdhw3n/react-auth-flow';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams, useNavigate } from 'react-router-dom';
 
 function ResetPasswordPage() {
   const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
   const token = searchParams.get('token') || '';
 
   return (
-    <ResetPasswordForm
-      token={token}
-      submitButtonText="Update Password"
-      onSuccess={() => {
-        alert('Password updated successfully!');
-        // Navigate to login
-      }}
-    />
+    <div className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-12">
+      <ResetPasswordForm
+        token={token}
+        title="Create new password"
+        subtitle="Enter your new password below"
+        className="w-full max-w-md rounded-2xl border border-slate-200 bg-white p-8 shadow-lg"
+        formClassName="space-y-5"
+        fieldClassName="space-y-2"
+        labelClassName="block text-sm font-medium text-slate-700"
+        inputClassName="w-full rounded-lg border border-slate-300 px-4 py-2 text-sm focus:border-blue-500 focus:ring-4 focus:ring-blue-100"
+        buttonClassName="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-blue-700"
+        submitButtonText="Update Password"
+        loadingText="Updating..."
+        onSuccess={() => navigate('/login')}
+      />
+    </div>
   );
 }
 ```
@@ -184,17 +225,38 @@ function VerifyEmailPage() {
   const email = searchParams.get('email') || '';
 
   return (
-    <VerifyEmailForm
-      token={token}
-      email={email}
-      onSuccess={() => {
-        alert('Email verified!');
-      }}
-    />
+    <div className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-12">
+      <VerifyEmailForm
+        token={token}
+        email={email}
+        title="Verify your email"
+        subtitle="Enter the code sent to your email address"
+        className="w-full max-w-md rounded-2xl border border-slate-200 bg-white p-8 shadow-lg"
+        formClassName="space-y-5"
+        fieldClassName="space-y-2"
+        labelClassName="block text-sm font-medium text-slate-700"
+        inputClassName="w-full rounded-lg border border-slate-300 px-4 py-2 text-sm focus:border-blue-500 focus:ring-4 focus:ring-blue-100"
+        buttonClassName="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-blue-700"
+        submitButtonText="Verify Email"
+        loadingText="Verifying..."
+        onSuccess={() => {
+          alert('Email verified! You can now log in.');
+        }}
+      />
+    </div>
   );
 }
 ```
 
+### Simple Usage Without Custom Styling
+
+```tsx
+// Forms work with default Tailwind-friendly styling
+<LoginForm
+  onSuccess={() => navigate('/dashboard')}
+/>
+```
+
 ### ProtectedRoute Component
 
 ```tsx