Login Component

Features

• Customizable: Easily adjust colors, text, and behaviors via props.
• Event Handling: Emit events for sign-in actions to integrate with parent components.
• Responsive Design: Adapts to different screen sizes for seamless user interaction.

Component

This repository contains a reusable login component built with Lit Element, designed to be easily integrated into various JavaScript frameworks.

Properties

The following table outlines the component properties, their types, descriptions, and default values.

| Property | Type | Description | Default | | -------------------- | ---------- | ---------------------------------------------------------------- | ------------ | | backgroundImage | string | Specifies the URL of the background image for the login screen. | '' | | backgroundColor | string | Sets the background color of the login screen. | '' | | errorMessage | string | Error message displayed for invalid credentials or other errors. | '' | | invalidCredentials | boolean | Flag indicating whether credentials entered are invalid. | false | | buttonColor | string | Color of the sign-in button. | '#3f51b5' | | loginTitle | string | Title displayed above the login form. | 'Sign In' | | buttonText | string | Text displayed on the sign-in button. | 'Sign In' | | emailTitle | string | Label text for the email input field. | 'Email' | | passwordTitle | string | Label text for the password input field. | 'Password' | | showPassword | boolean | Flag indicating whether to show or hide the password field. | true | | onSignIn | Function | Callback function triggered when the user attempts to sign in. | () => {} |

Examples

VanilaJS

import login-lit-component

<script type="module">
   import 'login-lit-component'
</script>

<login-component
   id="login"
   errorMessage="Invalid username or password!!"
></login-component>

Bind Event

<script>
      const loginScreen = document.querySelector('#login')
      loginScreen.addEventListener('signin', handleSignIn)
      function handleSignIn(event) {
        const { email, password } = event.detail
        if (email === '[email protected]' && password === 'Test@123') {
          loginScreen.invalidCredentials = false
          console.log('Authentication successful')
        } else {
          loginScreen.invalidCredentials = true
        }
      }
</script>

React

import { LoginComponent } from 'login-lit-component'
import { createComponent, EventName } from '@lit/react'

export const MyLoginComponent = createComponent({
  tagName: 'login-component',
  elementClass: LoginComponent,
  react: React,
  events: {
    onSignIn: 'signin' as EventName<MouseEvent>,
  },
})

function App() {
  const handleSignIn = () => {
    console.log('Signin event')
  }

  return (
      <MyLoginComponent
        onSignIn={handleSignIn}
        loginTitle="Hello"
      ></MyLoginComponent>
  )
}

Angular

app.component.ts

export class AppComponent {
  invalidCredentials: boolean

  handleSignIn(event){
    const { email, password } = event.detail
    if (email === '[email protected]' && password === 'Test@123') {
      loginScreen.invalidCredentials = false
      console.log('Authentication successful')
    } else {
      loginScreen.invalidCredentials = true
    }
  }
}

app.component.html

<login-component
  [invalidCredentials]="invalidCredentials"
  (signin)="handleSignIn($event)"
  errorMessage="Invalid username and password"
>
</login-component>