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

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