Password Box
Subscribe to a paid plan to get instant access to this lesson.
26m08s  Download  Speed: 1x 1.25x 1.5x 2x

Password Box

Try it out yourself (editable code)


(ns student.password
  (:require [reagent.core :as reagent]
            [re-frame.core :as rf]))

(rf/reg-event-db
 :initialize
 (fn [_ _]
   {}))

(defn ui []
  [:div
   [:input {:type :password :value "my-password"}]])

(defonce _init (rf/dispatch-sync [:initialize]))
(reagent/render [ui] (js/document.getElementById "student-container"))

Here's my version (editable code)


(ns teacher.password
  (:require [reagent.core :as reagent]
            [re-frame.core :as rf]))

(rf/reg-event-db
 :initialize
 (fn [_ _]
   {}))

(def password-validations
  [["At least 12 characters."
    (fn [s]
      (>= (count s) 12))]
   ["At least 50% unique characters."
     (fn [s]
       (-> s
           set
           count
           (/ (count s))
           (>= 0.5)))
     ]])

(defn password-box [pw]
  (let [s (reagent/atom {:value pw})]
    (fn []
      (let [validations (for [[desc f] password-validations]
                          [desc (f (:value @s))])
            valid? (every? identity (map second validations))
            color (when (:dirty? @s) (if valid? "green" "red"))]
      [:form 
       [:label {:style {:color color}} "Password"]
      [:input {:type (if (:show? @s) :text :password)
               :style {:width "100%"
                       :border (str "1px solid " color)}
               :value (:value @s)
               :on-focus #(swap! s assoc :focus? true)
               :on-blur #(swap! s assoc :dirty? true)
               :on-change #(swap! s assoc
                                  :dirty?
                                  true
                                  :value
                                  (-> % .-target .-value))}]
       [:label [:input {:type :checkbox
                        :checked (:show? @s)
                        :on-change #(swap! s assoc
                                           :show?
                                           (-> % .-target .-checked))}]
        " Show password?"]
       (for [[desc valid?] validations]
         (when (:focus? @s)
           [:div
          {:style {:color (when (:dirty? @s) (if valid? "green" "red"))}}
          (when (:dirty? @s) (if valid? "✔ " "✘ ")) desc]))
       ] 
      ))))

(defn ui []
  [:div
   [password-box ""]])

(defonce _init (rf/dispatch-sync [:initialize]))
(reagent/render [ui] (js/document.getElementById "teacher-container"))

Next lesson: Sortable Table

We live code a reusable sortable table component in ClojureScript with re-frame. Read more.

Password Box