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

npm install react-login-page-component
# or
yarn add react-login-page-component

use npm i  --legacy-peer-deps

Usage

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 (
    <LoginPage
      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

Custom Container Background

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

Custom Image Size

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

Custom Form Container

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

Authentication Methods

Email/Password Login

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

{
  email: string;
  password: string;
}

Microsoft SSO

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

Requirements

Peer Dependencies

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

License

MIT