LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props:
  • Examples

Was this helpful?

  1. Whisper Components

Password

Password Field

PreviousMessageNextProgress

Last updated 3 years ago

Was this helpful?

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

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();
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 />);
Password Component
Error Validation