render-fn.clj

(defn render-sign-up-page [anti-forgery-token validation-errors]
  (str
    (html
      [:html {:lang "en"}
        [:head {:lang "en"}
          [:title "ELogic | Sign Up"]
          [:meta {:charset "utf-8"}]
          [:meta {:name "viewport" :content "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"}]]
          [:link {:rel "stylesheet" :type "text/css" :href "https://unpkg.com/@blueprintjs/icons@^3.4.0/lib/css/blueprint-icons.css"}]
          [:link {:rel "stylesheet" :type "text/css" :href "https://unpkg.com/@blueprintjs/core@3.11.0/lib/css/blueprint.css"}]
          [:style {:type "text/css"}
            (css [:body {:background "url(/assets/paper-bg.png) rgb(255, 255, 252)"}]
                [:.wrapper {:width "400px" :margin "0 auto" :padding-top "30px"}]
                [:h1 {:font-weight "500"}]
                [:input :.bp3-select {:width "100%"}])]
        [:body
          [:div.wrapper
            [:h1 [:span {:style "transform: scale(-1, 1); display: inline-block"} "E"] "Logic | Sign up"]
            [:p "If you already have an account, " [:a {:href "/sign-in"} "click here"] " to sign in."]
            [:br]
            [:form {:method "POST"}
              [:input {:type "hidden" :name "__anti-forgery-token" :value anti-forgery-token}]
              [:div.bp3-form-group
                [:label.bp3-label "Institution"]
                [:div.bp3-form-content
                  [:div.bp3-select
                    [:select {:name "institution"}
                      [:option "University of Edinburgh"]
                      [:option "Vassar College"]]]]]
              [:div.bp3-form-group
                [:label.bp3-label "First name"]
                [:div.bp3-form-content
                  [:input.bp3-input {:type "text" :required true :name "first_name"}]]]
              [:div.bp3-form-group
                [:label.bp3-label "Last name"]
                [:div.bp3-form-content
                  [:input.bp3-input {:type "text" :required true :name "last_name"}]]]
              [:div.bp3-form-group
                [:label.bp3-label "Email"]
                [:div.bp3-form-content
                  [:input.bp3-input {:type "email" :required true :name "email"}]]
                  [:div.bp3-form-helper-text "Please use your university email address."]]
              [:div.bp3-form-group
                [:label.bp3-label "Password"]
                [:div.bp3-form-content
                  [:input.bp3-input {:type "password" :required true :name "password"}]]
                  [:div.bp3-form-helper-text
                    "Please choose a different password than on your other accounts. "
                    [:a {:href "https://it.cornell.edu/password-mgmt/why-use-different-passwords-each-account" :target "_bank"} "(why is this important?)"]]]
              [:div.bp3-form-group {:class (if (validation-errors :password-does-not-match) "bp3-intent-danger")}
                [:label.bp3-label "Confirm password"]
                [:div.bp3-form-content
                  [:input.bp3-input {:type "password"
                                    :class (if (validation-errors :password-does-not-match) "bp3-intent-danger")
                                    :required true
                                    :name "password_confirmation" }]
                  (if (validation-errors :password-does-not-match)
                    [:div.bp3-form-helper-text "Password doesn't match."]
                    [:div "foo"])]]
              [:button.bp3-button.bp3-intent-primary {:type "submit"} "Sign up"]]]]])))