playbook_ui 11.13.0 → 11.14.0

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx

@@ -1,34 +1,110 @@
 import React, { useState } from 'react'
+import { useEffect } from 'react'
 
-import Passphrase from '../_passphrase'
-
-import TextInput from '../../pb_text_input/_text_input'
+import { Caption, Passphrase, ProgressSimple, TextInput} from '../..'
+import zxcvbn from 'zxcvbn'
 
 const PassphraseStrengthChange = (props) => {
   const [input, setInput] = useState('')
+  const [checkStrength, setCheckStrength] = useState({
+    label: '',
+    percent: 0,
+    score: 0,
+    variant: ''
+  })
 
   const handleChange = (e) => setInput(e.target.value)
 
-  const [strength, setStrength] = useState(0)
-  const handleStrengthChange = (str) => setStrength(str)
+  const handleStrengthCalculation = (settings) => {
+    const {
+        passphrase = "",
+        common = false,
+        isPwned = false,
+        averageThreshold = 2,
+        minLength = 12,
+        strongThreshold = 3,
+      } = settings
+
+    const resultByScore = {
+      0: {
+        variant: 'negative',
+        label: '',
+        percent: 0,
+      },
+      1: {
+        variant: 'negative',
+        label: 'This passphrase is too common',
+        percent: 25,
+      },
+      2: {
+        variant: 'negative',
+        label: 'Too weak',
+        percent: 25,
+      },
+      3: {
+        variant: 'warning',
+        label: 'Almost there, keep going!',
+        percent: 50,
+      },
+      4: {
+        variant: 'positive',
+        label: 'Success! Strong passphrase',
+        percent: 100,
+      }
+    }
+
+    const { score } = zxcvbn(passphrase);
+
+    const noPassphrase = passphrase.length <= 0
+    const commonPassphrase = common || isPwned
+    const weakPassphrase = passphrase.length < minLength || score < averageThreshold
+    const averagePassphrase = score < strongThreshold
+    const strongPassphrase = score >= strongThreshold
+
+    if (noPassphrase) {
+      return {...resultByScore[0], score}
+    } else if (commonPassphrase) {
+      return {...resultByScore[1], score}
+    } else if (weakPassphrase) {
+      return {...resultByScore[2], score}
+    } else if (averagePassphrase){
+      return {...resultByScore[3], score}
+    } else if (strongPassphrase) {
+      return {...resultByScore[4], score}
+    }
+  }
+
+  useEffect(() => {
+     const result = handleStrengthCalculation({ passphrase: input })
+     setCheckStrength({...result})
+    },[input])
 
   return (
     <>
-      <div>
-        <Passphrase
-            label="Passphrase"
-            onChange={handleChange}
-            onStrengthChange={handleStrengthChange}
-            value={input}
-            {...props}
-        />
-        <TextInput
-            disabled
-            label="Passphrase Strength"
-            readOnly
-            value={strength}
-        />
-      </div>
+      <Passphrase
+          label="Passphrase"
+          onChange={handleChange}
+          value={input}
+          {...props}
+      /> 
+      {input.length > 0 && (
+        <>
+          <ProgressSimple
+              percent={checkStrength.percent}
+              variant={checkStrength.variant}
+          />
+          <Caption size='xs'
+              text={checkStrength.label} 
+          />
+        </>
+      )}
+      <TextInput
+          disabled
+          label="Passphrase Strength"
+          marginTop="xl"
+          readOnly
+          value={checkStrength.score}
+      />
     </>
   )
 }

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md

@@ -1,3 +1,7 @@
-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 <a href="https://github.com/dropbox/zxcvbn" target="_blank"> Zxcvbn package</a>. 
 
-Strength is calculated on a 0-4 scale by the <a href="https://github.com/dropbox/zxcvbn" target="_blank"> Zxcvbn package</a>
+<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
+
+This example depends on the `zxcvbn` library. 
+
+You can use any library to achieve the same result, this example only intends to show how to add more features to the `Passphrase` kit.

data/app/pb_kits/playbook/pb_passphrase/docs/example.yml

@@ -2,13 +2,17 @@ examples:
 
   rails:
   - passphrase_default: Default
+  - passphrase_confirmation: Confirmation
   - passphrase_meter_settings: Meter Settings
   - passphrase_input_props: Input Props
   - passphrase_tips: Tips
+  - passphrase_strength_change: Strength Change
+  - passphrase_common: Common Passphrases
   - passphrase_breached: Breached Passphrases
 
   react:
   - passphrase_default: Default
+  - passphrase_confirmation: Confirmation
   - passphrase_meter_settings: Meter Settings
   - passphrase_input_props: Input Props
   - passphrase_tips: Tips

data/app/pb_kits/playbook/pb_passphrase/docs/index.js

@@ -1,4 +1,5 @@
 export { default as PassphraseDefault } from './_passphrase_default.jsx'
+export { default as PassphraseConfirmation } from './_passphrase_confirmation.jsx'
 export { default as PassphraseMeterSettings } from './_passphrase_meter_settings'
 export { default as PassphraseInputProps } from './_passphrase_input_props'
 export { default as PassphraseTips } from './_passphrase_tips'

data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb

@@ -1 +1 @@
-  <%= react_component('Passphrase', object.passphrase_options) %>
+  <%= react_component('Passphrase', object.passphrase_options, class: object.classname,) %>

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb

@@ -3,15 +3,14 @@
 module Playbook
   module PbPassphrase
     class Passphrase < Playbook::KitBase
-      prop :average_threshold
-      prop :check_pwned
       prop :confirmation, type: Playbook::Props::Boolean, default: false
       prop :input_props, type: Playbook::Props::Hash, default: {}
       prop :label
-      prop :min_length
-      prop :show_tips_below
-      prop :strong_threshold
+      prop :show_tips_below, type: Playbook::Props::Enum,
+                             values: %w[always xs sm md lg xl],
+                             default: "always"
       prop :tips, type: Playbook::Props::Array, default: []
+      prop :value, type: Playbook::Props::String
 
       def classname
         generate_classname("pb_passphrase")
@@ -19,18 +18,15 @@ module Playbook
 
       def passphrase_options
         {
-          checkPwned: check_pwned,
           dark: dark,
           id: id,
-          averageThreshold: average_threshold,
           confirmation: confirmation,
           inputProps: input_props,
           label: label,
-          minLength: min_length,
           showTipsBelow: show_tips_below,
-          strongThreshold: strong_threshold,
           tips: tips,
           uncontrolled: true,
+          value: value,
         }.compact
       end
     end

data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx

@@ -64,41 +64,6 @@ test('passes input props to input element', () => {
   expect(input).toBeDisabled()
 })
 
-test('progress bar is invisible when value is empty', () => {
-  render(
-    <Passphrase
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit.querySelector('[class^=pb_progress_simple_wrapper]')).toHaveClass('progress-empty-input')
-})
-
-test('progress bar is visible when value is not empty', () => {
-  render(
-    <Passphrase
-        data={{ testid: testId }}
-        value="test_password_input"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit.querySelector('[class^=pb_progress_simple_wrapper]')).not.toHaveClass('progress-empty-input')
-})
-
-test('no progress bar is show when confirmation is true', () => {
-  render(
-    <Passphrase
-        confirmation
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit.querySelector('[class^=pb_progress_simple_wrapper]')).toBeNull()
-})
-
 test('popover target shows when tips are given', () => {
   render(
     <Passphrase
@@ -121,15 +86,3 @@ test('popover target does not show when tips are not given', () => {
   const kit = screen.getByTestId(testId)
   expect(kit.querySelector('[class^=pb_popover_reference_wrapper]')).toBeNull()
 })
-
-test('data-strength attribute exposes strength of password', () => {
-  render(
-    <Passphrase
-        data={{ testid: testId }}
-        value="correct horse battery staple"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(parseInt(kit.getAttribute('data-strength'))).toBeGreaterThan(0)
-})

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.12.1"
-  VERSION = "11.13.0"
+  PREVIOUS_VERSION = "11.13.0"
+  VERSION = "11.14.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.13.0
+  version: 11.14.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-12-06 00:00:00.000000000 Z
+date: 2022-12-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1465,16 +1465,20 @@ files:
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.md
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.md
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.jsx
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.md
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.md
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.html.erb
@@ -1485,9 +1489,6 @@ files:
 - app/pb_kits/playbook/pb_passphrase/passphrase.html.erb
 - app/pb_kits/playbook/pb_passphrase/passphrase.rb
 - app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx
-- app/pb_kits/playbook/pb_passphrase/passwordStrength.js
-- app/pb_kits/playbook/pb_passphrase/useHaveIBeenPwned.js
-- app/pb_kits/playbook/pb_passphrase/useZxcvbn.js
 - app/pb_kits/playbook/pb_person/_person.jsx
 - app/pb_kits/playbook/pb_person/_person.scss
 - app/pb_kits/playbook/pb_person/docs/_description.md

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.md

@@ -1 +0,0 @@
-Use the `confirmation` prop to only include the label and show/hide icon.

data/app/pb_kits/playbook/pb_passphrase/passwordStrength.js

@@ -1,55 +0,0 @@
-import zxcvbn from 'zxcvbn'
-
-export const zxcvbnPasswordScore = (options) => {
-  const {
-    calculate = zxcvbn,
-    averageThreshold = 2,
-    strongThreshold = 3,
-    minLength = 12,
-  } = options
-
-  return {
-    minLength,
-    averageThreshold,
-    strongThreshold,
-    test: function (password = '', common = false) {
-      const feedbackValues = (str) => {
-        let percent, variant, text
-
-        if (password.length <= 0) {
-          percent = '0'
-          variant = 'negative'
-          text = '\u00A0' //nbsp to keep form from jumping when typing beings
-        } else if (common) {
-          percent = '25'
-          variant = 'negative'
-          text = 'This passphrase is too common'
-        } else if (password.length < this.minLength || str < this.averageThreshold) {
-          percent = '25'
-          variant = 'negative'
-          text = 'Too weak'
-        } else if (str < this.strongThreshold){
-          percent = '50'
-          variant = 'warning'
-          text = 'Almost there, keep going!'
-        } else if (str >= this.strongThreshold) {
-          percent = '100'
-          variant = 'positive'
-          text = 'Success! Strong passphrase'
-        }
-        return { percent, variant, text }
-      }
-
-      const result = calculate(password)
-
-      return (
-        {
-          suggestions: result.feedback.suggestions,
-          warning: result.feedback.warning,
-          strength: result.score,
-          ...feedbackValues(result.score),
-        }
-      )
-    },
-  }
-}

data/app/pb_kits/playbook/pb_passphrase/useHaveIBeenPwned.js

@@ -1,52 +0,0 @@
-
-import  { useEffect, useState } from 'react'
-
-const checkHaveIBeenPwned = async function (passphrase) {
-  const buffer = new TextEncoder('utf-8').encode(passphrase)
-  const digest = await crypto.subtle.digest('SHA-1', buffer)
-  const hashArray = Array.from(new Uint8Array(digest))
-  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
-
-  const firstFive = hashHex.slice(0, 5)
-  const endOfHash = hashHex.slice(5)
-
-  const resp = await fetch(`https://api.pwnedpasswords.com/range/${firstFive}`)
-  const text = await resp.text()
-
-  const match = text.split('\n').some((line) => {
-    //Each line is <sha-1-hash-suffix>:<count of incidents>
-    return line.split(':')[0] === endOfHash.toUpperCase()
-  })
-  return match
-}
-
-/**
- * If the input hasn't changed in <delay> ms,
- * hit the haveibeenpwned api and check if the given passphrase is compromised
- */
-export default function useHaveIBeenPwned(passphrase, minLength, delay = 400) {
-  const [isPwned, setIsPwned] = useState(false)
-
-  useEffect(
-    () => {
-      // only check the API for passphrases above the minimum size
-      if (passphrase.length < minLength) {
-        setIsPwned(false)
-        return
-      }
-
-      const handler = setTimeout(() => {
-        checkHaveIBeenPwned(passphrase)
-          .then((pwned) => setIsPwned(pwned))
-          .catch(() => setIsPwned(false))
-      }, delay)
-
-      return () => {
-        clearTimeout(handler)
-      }
-    },
-    [passphrase, minLength, delay]
-  )
-
-  return isPwned
-}

data/app/pb_kits/playbook/pb_passphrase/useZxcvbn.js

@@ -1,58 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import zxcvbn from 'zxcvbn'
-
-export default function useZxcvbn(options) {
-  const { passphrase = '', common, isPwned, confirmation, averageThreshold, minLength, strongThreshold } = options
-  const calculator = useMemo(
-    () => confirmation ?  () => ({ score: 0 }) : zxcvbn,
-    [confirmation]
-  )
-
-  const [percent, setPercent] = useState('0')
-  const [variant, setVariant] = useState('negative')
-  const [text, setText] = useState('\u00A0') //nbsp to keep height constant
-  const [result, setResult] = useState({})
-
-  useEffect(() => {
-    if (confirmation) return
-    const newResult = calculator(passphrase)
-    setResult(newResult)
-    const str = newResult.score
-
-    const noPassphrase = passphrase.length <= 0
-    const commonPassphrase = common || isPwned
-    const weakPassphrase = passphrase.length < minLength || str < averageThreshold
-    const averagePassphrase = str < strongThreshold
-    const strongPassphrase = str >= strongThreshold
-
-    if (noPassphrase) {
-      setPercent('0')
-      setVariant('negative')
-      setText('\u00A0') //nbsp to keep height constant
-    } else if (commonPassphrase) {
-      setPercent('25')
-      setVariant('negative')
-      setText('This passphrase is too common')
-    } else if (weakPassphrase) {
-      setPercent('25')
-      setVariant('negative')
-      setText('Too weak')
-    } else if (averagePassphrase){
-      setPercent('50')
-      setVariant('warning')
-      setText('Almost there, keep going!')
-    } else if (strongPassphrase) {
-      setPercent('100')
-      setVariant('positive')
-      setText('Success! Strong passphrase')
-    }
-  }, [passphrase, common, isPwned, averageThreshold, minLength, strongThreshold]
-  )
-
-  return {
-    strength: common || isPwned ? 0 : result.score,
-    percent,
-    variant,
-    text,
-  }
-}