Password
Password Field
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 |
Password Component
Error Validation
TypeScript
React
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 />);
Last modified 6mo ago