@licuido-ui/ui_login NPM

Login

The Login component is a reusable React component designed to provide a login interface with various login options. It offers three login options: 'emailWithPasswordLogin', socialMediaLogin', 'mobileNumberLogin','metanasSigninup' and 'metanasResetpassword'.

Author

@author Akila K akila@crayond.co

Link

Story Book Link ErrorPage

PlayGround

Try it have a fun codeBox

Author

@author Akila Kalaiyarasan akila@crayond.co

Link

Story Book Link Login

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_login

Import component

import { Login } from '@licuido-ui/ui_login';

Usage

<Login
  variant='mobileNumberLogin'
  mainArea={{
    layout: {
      breakpoints: { xs: 12, md: 12, sm: 12, lg: 12 },
    },
  }}
  onSubmit={() => {
    console.log('submit');
  }}
  alt='logo'
  logoSrc={<Logo />}
  logoHeight='100%'
  logoWidth='100%'
  rootStyle={{}}
  title='Welcome!'
  description='One positive feedback per day or week can make us grow exponentially'
  titleStyle={{}}
  buttonText='Login'
  actionText="Don't have an account?"
  actionLink='Sign in'
  cardStyle={{ p: 3 }}
  onSignUpClick={() => {
    console.log('signup');
  }}
  actionStyle={{ fontSize: { xs: '12px', md: '14px', sm: '14px', lg: '14px' } }}
  actionLinkStyle={{ fontSize: { xs: '12px', md: '14px', sm: '14px', lg: '14px' } }}
  btnStyle={{}}
  mobileLabelText='Mobile Number'
  labelStyle={{}}
  mobileFieldstyle={{}}
  dropDownStyle={{}}
  numberFontSize=''
  countryCodeFontWeight=''
  contryCodefontSize=''
  divider={true}
  dividerTextStyle={{}}
  dividerStyle={{}}
  dividerText='or'
  workMailInputVariant='outlined'
  workMailLabelStyle={{}}
  workMailLabel='Work Email'
  workMailInput={true}
  footerText='Forgot Password?'
  onForgotClick={() => {
    console.log('forgot');
  }}
  footerStyle={{}}
  socialMediaList={[
    {
      label: 'SignUp with google',
      icon: <Google />,
      onSocialmediaLogin: () => {
        console.log('SignUp with google');
      },
      style: {
        textAlign: 'center',
        width: '100%',
        color: '#3B3B3B',
        fontSize: '14px',
      },
      // SocialMediaButtonStyle: { p: 1 },
    },
  ]}
  loginFieldStyle={{}}
  emailInputvariant='outlined'
  emailLabelStyle={{}}
  emailLabel='Email'
  passwordLabelStyle={{}}
  passwordLabel='Password'
  pwdInputVariant='outlined'
  invisibleIcon={<VisibilityOffOutlinedIcon />}
  visbleIcon={<VisibilityOutlinedIcon />}
  pwdFieldstyle={{}}
  variantContainerSx={{}}
  cardHeight='auto'
  cardWidth='400px'
  cardBoxShadow='0px 8px 20px #0000000A'
  cardBgColor=''
  openDialog={false}
  dialogTitle=''
  maxWidth='xs'
  dialogTitleStyle={}
  dialogSectionStyle={}
  dialogContent={<></>}
  handleAgreeClick={() => {
    console.log('agree');
  }}
  dialogButtonText=''
  handleDialogClose={() => {
    console.log('close');
  }}
  agreeButtonStyle={}
  bodyTextStyle={}
  dialogButtonVariant='outlined'
  handleOpenDialog={() => {
    console.log('open');
  }}
  handleCheckbox={() => {
    console.log('active');
  }}
  checkedValue={false}
  checkboxText=''
/>

Image

Props

Prop Name	Type	Default Value	Description
`loginId`	`string`	`'login'`	Unique ID for the component.
`className`	`string`	`''`	CSS class name for the component.
`sx`	`SxProps<Theme>`	`{}`	Styling props using MUI's sx prop.
`onSubmit`	`(details: object) => void`	`() => undefined`	Function to handle form submission.
`variant`	'emailWithPasswordLogin' `or` 'socialMediaLogin'`or` 'mobileNumberLogin'`or`'metanasResetpassword' `or`'metanasSigninup'	'emailWithPasswordLogin' `or` 'socialMediaLogin'`or` 'mobileNumberLogin' `or`'metanasSigninup' `0r` 'metanasResetpassword'	Type of login variant.
`rootStyle`	`SxProps`	`{}`	Styling props for the root component.
`imageSection`	`object`	See below	Configuration for the image section.
`mainArea`	`object`	See below	Configuration for the main area.
`alt`	`string`	`'Logo'`	Alt text for the logo image.
`logoSrc`	`string \\| ReactNode`	`''`	Source URL or ReactNode for the logo image.
`logoHeight`	`string \\| number`	`'auto'`	Height of the logo image.
`logoWidth`	`string \\| number`	`'10px'`	Width of the logo image.
`logoStyle`	`SxProps`	`{}`	Styling props for the logo image.
`title`	`string \\| any`	`'Login'`	Title or JSX element for the card.
`description`	`string \\| any`	`''`	Description or JSX element for the card.
`actionText`	`string`	`"Don't have an account?"`	Text for the action link or button.
`buttonText`	`string`	`'Login'`	Text for the login button.
`actionLink`	`string`	`'Sign Up'`	URL for the action link.
`onSignUpClick`	`() => void`	`() => undefined`	Function to handle sign-up link click.
`titleStyle`	`CSSProperties`	`{}`	Inline styles for the title.
`btnStyle`	`SxProps`	`{}`	Styling props for the login button.
`cardStyle`	`SxProps`	`{}`	Styling props for the card component.
`actionStyle`	`SxProps`	`{}`	Styling props for the action link.
`actionLinkStyle`	`SxProps`	`{}`	Styling props for the action link.
`mobileLabelText`	`string`	`'Mobile Number'`	Label text for the mobile number input.
`labelStyle`	`SxProps`	`{}`	Styling props for labels.
`mobileFieldstyle`	`SxProps`	`{}`	Styling props for the mobile number input field.
`dropDownStyle`	`SxProps`	`{}`	Styling props for the dropdown in mobile input.
`contryCodefontSize`	`string \\| number`	`'16px'`	Font size for the country code.
`countryCodeFontWeight`	`string \\| number`	`'bold'`	Font weight for the country code.
`numberFontSize`	`string \\| number`	`'16px'`	Font size for the mobile number input.
`dividerStyle`	`SxProps`	`{}`	Styling props for the divider.
`dividerText`	`string`	`'OR'`	Text for the divider.
`dividerTextStyle`	`SxProps`	`{}`	Styling props for the divider text.
`divider`	`true \\| false`	`true`	Whether to show a divider.
`workMailInput`	`true \\| false`	`true`	Whether to show the email input.
`workMailLabel`	`string`	`'Email'`	Label for the email input.
`workMailLabelStyle`	`SxProps`	`{}`	Styling props for the email input label.
`footerStyle`	`SxProps`	`{}`	Styling props for the "Forgot password?" text.
`onForgotClick`	`() => any`	`() => undefined`	Function to handle "Forgot password?" click.
`footerText`	`string`	`'Forgot password?'`	Text for the "Forgot password?" link.
`workMailInputVariant`	`'outlined' \\| 'standard' \\| 'filled'`	`'outlined'`	Variant for the email input.
`loginFieldStyle`	`SxProps`	`{}`	Styling props for login input fields.
`socialMediaList`	`Array`	`[]`	List of social media buttons.
`emailInputvariant`	`'outlined' \\| 'standard' \\| 'filled'`	`'outlined'`	Variant for the email input.
`emailLabelStyle`	`SxProps`	`{}`	Styling props for the email input label.
`emailLabel`	`string`	`'Email'`	Label for the email input.
`passwordLabelStyle`	`SxProps`	`{}`	Styling props for the password input label.
`passwordLabel`	`string`	`'Password'`	Label for the password input.
`pwdInputVariant`	`'outlined' \\| 'standard' \\| 'filled'`	`'outlined'`	Variant for the password input.
`invisibleIcon`	`ReactNode`	`<VisibilityOffOutlinedIcon />`	Icon for the password visibility toggle (invisible).
`visbleIcon`	`ReactNode`	`<VisibilityOutlinedIcon />`	Icon for the password visibility toggle (visible).
`pwdFieldstyle`	`SxProps`	`{}`	Styling props for the password input field.
`variantContainerSx`	`SxProps`	`{}`	Styling props for the variant container.
`cardWidth`	`number \\| string`	`'auto'`	Width of the card.
`cardHeight`	`number \\| string`	`'auto'`	Height of the card.
`cardBgColor`	`string`	`'white'`	Background color of the card.
`cardBoxShadow`	`string`	`'0px 4px 4px rgba(0, 0, 0, 0.25)'`	Box shadow for the card.
`conFirmPasswordStyle`	sxProps	sxProps	sxProp
`conFirmPasswordLabel`	string	string	string
`metanasPasswordTestRegex`	string	string	string
`disableDefaultValidation`	boolean	boolean	boolean
`newPasswordOnChange`	()=>{}	()=>{}	()=>{}
`confirmPasswordOnChange`	()=>{}	()=>{}	()=>{}
`passwordVisbleIcon`	ReactNode	ReactNode	ReactNode
`passwordInVisbleIcon`	ReactNode	ReactNode	ReactNode
`confirmPasswordVisbleIcon`	ReactNode	ReactNode	ReactNode
`confirmPasswordInVisbleIcon`	ReactNode	ReactNode	ReactNode
`newPasswordErrorMsg`	string	string	string
`confirmPasswordErrorMsg`	string	string	string
`errorEmailMsg`	`string`	`string`	Enter valid email

`errorPasswordMsg`	`string`	`string`	Enter valid password
`handleCheckbox`	() => void	Function to handle checkbox change in the component
`checkboxText`	`string`	Text for the checkbox in the component
`checkedValue`	`boolean`	Value of the checkbox
Prop Name	Type	Default Value	Description
-----------------------	--------------------------------------	-----------------------------------	----------------------------------------------------
`loginId`	`string`	`'login'`	Unique ID for the component.
`className`	`string`	`''`	CSS class name for the component.
`sx`	`SxProps<Theme>`	`{}`	Styling props using MUI's sx prop.
`onSubmit`	`(details: object) => void`	`() => undefined`	Function to handle form submission.
`variant`	'emailWithPasswordLogin' `or` 'socialMediaLogin'`or` 'mobileNumberLogin'`or`'metanasResetpassword' `or`'metanasSigninup'	'emailWithPasswordLogin' `or` 'socialMediaLogin'`or` 'mobileNumberLogin' `or`'metanasSigninup' `0r` 'metanasResetpassword'	Type of login variant.
`rootStyle`	`SxProps`	`{}`	Styling props for the root component.
`imageSection`	`object`	See below	Configuration for the image section.
`mainArea`	`object`	See below	Configuration for the main area.
`alt`	`string`	`'Logo'`	Alt text for the logo image.
`logoSrc`	`string \\| ReactNode`	`''`	Source URL or ReactNode for the logo image.
`logoHeight`	`string \\| number`	`'auto'`	Height of the logo image.
`logoWidth`	`string \\| number`	`'10px'`	Width of the logo image.
`logoStyle`	`SxProps`	`{}`	Styling props for the logo image.
`title`	`string \\| any`	`'Login'`	Title or JSX element for the card.
`description`	`string \\| any`	`''`	Description or JSX element for the card.
`actionText`	`string`	`"Don't have an account?"`	Text for the action link or button.
`buttonText`	`string`	`'Login'`	Text for the login button.
`actionLink`	`string`	`'Sign Up'`	URL for the action link.
`onSignUpClick`	`() => void`	`() => undefined`	Function to handle sign-up link click.
`titleStyle`	`CSSProperties`	`{}`	Inline styles for the title.
`btnStyle`	`SxProps`	`{}`	Styling props for the login button.
`cardStyle`	`SxProps`	`{}`	Styling props for the card component.
`actionStyle`	`SxProps`	`{}`	Styling props for the action link.
`actionLinkStyle`	`SxProps`	`{}`	Styling props for the action link.
`mobileLabelText`	`string`	`'Mobile Number'`	Label text for the mobile number input.
`labelStyle`	`SxProps`	`{}`	Styling props for labels.
`mobileFieldstyle`	`SxProps`	`{}`	Styling props for the mobile number input field.
`dropDownStyle`	`SxProps`	`{}`	Styling props for the dropdown in mobile input.
`contryCodefontSize`	`string \\| number`	`'16px'`	Font size for the country code.
`countryCodeFontWeight`	`string \\| number`	`'bold'`	Font weight for the country code.
`numberFontSize`	`string \\| number`	`'16px'`	Font size for the mobile number input.
`dividerStyle`	`SxProps`	`{}`	Styling props for the divider.
`dividerText`	`string`	`'OR'`	Text for the divider.
`dividerTextStyle`	`SxProps`	`{}`	Styling props for the divider text.
`divider`	`true \\| false`	`true`	Whether to show a divider.
`workMailInput`	`true \\| false`	`true`	Whether to show the email input.
`workMailLabel`	`string`	`'Email'`	Label for the email input.
`workMailLabelStyle`	`SxProps`	`{}`	Styling props for the email input label.
`footerStyle`	`SxProps`	`{}`	Styling props for the "Forgot password?" text.
`onForgotClick`	`() => any`	`() => undefined`	Function to handle "Forgot password?" click.
`footerText`	`string`	`'Forgot password?'`	Text for the "Forgot password?" link.
`workMailInputVariant`	`'outlined' \\| 'standard' \\| 'filled'`	`'outlined'`	Variant for the email input.
`loginFieldStyle`	`SxProps`	`{}`	Styling props for login input fields.
`socialMediaList`	`Array`	`[]`	List of social media buttons.
`emailInputvariant`	`'outlined' \\| 'standard' \\| 'filled'`	`'outlined'`	Variant for the email input.
`emailLabelStyle`	`SxProps`	`{}`	Styling props for the email input label.
`emailLabel`	`string`	`'Email'`	Label for the email input.
`passwordLabelStyle`	`SxProps`	`{}`	Styling props for the password input label.
`passwordLabel`	`string`	`'Password'`	Label for the password input.
`pwdInputVariant`	`'outlined' \\| 'standard' \\| 'filled'`	`'outlined'`	Variant for the password input.
`invisibleIcon`	`ReactNode`	`<VisibilityOffOutlinedIcon />`	Icon for the password visibility toggle (invisible).
`visbleIcon`	`ReactNode`	`<VisibilityOutlinedIcon />`	Icon for the password visibility toggle (visible).
`pwdFieldstyle`	`SxProps`	`{}`	Styling props for the password input field.
`variantContainerSx`	`SxProps`	`{}`	Styling props for the variant container.
`cardWidth`	`number \\| string`	`'auto'`	Width of the card.
`cardHeight`	`number \\| string`	`'auto'`	Height of the card.
`cardBgColor`	`string`	`'white'`	Background color of the card.
`cardBoxShadow`	`string`	`'0px 4px 4px rgba(0, 0, 0, 0.25)'`	Box shadow for the card.
`conFirmPasswordStyle`	sxProps	sxProps	sxProp
`conFirmPasswordLabel`	string	string	string
`metanasPasswordTestRegex`	string	string	string
`disableDefaultValidation`	boolean	boolean	boolean
`newPasswordOnChange`	()=>{}	()=>{}	()=>{}
`confirmPasswordOnChange`	()=>{}	()=>{}	()=>{}
`passwordVisbleIcon`	ReactNode	ReactNode	ReactNode
`passwordInVisbleIcon`	ReactNode	ReactNode	ReactNode
`confirmPasswordVisbleIcon`	ReactNode	ReactNode	ReactNode
`confirmPasswordInVisbleIcon`	ReactNode	ReactNode	ReactNode
`newPasswordErrorMsg`	string	string	string
`confirmPasswordErrorMsg`	string	string	string
`errorEmailMsg`	`string`	`string`	Enter valid email

`errorPasswordMsg`	`string`	`string`	Enter valid password
`buttonEndIcon`	`ReactNode`	`ReactNode`	ReactNode
`buttonEndIconStyle`	`SxProps`	`SxProps`	SxProps
`errorStyle`	`SxProps`	`SxProps`	SxProps
`passwordOnChange`	()=>{}	()=>{}	()=>{}
`emailOnChange`	()=>{}	()=>{}	()=>{}

imagesection contains ,

Prop	Type	Default Value	Description
backgroundWrapStyle	object	`{}`	Styling props for the background wrap of the image section.
src	string	`''`	Image source URL.
style	CSSProperties	`{}`	Inline styles for the image section.
height	string	`''`	Height of the image section.
width	string	`''`	Width of the image section.
component	React.ReactNode	`<>`	Custom React component for the image section.
layout	object	breakpoints:{`xs: 0, md: 0, sm: 0, lg: 0`}	Layout breakpoints for responsiveness.

mainArea contains ,

Prop	Type	Default Value	Description
layout	object	breakpoints:`{ xs: 12, md: 12, sm: 12, lg: 12 }`	Layout breakpoints for responsiveness.
WraperStyle	object	`{}`	Styling props for the main area wrapper.
cardParentStyle	object	`{}`	Additional styling props for the card parent.

Dialog section

Prop	Type	Description
openDialog	boolean	Open/close state of the dialog
dialogTitle	string	Title of the dialog
maxWidth	string	Maximum width of the dialog
dialogTitleStyle	SxProps	Styling props for the dialog title
dialogSectionStyle	SxProps	Styling props for the dialog section
agreeButtonStyle	SxProps	Styling props for the agree button in the dialog
bodyTextStyle	SxProps	Styling props for the body text in the dialog
dialogContent	ReactNode	Content of the dialog
dialogButtonText	string	Text for the button in the dialog
dialogButtonVariant	'text' \| 'outlined' \| 'contained' \| undefined	Variant for the button in the dialog
handleAgreeClick	() => void	Function to handle agree button click in the dialog
handleDialogClose	() => void	Function to handle dialog close
handleOpenDialog	() => void	Function to handle dialog open

@emotion/react @emotion/styled @mui/material @licuido-ui/ui_input-field @licuido-ui/ui_mobile-input @licuido-ui/ui_basic-button react react-dom

@licuido-ui/react

3.0.2

8 months ago