signup.clj

(defn fake-signup-view []
  (let [debug?           (subscribe [:debug?])
        loading?         (subscribe [:loading?])
        email-taken?     (subscribe [:email-taken?])
        signup-form-data (subscribe [:signup-form])
        email            (reaction (:email      @signup-form-data))
        first-name       (reaction (:first-name @signup-form-data))
        last-name        (reaction (:last-name  @signup-form-data))
        password         (reaction (:password   @signup-form-data))]
    (fn []
      [:div#signup-grid.ui.middle.aligned.center.aligned.grid
       [:div.column {:style {:max-width "450px"
                             :margin "50px 10px 0 10px"}}
        [:h2.ui.violet.image.header
         [:i.massive.icons
          [:i.violet.cloud.download.icon]
          [:i.inverted.corner.mobile.icon]]
         [:div.content "Signup for -=REDACTED=-"]]
        [:div#signup-form {:class (str "ui large form" (when @loading? " loading"))
                           :on-submit (fn [e] (.preventDefault e))}
         [:div.ui.segment
          [:div.field
           [:div.ui.left.icon.input
            [:i.mail.icon]
            [:input {:type "text"
                     :name "email"
                     :placeholder "Email"
                     :value @email
                     :on-key-press (fn [e]
                                     (let [enter 13]
                                       (if (= enter (.-charCode e))
                                         (when (validate @signup-form-data)
                                           (dispatch [:signup-request]))))
                                     true)
                     :on-change (fn [e]
                                  (dispatch [:update-signup-form :email
                                             (-> e .-target .-value)])
                                  (dispatch [:check-email-taken
                                             (-> e .-target .-value)])
                                  true)}]]]
          [:div.field
           [:div.ui.left.icon.input
            [:i.user.icon]
            [:input {:type "text"
                     :name "first-name"
                     :placeholder "First Name"
                     :value @first-name
                     :on-key-press (fn [e]
                                     (let [enter 13]
                                       (if (= enter (.-charCode e))
                                         (when (validate @signup-form-data)
                                           (dispatch [:signup-request]))))
                                     true)
                     :on-change (fn [e]
                                  (dispatch [:update-signup-form
                                             :first-name
                                             (-> e .-target .-value)])
                                  true)}]]]
          [:div.field
           [:div.ui.left.icon.input
            [:i.user.icon]
            [:input {:type "text"
                     :name "last-name"
                     :placeholder "Last Name"
                     :value @last-name
                     :on-key-press (fn [e]
                                     (let [enter 13]
                                       (if (= enter (.-charCode e))
                                         (when (validate @signup-form-data)
                                           (dispatch [:signup-request]))))
                                     true)
                     :on-change (fn [e]
                                  (dispatch [:update-signup-form :last-name
                                             (-> e .-target .-value)])
                                  true)}]]]
          [:div.field
           [:div.ui.left.icon.input
            [:i.lock.icon]
            [:input {:type "password"
                     :name "password"
                     :placeholder "Password"
                     :value @password
                     :on-key-press (fn [e]
                                     (let [enter 13]
                                       (if (= enter (.-charCode e))
                                         (when (validate @signup-form-data)
                                           (dispatch [:signup-request]))))
                                     true)
                     :on-change (fn [e]
                                  (dispatch [:update-signup-form :password
                                             (-> e .-target .-value)])
                                  true)}]]]
          [:button {:class (str "ui button fluid large violet")
                    :on-click #(when (validate @signup-form-data)
                                 (dispatch [:signup-request]))}
           "Submit"]]
         [:div.ui.error.message]
         [:div.ui.message "Got an account? "
          [:a {:style {:cursor :pointer}
               :on-click #(route/update-url "#/login")} "Login"]]

         ;; email exists modal:
         (when @email-taken?
           [:div.ui.active.modal
            [:div.header "Oops, looks like there's a user with that email."]
            [:div.image.content
             [:div.image [:i.user.icon]]
             [:div.description
              [:h2.ui.centered.header "Is it you?"]]]
            [:div.actions
             [:div.ui.red.inverted.button
              {:on-click (fn [] ;;clear email field
                           (dispatch [:update-signup-form :email ""])
                           (dispatch [:clear-email-taken ""]))}
              [:i.remove.icon]
              "Nope, I'll try again."]
             [:div.ui.green.inverted.button
              {:on-click (fn []
                           (route/update-url "#/login")
                           (dispatch [:clear-email-taken ""]))}
              [:i.checkmark.icon]
              "Yep that's me, login!"]]])]
        (when @debug?
          [:div
           [:code "debug on. "]
           [:div.ui.button
            {:on-click (fn []
                         (let [rando (rand-int 100000)]
                           (dispatch [:update-signup-form :first-name
                                      (str "fdoodely" rando)])
                           (dispatch [:update-signup-form :last-name
                                      (str "ldoodely" rando)])
                           (dispatch [:update-signup-form :email
                                      (str "edoodely@doo.doo" rando)])
                           (dispatch [:update-signup-form :password
                                      (str "edoodely@doo.doo" rando)])))}
            "Fast Form Fill"]
           [:pre [:code (pr-str @@(subscribe [:db]))]]])]])))