Implement one user concurrent access for storylines.

Co-authored-by: szczz <matt.szczerba55@gmail.com>

Author: mohsin-r

.env

@@ -1,3 +1,6 @@
 VITE_APP_API_URL=#{API_URL}#
+VITE_APP_SOCKET_URL=#{SOCKET_URL}#
 VITE_APP_CURR_ENV=#{CURR_ENV}#
-VITE_APP_NET_API_URL=#{NET_API_URL}#
+VITE_APP_NET_API_URL=#{NET_API_URL}#
+VITE_SESSION_END=#{SESSION_END}#
+VITE_SESSION_WARN=#{SESSION_WARN}#

server/.env

@@ -2,4 +2,4 @@ SERVER_CURR_ENV=#{CURR_ENV}#
 SERVER_LOG_PATH=#{LOG_PATH}#
 SERVER_UPLOAD_PATH=#{UPLOAD_PATH}#
 SERVER_TARGET_PATH=#{TARGET_PATH}#
-SERVER_API_URL=#{NET_API_URL}#
+SERVER_API_URL=#{NET_API_URL}#

server/index.js

@@ -21,6 +21,8 @@
         "moment": "^2.29.4",
         "path": "^0.12.7",
         "recursive-readdir": "^2.2.3",
-        "simple-git": "^3.27.0"
+        "simple-git": "^3.27.0",
+        "uuid": "^11.0.3",
+        "ws": "^8.18.0"
     }
 }

server/package-lock.json

@@ -1,10 +1,22 @@
 <configuration>
   <system.webServer>
     <handlers>
-      <add name="StorylinesExpress" path="index.js" verb="*" modules="iisnode" />
+      <add name="StorylinesExpress" path="index.js" verb="*" modules="iisnode" resourceType="Unspecified" />
     </handlers>
+    <webSocket enabled="true" />
     <rewrite>
       <rules>
+        <rule name="WebSocket remove keep-alive header" stopProcessing="true">
+          <match url="(.*)" />
+          <serverVariables>
+            <set name="HTTP_CONNECTION" value="Upgrade" />
+          </serverVariables>
+          <action type="Rewrite" url="index.js" />
+          <conditions logicalGrouping="MatchAny">
+            <add input="{HTTP_CONNECTION}" pattern="keep-alive, Upgrade" />
+            <add input="{HTTP_CONNECTION}" pattern="Upgrade, keep-alive" />
+          </conditions>
+        </rule>
         <rule name="sendToNode">
           <match url="/*" />
           <action type="Rewrite" url="index.js" />

server/package.json

@@ -8,6 +8,7 @@
 import { Vue, Watch } from 'vue-property-decorator';
 import { RouteLocationNormalized } from 'vue-router';
 import { useUserStore } from './stores/userStore';
+import { useLockStore } from './stores/lockStore';
 
 export default class App extends Vue {
     @Watch('$route', { immediate: true })
@@ -24,10 +25,10 @@ export default class App extends Vue {
         if (import.meta.env.VITE_APP_CURR_ENV) {
             userStore.fetchUserProfile();
         }
+        const lockStore = useLockStore();
+        lockStore.initConnection(); // start the handshake with the web socket server as soon as the app starts to save time
     }
 }
-
-
 </script>
 
 <style lang="scss">

server/web.config

@@ -351,6 +351,7 @@ import MetadataContentV from './helpers/metadata-content.vue';
 import ConfirmationModalV from './helpers/confirmation-modal.vue';
 import HelpPanelV from './help-panel.vue';
 import HelpSectionV from './helpers/help-section.vue';
+import { useLockStore } from '@/stores/lockStore';
 
 @Options({
     components: {
@@ -561,7 +562,7 @@ export default class EditorV extends Vue {
         previewConfigs.fr!.slides = previewConfigs.fr!.slides.map((slide) => {
             return slide ?? JSON.parse(JSON.stringify(this.defaultBlankSlide));
         });
-
+        const lockStore = useLockStore();
         setTimeout(() => {
             const routeData = this.$router.resolve({
                 name: 'preview',
@@ -570,7 +571,9 @@ export default class EditorV extends Vue {
             const previewTab = window.open(routeData.href, '_blank');
             (previewTab as Window).props = {
                 configs: previewConfigs,
-                configFileStructure: this.configFileStructure
+                configFileStructure: this.configFileStructure,
+                secret: lockStore.secret,
+                timeRemaining: lockStore.timeRemaining
             };
         }, 5);
     }

src/app.vue

@@ -1,10 +1,12 @@
 <template>
     <vue-final-modal
+        :clickToClose="false"
+        :escToClose="false"
         :modalId="name"
         class="flex justify-center items-center"
         content-class="flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2"
     >
-        <h2 slot="header" class="text-lg font-bold">{{ message }}</h2>
+        <h2 slot="header" :class="messageClass ?? 'text-lg font-bold'">{{ message }}</h2>
         <div class="w-full flex justify-end">
             <button class="editor-button confirm-button hover:bg-gray-800" @click.stop="onOk">
                 {{ $t('editor.confirm') }}
@@ -28,6 +30,7 @@ import { VueFinalModal } from 'vue-final-modal';
 export default class MetadataEditorV extends Vue {
     @Prop() message!: string;
     @Prop() name!: string;
+    @Prop() messageClass?: string;
 
     onOk(): void {
         this.$emit('ok');

src/components/editor.vue

@@ -10,6 +10,33 @@
             </router-link>
         </div>
         <div class="relative" style="margin-right: 10%; margin-left: 10%">
+            <div v-if="showExpired" class="w-full rounded-md bg-red-100 p-2 mt-5">
+                <span class="flex flex-row items-center">
+                    <svg
+                        version="1.1"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 1024 1024"
+                        style="color: rgb(245, 108, 108)"
+                        class="w-10 h-10 pr-2"
+                    >
+                        <path
+                            fill="currentColor"
+                            d="M512,952C269,952,72,755,72,512S269,72,512,72s440,197,440,440S755,952,512,952z M579.7,512l101.6-101.6 c18.7-18.7,18.7-49,0-67.7c-18.7-18.7-49-18.7-67.7,0l0,0L512,444.3L410.4,342.7c-18.7-18.7-49-18.7-67.7,0s-18.7,49,0,67.7 L444.3,512L342.7,613.6c-18.7,18.7-18.7,49,0,67.7c18.7,18.7,49,18.7,67.7,0L512,579.7l101.6,101.6c18.7,18.7,49,18.7,67.7,0 c18.7-18.7,18.7-49,0-67.7L579.7,512z"
+                        ></path>
+                    </svg>
+                    {{ $t('editor.session.ended') }}
+                    <button
+                        @click.stop="
+                            () => {
+                                showExpired = false;
+                            }
+                        "
+                        class="editor-button bg-black text-white hover:bg-gray-800 ml-auto"
+                    >
+                        {{ $t('editor.ok') }}
+                    </button>
+                </span>
+            </div>
             <h2 class="pt-10 text-4xl font-semibold">{{ $t('editor.dashboard') }}</h2>
             <div class="text-xl font-semibold text-right pt-2 pb-2">
                 {{ $t('editor.landing.greeting') }} {{ userName }}!
@@ -163,18 +190,26 @@
 </template>
 
 <script lang="ts">
-import { Vue } from 'vue-property-decorator';
+import { Prop, Vue } from 'vue-property-decorator';
 import { Storyline, UserProfile, useUserStore } from '../stores/userStore';
+import Message from 'vue-m-message';
 
 export default class HomeV extends Vue {
+    @Prop({ default: false }) sessionExpired!: boolean; // true if user was redirected here due to session expiring, false otherwise
+
     userStore = useUserStore();
     currLang = 'en';
     sourceFile = 'index.html#';
     profile: UserProfile = {};
+    showExpired: boolean = false;
 
     mounted(): void {
         this.currLang = (this.$route.params.lang as string) || 'en';
         this.sourceFile = window.location.href.split('/').find((s) => s.includes('#'));
+        // If the user was redirected here due to session end, show session end popup.
+        if (this.sessionExpired) {
+            this.showExpired = true;
+        }
         this.userStore
             .fetchUserProfile()
             .then(() => {