Update to layout

3 files changed, 46 insertions, 10 deletions

diff --git a/src/genpass/components/button.cljc b/src/genpass/components/button.cljc
new file mode 100644
index 0000000..b226cac
--- /dev/null
+++ b/src/genpass/components/button.cljc
@@ -0,0 +1,13 @@
+(ns genpass.components.button)
+
+(defn button-primary [label fn]
+  [:input.button.is-primary
+   {:value    label
+    :type     "button"
+    :on-click fn}])
+
+(defn button-success [label  fn]
+  [:input.button.is-primary.is-success
+   {:value    label
+    :type     "button"
+    :on-click fn}])
diff --git a/src/genpass/components/input.cljc b/src/genpass/components/input.cljc
new file mode 100644
index 0000000..097d7aa
--- /dev/null
+++ b/src/genpass/components/input.cljc
@@ -0,0 +1,6 @@
+(ns genpass.components.input)
+
+(defn input-primary [text]
+  [:input.input.is-primary
+   {:type "text"
+    :value text}])
\ No newline at end of file
diff --git a/src/genpass/core.cljs b/src/genpass/core.cljs
index 6ae0f4a..adafa2d 100644
--- a/src/genpass/core.cljs
+++ b/src/genpass/core.cljs
@@ -1,23 +1,40 @@
 (ns genpass.core
   (:require
     [reagent.core :as r]
+    [genpass.components.input :refer [input-primary]]
+    [genpass.components.button :refer [button-primary button-success]]
     [genpass.gen :refer [genpwd]]))
 
-(def password (r/atom (genpwd)))
+(def size (r/atom 12))
+(def password (r/atom (genpwd @size)))
+
+(defn update-pwd [arg]
+  (reset! size arg)
+  (reset! password (genpwd @size)))
 
 (defn main-section []
   [:div
+   [:div.field>div.control
+    (input-primary @password)]
    [:div.field>div.control>input.input.is-primary
-    {:type  "text"
-     :value @password}]
+    {:type      "number"
+     :value     @size
+     :on-change #(update-pwd (-> % .-target .-value))}]
+   [:div.field.is-narrow
+    [:div.control
+     [:label.checkbox
+      [:input {:type "checkbox"}] "Has Letters"]]
+    [:div.control
+     [:label.checkbox
+      [:input {:type "checkbox"}] "Has Numbers"]]
+    [:div.control
+     [:label.checkbox
+      [:input {:type "checkbox"}] "Has Symbols"]]]
    [:div.field.is-grouped
-    [:div.control>input.button.is-primary
-     {:value    "Generate"
-      :type     "button"
-      :on-click #(reset! password (genpwd))}]
-    [:div.control>input.button.is-primary.is-success
-     {:value    "Copy"
-      :type     "button"}]]])
+    [:div.control
+     (button-primary "Generate" #(update-pwd @size))]
+    [:div.control
+     (button-success "Copy" #(update-pwd @size))]]])
 
 (defn home-page []
   [:div