Playbook Design System

Default

Use the confirmation prop to only include the label and show/hide icon.

Code Example

Close

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

Meter Settings

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.

Code Example

Close

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

Input Props

inputProps is passed directly to an underlying Text Input kit. See the specific docs here for more details.

Code Example

Close

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

Tips

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.

Code Example

Close

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

Strength Change

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

Code Example

Close

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

Common Passphrases

Code Example

Close

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

Breached Passphrases

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.

Code Example

Close

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