Password

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
React
1
import { whisper } from '@oliveai/ldk';
2
import { 
3
  NewWhisper, 
4
  UpdateWhisper, 
5
  Whisper, 
6
  WhisperComponentType 
7
} from "@oliveai/ldk/dist/whisper"
8
​
9
const validatePassword = (password: string) => {
10
  const regExpLetters = /[a-zA-Z]/g
11
  const regExpNumbers = /\d/
12
​
13
  if (password.length < 8) {
14
​
15
    return "Password Must be atleast 8 characters long!"
16
  } else if (!regExpLetters.test(password) ){
17
​
18
    return "Password must contain aleast 1 letter!"
19
  } else if (!regExpNumbers.test(password) ){
20
​
21
    return "Password must contain aleast 1 number!"
22
  } else {
23
​
24
    return ''
25
  }
26
​
27
}
28
​
29
const passwordExampleConfig = ( (value: string, validationError: string): NewWhisper | UpdateWhisper => {
30
  return {
31
    label: 'Password Example',
32
    components: [
33
      {
34
        type: WhisperComponentType.Password,
35
        label: 'Password',
36
        tooltip: 'Password Must be atleast 8 characters and include letters and numbers',
37
        validationError: validationError,
38
        value: value,
39
        onChange: (error: Error, password: string, whisper: Whisper) => {
40
          if (error) {
41
            console.debug(error)
42
          }
43
          whisper.update(passwordExampleConfig(password, validatePassword(password)))
44
        }
45
​
46
      }
47
    ]
48
  }
49
})
50
​
51
const newPasswordExampleConfig = (async () => {
52
  await whisper.create(passwordExampleConfig('', '') as NewWhisper);
53
})
54
​
55
newPasswordExampleConfig();
56
​
Copied!
1
import { React, ReactWhisper } from "@oliveai/ldk"
2
​
3
const validatePassword = (password: string) => {
4
  const regExpLetters = /[a-zA-Z]/g
5
  const regExpNumbers = /\d/
6
​
7
  if (password.length < 8) {
8
​
9
    return "Password Must be atleast 8 characters long!"
10
  } else if (!regExpLetters.test(password) ){
11
​
12
    return "Password must contain aleast 1 letter!"
13
  } else if (!regExpNumbers.test(password) ){
14
​
15
    return "Password must contain aleast 1 number!"
16
  } else {
17
​
18
    return ''
19
  }
20
​
21
}
22
​
23
const PasswordExample: React.FunctionComponent<Object> = () => { 
24
  
25
  const [ validationError, setValidationError ] = React.useState('');
26
  const [ value, setValue ] = React.useState('');
27
​
28
  return (
29
    <oh-whisper label='Password Example' onClose={ () => {}}>
30
      <oh-password
31
        label='Password'
32
        tooltip='Password Must be atleast 8 characters and include letters and numbers'
33
        validationError={validationError}
34
        value={value}
35
        onChange={(error, password) => {
36
          if (error) {
37
            console.debug(error)
38
          }
39
          setValue(password)
40
          setValidationError(validatePassword(password))
41
        }}
42
      />
43
    </oh-whisper>
44
  )
45
}
46
​
47
ReactWhisper.renderNewWhisper(<PasswordExample />);
48
​
Copied!

Whisper Components - Previous

Message

Next - Whisper Components

Progress

Last modified 1mo ago

Copy link

Contents

Props:

Examples