Liking cljdoc? Tell your friends :D

reagent-password-strength-bar

CircleCI

This a ClojureScript implementation of ng9-password-strength-bar.

Clojars Project

Run the example application locally

  • git clone https://github.com/rnadler/reagent-password-strength-bar.git
  • cd reagent-password-strength-bar
  • lein figwheel

Run the unit tests

  • Same as above, except for the last step do:
  • lein doo node test once

Using the Component

Add Component to your Application

  • Add namespace :require dependency:
[reagent-password-strength-bar.core :refer [password-strength-bar]]
(defn password-form
  "The password input element and strength bar"
  [password]
  (fn []
    [:div
     [:label "Password"]
     [input-element password]
     [password-strength-bar password
      {:bar-label "PW Strength:"
       :strength-labels ["(Yuk)" "(Aweful)" "(OK)" "(Above Average)" "(Marvolous!)"]
       :colors ["#DD2C00" "#FF6D00" "#FFD600" "#AEEA00" "#00C853"]
       :thresholds [90 75 45 25]
       :base-color "#BBB"
       :bar-width "325px" }
      ]]))

Component Parameters

[password-strength-bar password options]
  • The options map is optional and if exists, all options are also optional.

password (type: string)

  • The atom containing the password to check. This atom must be updated when the input string changes in order to trigger strength updates.

bar-label (type: string, optional)

  • The variable containing the label displayed to the left of the bar.

bar-colors (type: Array<string>, optional)

  • The variable can be used to define custom bar colors.
  • This must be an Array of 5 strings.
  • Lowest security level picks colors[0] ..., the highest picks colors[4].
  • If not specified, the default is: ["#F00" "#F90" "#FF0" "#9F0" "#0F0"]

base-color (type: string, optional)

  • The variable can be used to define the color of bars when no strength is applied (i.e. when there is no password text).
  • If not specified, the default is: "#DDD".
    For example:
:base-color "#BBB"

strength-labels (type: Array<string>, optional)

  • The variable can be used to define a strength label that will be appended to the colored bars.
  • This must be an Array of 5 strings.
    For example:
:strength-labels ["(Useless)" "(Weak)" "(Normal)" "(Strong)" "(Great!)"]

custom-thresholds (type: Array<number>, optional)

  • The variable can be used to define custom strength algorithm thresholds.
  • This must be an Array of 4 integers. See the source code for details on how these values are used.
  • If not specified, the default is: [90 70 40 20]

bar-width (type: string, optional)

  • The variable can be used to specify the width of the strength progress bar..
  • If not specified, the default is: "350px"

License

MIT

Can you improve this documentation?Edit on GitHub

cljdoc is a website building & hosting documentation for Clojure/Script libraries

× close