playbook_ui 11.12.0 → 11.12.1.pre.alpha.passphrase1

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb

@@ -1,10 +1,323 @@
+<%= pb_rails("passphrase", props: { label: "Default Settings", classname: "def_passphrase" }) %>
 
-<%= pb_rails("passphrase", props: { label: "Default Settings"}) %>
+<%= pb_rails("progress_simple", props: { percent: 0, id: "def_bar" }) %>
 
-<%= pb_rails("passphrase", props: { label: "Min length = 5", min_length: 5}) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "def_caption" }) %>
 
-<%= pb_rails("passphrase", props: { label: "Min length = 30", min_length: 30}) %>
+<%= pb_rails("text_input", props: { label: "Calculated Strength", value: "0", disabled: true, id: "calc_strength" }) %>
 
-<%= pb_rails("passphrase", props: { average_threshold: 1, label: "Average Threshold = 1"}) %>
+<%= pb_rails("passphrase", props: { label: "Min length = 5", classname: "min_5" }) %>
 
-<%= pb_rails("passphrase", props: { label: "Strong Threshold = 4", strong_threshold: 4}) %>
+<%= pb_rails("progress_simple", props: { percent: 0, id: "min_5_bar" }) %>
+
+<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "min_5_caption" }) %>
+
+<%= pb_rails("passphrase", props: { label: "Min length = 30", classname: "min_30" }) %>
+
+<%= pb_rails("progress_simple", props: { percent: 0, id: "min_30_bar" }) %>
+
+<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "min_30_caption" }) %>
+
+<%= pb_rails("passphrase", props: { label: "Average Threshold = 1", classname: "avg_1" }) %>
+
+<%= pb_rails("progress_simple", props: { percent: 0, id: "avg_1_bar" }) %>
+
+<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "avg_1_caption" }) %>
+
+<%= pb_rails("passphrase", props: { label: "Strong Threshold = 4", classname: "strong_4" }) %>
+
+<%= pb_rails("progress_simple", props: { percent: 0, id: "strong_4_bar" }) %>
+
+<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "strong_4_caption" }) %>
+
+
+
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
+
+
+    // variables for the passphrase kits you are targeting 
+    const defPassphrase = document.querySelector(".def_passphrase").querySelector("input")
+    const min5 = document.querySelector(".min_5").querySelector("input")
+    const min30 = document.querySelector(".min_30").querySelector("input")
+    const avg1 = document.querySelector(".avg_1").querySelector("input")
+    const strong4 = document.querySelector(".strong_4").querySelector("input")
+
+    // variable for the text_input kit you are targeting 
+    const calcStrength = document.querySelector("#calc_strength")
+
+    // variables for the progress_simple kits you are targeting 
+    const defBarVariant = document.getElementById("def_bar")
+    const defBarPercent = document.getElementById("def_bar").querySelector("div")
+    const min5BarVariant = document.getElementById("min_5_bar")
+    const min5BarPercent = document.getElementById("min_5_bar").querySelector("div")
+    const min30BarVariant = document.getElementById("min_30_bar")
+    const min30BarPercent = document.getElementById("min_30_bar").querySelector("div")
+    const avg1BarVariant = document.getElementById("avg_1_bar")
+    const avg1BarPercent = document.getElementById("avg_1_bar").querySelector("div")
+    const strong4BarVariant = document.getElementById("strong_4_bar")
+    const strong4BarPercent = document.getElementById("strong_4_bar").querySelector("div")
+
+    // hide all the progress_simple bars
+    defBarVariant.style.display = 'none';
+    defBarPercent.style.display = 'none';
+    min5BarVariant.style.display = 'none';
+    min5BarPercent.style.display = 'none';
+    min30BarVariant.style.display = 'none';
+    min30BarPercent.style.display = 'none';
+    avg1BarVariant.style.display = 'none';
+    avg1BarPercent.style.display = 'none';
+    strong4BarVariant.style.display = 'none';
+    strong4BarPercent.style.display = 'none';
+
+    // variables for the caption kits you are targeting 
+    const defCaption = document.getElementById("def_caption")
+    const min5Caption = document.getElementById("min_5_caption")
+    const min30Caption = document.getElementById("min_30_caption")
+    const avg1Caption = document.getElementById("avg_1_caption")
+    const strong4Caption = document.getElementById("strong_4_caption")
+
+    // hide all the captions
+    defCaption.style.display = 'none';
+    min5Caption.style.display = 'none';
+    min30Caption.style.display = 'none';
+    avg1Caption.style.display = 'none';
+    strong4Caption.style.display = 'none';
+
+    // funtion that determines strenght of user passowrd using zxcvbn
+    const handleStrengthCalculation = (settings) => {
+
+      // define the settings object with its defaults
+      const {
+        passphrase = "",
+        common = false,
+        isPwned = false,
+        averageThreshold = 2,
+        minLength = 12,
+        strongThreshold = 3,
+      } = settings
+
+      // define the resultsByScore objects, these return an object with a variant and percentage,
+      // depending on the score of the password
+      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
+
+      // conditional that returns the score of the password, along with the resultByScore object 
+      // so we can change the percantage and variant of the progress_simple kit
+      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}
+      }
+    }
+
+
+    // event listeners attached to the input field
+    min5.addEventListener('input', (e) => {
+      const passphrase = e.target.value;
+
+      // defining setting object to spread into handleStrengthCalculation
+      setting = {
+        minLength: 5,
+      }
+
+      // pass in passphrase and setting object to handleStrengthCalculation and set that equal to result variable
+      const result = handleStrengthCalculation({passphrase, ...setting})
+
+      // set the value of the text_input to the score
+      calcStrength.value = result.score
+
+      // conditional statment to show or hide progress_simple bar and caption if user has entered a password
+      if (passphrase) {
+        min5BarVariant.style.display = 'block';
+
+        min5BarPercent.style.display = 'block';
+
+        min5Caption.style.display = 'block';
+      } else {
+        min5BarVariant.style.display = 'none';
+
+        min5BarPercent.style.display = 'none';
+
+        min5Caption.style.display = 'none';
+      }
+
+      // set the width of the progress_simple kit
+      min5BarPercent.style.width = result.percent.toString()+ "%"
+
+
+      // set the variant of the progress_simple kit
+      min5BarVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");
+
+
+      // set the text of the caption kit
+      min5Caption.textContent = result.label
+    });
+
+    defPassphrase.addEventListener('input', (e) => {
+      const passphrase = e.target.value;
+
+      const result = handleStrengthCalculation({passphrase})
+
+      calcStrength.value = result.score
+
+      if (passphrase) {
+        defBarVariant.style.display = 'block';
+
+        defBarPercent.style.display = 'block';
+
+        defCaption.style.display = 'block';
+      } else {
+        defBarVariant.style.display = 'none';
+
+        defBarPercent.style.display = 'none';
+
+        defCaption.style.display = 'none';
+      }
+
+      defBarPercent.style.width = result.percent.toString()+ "%"
+
+      defBarVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");
+
+      defCaption.textContent = result.label
+
+    });
+
+    min30.addEventListener('input', (e) => {
+      const passphrase = e.target.value;
+
+      setting = {
+        minLength: 30,
+      }
+
+      const result = handleStrengthCalculation({passphrase, ...setting})
+
+      calcStrength.value = result.score
+
+      if (passphrase) {
+        min30BarVariant.style.display = 'block';
+
+        min30BarPercent.style.display = 'block';
+
+        min30Caption.style.display = 'block';
+      } else {
+        min30BarVariant.style.display = 'none';
+
+        min30BarPercent.style.display = 'none';
+
+        min30Caption.style.display = 'none';
+      }
+
+      min30BarPercent.style.width = result.percent.toString()+ "%"
+
+      min30BarVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");
+
+      min30Caption.textContent = result.label
+    });
+
+    avg1.addEventListener('input', (e) => {
+      const passphrase = e.target.value;
+
+      setting =   {
+        averageThreshold: 1,
+      }
+
+      const result = handleStrengthCalculation({passphrase, ...setting})
+
+      calcStrength.value = result.score
+
+      if (passphrase) {
+        avg1BarVariant.style.display = 'block';
+
+        avg1BarPercent.style.display = 'block';
+
+        avg1Caption.style.display = 'block';
+      } else {
+        avg1BarVariant.style.display = 'none';
+
+        avg1BarPercent.style.display = 'none';
+
+        avg1Caption.style.display = 'none';
+      }
+
+      avg1BarPercent.style.width = result.percent.toString()+ "%"
+
+      avg1BarVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");
+
+      avg1Caption.textContent = result.label
+    });
+    
+    strong4.addEventListener('input', (e) => {
+      const passphrase = e.target.value;
+
+      setting =   {
+        strongThreshold: 4,
+      }
+
+      const result = handleStrengthCalculation({passphrase, ...setting})
+
+      calcStrength.value = result.score
+
+      if (passphrase) {
+        strong4BarVariant.style.display = 'block';
+
+        strong4BarPercent.style.display = 'block';
+
+        strong4Caption.style.display = 'block';
+      } else {
+        strong4BarVariant.style.display = 'none';
+
+        strong4BarPercent.style.display = 'none';
+
+        strong4Caption.style.display = 'none';
+      }
+
+      strong4BarPercent.style.width = result.percent.toString()+ "%"
+
+      strong4BarVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");
+
+      strong4Caption.textContent = result.label
+    });
+
+  
+  })
+<% end %>

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

@@ -1,71 +1,157 @@
 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'
+import { Body, Caption, Passphrase, ProgressSimple, TextInput } from '../..'
+import zxcvbn from 'zxcvbn'
+
 
 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) => setInput(e.target.value)
+  
+  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 [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="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}
+            label={"Type your passphrase"}
             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}
+        <TextInput
+            disabled
+            label="Calculated Strength"
+            readOnly
+            value={calculatedStrength}
         />
+        {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

@@ -1,9 +1,15 @@
-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.
+This example shows how to enhance the passphrase strenght by setting diferent thresholds and lengths. 
 
+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.
 
-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.
+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.
 
 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.
+
+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.

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb

@@ -0,0 +1,123 @@
+<%= pb_rails("passphrase", props: { label: "Passphrase", classname: "passphrase_change" }) %>
+
+<%= pb_rails("progress_simple", props: { percent: 0, id: "bar_change" }) %>
+
+<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_change" }) %>
+
+<%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
+
+
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
+
+    // variables for the kits you are targeting 
+    const passphrase = document.querySelector(".passphrase_change").querySelector("input")
+    const calcStrength = document.querySelector("#calc_strength_change")
+    const barVariant = document.getElementById("bar_change")
+    const barPercent = document.getElementById("bar_change").querySelector("div")
+    const caption = document.getElementById("caption_change")
+
+    // hide the bar and captions
+    barVariant.style.display = 'none';
+    barPercent.style.display = 'none';
+    caption.style.display = 'none';
+
+
+    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}
+      }
+    }
+
+    // event listeners attached to the input field
+    passphrase.addEventListener('input', (e) => {
+      const passphrase = e.target.value;
+
+      // pass in passphrase to the handleStrengthCalculation and set that equal to result variable
+      const result = handleStrengthCalculation({passphrase: passphrase})
+
+      // set the value of the text_input to the score
+      calcStrength.value = result.score
+
+      // conditional statment to show or hide progress_simple bar and caption if user has entered a password
+      if (passphrase) {
+        barVariant.style.display = 'block';
+
+        barPercent.style.display = 'block';
+
+        caption.style.display = 'block';
+      } else {
+        barVariant.style.display = 'none';
+
+        barPercent.style.display = 'none';
+
+        caption.style.display = 'none';
+      }
+
+      // set the width of the progress_simple kit
+      barPercent.style.width = result.percent.toString()+ "%"
+
+
+      // set the variant of the progress_simple kit
+      barVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");
+
+
+      // set the text of the caption kit
+      caption.textContent = result.label
+    });
+
+  })
+<% end %>