login.cljs

(ns piirtely.views.login
  (:require
   [reagent.core :as reagent]
   [re-frame.core :as re-frame]
   [piirtely.styles :as styles]
   [piirtely.events :as events]
   [piirtely.routes :as routes]
   [piirtely.subs :as subs]))

(defn input [{:keys [type value-atom placeholder]}]
  [:div
   [:input {:class (styles/input)
            :type type
            :value @value-atom
            :onChange #(reset! value-atom (-> % .-target .-value))
            :placeholder placeholder}]])

(defn login-button-click [name password]
  (println "Login" @name @password))

(defn register-button-click [name password]
  (println "Register" @name @password))

(defn can-try-register?
  "Is it possible to click the register button?
  TODO: sensible lengths"
  [name password]
  (and
   (>= 3 (count name))
   (>= 3 (count password))))

(defn input-button
  [{:keys [value onClick disabled]}]
  [:div
   [:input {:class (styles/input-button)
            :disabled disabled
            :type "button"
            :value value
            :onClick onClick}]])

(defn login-panel []
  (let [name (reagent/atom "")
        password (reagent/atom "")]
    [:div
     [:h2 "Login to save your pictures!"]
     [input {:type "text" :value-atom name :placeholder "Username"}]
     [input {:type "password" :value-atom password :placeholder "Password"}]
     [input-button {:value "Login"
                    :onClick #(login-button-click name password)}]
     [input-button {:value "Register"
                    ; if I uncomment the following line, I can't change the text inputs anymore
                    ;:disabled (can-try-register? @name @password)
                    :onClick #(register-button-click name password)}]]))
(defmethod routes/panels :login [] [login-panel])