playbook_ui 11.13.0 → 11.15.0.pre.alpha.table1

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

@@ -1 +1,145 @@
-<%= pb_rails("passphrase", props: { check_pwned: true }) %>
+<%= pb_rails("passphrase", props: { label: "Passphrase", classname: "passphrase_breached" }) %>
+
+<%= pb_rails("progress_simple", props: { percent: 0, id: "bar_breached" }) %>
+
+<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
+
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
+
+    // variables for the kits you are targeting 
+    const passphrase = document.querySelector(".passphrase_breached").querySelector("input")
+    const barVariant = document.getElementById("bar_breached")
+    const barPercent = document.getElementById("bar_breached").querySelector("div")
+    const caption = document.getElementById("caption_breached")
+
+    // 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;
+
+      let pwndMatch = false
+
+      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()
+    
+        if (passphrase.length < 5) {
+          pwndMatch = false
+        }
+        else {
+          pwndMatch = text.split('\n').some((line) => {
+          return line.split(':')[0] === endOfHash.toUpperCase()
+          })
+        }
+
+        // pass in passphrase and isPwnd match to the handleStrengthCalculation and set that equal to result variable
+        const result = handleStrengthCalculation({ passphrase: passphrase, isPwned: pwndMatch });
+
+
+        // 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
+      }
+
+      checkHaveIBeenPwned(passphrase)
+
+
+    });
+
+  })
+<% end %>

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

@@ -1,22 +1,146 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 
-import Passphrase from '../_passphrase'
+import { Caption, Passphrase, ProgressSimple } from '../..'
+import zxcvbn from 'zxcvbn'
 
 const PassphraseBreached = (props) => {
   const [input, setInput] = useState('')
+  const [isPwned, setIsPwned] = useState(false)
+  const [checkStrength, setCheckStrength] = useState({
+    label: '',
+    percent: 0,
+    score: 0,
+    variant: ''
+  })
+
 
   const handleChange = (e) => setInput(e.target.value)
 
+  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
+  }
+
+  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 delay = 400
+      const result = handleStrengthCalculation({ passphrase: input, isPwned: isPwned });
+    
+      setCheckStrength({ ...result })
+
+      // only check the API for passphrases above the minimum size
+      if (input.length < 5) {
+        setIsPwned(false)
+        return
+      }
+
+      const handler = setTimeout(() => {
+        checkHaveIBeenPwned(input)
+          .then((pwned) => setIsPwned(pwned))
+          .catch(() => setIsPwned(false))
+      }, delay)
+
+      return () => {
+        clearTimeout(handler)
+      }
+    },
+    [input, isPwned]
+  )
+
   return (
     <>
       <div>
         <br />
         <Passphrase
-            checkPwned
             onChange={handleChange}
             value={input}
             {...props}
         />
+        {checkStrength.percent > 0 ? 
+          <>
+            <ProgressSimple
+                className={input.length === 0 ? "progress-empty-input" : null}
+                percent={checkStrength.percent}
+                variant={checkStrength.variant}
+            />
+            <Caption size='xs'
+                text={checkStrength.label} 
+            />
+          </>
+        : null}
       </div>
     </>
   )

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

@@ -1,3 +1,12 @@
-Use `checkPwned | checked_pwned` prop to enable checking against <a href='https://haveibeenpwned.com/Passwords'>HaveIBeenPwned's</a> API. As the passphrase is typed, it is checked against more than half a billion breached passwords, to help ensure its not compromised.
+Use <a href='https://haveibeenpwned.com/Passwords'>HaveIBeenPwned's</a> API to check for breached passwords.
+
+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.
+
+This uses their k-Anonymity model, so only the first 5 characters of a hashed copy of the passphrase are sent.
+
+<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 and `haveibeenpwned` API. 
+
+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_common.html.erb

@@ -0,0 +1,136 @@
+<%= pb_rails("body", props: {
+  margin_bottom: "md",
+  id: "body_common"
+}) %>
+
+<%= pb_rails("passphrase", props: { label: "Passphrase", classname: "passphrase_common" }) %>
+
+<%= pb_rails("progress_simple", props: { percent: 0, id: "bar_common" }) %>
+
+<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
+
+
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
+
+    const commonText = document.querySelector("#body_common")
+
+    // variables for the kits you are targeting 
+    const passphrase = document.querySelector(".passphrase_common").querySelector("input")
+    const barVariant = document.getElementById("bar_common")
+    const barPercent = document.getElementById("bar_common").querySelector("div")
+    const caption = document.getElementById("caption_common")
+
+    // 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}
+      }
+    }
+
+    // array that holds the common passwords you wish to target
+    const COMMON_PASSPHRASES = ['passphrase', 'apple', 'password', 'p@55w0rd']
+
+    commonText.textContent = `Try typing any of the following: ${COMMON_PASSPHRASES.join(', ')}`
+
+    // function that checks if the user password is in the common password list
+    const isCommon = (passphrase) => {
+      if (COMMON_PASSPHRASES.includes(passphrase))
+        return true
+      return false
+    }
+
+    // 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, common: isCommon(passphrase) })
+
+      // 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 %>

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

@@ -1,32 +1,114 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 
-import Passphrase from '../_passphrase'
-import Body from '../../pb_body/_body'
+import {Body, Caption, Passphrase, ProgressSimple} from '../..'
+import zxcvbn from 'zxcvbn'
 
 const PassphraseCommon = (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}
+    }
+  }
+
   const COMMON_PASSPHRASES = ['passphrase', 'apple', 'password', 'p@55w0rd']
 
-  const commonCheck = (passphrase) => {
+  const isCommon = (passphrase) => {
     if (COMMON_PASSPHRASES.includes(passphrase))
       return true
     return false
   }
 
+  useEffect(() => {
+    const result = handleStrengthCalculation({ passphrase: input, common: isCommon(input) });
+    setCheckStrength({ ...result })
+  }, [input])
+
+
   return (
     <>
       <div>
-        <Body text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(' ')}`} />
-        <br />
+        <Body 
+            marginBottom='md'
+            text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(', ')}`} />
         <Passphrase
-            common={commonCheck(input)}
             onChange={handleChange}
             value={input}
             {...props}
         />
+        {input.length > 0 && (
+          <>
+            <ProgressSimple
+                className={input.length === 0 ? "progress-empty-input" : null}
+                percent={checkStrength.percent}
+                variant={checkStrength.variant}
+            />
+            <Caption size='xs'
+                text={checkStrength.label} 
+            />
+          </>
+        )}
       </div>
     </>
   )

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

@@ -0,0 +1,5 @@
+<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_confirmation.html.erb

@@ -0,0 +1,51 @@
+<%= pb_rails("passphrase", props: { classname: "pass_input_1" }) %>
+
+<%= pb_rails("passphrase", props: { confirmation: true, classname: "pass_input_2"}) %>
+
+<div id="match"> </div>
+
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {   
+
+      const useState = (defaultValue) => {
+          let value = defaultValue;
+          const getValue = () => value
+          const setValue = (newValue) => {
+              return value = newValue
+          }
+          return [getValue, setValue];
+      }
+
+      const [input, setInput] = useState('')
+      const [confirmationInput, setConfirmationInput] = useState('')
+
+      const match = document.querySelector("#match")
+
+      const input1 = document.querySelector(".pass_input_1").querySelector("input")
+      const input2 = document.querySelector(".pass_input_2").querySelector("input")
+
+      input1.addEventListener('input', (e) => {
+          setInput(e.target.value)
+          setMatchText()
+      });
+
+      input2.addEventListener('input', (e) => {
+          setConfirmationInput(e.target.value)
+          setMatchText()
+      });
+
+      const setMatchText = () => {
+
+        if (input() && confirmationInput()) {
+          if (input() === confirmationInput()) {
+              match.textContent = "They match!"
+          } else {
+              match.textContent = "They don't match!"
+          }
+        } else {
+          match.textContent = ""
+        }
+
+      }
+    })
+<% end %>

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

@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+
+import {Body, Passphrase} from '../..'
+
+const PassphraseConfirmation = (props) => {
+  const [input, setInput] = useState('')
+  const [confirmationInput, setConfirmationInput] = useState('')
+  
+  const handleChange = (e) => setInput(e.target.value)
+  const handleConfirmationChange = (e) => setConfirmationInput(e.target.value)    
+  
+  return (
+    <>
+      <div>
+        <Passphrase
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            confirmation
+            onChange={handleConfirmationChange}
+            value={confirmationInput}
+            {...props}
+        />
+        {input && confirmationInput && (
+          <Body
+              text={
+                input === confirmationInput ? "They match!" : "They don't match!"
+              }
+              {...props}
+          />
+        )}
+      </div>
+    </>
+  );
+}
+
+export default PassphraseConfirmation

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

@@ -1,3 +1 @@
 <%= pb_rails("passphrase") %>
-
-<%= pb_rails("passphrase", props: { confirmation: true}) %>