RubyGems - playbook_ui - Versions diffs - 9.3.0.alpha.inline3 → 9.3.0.pre.alpha.password.strength.1 - Mend

playbook_ui 9.3.0.alpha.inline3 → 9.3.0.pre.alpha.password.strength.1

Files changed (45) hide show

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

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { Body, Passphrase } from '../../'
+const PassphraseCommon = (props) => {
+  const [input, setInput] = useState('')
+  const handleChange = (e) => setInput(e.target.value)
+  const COMMON_PASSPHRASES = ['passphrase', 'apple', 'password', 'p@55w0rd']
+  const commonCheck = (passphrase) => {
+    if (COMMON_PASSPHRASES.includes(passphrase))
+      return true
+    return false
+  }
+  return (
+    <>
+      <div>
+        <Body text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(' ')}`} />
+        <br />
+        <Passphrase
+            common={commonCheck(input)}
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+export default PassphraseCommon

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

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

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

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import { Passphrase } from '../../'
+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
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            confirmation
+            onChange={handleConfoChange}
+            value={confoInput}
+            {...props}
+        />
+        <span>{input === confoInput ? 'They match!' : 'They don\'t match!'}</span>
+      </div>
+    </>
+  )
+}
+export default PassphraseDefault

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Use the `confirmation` prop to only include the label and show/hide icon.

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

@@ -0,0 +1,16 @@
+<%= pb_rails("passphrase", props: {
+  input_props: {
+    disabled: true,
+    id: "my-disabled-passphrase",
+    name: "my-disabled-field",
+  },
+  label: "Input props passed directly to input kit"
+}) %>
+<%= pb_rails("passphrase", props: {
+  input_props: {
+    id: "my-custome-id",
+    name: "my-value-name",
+  },
+  label: "Set name, id, etc for use in forms"
+}) %>

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

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import { Passphrase } from '../../'
+const PassphraseInputProps = (props) => {
+  const [input, setInput] = useState('')
+  const handleChange = (e) => setInput(e.target.value)
+  return (
+    <>
+      <div>
+        <Passphrase
+            inputProps={{
+              name: 'my-disabled-field',
+              id: 'my-value-id',
+              disabled: true,
+            }}
+            label="Pass props directly to input kit"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            inputProps={{
+              children: (
+                <input
+                    onChange={handleChange}
+                    type="password"
+                    value={input}
+                />),
+            }}
+            label="Custom input"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            inputProps={{ name: 'my-value-name', id: 'my-value-id' }}
+            label="Set name and ID for use in form libraries"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            confirmation
+            inputProps={{ name: 'my-value-confirmation-name', id: 'my-value-confirmation-id' }}
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+export default PassphraseInputProps

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ `inputProps` is passed directly to an underlying Text Input kit. See the specific docs <a href="/kits/text_input/react" target="_blank">here</a> for more details.

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb ADDED Viewed

@@ -0,0 +1,10 @@
+<%= pb_rails("passphrase", props: { label: "Default Settings"}) %>
+<%= pb_rails("passphrase", props: { label: "Min length = 5", min_length: 5}) %>
+<%= pb_rails("passphrase", props: { label: "Min length = 30", min_length: 30}) %>
+<%= pb_rails("passphrase", props: { average_threshold: 1, label: "Average Threshold = 1"}) %>
+<%= pb_rails("passphrase", props: { label: "Strong Threshold = 4", strong_threshold: 4}) %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx ADDED Viewed

@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import { Body, Passphrase, TextInput } from '../../'
+const PassphraseMeterSettings = (props) => {
+  const [input, setInput] = useState('')
+  const handleChange = (e) => setInput(e.target.value)
+  const [strength, setStrength] = useState(0)
+  const handleStrengthChange = (str) => setStrength(str)
+  return (
+    <>
+      <div>
+        <Body>
+          {'These examples will all share the same input value. Type in any of the inputs to see how the strength meter changes in response to different settings.'}
+        </Body>
+        <br />
+        <TextInput
+            disabled
+            label="Calculated Strength"
+            readOnly
+            value={strength}
+        />
+        <Passphrase
+            label="Default settings"
+            onChange={handleChange}
+            onStrengthChange={handleStrengthChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Min length = 5"
+            minLength={5}
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Min length = 30"
+            minLength={30}
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            averageThreshold={1}
+            label="Average threshold = 1"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Strong Threshold = 4"
+            onChange={handleChange}
+            strongThreshold={4}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+export default PassphraseMeterSettings

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md ADDED Viewed

@@ -0,0 +1,9 @@
+By default, the minimum length is 12 and the strength meter will show a strength of 1 if not met. Notice the bar won't change from red until the minimum is met
+Use the `minLength` prop to adjust.
+The meter also response to `averageThreshold` and `strongTreshold` props. `averageThresold` defaults to 2, and `strongThreshold` defaults to 3.
+This means that the bar will turn yellow when the strength of the passphrase is calculated to be 2 on a 0-4 scale, and green when 3.
+Adjust these props to tune the sensitivity of the bar.
+Note: minimum length trumps strength and will set the bar to a red color, despite whatever strength is calculated.

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx ADDED Viewed

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { Passphrase, TextInput } from '../../'
+const PassphraseStrengthChange = (props) => {
+  const [input, setInput] = useState('')
+  const handleChange = (e) => setInput(e.target.value)
+  const [strength, setStrength] = useState(0)
+  const handleStrengthChange = (str) => setStrength(str)
+  return (
+    <>
+      <div>
+        <Passphrase
+            label="Passphrase"
+            onChange={handleChange}
+            onStrengthChange={handleStrengthChange}
+            value={input}
+            {...props}
+        />
+        <TextInput
+            disabled
+            label="Passphrase Strength"
+            readOnly
+            value={strength}
+        />
+      </div>
+    </>
+  )
+}
+export default PassphraseStrengthChange

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md ADDED Viewed

@@ -0,0 +1,3 @@
+As the strength of the entered passphrase changes, the optional `onStrengthChange` callback is called with the new strength value. This exposes the calculated strength.
+Strength is calculated on a 0-4 scale by the <a href="https://github.com/dropbox/zxcvbn" target="_blank"> Zxcvbn package</a>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.html.erb ADDED Viewed

@@ -0,0 +1,26 @@
+<%= pb_rails("passphrase", props: {
+  label: "Pass an array of strings to the tips prop",
+  tips: ['And the info icon will appear.', 'Each string will be displayed as its own tip'],
+}) %>
+<%= pb_rails("passphrase", props: {
+  label: "Omit the prop to hide the icon"
+}) %>
+<%= pb_rails("passphrase", props: {
+  label: "Only show tips at small screen size",
+  show_tips_below: "sm",
+  tips: ['Make the password longer', 'Type more things', 'Use something else'],
+}) %>
+<%= pb_rails("passphrase", props: {
+  label: "Only show tips at medium screen size",
+  show_tips_below: "md",
+  tips: ['Make the password longer', 'Type more things', 'Use something else'],
+}) %>
+<%= pb_rails("passphrase", props: {
+  label: "Only show tips at large screen size",
+  show_tips_below: "lg",
+  tips: ['Make the password longer', 'Type more things', 'Use something else'],
+}) %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.jsx ADDED Viewed

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import { Passphrase } from '../../'
+const PassphraseTips = (props) => {
+  const [input, setInput] = useState('')
+  const handleChange = (e) => setInput(e.target.value)
+  return (
+    <>
+      <div>
+        <Passphrase
+            label="Pass an array of strings to the tips prop"
+            onChange={handleChange}
+            tips={['And the info icon will appear.', 'Each string will be displayed as its own tip']}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Omit the prop to hide the icon"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Only show tips at small screen size"
+            onChange={handleChange}
+            showTipsBelow="xs"
+            tips={['Make the password longer', 'Type more things', 'Use something else']}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Only show tips at medium screen size"
+            onChange={handleChange}
+            showTipsBelow="md"
+            tips={['Make the password longer', 'Type more things', 'Use something else']}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Only show tips at large screen size"
+            onChange={handleChange}
+            showTipsBelow="lg"
+            tips={['Make the password longer', 'Type more things', 'Use something else']}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+export default PassphraseTips

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ `showTipsBelow`(react) / `show_tips_below`(rails) takes 'xs', 'sm', 'md', 'lg', 'xl' and only show the tips below the given screen size. Similar to the <a href="/kits/table/react" target="_blank">responsive table breakpoints.</a> Omit this prop to always show.

data/app/pb_kits/playbook/pb_passphrase/docs/example.yml ADDED Viewed

@@ -0,0 +1,15 @@
+examples:
+  rails:
+  - passphrase_default: Default
+  - passphrase_meter_settings: Meter Settings
+  - passphrase_input_props: Input Props
+  - passphrase_tips: Tips
+  react:
+  - passphrase_default: Default
+  - passphrase_meter_settings: Meter Settings
+  - passphrase_input_props: Input Props
+  - passphrase_tips: Tips
+  - passphrase_strength_change: Strength Change
+  - passphrase_common: Common Passphrases

data/app/pb_kits/playbook/pb_passphrase/docs/index.js ADDED Viewed

@@ -0,0 +1,6 @@
+export { default as PassphraseDefault } from './_passphrase_default.jsx'
+export { default as PassphraseMeterSettings } from './_passphrase_meter_settings'
+export { default as PassphraseInputProps } from './_passphrase_input_props'
+export { default as PassphraseTips } from './_passphrase_tips'
+export { default as PassphraseStrengthChange } from './_passphrase_strength_change'
+export { default as PassphraseCommon } from './_passphrase_common'

data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb ADDED Viewed

	@@ -0,0 +1 @@
1	+ <%= react_component('Passphrase', object.passphrase_options) %>

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb ADDED Viewed

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+module Playbook
+  module PbPassphrase
+    class Passphrase < Playbook::KitBase
+      prop :average_threshold
+      prop :confirmation, type: Playbook::Props::Boolean, default: false
+      prop :input_props, type: Playbook::Props::Hash, default: {}
+      prop :label
+      prop :min_length
+      prop :show_tips_below
+      prop :strong_threshold
+      prop :tips, type: Playbook::Props::Array, default: []
+      # prop :on_strength_change
+      # might not need these?
+      # prop :common
+      # prop :on_change
+      def classname
+        generate_classname("pb_passphrase")
+      end
+      def passphrase_options
+        {
+          dark: dark,
+          id: id,
+          averageThreshold: average_threshold,
+          confirmation: confirmation,
+          inputProps: input_props,
+          label: label,
+          minLength: min_length,
+          showTipsBelow: show_tips_below,
+          strongThreshold: strong_threshold,
+          tips: tips,
+          uncontrolled: true,
+        }.compact
+      end
+    end
+  end
+end