Only load content after session is validated

uwcirg · Mar 30, 2024 · f8209c6 · f8209c6
1 parent 4f6e6e8
commit f8209c6
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 19 deletions.
diff --git a/src/lib/SessionStatus.svelte b/src/lib/SessionStatus.svelte
@@ -1,12 +1,17 @@
-<script>
-  import { onMount, getContext } from "svelte";
+<script lang="ts">
+  import { createEventDispatcher, onMount, getContext } from "svelte";
   import { OIDC_BASE, CHECK_SESSION_IFRAME } from "./config";
   import { goto } from "$app/navigation";
+  import type { SOFClient } from "./sofClient";
 
-  let sofClient = getContext('sofClient');
+  let sofClient: SOFClient = getContext('sofClient');
+  
+  const validSessionDispatch = createEventDispatcher<{'valid-session': Boolean}>();
 
   // Poll the OP iframe periodically
   let checkSession = setInterval(checkSessionStatus, 5000); // Adjust interval as needed
+
+  let first = true;
   
   onMount(() => {
     // Listen for messages from OP iframe
@@ -22,7 +27,7 @@
     opIframe?.contentWindow.postMessage(message, OIDC_BASE);
   }
 
-  function processStatus(event) {
+  function processStatus(event: any) {
     if (event.origin === OIDC_BASE) {
       var data = event.data;
       if (data === 'changed') {
@@ -36,6 +41,10 @@
       } else if (data === 'error') {
         goto('/logout');
       }
+      if (first) {
+        first = false;
+        validSessionDispatch('valid-session', true);
+      }
     }
   }
 </script>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -33,6 +33,7 @@
   let sofClient: SOFClient = new SOFClient(SOF_HOSTS[0]);
   setContext('sofClient', sofClient);
   let initialized = false;
+  let validSession = false;
 
   let inactivityTimer: NodeJS.Timeout | undefined;
   function resetInactivityTimer() {
@@ -107,20 +108,26 @@
   </Collapse>
 </Navbar>
 {#if initialized}
-<SessionStatus/>
-<Row class="main-row">
-  <Col>
-    <slot />
-  </Col>
-</Row>
-<Row>
-  <Col style="margin-top: 20px; padding-top: 20px; border-top: 1px solid rgb(204, 204, 204);" >
-    <footer>
-      <Row class="justify-content-center">
-        <p><center>If you have any questions or problems using the system, please get in touch at <a  href="mailto:[email protected]">[email protected]</a> for assistance.</center></p>
-      </Row>
-    </footer>
-  </Col>
-</Row>
+  <SessionStatus on:valid-session={({ detail }) => {
+    if (detail) {
+      validSession = true;
+    }
+  }}/>
+  {#if validSession}
+    <Row class="main-row">
+      <Col>
+        <slot />
+      </Col>
+    </Row>
+    <Row>
+      <Col style="margin-top: 20px; padding-top: 20px; border-top: 1px solid rgb(204, 204, 204);" >
+        <footer>
+          <Row class="justify-content-center">
+            <p><center>If you have any questions or problems using the system, please get in touch at <a  href="mailto:[email protected]">[email protected]</a> for assistance.</center></p>
+          </Row>
+        </footer>
+      </Col>
+    </Row>
+  {/if}
 {/if}
 </Container>