Password

Password Field

Props:

Properties	Types	Description	Required?	Default
disabled	boolean	disable input field		undefined
label	string	label field field		undefined
tooltip	string	tooltip: message appears when hovering over input field		undefined
validationError	string	When not '' or undefined, outlines the input in red and renders the provided text in red beneath the input.		undefined
value	string	State value associated with the input.		undefined
onBlur	Callback function	Executes the provided function when the user removes focus from the input.		undefined
onFocus	Callback Function	Executes the provided function when the user focuses into the input.		undefined
onChange	WhisperHandlerWithParam<string>	provided function when the user alters the value of the input.		undefined

Examples

Password Component

Error Validation

TypeScript

import { whisper } from '@oliveai/ldk';
import { 
  NewWhisper, 
  UpdateWhisper, 
  Whisper, 
  WhisperComponentType 
} from "@oliveai/ldk/dist/whisper"

const validatePassword = (password: string) => {
  const regExpLetters = /[a-zA-Z]/g
  const regExpNumbers = /\d/

  if (password.length < 8) {

    return "Password Must be atleast 8 characters long!"
  } else if (!regExpLetters.test(password) ){

    return "Password must contain aleast 1 letter!"
  } else if (!regExpNumbers.test(password) ){

    return "Password must contain aleast 1 number!"
  } else {

    return ''
  }

}

const passwordExampleConfig = ( (value: string, validationError: string): NewWhisper | UpdateWhisper => {
  return {
    label: 'Password Example',
    components: [
      {
        type: WhisperComponentType.Password,
        label: 'Password',
        tooltip: 'Password Must be atleast 8 characters and include letters and numbers',
        validationError: validationError,
        value: value,
        onChange: (error: Error, password: string, whisper: Whisper) => {
          if (error) {
            console.debug(error)
          }
          whisper.update(passwordExampleConfig(password, validatePassword(password)))
        }

      }
    ]
  }
})

const newPasswordExampleConfig = (async () => {
  await whisper.create(passwordExampleConfig('', '') as NewWhisper);
})

newPasswordExampleConfig();

React

import { React, ReactWhisper } from "@oliveai/ldk"

const validatePassword = (password: string) => {
  const regExpLetters = /[a-zA-Z]/g
  const regExpNumbers = /\d/

  if (password.length < 8) {

    return "Password Must be atleast 8 characters long!"
  } else if (!regExpLetters.test(password) ){

    return "Password must contain aleast 1 letter!"
  } else if (!regExpNumbers.test(password) ){

    return "Password must contain aleast 1 number!"
  } else {

    return ''
  }

}

const PasswordExample: React.FunctionComponent<Object> = () => { 
  
  const [ validationError, setValidationError ] = React.useState('');
  const [ value, setValue ] = React.useState('');

  return (
    <oh-whisper label='Password Example' onClose={ () => {}}>
      <oh-password
        label='Password'
        tooltip='Password Must be atleast 8 characters and include letters and numbers'
        validationError={validationError}
        value={value}
        onChange={(error, password) => {
          if (error) {
            console.debug(error)
          }
          setValue(password)
          setValidationError(validatePassword(password))
        }}
      />
    </oh-whisper>
  )
}

ReactWhisper.renderNewWhisper(<PasswordExample />);