Add JS client side refresh to fix live view issues (pow-auth/pow#271)

lib/oli_web/controllers/static_page_controller.ex

@@ -4,4 +4,9 @@ defmodule OliWeb.StaticPageController do
   def index(conn, _params) do
     render(conn, "index.html")
   end
+
+  def keep_alive(conn, _pararms) do
+    conn
+    |> send_resp(200, "Ok")
+  end
 end

lib/oli_web/router.ex

@@ -125,6 +125,9 @@ defmodule OliWeb.Router do
     get "/account", WorkspaceController, :account
     put "/account", WorkspaceController, :update_author
     post "/account/theme", WorkspaceController, :update_theme
+
+    # keep a session active by periodically calling this endpoint
+    get "/keep-alive", StaticPageController, :keep_alive
   end
 
   scope "/project", OliWeb do

lib/oli_web/templates/layout/live.html.leex

@@ -11,5 +11,40 @@
   phx-value-key="error"><%= live_flash(@flash, :error) %></p>
 <% end %>
 
-<%= @inner_content %>
+<script>
+/**
+ * If user doesn't request server periodically (few minutes),
+ * the session expires and user has to re-login again. If user
+ * manages to request server before the time has expired, the
+ * cookie is updated and the timer is reset.
+ *
+ * The problem is that almost the whole website uses LiveView,
+ * even for navigation, which means that most of the requests
+ * go through WebSockets, where you can't update cookies, and
+ * so the session inevitably expires, even if user is actively
+ * using the website.
+ *
+ * As a workaround, we periodically ping the server via a
+ * regular AJAX requests, which resets the session cookie timer.
+ *
+ * More Info: https://github.com/danschultzer/pow/issues/271
+ * https://elixirforum.com/t/get-user-id-with-pow-from-session-for-live-view/24206/4
+ */
+if (!window.keepAlive) {
+  window.keepAlive = () => {
+    const wait = (ms) => {
+      return () => new Promise(resolve => {
+        setTimeout(resolve, ms)
+      })
+    }
+
+    fetch('/keep-alive')
+      .then(wait(60 * 1000 /*ms*/))
+      .then(keepAlive)
+  }
 
+  window.keepAlive()
+}
+</script>
+
+<%= @inner_content %>