Sha256: 8af0e7132cd7beee6b530cb19210cd6286cd5cbc4c0568a3076f151c482beae7
Contents?: true
Size: 1.79 KB
Versions: 131
Compression:
Stored size: 1.79 KB
Contents
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
Version data entries
131 entries across 131 versions & 1 rubygems