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 [email protected]

Link

Story Book Link ErrorPage

PlayGround

Try it have a fun codeBox

Author

• @author Akila Kalaiyarasan [email protected]

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 | ()=>{} | ()=>{} | ()=>{} |

1. 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. | | |

2. 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. |

3. 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 |