playbook_ui 11.12.1.pre.alpha.charts1 → 11.12.1.pre.alpha.passphrase1

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}) %>

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

@@ -6,27 +6,13 @@ const PassphraseDefault = (props) => {
   const [input, setInput] = useState('')
   const handleChange = (e) => setInput(e.target.value)
 
-  const [confoInput, setConfoInput] = useState('')
-  const handleConfoChange = (e) => setConfoInput(e.target.value)
-
   return (
-    <>
-      <div>
-        <Passphrase
-            id="my-passphrase"
-            onChange={handleChange}
-            value={input}
-            {...props}
-        />
-        <Passphrase
-            confirmation
-            onChange={handleConfoChange}
-            value={confoInput}
-            {...props}
-        />
-        <span>{input === confoInput ? 'They match!' : 'They don\'t match!'}</span>
-      </div>
-    </>
+    <Passphrase
+        id="my-passphrase"
+        onChange={handleChange}
+        value={input}
+        {...props}
+    />
   )
 }
 

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

@@ -4,7 +4,7 @@
     id: "my-disabled-passphrase",
     name: "my-disabled-field",
   },
-  label: "Input props passed directly to input kit"
+  label: "Pass props directly to input kit"
 }) %>
 
 <%= pb_rails("passphrase", props: {
@@ -12,5 +12,5 @@
     id: "my-custome-id",
     name: "my-value-name",
   },
-  label: "Set name, id, etc for use in forms"
+  label: "Set name and ID for use in form libraries"
 }) %>

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

@@ -36,7 +36,7 @@ const PassphraseInputProps = (props) => {
             {...props}
         />
         <Passphrase
-            inputProps={{ name: 'my-value-name', id: 'my-value-id' }}
+            inputProps={{ name: 'my-value-name', id: 'my-value-id-2' }}
             label="Set name and ID for use in form libraries"
             onChange={handleChange}
             value={input}