playbook_ui 11.12.1.pre.alpha.passphrase1 → 11.12.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6a2d4fa765df74ba9a5c6abd8ec9bd670371bb4b752bbdec10225d4d35d66293
-  data.tar.gz: ce21ba1dc523fc7875b39a604a0b63f7c54b5f62cd27297a2209f3cfa1b42dc2
+  metadata.gz: 3257a43d2c224d202dcfa36f64ae30921ed80d752b8db6927059ebbe7032d6e6
+  data.tar.gz: 573bb60fedf4fc904f3832026d46ac23ee22dc965792801565c9006449dbdcc7
 SHA512:
-  metadata.gz: dace3a848d70cbc4cc6e854aa8bd0c687c8acc6485f37235daabbd18acab8b6393e8e4e2a4c021deb64811303c60364ac8fb43e00201bdd9f0e3f1c59f205d5c
-  data.tar.gz: 7fb618f8c14835809a4b2d02d0afac8476048a5c2209e846466999263a68021ec0ba069ad40bab7b8d7ff72c21952c37d4bc1a887c5e6e93e11214298ae93e7d
+  metadata.gz: 38e8c49e2e18ae015912af7ac41da7c6a9fc57b7e201f4ca55c9edb2ea93d0114c917963c98f67972aa4cf50dda11cb4ec40f494e4da260403d63fa9e5920e4a
+  data.tar.gz: 9421ac89e00399825a91ed280324cd1b1a4a43aa8310b88c2143f21724d818c26aeca9af36e82cc9cf55e2e254a059d03d6c356364228631e82a4b8589d0a35e

data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx

@@ -1,10 +1,14 @@
 /* @flow */
+/* eslint-disable react-hooks/rules-of-hooks */
 
-import React, { useCallback, useMemo, useState } from "react"
-import classnames from "classnames"
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
-import { globalProps } from "../utilities/globalProps"
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import useZxcvbn from './useZxcvbn'
+import useHaveIBeenPwned from './useHaveIBeenPwned'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -12,10 +16,14 @@ import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
 import Flex from '../pb_flex/_flex'
 import Icon from '../pb_icon/_icon'
 import PbReactPopover from '../pb_popover/_popover'
+import ProgressSimple from '../pb_progress_simple/_progress_simple'
 import TextInput from '../pb_text_input/_text_input'
 
 type PassphraseProps = {
   aria?: object,
+  averageThreshold?: number,
+  checkPwned?: boolean,
+  common?: boolean,
   confirmation?: boolean,
   className?: string,
   data?: object,
@@ -23,8 +31,11 @@ type PassphraseProps = {
   id?: string,
   inputProps?: {},
   label?: string,
+  minLength?: number,
   onChange: (String) => void,
-  showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
+  showTipsBelow?: 'always' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  onStrengthChange?: (number) => void,
+  strongThreshold?: number,
   tips?: Array<string>,
   uncontrolled?: boolean,
   value: string,
@@ -33,56 +44,71 @@ type PassphraseProps = {
 const Passphrase = (props: PassphraseProps) => {
   const {
     aria = {},
+    averageThreshold = 2,
+    checkPwned = false,
     className,
+    common = false,
     confirmation = false,
-    data = {},
     dark = false,
+    data = {},
     id,
     inputProps = {},
-    label = confirmation ? "Confirm Passphrase" : "Passphrase",
+    label = confirmation ? 'Confirm Passphrase' : 'Passphrase',
+    minLength = 12,
     onChange = () => {},
-    showTipsBelow = "always",
+    showTipsBelow = 'always',
+    onStrengthChange,
+    strongThreshold = 3,
     tips = [],
     uncontrolled = false,
-    value = "",
+    value = '',
   } = props
+  const ariaProps = buildAriaProps(aria)
 
-  const [uncontrolledValue, setUncontrolledValue] = useState("")
-  const [showPopover, setShowPopover] = useState(false)
-  const [showPassphrase, setShowPassphrase] = useState(false)
+  const [uncontrolledValue, setUncontrolledValue] = useState('')
 
   const handleChange = useCallback(
-    (e) => (uncontrolled ? setUncontrolledValue(e.target.value) : onChange(e)),
+    (e) => uncontrolled ? setUncontrolledValue(e.target.value) :  onChange(e),
     [uncontrolled, onChange]
   )
 
   const displayValue = useMemo(
     () => (uncontrolled ? uncontrolledValue : value),
-    [value, uncontrolledValue, uncontrolled]
+    [value, uncontrolledValue, uncontrolled],
   )
 
+  const [showPopover, setShowPopover] = useState(false)
   const toggleShowPopover = () => setShowPopover(!showPopover)
   const handleShouldClosePopover = (shouldClosePopover) => {
     setShowPopover(!shouldClosePopover)
   }
 
+  const [showPassphrase, setShowPassphrase] = useState(false)
   const toggleShowPassphrase = (e) => {
     e.preventDefault()
     setShowPassphrase(!showPassphrase)
   }
 
+  const classes = classnames(buildCss('pb_passphrase'), globalProps(props), className)
+
+  const isPwned = checkPwned ? useHaveIBeenPwned(displayValue, minLength) : false
+
+  const { percent: progressPercent, variant: progressVariant, text: strengthLabel, strength } = useZxcvbn({ passphrase: displayValue, common, isPwned, confirmation, averageThreshold, minLength, strongThreshold })
+
+  useEffect(() => {
+    if (typeof onStrengthChange === 'function') {
+      onStrengthChange(strength)
+    }
+  }, [strength])
+
   const tipClass = classnames(
-    "passphrase-popover",
-    showTipsBelow === "always" ? null : `show-below-${showTipsBelow}`
+    'passphrase-popover',
+    (showTipsBelow === 'always' ? null : `show-below-${showTipsBelow}`),
   )
-
-  const ariaProps = buildAriaProps(aria)
-  const classes = classnames(
-    buildCss("pb_passphrase"),
-    globalProps(props),
-    className
+  const dataProps = useMemo(
+    () => (buildDataProps(Object.assign({}, data, { strength }))),
+    [data, strength]
   )
-  const dataProps = buildDataProps(data)
 
   const popoverReference = (
     <CircleIconButton
@@ -95,17 +121,17 @@ const Passphrase = (props: PassphraseProps) => {
   )
 
   return (
-    <div 
-        {...ariaProps} 
-        {...dataProps} 
-        className={classes} 
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
         id={id}
     >
       <label>
         <Flex align="baseline">
-          <Caption 
-              className="passphrase-label" 
-              text={label} 
+          <Caption
+              className="passphrase-label"
+              text={label}
           />
           <If condition={tips.length > 0 && !confirmation}>
             <PbReactPopover
@@ -116,28 +142,30 @@ const Passphrase = (props: PassphraseProps) => {
                 shouldClosePopover={handleShouldClosePopover}
                 show={showPopover}
             >
-              <Flex 
-                  align="center" 
+              <Flex
+                  align="center"
                   orientation="column"
               >
-                <Caption 
-                    marginBottom="xs" 
-                    text="Tips for a good passphrase" 
+                <Caption
+                    marginBottom="xs"
+                    text="Tips for a good passphrase"
                 />
                 <div>
-                  {tips.map((tip, i) => (
-                    <Caption 
-                        key={i} 
-                        marginBottom="xs" 
-                        size="xs"
-                    >
-                      <Icon 
-                          icon="shield-check" 
-                          marginRight="xs" 
-                      />
-                      {tip}
-                    </Caption>
-                  ))}
+                  {
+                    tips.map((tip, i) => (
+                      <Caption
+                          key={i}
+                          marginBottom="xs"
+                          size="xs"
+                      >
+                        <Icon
+                            icon="shield-check"
+                            marginRight="xs"
+                        />
+                        {tip}
+                      </Caption>
+                    ))
+                  }
                 </div>
               </Flex>
             </PbReactPopover>
@@ -150,23 +178,23 @@ const Passphrase = (props: PassphraseProps) => {
               marginBottom="xs"
               onChange={handleChange}
               placeholder="Enter a passphrase..."
-              type={showPassphrase ? "text" : "password"}
+              type={showPassphrase ? 'text' : 'password'}
               value={displayValue}
               {...inputProps}
           />
-          <span 
-              className="show-passphrase-icon" 
+          <span
+              className="show-passphrase-icon"
               onClick={toggleShowPassphrase}
           >
             <Body
-                className={showPassphrase ? "hide-icon" : ""}
+                className={showPassphrase ? 'hide-icon' : ''}
                 color="light"
                 dark={dark}
             >
               <Icon icon="eye-slash" />
             </Body>
             <Body
-                className={showPassphrase ? "" : "hide-icon"}
+                className={showPassphrase ? '' : 'hide-icon'}
                 color="light"
                 dark={dark}
             >
@@ -175,8 +203,21 @@ const Passphrase = (props: PassphraseProps) => {
           </span>
         </div>
       </label>
+      <If condition={!confirmation}>
+        <ProgressSimple
+            className={displayValue.length === 0 ? 'progress-empty-input' : null}
+            dark={dark}
+            percent={progressPercent}
+            variant={progressVariant}
+        />
+        <Caption
+            dark={dark}
+            size="xs"
+            text={strengthLabel}
+        />
+      </If>
     </div>
-  );
-};
+  )
+}
 
-export default Passphrase;
+export default Passphrase

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

@@ -1,145 +1 @@
-<%= 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 %>
+<%= pb_rails("passphrase", props: { check_pwned: true }) %>

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

@@ -1,146 +1,22 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 
-import { Caption, Passphrase, ProgressSimple } from '../..'
-import zxcvbn from 'zxcvbn'
+import Passphrase from '../_passphrase'
 
 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,12 +1,3 @@
-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.
+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.
 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.
-
-<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.
+This uses their k-Anonymity model, so only the first 5 characters of a hashed copy of the passphrase are sent.