Use the confirmation
prop to only include the label and show/hide icon.
import React, { useState } from 'react' import Passphrase from '../_passphrase' const PassphraseDefault = (props) => { const [input, setInput] = useState('') const handleChange = (e) => setInput(e.target.value) const [confoInput, setConfoInput] = useState('') const handleConfoChange = (e) => setConfoInput(e.target.value) return ( <> <div> <Passphrase id="my-passphrase" onChange={handleChange} value={input} {...props} /> <Passphrase confirmation onChange={handleConfoChange} value={confoInput} {...props} /> <span>{input === confoInput ? 'They match!' : 'They don\'t match!'}</span> </div> </> ) } export default PassphraseDefault
By default, the minimum length is 12 and the strength meter will show a strength of 1 if not met. Notice the bar won't change from red until the minimum is met
Use the minLength
prop to adjust.
The meter also response to averageThreshold
and strongTreshold
props. averageThresold
defaults to 2, and strongThreshold
defaults to 3.
This means that the bar will turn yellow when the strength of the passphrase is calculated to be 2 on a 0-4 scale, and green when 3.
Adjust these props to tune the sensitivity of the bar.
Note: minimum length trumps strength and will set the bar to a red color, despite whatever strength is calculated.
import React, { useState } from 'react' import Body from '../../pb_body/_body' import Passphrase from '../../pb_passphrase/_passphrase' import TextInput from '../../pb_text_input/_text_input' const PassphraseMeterSettings = (props) => { const [input, setInput] = useState('') const handleChange = (e) => setInput(e.target.value) const [strength, setStrength] = useState(0) const handleStrengthChange = (str) => setStrength(str) return ( <> <div> <Body> {'These examples will all share the same input value. Type in any of the inputs to see how the strength meter changes in response to different settings.'} </Body> <br /> <TextInput disabled label="Calculated Strength" readOnly value={strength} /> <Passphrase label="Default settings" onChange={handleChange} onStrengthChange={handleStrengthChange} value={input} {...props} /> <Passphrase label="Min length = 5" minLength={5} onChange={handleChange} value={input} {...props} /> <Passphrase label="Min length = 30" minLength={30} onChange={handleChange} value={input} {...props} /> <Passphrase averageThreshold={1} label="Average threshold = 1" onChange={handleChange} value={input} {...props} /> <Passphrase label="Strong Threshold = 4" onChange={handleChange} strongThreshold={4} value={input} {...props} /> </div> </> ) } export default PassphraseMeterSettings
inputProps
is passed directly to an underlying Text Input kit. See the specific docs here for more details.
import React, { useState } from 'react' import Passphrase from '../../pb_passphrase/_passphrase' const PassphraseInputProps = (props) => { const [input, setInput] = useState('') const handleChange = (e) => setInput(e.target.value) return ( <> <div> <Passphrase inputProps={{ name: 'my-disabled-field', id: 'my-value-id', disabled: true, }} label="Pass props directly to input kit" onChange={handleChange} value={input} {...props} /> <Passphrase inputProps={{ children: ( <input onChange={handleChange} type="password" value={input} />), }} label="Custom input" onChange={handleChange} value={input} {...props} /> <Passphrase inputProps={{ name: 'my-value-name', id: 'my-value-id' }} label="Set name and ID for use in form libraries" onChange={handleChange} value={input} {...props} /> <Passphrase confirmation inputProps={{ name: 'my-value-confirmation-name', id: 'my-value-confirmation-id' }} onChange={handleChange} value={input} {...props} /> </div> </> ) } export default PassphraseInputProps
showTipsBelow
(react) / show_tips_below
(rails) takes 'xs', 'sm', 'md', 'lg', 'xl' and only show the tips below the given screen size. Similar to the responsive table breakpoints. Omit this prop to always show.
import React, { useState } from 'react' import Passphrase from '../_passphrase' const PassphraseTips = (props) => { const [input, setInput] = useState('') const handleChange = (e) => setInput(e.target.value) return ( <> <div> <Passphrase label="Pass an array of strings to the tips prop" onChange={handleChange} tips={['And the info icon will appear.', 'Each string will be displayed as its own tip']} value={input} {...props} /> <Passphrase label="Omit the prop to hide the icon" onChange={handleChange} value={input} {...props} /> <Passphrase label="Only show tips at small screen size" onChange={handleChange} showTipsBelow="xs" tips={['Make the password longer', 'Type more things', 'Use something else']} value={input} {...props} /> <Passphrase label="Only show tips at medium screen size" onChange={handleChange} showTipsBelow="md" tips={['Make the password longer', 'Type more things', 'Use something else']} value={input} {...props} /> <Passphrase label="Only show tips at large screen size" onChange={handleChange} showTipsBelow="lg" tips={['Make the password longer', 'Type more things', 'Use something else']} value={input} {...props} /> </div> </> ) } export default PassphraseTips
As the strength of the entered passphrase changes, the optional onStrengthChange
callback is called with the new strength value. This exposes the calculated strength.
Strength is calculated on a 0-4 scale by the Zxcvbn package
import React, { useState } from 'react' import Passphrase from '../_passphrase' import TextInput from '../../pb_text_input/_text_input' const PassphraseStrengthChange = (props) => { const [input, setInput] = useState('') const handleChange = (e) => setInput(e.target.value) const [strength, setStrength] = useState(0) const handleStrengthChange = (str) => setStrength(str) return ( <> <div> <Passphrase label="Passphrase" onChange={handleChange} onStrengthChange={handleStrengthChange} value={input} {...props} /> <TextInput disabled label="Passphrase Strength" readOnly value={strength} /> </div> </> ) } export default PassphraseStrengthChange
import React, { useState } from 'react' import Passphrase from '../_passphrase' import Body from '../../pb_body/_body' const PassphraseCommon = (props) => { const [input, setInput] = useState('') const handleChange = (e) => setInput(e.target.value) const COMMON_PASSPHRASES = ['passphrase', 'apple', 'password', 'p@55w0rd'] const commonCheck = (passphrase) => { if (COMMON_PASSPHRASES.includes(passphrase)) return true return false } return ( <> <div> <Body text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(' ')}`} /> <br /> <Passphrase common={commonCheck(input)} onChange={handleChange} value={input} {...props} /> </div> </> ) } export default PassphraseCommon
Use checkPwned | checked_pwned
prop to enable checking against HaveIBeenPwned's API. As the passphrase is typed, it is checked against more than half a billion breached passwords, to help ensure its not compromised.
Should it fail, the feedback will express the passphrase is too common, prompting the user to change.
This uses their k-Anonymity model, so only the first 5 characters of a hashed copy of the passphrase are sent.
import React, { useState } from 'react' import Passphrase from '../_passphrase' const PassphraseBreached = (props) => { const [input, setInput] = useState('') const handleChange = (e) => setInput(e.target.value) return ( <> <div> <br /> <Passphrase checkPwned onChange={handleChange} value={input} {...props} /> </div> </> ) } export default PassphraseBreached