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
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!
Copy link