Merge pull request #91 from scottwittenburg/session-timeout-and-email-fixes

Session timeout and email fixes

Author: scottwittenburg

client/.env.development

@@ -1,2 +1 @@
 PUBLIC_ADDRESS=localhost:8081
-MIQA_SESSION_TIMEOUT=31536000

client/.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
   },
   extends: ["plugin:vue/essential", "@vue/prettier"],
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-console": "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
   },
   parserOptions: {

client/package-lock.json

@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@girder/components": "git+https://github.com/girder/girder_web_components.git#v2.2.6",
+    "@girder/components": "git+https://github.com/girder/girder_web_components.git#v3.0.2",
     "bluebird": "^3.5.5",
     "itk": "14.0.0",
     "mousetrap": "scottwittenburg/mousetrap#fix-listener-leak",
@@ -27,14 +27,14 @@
     "@babel/runtime-corejs2": "7.11.0",
     "@vue/cli-plugin-babel": "^3.3.0",
     "@vue/cli-plugin-eslint": "^3.3.0",
-    "@vue/cli-service": "^3.3.0",
+    "@vue/cli-service": "^4.5.12",
     "@vue/eslint-config-prettier": "^4.0.1",
     "babel-eslint": "^10.0.1",
     "copy-webpack-plugin": "^4.6.0",
     "core-js": "^2.6.5",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
-    "pug": "^2.0.3",
+    "pug": "^3.0.1",
     "pug-loader": "^2.4.0",
     "pug-plain-loader": "^1.0.0",
     "sass": "^1.26.10",

client/package.json

@@ -1,4 +1,5 @@
 <script>
+import { mapActions, mapGetters } from "vuex";
 export default {
   name: "App",
   components: {},
@@ -9,19 +10,32 @@ export default {
   data: () => ({
     userLevel: { value: null }
   }),
+  computed: {
+    ...mapGetters(["sessionStatus"])
+  },
   watch: {
     "girderRest.user"(user) {
       if (!user) {
         this.$router.push("/login");
-      } else {
-        this.setUserLevel();
+      }
+    },
+    sessionStatus(status) {
+      if (status === "timeout") {
+        this.$prompt({
+          title: "Session Expired",
+          text: "Your session has expired and you will be logged out",
+          positiveButton: "Ok"
+        }).then(() => {
+          this.logout();
+        });
       }
     }
   },
   created() {
     this.setUserLevel();
   },
   methods: {
+    ...mapActions(["logout"]),
     async setUserLevel() {
       if (!this.girderRest.user) {
         return;

client/src/App.vue

@@ -38,9 +38,19 @@ export default {
   }),
   computed: {
     ...mapState(["screenshots"]),
-    ...mapGetters(["currentDataset", "currentSession", "siteMap"])
+    ...mapGetters([
+      "currentUser",
+      "currentDataset",
+      "currentSession",
+      "siteMap"
+    ])
   },
   watch: {
+    currentUser(value) {
+      if (value) {
+        this.initialize();
+      }
+    },
     currentDataset(value) {
       if (value) {
         this.initialize();
@@ -93,16 +103,21 @@ export default {
       this.to = this.toCandidates.map(c => c.name);
       this.cc = this.ccCandidates.map(c => c.name);
       this.bcc = this.bccCandidates.map(c => c.name);
+      if (this.currentUser) {
+        this.bcc.push(this.currentUser.email);
+      }
       this.showCC = !!this.cc.length;
       this.showBCC = !!this.bcc.length;
-      var experiment = `Regarding ${this.currentSession.meta.experimentId} (${this.currentSession.meta.experimentId2}), ${this.currentSession.name}`;
+      var experiment = `Regarding ${this.currentSession.meta.experimentId}, ${this.currentSession.name}`;
       this.subject = experiment;
-      this.body = `${experiment}
-
-${location.href}
-
+      this.body = `Experiment: ${this.currentSession.meta.experimentId}
+Scan: ${this.currentSession.name}`;
+      if (this.note) {
+        this.body = `${this.body}
+Note:
 ${this.note}
 `;
+      }
       this.initialized = true;
     },
     toggleScreenshotSelection(screenshot) {
@@ -143,6 +158,19 @@ ${this.note}
       this.sending = false;
       this.$emit("input", false);
       this.initialized = false;
+      for (let i = this.screenshots.length - 1; i >= 0; i--) {
+        const screenshot = this.screenshots[i];
+        if (this.selectedScreenshots.indexOf(screenshot) !== -1) {
+          this.removeScreenshot(screenshot);
+        }
+      }
+      this.selectedScreenshots = [];
+    },
+    getBorder(screenshot) {
+      if (this.selectedScreenshots.indexOf(screenshot) === -1) {
+        return "transparent";
+      }
+      return this.$vuetify.theme.currentTheme.primary;
     }
   }
 };
@@ -166,7 +194,7 @@ ${this.note}
                 label="to"
                 v-model="to"
                 :candidates="toCandidates.map(c => c.name)"
-                :required="!(to.length + cc.length + bcc.length)"
+                :required="true"
               />
             </v-flex>
             <v-flex shrink>
@@ -180,7 +208,7 @@ ${this.note}
                 label="cc"
                 v-model="cc"
                 :candidates="ccCandidates.map(c => c.name)"
-                :required="!(to.length + cc.length + bcc.length)"
+                :required="false"
               />
             </v-flex>
           </v-layout>
@@ -190,7 +218,7 @@ ${this.note}
                 label="bcc"
                 v-model="bcc"
                 :candidates="bccCandidates.map(c => c.name)"
-                :required="!(to.length + cc.length + bcc.length)"
+                :required="false"
               />
             </v-flex>
           </v-layout>
@@ -225,16 +253,15 @@ ${this.note}
                     class="screenshot"
                     @click="toggleScreenshotSelection(screenshot)"
                     :style="{
-                      borderColor:
-                        selectedScreenshots.indexOf(screenshot) === -1
-                          ? 'transparent'
-                          : $vuetify.theme.primary
+                      borderColor: getBorder(screenshot)
                     }"
                   >
                     <v-img :src="screenshot.dataURL" aspect-ratio="1"></v-img>
                     <v-card-text class="text-truncate">
                       <v-tooltip top>
-                        <span slot="activator">{{ screenshot.name }}</span>
+                        <template #activator="{ on }">
+                          <span v-on="on">{{ screenshot.name }}</span>
+                        </template>
                         <span>{{ screenshot.name }}</span>
                       </v-tooltip>
                     </v-card-text>

client/src/components/EmailDialog.vue

@@ -53,11 +53,13 @@ export default {
   >
     <template #selection="{ item, parent, selected }">
       <v-chip
+        :key="JSON.stringify(item)"
         :color="isValid(item) ? '' : 'error'"
         :input-value="selected"
         small
         close
         @input="parent.selectItem(item)"
+        @click:close="parent.selectItem(item)"
         >{{ item }}</v-chip
       >
     </template>

client/src/components/EmailRecipientCombobox.vue

@@ -1,16 +1,23 @@
 <script>
+import { mapActions } from "vuex";
+
 import NavbarTitle from "@/components/NavbarTitle";
 import UserButton from "@/components/girder/UserButton";
 import NavigationTabs from "@/components/NavigationTabs";
+import SessionTimer from "@/components/SessionTimer";
 
 export default {
   name: "GenericNavigationBar",
   components: {
     NavbarTitle,
     UserButton,
-    NavigationTabs
+    NavigationTabs,
+    SessionTimer
   },
-  inject: ["girderRest"]
+  inject: ["girderRest"],
+  methods: {
+    ...mapActions(["logout"])
+  }
 };
 </script>
 
@@ -19,6 +26,7 @@ export default {
     <NavbarTitle />
     <NavigationTabs />
     <v-spacer></v-spacer>
-    <UserButton @user="girderRest.logout()" />
+    <SessionTimer />
+    <UserButton @user="logout()" />
   </v-app-bar>
 </template>

client/src/components/GenericNavigationBar.vue

@@ -0,0 +1,40 @@
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "SessionTimer",
+  computed: {
+    ...mapGetters(["remainingSessionTime"]),
+    showTimeRemaining() {
+      const remaining = this.remainingSessionTime;
+      return remaining > 0 && remaining < 300;
+    },
+    timeRemaining() {
+      const secondsRemaining = this.remainingSessionTime;
+      const minutesRemaining = Math.ceil(secondsRemaining / 60.0);
+      const what = minutesRemaining > 1 ? "minutes" : "minute";
+      return `Session will expire in under ${minutesRemaining} ${what}`;
+    }
+  }
+};
+</script>
+
+<template>
+  <v-text-field
+    class="mt-6 warning-text"
+    v-show="showTimeRemaining"
+    readonly
+    flat
+    dense
+    solo
+    background-color="transparent"
+    :value="timeRemaining"
+  ></v-text-field>
+</template>
+
+<style lang="scss">
+.warning-text {
+  font-size: 1.1em;
+  font-weight: bold;
+}
+</style>

client/src/components/SessionTimer.vue

@@ -130,7 +130,7 @@ export default {
       var dataURL = await this.view.captureImage();
       this.setCurrentScreenshot({
         name: `${this.currentSession.meta.experimentId}/${
-          this.currentSession.meta.experimentId2
+          this.currentSession.name
         }/${cleanDatasetName(this.currentDataset.name)}/${this.displayName}`,
         dataURL
       });