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

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -22,10 +22,15 @@ module Playbook
       prop :max, type: Playbook::Props::Numeric, default: 100
       prop :colors, type: Playbook::Props::Array, default: []
 
+      def chart_data_formatted
+        chart_data.map { |hash| hash[:y] = hash.delete :value }
+        chart_data
+      end
+
       def chart_options
         {
           id: id,
-          chartData: chart_data,
+          chartData: chart_data_formatted,
           circumference: full_circle ? [0, 360] : [-100, 100],
           dark: dark ? "dark" : "",
           disableAnimation: disable_animation,
@@ -38,9 +43,9 @@ module Playbook
           showLabels: show_labels,
           style: style,
           tooltipHtml: tooltip_html,
-          type: style,
+          type: "gauge",
           colors: colors,
-        }
+        }.to_json.html_safe
       end
 
       def classname

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -0,0 +1,113 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import { globalProps } from '../utilities/globalProps'
+import pbChart from '../plugins/pb_chart'
+
+type LineGraphProps = {
+  align?: "left" | "right" | "center",
+  axisTitle?: string,
+  dark?: Boolean,
+  xAxisCategories: array,
+  yAxisMin: number,
+  yAxisMax: number,
+  className?: string,
+  chartData: array<{
+      name: string,
+      data: array<number>,
+  }>,
+  gradient?: boolean,
+  id: string,
+  pointStart: number,
+  subTitle?: string,
+  title: string,
+  type?: string,
+  legend?: boolean,
+  toggleLegendClick?: boolean,
+  height?: string,
+  colors: array,
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
+  }
+
+export default class LineGraph extends React.Component<LineGraphProps> {
+  static defaultProps = {
+    align: "center",
+    className: 'pb_bar_graph',
+    dark: false,
+    gradient: false,
+    type: 'line',
+    legend: false,
+    toggleLegendClick: true,
+    layout: "horizontal",
+    verticalAlign: "bottom",
+    x: 0,
+    y: 0,
+  }
+
+  componentDidMount() {
+    const {
+      align,
+      axisTitle,
+      dark,
+      xAxisCategories,
+      yAxisMin,
+      yAxisMax,
+      className,
+      chartData,
+      id,
+      pointStart,
+      subTitle,
+      title,
+      type,
+      legend,
+      toggleLegendClick,
+      height,
+      colors = [],
+      layout,
+      verticalAlign,
+      x,
+      y,
+    } = this.props
+
+    new pbChart(`.${className}`, {
+      align,
+      axisTitle: axisTitle,
+      chartData: chartData,
+      colors: colors,
+      dark,
+      id: id,
+      pointStart: pointStart,
+      subtitle: subTitle,
+      type,
+      title: title,
+      xAxisCategories: xAxisCategories,
+      yAxisMin: yAxisMin,
+      yAxisMax: yAxisMax,
+      legend: legend,
+      toggleLegendClick: toggleLegendClick,
+      height: height,
+      layout,
+      verticalAlign,
+      x,
+      y,
+    })
+  }
+
+  props: LineGraphProps
+
+  render() {
+    const { className, id } = this.props
+
+    return (
+      <div
+          className={classnames(globalProps(this.props), className)}
+          id={id}
+      />
+    )
+  }
+}

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

@@ -1,14 +1,10 @@
 /* @flow */
-/* eslint-disable react-hooks/rules-of-hooks */
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import classnames from 'classnames'
+import React, { useCallback, useMemo, useState } from "react"
+import classnames from "classnames"
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import useZxcvbn from './useZxcvbn'
-import useHaveIBeenPwned from './useHaveIBeenPwned'
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
+import { globalProps } from "../utilities/globalProps"
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -16,14 +12,10 @@ 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,
@@ -31,11 +23,8 @@ type PassphraseProps = {
   id?: string,
   inputProps?: {},
   label?: string,
-  minLength?: number,
   onChange: (String) => void,
-  showTipsBelow?: 'always' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  onStrengthChange?: (number) => void,
-  strongThreshold?: number,
+  showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
   tips?: Array<string>,
   uncontrolled?: boolean,
   value: string,
@@ -44,71 +33,56 @@ type PassphraseProps = {
 const Passphrase = (props: PassphraseProps) => {
   const {
     aria = {},
-    averageThreshold = 2,
-    checkPwned = false,
     className,
-    common = false,
     confirmation = false,
-    dark = false,
     data = {},
+    dark = false,
     id,
     inputProps = {},
-    label = confirmation ? 'Confirm Passphrase' : 'Passphrase',
-    minLength = 12,
+    label = confirmation ? "Confirm Passphrase" : "Passphrase",
     onChange = () => {},
-    showTipsBelow = 'always',
-    onStrengthChange,
-    strongThreshold = 3,
+    showTipsBelow = "always",
     tips = [],
     uncontrolled = false,
-    value = '',
+    value = "",
   } = props
-  const ariaProps = buildAriaProps(aria)
 
-  const [uncontrolledValue, setUncontrolledValue] = useState('')
+  const [uncontrolledValue, setUncontrolledValue] = useState("")
+  const [showPopover, setShowPopover] = useState(false)
+  const [showPassphrase, setShowPassphrase] = useState(false)
 
   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 dataProps = useMemo(
-    () => (buildDataProps(Object.assign({}, data, { strength }))),
-    [data, strength]
+
+  const ariaProps = buildAriaProps(aria)
+  const classes = classnames(
+    buildCss("pb_passphrase"),
+    globalProps(props),
+    className
   )
+  const dataProps = buildDataProps(data)
 
   const popoverReference = (
     <CircleIconButton
@@ -121,17 +95,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
@@ -142,30 +116,28 @@ 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>
@@ -178,23 +150,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}
             >
@@ -203,21 +175,8 @@ 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 +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>
     </>
   )