Password
Password Field
Props:
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 />);
Last updated
