React Login Page Component

A customizable React login page component built with Ant Design, supporting both email/password and Microsoft SSO authentication.

Features

- 🎨 Fully customizable styling
- 📱 Responsive design
- 🔐 Multiple authentication methods
- ⚛️ Built with React and Ant Design
- 📦 TypeScript support

Installation

``bash
npm install react-login-page-component


or


yarn add react-login-page-component
`

`
use npm i --legacy-peer-deps
`

Usage

`tsx
import { LoginPage } from 'react-login-page-component';

function App() {
const handleEmailLogin = (values) => {
console.log('Email login:', values);
};

const handleSSOLogin = () => {
console.log('Microsoft SSO login clicked');
};

return (
title="Welcome to Our App"
imageSrc="/path/to/your/image.png"
showSSOLogin={true}
showEmailLogin={true}
onEmailLogin={handleEmailLogin}
onSSOLogin={handleSSOLogin}
/>
);
}
`

Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| title | string | 'Welcome Back' | Title displayed on the login page |
| imageSrc | string | Required | Path to the image displayed on the left side |
| imageAlt | string | 'Login illustration' | Alt text for the image |
| showSSOLogin | boolean | true | Whether to show Microsoft SSO login option |
| showEmailLogin | boolean | true | Whether to show email/password login form |
| containerStyle | React.CSSProperties | undefined | Custom styles for the main container |
| imageStyle | React.CSSProperties | undefined | Custom styles for the image |
| formContainerStyle | React.CSSProperties | undefined | Custom styles for the form container |
| onEmailLogin | (values: { email: string; password: string }) => void | undefined | Callback function for email/password login |
| onSSOLogin | () => void | undefined | Callback function for Microsoft SSO login |

Styling Examples

$3

`tsx
imageSrc="/path/to/image.png"
containerStyle={{
backgroundColor: '#e6f7ff'
}}
/>
`

$3

`tsx
imageSrc="/path/to/image.png"
imageStyle={{
maxWidth: '80%',
maxHeight: '500px'
}}
/>
`

$3

`tsx
imageSrc="/path/to/image.png"
formContainerStyle={{
backgroundColor: 'white',
borderRadius: '8px',
padding: '32px'
}}
/>
`

Authentication Methods

$3

The component provides a form with email and password fields. The onEmailLogin callback receives an object with the following structure:

`typescript
{
email: string;
password: string;
}
`

$3

The Microsoft SSO login button triggers the onSSOLogin` callback when clicked. You can implement your Microsoft authentication logic within this callback.

Requirements

$3

- React >= 16.8.0
- React DOM >= 16.8.0
- Ant Design >= 5.0.0

License

MIT