login screen; block requests if logged out; tweak polling; more

src/cljs/ulysses/components/header.cljs

@@ -18,8 +18,9 @@
                       :progress-lg
                       :progress-sm)}]))))
 
-(defn main-logo []
+(defn main-logo [& args]
   [:div.main-logo
+    {:class (some #{:large} args)}
     [:h1
       [link [:home] {} config/site-title]]
     [progress]])
@@ -28,10 +29,9 @@
   (let [user (subscribe [:user])]
     (fn []
       (let [user @user]
-        [:div.login
-          (if-let [netid (:netid user)]
-            [:span "you are logged in as " netid]
-            [link "http://ulysses-api-staging.core/login" {} "log in"])]))))
+        (when-let [netid (:netid user)]
+          [:div.login-indicator
+            [:span "you are logged in as " netid]])))))
 
 (defn uconn-banner-right-menu-item [href fa-id]
   [:li.nav-item
@@ -62,7 +62,8 @@
 ;; main
 ;; ----------------------------------------------------------------------------
 
-(defn header []
+(defn header [& args]
   [:header.header
     [uconn-banner]
-    [main-logo]])
+    (when-not (some #{:hide-logo} args)
+      [main-logo])])

src/cljs/ulysses/components/layout.cljs

@@ -2,10 +2,11 @@
   (:require [reagent.core :as r]
             [re-frame.core :refer [subscribe dispatch]]
             [re-com.core :refer [modal-panel]]
-            [ulysses.components.header :refer [header]]
-            [ulysses.components.basic :refer [css-transition-group-standard]]
+            [ulysses.components.header :refer [header main-logo]]
+            [ulysses.components.basic :refer [css-transition-group-standard link]]
             [ulysses.components.misc :refer [modal-dialog]]
-            [ulysses.utils :refer [classes]]
+            [ulysses.utils :refer [classes classes-attr]]
+            [ulysses.config :refer [login-endpoint]]
             [ulysses.lib.moment :as m]))
 
 (defn footer []
@@ -25,11 +26,28 @@
           [modal-dialog
             (assoc ms :on-close on-close)]]))))
 
+(defn login-screen []
+  [:div.login-screen
+    [header :hide-logo]
+    [:div.centered
+      [:div.inside
+        [main-logo :large]
+        [link
+          login-endpoint
+          (classes-attr :btn :btn-lg :btn-primary-outline)
+          "log in"]]]])
+
 (defn shell [page-name page]
-  [:div.shell
-    [header]
-    ; page
-    [css-transition-group-standard
-      [^{:key (name page-name)} [:div.page page]]]
-    [footer]
-    [modal-alpha]])
+  (let [user (subscribe [:user])]
+    (fn [page-name page]
+      (if-let [user @user]
+        [:div.shell
+          [header]
+          ; page
+          [css-transition-group-standard
+            [^{:key (name page-name)} [:div.page page]]]
+          [footer]
+          [modal-alpha]]
+
+        ; user not logged in
+        [login-screen]))))

src/cljs/ulysses/components/misc.cljs

@@ -18,12 +18,13 @@
   [label (-> name keyword mechanism-to-contextual) name])
 
 (defn grant-op-meta
-  [{:keys [funding-mechanism due-date url]}]
+  [with-link? {:keys [funding-mechanism due-date url]}]
   [:div.grant-op-meta
     [grant-op-fm-label funding-mechanism]
     [grant-op-time-left-label due-date]
-    [link url {:target "_blank"}
-      [label :default "view grant"]]])
+    (when with-link?
+      [link url {:target "_blank"}
+        [label :default "view grant"]])])
 
 ;; ----------------------------------------------------------------------------
 ;; modal dialog

src/cljs/ulysses/config.cljs

@@ -23,10 +23,14 @@
                   .-location
                   .-hostname))
 
-(def api-endpoint
+(def api-hostname
   (if (or debug? (string/includes? hostname "staging"))
-    "http://ulysses-api-staging.core/api"
-    "http://ulysses-api-alpha.core/api"))
+    "http://ulysses-api-staging.core"
+    "http://ulysses-api-alpha.core"))
+
+(def api-endpoint (str api-hostname "/api"))
+
+(def login-endpoint (str api-hostname "/login"))
 
 (def request-debounce-time 300)
 

src/cljs/ulysses/core.cljs

@@ -1,6 +1,6 @@
 (ns ulysses.core
   (:require [reagent.core :as reagent]
-            [re-frame.core :as re-frame :refer [dispatch]]
+            [re-frame.core :as re-frame :refer [dispatch dispatch-sync]]
             [ulysses.handlers]
             [ulysses.subs]
             [ulysses.routes :as routes]
@@ -17,17 +17,22 @@
 
 (defn hook-into-browser-events []
   (.addEventListener js/window "resize"
-    #(dispatch [:window-resize]))
+    (fn [] (dispatch [:window-resize])))
   (.addEventListener js/window "scroll"
-    #(dispatch [:window-scroll])))
+    (fn [] (dispatch [:window-scroll]))))
 
 (defn start-pollings []
-  (js/setInterval #(dispatch [:window-resize]) 100)
-  (js/setInterval #(dispatch [:request-user-poll]) (* 30 1000)))
+  (let [pollings [[100 [:window-resize]]
+                  [(* 30 1000) [:request-user-poll]]]]
+    (doseq [[time dval] pollings]
+      (dispatch-sync dval)
+      (js/setInterval
+        (fn [] (dispatch dval))
+        time))))
 
 (defn ^:export init []
   (routes/app-routes)
-  (re-frame/dispatch-sync [:initialize-db])
+  (dispatch-sync [:initialize-db])
   (mount-root)
   (hook-into-browser-events)
   (start-pollings))

src/cljs/ulysses/handlers.cljs

@@ -87,18 +87,20 @@
   (fn [db _]
     (request db
       [:login :poll]
+      :req-user? false
       :handler #(dispatch [:receive-user-poll %])
       ;; if server didn't respond or an error occurred, log out
       :error-handler #(dispatch [:receive-user-poll false]))))
 
 (register-handler
   :receive-user-poll
   (fn [db [_ response]]
-    (println "login:" response)
+    (println "login poll:" response)
     (if-not (and (boolean? response) response)
       ;; not logged in anymore, so nil the user
       (assoc db :user nil)
-      db)))
+      ;; TODO request actual user
+      (assoc db :user true))))
 
 ;; ----------------------------------------------------------------------------
 ;; raw data

src/cljs/ulysses/pages/builder.cljs

@@ -267,7 +267,7 @@
         [:div.col-md-12
           [:h3.text-xs-center.mb-15 title]
           [:div.text-xs-center
-            [grant-op-meta op]]
+            [grant-op-meta true op]]
           [:p purpose]]]]])
 
 ;; ----------------------------------------------------------------------------

src/cljs/ulysses/pages/home.cljs

@@ -85,7 +85,7 @@
     [:div.grant-op-box
       [link [:builder :grant-op-id id] {:class :inside}
         [:div.title title]
-        [grant-op-meta op]
+        [grant-op-meta false op]
         [:div.about [:p body]]
         [grant-op-box-initial-team initial-team]]
       [grant-op-box-actions id]]))

src/cljs/ulysses/utils.cljs

@@ -352,39 +352,42 @@
 
 (defn request
   "make an api request, with progress tracking"
-  [db endpoint & {:keys [verb params handler error-handler finish]
+  [db endpoint & {:keys [verb params req-user? handler error-handler finish]
                   :or {verb :get
                        params nil
+                       req-user? true
                        handler noop
                        error-handler noop
                        finish noop}}]
-  (let [progress-id (:next-progress-id db)
-        method (case verb :get ajax.core/GET
-                          :post ajax.core/POST
-                          :put ajax.core/PUT
-                          :delete ajax.core/DELETE
-                          ajax.core/GET)]
-    (dispatch [:progress progress-id 1])
-    (method
-      (string/join "/"
-        (cons config/api-endpoint
-          (map
-            #(if (keyword? %) (name %) %)
-            endpoint)))
-      {:params
-       (when params
-         (remap url-encode-component params))
-       :response-format :json
-       :keywords? true
-       :handler handler
-       :error-handler
-       (fn [e]
-         (dispatch [:bad-response e]) ; general error handler
-         (error-handler e)) ; user
-       :finally
-       (fn [e]
-         (dispatch [:progress progress-id 100]) ; complete progress
-         (finish e))})) ; user
+  ; only allow requests if logged in or check is bypassed
+  (when (or (not req-user?) (:user db))
+    (let [progress-id (:next-progress-id db)
+          method (case verb :get ajax.core/GET
+                            :post ajax.core/POST
+                            :put ajax.core/PUT
+                            :delete ajax.core/DELETE
+                            ajax.core/GET)]
+      (dispatch [:progress progress-id 1])
+      (method
+        (string/join "/"
+          (cons config/api-endpoint
+            (map
+              #(if (keyword? %) (name %) %)
+              endpoint)))
+        {:params
+         (when params
+           (remap url-encode-component params))
+         :response-format :json
+         :keywords? true
+         :handler handler
+         :error-handler
+         (fn [e]
+           (dispatch [:bad-response e]) ; general error handler
+           (error-handler e)) ; user
+         :finally
+         (fn [e]
+           (dispatch [:progress progress-id 100]) ; complete progress
+           (finish e))}))) ; user
   db) ; (no direct db change)
 
 ; grant ops requests

src/sass/components/_login.scss

@@ -1,24 +1,51 @@
-// login
+// ----------------------------------------------------------------------------
+// Login Screen
+// ----------------------------------------------------------------------------
 
-// NOTE
-// this is within the relative uconn-banner
+.login-screen {
+  background: $white;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1500;
+
+  .centered {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+
+    .inside {
+      margin-bottom: 15vh;
+      text-align: center;
+    }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Login Indicator
+// ----------------------------------------------------------------------------
 
 .uconn-banner {
-  .login {
+  .login-indicator {
     padding: .7rem 1rem 0 0;
     position: absolute;
     right: 0;
     top: 60px;
   }
 
   &.slim {
-    .login {
+    .login-indicator {
       top: 40px;
     }
   }
 
   @media screen and (max-width: 850px) {
-    .login {
+    .login-indicator {
       top: 40px;
     }
   }

src/sass/components/_main-logo.scss

@@ -14,4 +14,22 @@
       font-weight: 100;
     }
   }
+
+  &.large {
+    h1 {
+      font-size: 6em;
+
+      @include media-breakpoint-only(md) {
+        font-size: 5em;
+      }
+
+      @include media-breakpoint-only(sm) {
+        font-size: 5em;
+      }
+
+      @include media-breakpoint-only(xs) {
+        font-size: 3.5em;
+      }
+    }
+  }
 }