Password

Props

Name	Type	Description
allowedSymbols	PredefinedAllowedSymbols \| RegExp	No other symbol shall pass
defaultValue	string \| null	Default value
forbiddenSymbols	PredefinedForbiddenSymbols \| RegExp	Symbols you don't want to appear
hasClearButton	boolean	Whether or not to show a clear button inside the input element. Default is false
isDisabled	boolean	Disable the component
letterCase	'lower' \| 'upper'
maxLength	number	Max number of characters
minPasswordEvaluationLength	number	Minimal number of symbols to start evaluating password strength, default is 0
onBlur	(event: BlurEvent) => void	Blur handler
onChange	(event: ChangeEvent<T>) => void	Value change handler
onEnterPress	(event: EnterPressEvent) => void	Enter press handler
onFocus	(event: FocusEvent) => void	Focus handler
passwordRules	PasswordRules[] === interface PasswordRule { rule: RegExp \| ((password: string) => boolean), ruleMessage: string, }	Describe your password rules. The form could not be submitted until the password satisfies all rules
passwordStrength	(password: string) => React.ReactNode	Password strength, evaluate it yourself and show the result. In the example below zxcvbn package is used to evaluate the strength
shouldRender	boolean	Pass `false` if you don't want the component to appear
value	string \| null	Component value
_[className]	[x: string]: unknown	E.g.: `_w-48` adds a css class `w-48` to the component's outer wrapper.


<>
  <L.Password
    form='passwordForm'
    name='password1'
    isRequired
    passwordRules={[
      {
        rule: /\d/,
        ruleMessage: 'numbers'
      },
      {
        rule: /[a-z]/,
        ruleMessage: 'lowercase latin letters'
      },
      {
        rule: /[A-Z]/,
        ruleMessage: 'uppercase latin letters'
      },
      {
        rule: (password) => password.length > 7,
        ruleMessage: '8 symbols and more'
      }
    ]}
    passwordStrength={(password) => {
      const crackTimeText = zxcvbn(password).crack_times_display.online_no_throttling_10_per_second;
      return crackTimeText && (
        <L.Div _text-stone-600>
          time to crack your password: {crackTimeText}
        </L.Div>
      );
    }}
    minPasswordEvaluationLength={4}
    placeholder="Enter your password..."
    _w-64
    _mb-4
  />
  
  <L.Password
    form='passwordForm'
    name='password2'
    validator={value => L.form('passwordForm', 'password1').get().value === value}
    invalidMessage='Passwords do not match'
    isRequired
    placeholder='Repeat the password'
    _w-64
    _mb-4
  />
  
  <L.Button
    form='passwordForm'
    onClick={({ form }) => console.log('form submit ev', form)}
    onValidationFail={({ invalidForms }) => console.log('form fail ev', invalidForms[0])}
  >
    Submit
  </L.Button>
</>

Validation components' props

Name	Type	Description
form	string	Form name
name	string	Component name
isRequired	boolean	If you don't want the field to be empty
isValid	boolean	Controlled valid state
invalidMessage	ReactNode	Text to show when the value does not match requirements
requiredMessage	ReactNode	Text to show when the field is not filled
shouldValidateUnmounted	boolean	The field can still affect form submission even if it is not rendered
validator	Validator \| PredefinedValidator \| RegExp \| ValidatorObject[]
	interface Validator { (value: any): boolean, }	A validator is a function that takes a value and returns true or false depending on the logic it contains E.g. `(value) => value.length > 4`
	type PredefinedValidator = \| 'creditCardNumber' \| 'email' \| 'url'	See predefined validators
	interface ValidatorObject { validator: PredefinedValidator \| RegExp \| Validator, invalidMessage?: string, }	`ValidatorObject` is useful wnen you need to validate a value against several validators and show inividual messages for each. Just use an array of validator objects. E.g. [ { validator: (value) => value.length > 4, invalidMessage: 'More than 4 sympols please' }, { validator: /^\w+$/, invalidMessage: 'Only a-z, A-Z, 0-9 and _ are allowed' } ]

Customization props

Name	Type
inputRender invalidMessageRender passwordVisibilityRender wrapperRender	({ Element, elementprops, componentProps, componentState }): React.ReactNode	Customization