npm package: @reemwsw/common-login-page
Description: A highly customizable React login page component with OAuth support
Latest version: 0.1.0

# Common Login Page

A highly customizable React login page component with OAuth support, built with TypeScript and Tailwind CSS.

## Installation

```bash
npm install @anthropic/common-login-page
# or
yarn add @anthropic/common-login-page
# or
pnpm add @anthropic/common-login-page
```

## Quick Start

```tsx
import { LoginPage } from '@anthropic/common-login-page';
import '@anthropic/common-login-page/styles.css';

function App() {
  const handleLogin = async (credentials) => {
    // Your login logic here
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(credentials),
    });

    if (response.ok) {
      return { success: true, redirectUrl: '/dashboard' };
    }

    return { success: false, error: 'Invalid credentials' };
  };

  return (
    <LoginPage
      onSubmit={handleLogin}
      onOAuthLogin={async (provider) => {
        // Handle OAuth login
        console.log(`Login with ${provider}`);
      }}
    />
  );
}
```

## Configuration

The `LoginPage` component accepts a `config` prop for customization:

```tsx
import { LoginPage, LoginPageConfig } from '@anthropic/common-login-page';

const config: Partial<LoginPageConfig> = {
  layout: {
    variant: 'card', // 'centered' | 'split-screen' | 'card'
    card: {
      cardMaxWidth: '32rem',
      backgroundColor: '#f5f5f5',
    },
  },
  form: {
    title: 'Welcome Back',
    subtitle: 'Sign in to continue',
    submitButtonText: 'Log In',
    showRememberMe: true,
    showForgotPassword: true,
  },
  oauth: {
    enabled: true,
    providers: ['google', 'facebook', 'line'],
    dividerText: 'Or continue with',
    layout: 'grid', // 'horizontal' | 'vertical' | 'grid'
  },
};

<LoginPage config={config} onSubmit={handleLogin} />;
```

## Layout Variants

### Centered Layout

```tsx
const config = {
  layout: {
    variant: 'centered',
    centered: {
      maxWidth: '28rem',
      padding: '2rem',
      backgroundColor: '#ffffff',
    },
  },
};
```

### Split Screen Layout

```tsx
const config = {
  layout: {
    variant: 'split-screen',
    splitScreen: {
      leftImage: '/path/to/image.jpg',
      leftBackgroundColor: '#0a0a0a',
      splitRatio: '50-50', // '50-50' | '40-60' | '60-40'
    },
  },
};
```

### Card Layout

```tsx
const config = {
  layout: {
    variant: 'card',
    card: {
      backgroundImage: 'url(/path/to/bg.jpg)',
      cardMaxWidth: '28rem',
      cardShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
    },
  },
};
```

## Customizing Styles

### CSS Variables

Override these CSS variables to customize the appearance:

```css
:root {
  /* Core Colors */
  --login-primary: #0a0a0a;
  --login-background: #ffffff;
  --login-text: #0a0a0a;
  --login-text-secondary: #6b7280;
  --login-error: #ef4444;
  --login-border: #e5e7eb;

  /* Input Fields */
  --login-input-bg: #ffffff;
  --login-input-border: #d1d5db;
  --login-input-focus: #0a0a0a;
  --login-input-height: 2.75rem;

  /* Layout */
  --login-border-radius: 0.5rem;
  --login-card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* OAuth Buttons */
  --oauth-google-bg: #ffffff;
  --oauth-google-hover: #f3f4f6;
  --oauth-google-border: #d1d5db;
  --oauth-facebook-bg: #1877f2;
  --oauth-facebook-hover: #166fe5;
  --oauth-line-bg: #00c300;
  --oauth-line-hover: #00b300;
}
```

## Component Overrides

You can replace any component with your own implementation:

```tsx
import { LoginPage, Button, Input } from '@anthropic/common-login-page';

const CustomButton = (props) => (
  <button {...props} className="my-custom-button">
    {props.children}
  </button>
);

const config = {
  components: {
    SubmitButton: CustomButton,
  },
};

<LoginPage config={config} onSubmit={handleLogin} />;
```

## Hooks

### useLoginForm

```tsx
import { useLoginForm } from '@anthropic/common-login-page';

function CustomLoginForm() {
  const {
    credentials,
    errors,
    isSubmitting,
    handleSubmit,
    handleUsernameChange,
    handlePasswordChange,
  } = useLoginForm(
    { validation: { usernameMinLength: 3 } },
    async (creds) => {
      // Your login logic
      return { success: true };
    }
  );

  return (
    <form onSubmit={handleSubmit}>
      {/* Your custom form */}
    </form>
  );
}
```

### useOAuthLogin

```tsx
import { useOAuthLogin } from '@anthropic/common-login-page';

function CustomOAuthButtons() {
  const { handleOAuthLogin, isLoading, error } = useOAuthLogin(
    async (provider) => {
      // Your OAuth logic
    }
  );

  return (
    <button onClick={() => handleOAuthLogin('google')}>
      Sign in with Google
    </button>
  );
}
```

## TypeScript Support

Full TypeScript support with exported types:

```tsx
import type {
  LoginPageConfig,
  LoginCredentials,
  LoginResult,
  OAuthProvider,
  LayoutVariant,
} from '@anthropic/common-login-page';
```

## Requirements

- React 18+
- Tailwind CSS (recommended for styling)

## License

MIT