test-file-for-npm

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