Enable oauth2.0 authentication.

job-streamer · Jul 12, 2017 · abdf930 · abdf930
1 parent 23248d4
commit abdf930
Showing 1 changed file with 51 additions and 33 deletions.
diff --git 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)]]])]]]]]])))