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