Add terms of use popup

Use sessionStorage to ensure terms only need to be agreed to once
per session.

pywb/vueui/src/App.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="app" :class="{expanded: showTimelineView || showFullView }" data-app="webrecorder-replay-app">
+    <!-- Per-session terms of use pop-up -->
+    <TermsOfUsePopup />
+
     <!-- Top navbar -->
     <nav
       class="navbar navbar-light navbar-expand-lg fixed-top top-navbar justify-content-center"
@@ -159,6 +162,7 @@
 import Timeline from "./components/Timeline.vue";
 import TimelineBreadcrumbs from "./components/TimelineBreadcrumbs.vue";
 import CalendarYear from "./components/CalendarYear.vue";
+import TermsOfUsePopup from "./components/TermsOfUsePopup.vue";
 
 import { PywbSnapshot, PywbPeriod } from "./model.js";
 import {PywbI18N} from "./i18n";
@@ -185,7 +189,7 @@ export default {
       locales: [],
     };
   },
-  components: {Timeline, TimelineBreadcrumbs, CalendarYear},
+  components: {Timeline, TimelineBreadcrumbs, CalendarYear, TermsOfUsePopup},
   mounted: function() {
     // add empty unload event listener to make this page bfcache ineligible.
     // bfcache otherwises prevent the query template from reloading as expected

pywb/vueui/src/components/TermsOfUsePopup.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="modal" id="termsModal" tabindex="-1" role="dialog" data-backdrop="static">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Terms of Use</h5>
+        </div>
+        <div class="modal-body">
+          <p>Terms of use go here.</p>
+        </div>
+        <div class="modal-footer">
+          <button
+            type="button"
+            class="btn btn-primary"
+            @click="closePopup"
+            @keyup.enter="closePopup"
+            >Agree</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TermsOfUsePopup",
+  data: function() {
+    return {
+      displayPopup: this.sessionStorageDisplayPopupValue ? this.sessionStorageDisplayPopupValue : true
+    };
+  },
+  mounted: function() {
+    this.setModalVisibility();
+  },
+  updated: function() {
+    this.setModalVisibility();
+  },
+  methods: {
+    setModalVisibility() {
+      this.getDisplayPopupFromSessionStorage();
+      if (this.displayPopup) {
+        $('#termsModal').modal('show');
+      } else {
+        this.closePopup();
+      }
+    },
+    closePopup() {
+      $('#termsModal').modal('hide');
+      this.setPopupDataClosed();
+    },
+    setPopupDataClosed() {
+      window.sessionStorage.setItem(this.sessionStoragePopupKey, false);
+      this.displayPopup = false;
+    },
+    getDisplayPopupFromSessionStorage() {
+      if (window.sessionStorage) {
+        if (this.sessionStorageDisplayPopupValue !== null) {
+          let isTrue = (this.sessionStorageDisplayPopupValue === 'true');
+          this.displayPopup = isTrue;
+        }
+      }
+    }
+  },
+  computed: {
+    sessionStoragePopupKey() {
+      return 'ukwa-pywb--terms-of-use-popup';
+    },
+    sessionStorageDisplayPopupValue() {
+      return window.sessionStorage.getItem(this.sessionStoragePopupKey);
+    }
+  }
+}
+</script>