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

playbook_ui 9.3.0.pre.alpha.password.strength.1 → 9.4.0.pre.alpha2

Files changed (48) hide show

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

@@ -1,33 +0,0 @@
-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 DELETED Viewed

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

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

@@ -1,31 +0,0 @@
-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 DELETED Viewed

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

@@ -1,16 +0,0 @@
-<%= 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 DELETED Viewed

@@ -1,56 +0,0 @@
-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 DELETED Viewed

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

@@ -1,10 +0,0 @@
-<%= 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 DELETED Viewed

@@ -1,68 +0,0 @@
-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 DELETED Viewed

@@ -1,9 +0,0 @@
-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 DELETED Viewed

@@ -1,33 +0,0 @@
-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 DELETED Viewed

@@ -1,3 +0,0 @@
-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 DELETED Viewed

@@ -1,26 +0,0 @@
-<%= 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 DELETED Viewed

@@ -1,54 +0,0 @@
-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 DELETED Viewed

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

@@ -1,15 +0,0 @@
-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 DELETED Viewed

@@ -1,6 +0,0 @@
-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 DELETED Viewed

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

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

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