RubyGems - playbook_ui - Versions diffs - 11.12.1.pre.alpha.passphrase1 → 11.12.1 - Mend

playbook_ui 11.12.1.pre.alpha.passphrase1 → 11.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx CHANGED Viewed

@@ -1,157 +1,71 @@
 import React, { useState } from 'react'
-import { Body, Caption, Passphrase, ProgressSimple, TextInput } from '../..'
-import zxcvbn from 'zxcvbn'
+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 [result, setResult] = useState({})
-  const [calculatedStrength, setCalculatedStrength] = useState(0)
-  const meterSettings = [
-    {
-      label: "Default settings"
-    },
-    {
-      minLength: 5,
-      label: "Min length = 5",
-    },
-    {
-      minLength: 30,
-      label: "Min length = 30",
-    },
-    {
-      label: "Average threshold = 1",
-      averageThreshold: 1,
-    },
-    {
-      label: "Strong Threshold = 4",
-      strongThreshold: 4,
-    },
-  ]
-  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}
-    }
-  }
-  const handleChange = (e) => {
-    const passphrase = e.target.value;
-    setInput(passphrase)
-    const calculated = []
-    meterSettings.forEach((setting, index) => {
-      const results = handleStrengthCalculation({passphrase, ...setting})
-      if (index == 0) setCalculatedStrength(results.score)
-      calculated.push(results)
-    })
-    setResult(calculated)
-  }
+  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."
-          }
+          {'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={"Type your passphrase"}
+            label="Default settings"
             onChange={handleChange}
+            onStrengthChange={handleStrengthChange}
             value={input}
             {...props}
         />
-        <TextInput
-            disabled
-            label="Calculated Strength"
-            readOnly
-            value={calculatedStrength}
+        <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}
         />
-        {meterSettings.map((settings, index) => (
-          <div key={index}>
-            <Passphrase
-                label={settings.label}
-                onChange={handleChange}
-                value={input}
-                {...props}
-            />
-            {input.length > 0 && (
-              <>
-                <ProgressSimple
-                    percent={result[index].percent}
-                    variant={result[index].variant}
-                />
-                <Caption size='xs'
-                    text={result[index].label}
-                />
-              </>
-            )}
-          </div>
-        ))}
       </div>
     </>
-  );
+  )
 }
 export default PassphraseMeterSettings

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md CHANGED Viewed

@@ -1,15 +1,9 @@
-This example shows how to enhance the passphrase strenght by setting diferent thresholds and lengths.
+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 `meterSettings` array contains different settings for each rendered input. The `handleStrengthCalculation` handles the strength calculation using those settings, showing different results for the same `passphrase` input.
-By default, `minLength` is 12. Try typing any value in the `Default Example` input. Notice that the bar won't change from red until the minimum is met.
+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.
-<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.
+Note: minimum length trumps strength and will set the bar to a red color, despite whatever strength is calculated.

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

@@ -1,110 +1,34 @@
 import React, { useState } from 'react'
-import { useEffect } from 'react'
-import { Caption, Passphrase, ProgressSimple, TextInput} from '../..'
-import zxcvbn from 'zxcvbn'
+import Passphrase from '../_passphrase'
+import TextInput from '../../pb_text_input/_text_input'
 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 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])
+  const [strength, setStrength] = useState(0)
+  const handleStrengthChange = (str) => setStrength(str)
   return (
     <>
-      <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}
-      />
+      <div>
+        <Passphrase
+            label="Passphrase"
+            onChange={handleChange}
+            onStrengthChange={handleStrengthChange}
+            value={input}
+            {...props}
+        />
+        <TextInput
+            disabled
+            label="Passphrase Strength"
+            readOnly
+            value={strength}
+        />
+      </div>
     </>
   )
 }

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

@@ -1,7 +1,3 @@
-Strength is calculated on a 0-4 scale by the <a href="https://github.com/dropbox/zxcvbn" target="_blank"> Zxcvbn package</a>.
+As the strength of the entered passphrase changes, the optional `onStrengthChange` callback is called with the new strength value. This exposes the calculated strength.
-<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.
+Strength is calculated on a 0-4 scale by the <a href="https://github.com/dropbox/zxcvbn" target="_blank"> Zxcvbn package</a>

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

@@ -2,17 +2,13 @@ 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 CHANGED Viewed

@@ -1,5 +1,4 @@
 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 CHANGED Viewed

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

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

@@ -3,14 +3,15 @@
 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 :show_tips_below, type: Playbook::Props::Enum,
-                             values: %w[always xs sm md lg xl],
-                             default: "always"
+      prop :min_length
+      prop :show_tips_below
+      prop :strong_threshold
       prop :tips, type: Playbook::Props::Array, default: []
-      prop :value, type: Playbook::Props::String
       def classname
         generate_classname("pb_passphrase")
@@ -18,15 +19,18 @@ 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 CHANGED Viewed

@@ -64,6 +64,41 @@ 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
@@ -86,3 +121,15 @@ 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/app/pb_kits/playbook/pb_passphrase/passwordStrength.js ADDED Viewed

@@ -0,0 +1,55 @@
+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 ADDED Viewed

@@ -0,0 +1,52 @@
+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 ADDED Viewed

@@ -0,0 +1,58 @@
+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,
+  }
+}

data/lib/playbook/version.rb CHANGED Viewed

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 module Playbook
-  PREVIOUS_VERSION = "11.12.1"
-  VERSION = "11.12.1.pre.alpha.passphrase1"
+  PREVIOUS_VERSION = "11.12.0"
+  VERSION = "11.12.1"
 end