diff --git a/src/cljs/job_streamer/console/components/root.cljs b/src/cljs/job_streamer/console/components/root.cljs index 8038fd2..c99b4b6 100644 --- a/src/cljs/job_streamer/console/components/root.cljs +++ b/src/cljs/job_streamer/console/components/root.cljs @@ -349,43 +349,61 @@ (init-state [_] {:errors nil :username "" - :password ""}) - (render-state [_ {:keys [username password errors]}] + :password "" + :oauth-providers {}}) + (will-mount [_] + (api/request "/oauth" :GET + {:handler (fn [response] + (om/set-state! owner :oauth-providers response))})) + (render-state [_ {:keys [username password errors oauth-providers]}] (html [:div.full.height [:div.ui.fixed.inverted.teal.menu [:div.header.item [:img.ui.image {:alt "JobStreamer" :src "/img/logo.png"}]]] [:div.main.grid.content.full.height [:div.ui.middle.aligned.center.aligned.login.grid - [:div.column - [:h2.ui.header - [:div.content - [:img.ui.image {:src "/img/logo.png"}]]] - [:form.ui.large.login.form - (merge {:on-submit (fn [e] - (.preventDefault e) - (api/request (api/url-for "/auth") :POST - {:user/id username :user/password password} - {:handler #(set! (.-href js/location) "/") - :error-handler #(om/set-state! owner :errors (or (:messages %) - ["A Control bus is NOT found."])) - :unauthorized-handler #(om/set-state! owner :errors (:messages %))}))} - (when errors {:class "error"})) + [:div.row + [:div.column + [:h2.ui.header + [:div.content + [:img.ui.image {:src "/img/logo.png"}]]] + [:form.ui.large.login.form + (merge {:on-submit (fn [e] + (.preventDefault e) + (api/request (api/url-for "/auth") :POST + {:user/id username :user/password password} + {:handler #(set! (.-href js/location) "/") + :error-handler #(om/set-state! owner :errors (or (:messages %) + ["A Control bus is NOT found."])) + :unauthorized-handler #(om/set-state! owner :errors (:messages %))}))} + (when errors {:class "error"})) + [:div.ui.stacked.segment + [:div.ui.error.message + (map #(vec [:p %]) errors)] + [:div.field + [:div.ui.left.icon.input + [:i.user.icon] + [:input {:type "text" :name "username" :id "username" :placeholder "User name" :value username + :on-change (fn [e] + (let [username (.. js/document (getElementById "username") -value)] + (om/set-state! owner :username username)))}]]] + [:div.field + [:div.ui.left.icon.input + [:i.lock.icon] + [:input {:type "password" :name "password" :id "password" :placeholder "Password" :value password + :on-change (fn [e] + (let [password (.. js/document (getElementById "password") -value)] + (om/set-state! owner :password password)))}]]] + [:button.ui.fluid.large.teal.submit.button{:type "submit"} "Login"]]]]] + [:div.row + [:div.column [:div.ui.stacked.segment - [:div.ui.error.message - (map #(vec [:p %]) errors)] - [:div.field - [:div.ui.left.icon.input - [:i.user.icon] - [:input {:type "text" :name "username" :id "username" :placeholder "User name" :value username - :on-change (fn [e] - (let [username (.. js/document (getElementById "username") -value)] - (om/set-state! owner :username username)))}]]] - [:div.field - [:div.ui.left.icon.input - [:i.lock.icon] - [:input {:type "password" :name "password" :id "password" :placeholder "Password" :value password - :on-change (fn [e] - (let [password (.. js/document (getElementById "password") -value)] - (om/set-state! owner :password password)))}]]] - [:button.ui.fluid.large.teal.submit.button{:type "submit"} "Login"]]]]]]]))) + (for [[id {:keys [name icon]}] oauth-providers] + [:div.ui.segment + [:form.ui.large.login.form + {:on-submit (fn [e] + (.preventDefault e) + (set! (.-href js/location) (api/url-for (str "/oauth/" id))))} + [:button.ui.fluid.large.teal.submit.button {:type "submit"} + [:i.icon {:class (or icon "openid")}] + (str "Login using " name)]]])]]]]]])))