playbook_ui 11.12.1.pre.alpha.passphrase1 → 11.12.1

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.12.1.pre.alpha.passphrase1
+  version: 11.12.1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-11-28 00:00:00.000000000 Z
+date: 2022-11-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1458,20 +1458,16 @@ files:
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.md
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.md
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.jsx
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.md
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.md
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.html.erb
@@ -1482,6 +1478,9 @@ files:
 - app/pb_kits/playbook/pb_passphrase/passphrase.html.erb
 - app/pb_kits/playbook/pb_passphrase/passphrase.rb
 - app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx
+- app/pb_kits/playbook/pb_passphrase/passwordStrength.js
+- app/pb_kits/playbook/pb_passphrase/useHaveIBeenPwned.js
+- app/pb_kits/playbook/pb_passphrase/useZxcvbn.js
 - app/pb_kits/playbook/pb_person/_person.jsx
 - app/pb_kits/playbook/pb_person/_person.scss
 - app/pb_kits/playbook/pb_person/docs/_description.md
@@ -2352,9 +2351,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

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

@@ -1,136 +0,0 @@
-<%= 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.md

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

@@ -1,51 +0,0 @@
-<%= 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

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

@@ -1,123 +0,0 @@
-<%= 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 %>