Merge branch 'custom-link' into develop

src/main.js

@@ -8,8 +8,39 @@ Vue.config.productionTip = false
 
 // A function loaded before each route change
 router.beforeEach((to, from, next) => {
+  // Check if there is a special query in the URI
+  if (to.query.q) {
+    store.commit('setCustomLinkData', to.query.q)
+    // GDPR notice not approved
+    if (!store.getters.isGdprValidated) {
+      if (to.name !== 'GdprNotice')
+        return next('/gdpr')
+    }
+  }
+  if (store.getters.isGdprValidated && store.state.customLinkData) {
+    const request = JSON.parse(JSON.stringify(store.state.customLinkData)) // DEEP COPY
+    store.commit('clearCustomLinkData')
+
+    // Identify the user
+    store.dispatch('setAppUniqueId')
+
+    // Set the host configuration
+    store.commit('setHostConfig', request.hostConfig)
+
+    // Set the userId and experimentId (to explicitly identify the user)
+    store.commit('setUserExperimentId', { userId: request.userId, experimentId: request.experimentId })
+
+    // Redirect to the experiment scene selector (or directly to a scene if specified)
+    if (request.experimentName) {
+      if (request.sceneName)
+        return next(`/experiments/${request.experimentName}/${request.sceneName}`)
+      return next(`/experiments/${request.experimentName}/`)
+    }
+    return next()
+  }
+
   // Redirect from config pages if already configured
-  if (to.path === '/gdpr' && store.getters.isGdprValidated)
+  if (to.name === 'GdprNotice' && store.getters.isGdprValidated)
     return next('/hostConfig')
 
   if (to.path === '/hostConfig' && store.getters.isHostConfigured)
@@ -19,7 +50,7 @@ router.beforeEach((to, from, next) => {
   // Redirect to configuration pages
   // Check GDPR before doing anything and redirect if necessary
   if (!store.getters.isGdprValidated) {
-    if (to.path !== '/gdpr') return next('/gdpr')
+    if (to.name !== 'GdprNotice') return next('/gdpr')
     return next()
   }
 

src/router/index.js

@@ -22,6 +22,11 @@ export default new Router({
       name: 'HostConfig',
       component: HostConfig
     },
+    {
+      path: '/linkGenerator',
+      name: 'LinkGenerator',
+      component: () => import('@/views/LinkGenerator')
+    },
     {
       path: '/experiments',
       name: 'ExperimentsList',

src/store/index.js

@@ -12,6 +12,7 @@ const vuexLocal = new VuexPersistence({
   storage: window.localStorage,
   key: 'webexpe-state',
   reducer: state => ({
+    customLinkData: state.customLinkData,
     uuid: state.uuid,
     userId: state.userId,
     experimentId: state.experimentId,

src/store/mutations.js

@@ -23,6 +23,13 @@ const createProgressionObj = (state, scenes) => {
 }
 
 export default {
+  setCustomLinkData(state, data) {
+    state.customLinkData = JSON.parse(atob(data))
+  },
+  clearCustomLinkData(state) {
+    state.customLinkData = null
+  },
+
   setGdprValidated(state) {
     state.gdprConsent = true
   },

src/store/state.js

@@ -10,5 +10,6 @@ export default () => JSON.parse(JSON.stringify({
     port: null
   },
   scenesList: null,
-  progression: {}
+  progression: {},
+  customLinkData: null
 }))

src/views/LinkGenerator.vue

@@ -0,0 +1,219 @@
+<template>
+  <v-layout justify-center align-center>
+    <v-flex xs12 sm8>
+      <v-card>
+        <v-container fluid fill-height>
+          <v-layout column align-center>
+            <v-card-title class="headline d-block text-md-center font-weight-bold">Link generator</v-card-title>
+
+            <v-card-text>
+              <v-form>
+                <h2>*Host configuration</h2>
+                <h4>Web application configuration</h4>
+                <v-text-field
+                  v-model="form.webAppUrl"
+                  label="*Web application link"
+                />
+
+                <h4>Server configuration</h4>
+                <v-flex xs3>
+                  <v-select
+                    v-model="form.server.ssl"
+                    :items="[false, true]"
+                    label="*SSL"
+                  />
+                </v-flex>
+
+                <v-text-field
+                  v-model="form.server.host"
+                  label="*Host IP address or hostname"
+                />
+
+                <v-text-field
+                  v-model="form.server.port"
+                  label="*Port"
+                  type="number"
+                />
+
+
+                <h2>User ID and experiment ID</h2>
+                <v-layout row wrap>
+                  <v-flex xs5>
+                    <v-checkbox
+                      v-model="form.userId.activated"
+                      color="primary"
+                      label="User ID"
+                    />
+                  </v-flex>
+                  <v-spacer />
+                  <v-flex xs6>
+                    <v-text-field
+                      v-model="form.userId.value"
+                      label="User ID"
+                      type="text"
+                      :disabled="!form.userId.activated"
+                    />
+                  </v-flex>
+                </v-layout>
+
+                <v-layout row wrap>
+                  <v-flex xs5>
+                    <v-checkbox
+                      v-model="form.experimentId.activated"
+                      color="primary"
+                      label="Experiment ID"
+                    />
+                  </v-flex>
+                  <v-spacer />
+                  <v-flex xs6>
+                    <v-text-field
+                      v-model="form.experimentId.value"
+                      label="Experiment ID"
+                      type="text"
+                      :disabled="!form.experimentId.activated"
+                    />
+                  </v-flex>
+                </v-layout>
+
+
+                <h2>Experiment name and scene name</h2>
+                <v-layout row wrap>
+                  <v-flex xs5>
+                    <v-checkbox
+                      v-model="form.experimentName.activated"
+                      color="primary"
+                      label="Experiment name"
+                    />
+                  </v-flex>
+                  <v-spacer />
+                  <v-flex xs6>
+                    <v-text-field
+                      v-model="form.experimentName.value"
+                      label="Experiment name"
+                      type="text"
+                      :disabled="!form.experimentName.activated"
+                    />
+                  </v-flex>
+                </v-layout>
+
+                <v-layout row wrap>
+                  <v-flex xs5>
+                    <v-checkbox
+                      v-model="form.sceneName.activated"
+                      color="primary"
+                      label="Scene name"
+                    />
+                  </v-flex>
+                  <v-spacer />
+                  <v-flex xs6>
+                    <v-text-field
+                      v-model="form.sceneName.value"
+                      label="Scene name"
+                      type="text"
+                      :disabled="!form.sceneName.activated"
+                    />
+                  </v-flex>
+                </v-layout>
+
+                <v-btn color="primary" @click="generateLink">Generate link</v-btn>
+
+                <div v-if="linkOutput && dataOutput">
+                  <h2 class="mt-5">Result</h2>
+                  <v-textarea
+                    :value="linkOutput"
+                    label="Your generated link"
+                    type="text"
+                    disabled
+                  />
+
+                  Data in the generated link:
+                  <pre>{{ dataOutput }}</pre>
+                </div>
+
+                <v-slide-y-transition mode="out-in">
+                  <v-alert v-if="alertMessage" :value="true" type="info" v-text="alertMessage" />
+                </v-slide-y-transition>
+              </v-form>
+            </v-card-text>
+          </v-layout>
+        </v-container>
+      </v-card>
+    </v-flex>
+  </v-layout>
+</template>
+
+<script>
+export default {
+  name: 'LinkGenerator',
+  components: {
+  },
+  data() {
+    return {
+      form: {
+        webAppUrl: 'http://diran.univ-littoral.fr',
+        server: {
+          ssl: false,
+          host: 'diran.univ-littoral.fr',
+          port: '80'
+        },
+
+        userId: {
+          activated: false,
+          value: ''
+        },
+
+        experimentId: {
+          activated: false,
+          value: ''
+        },
+
+        experimentName: {
+          activated: false,
+          value: ''
+        },
+
+        sceneName: {
+          activated: false,
+          value: ''
+        }
+      },
+
+      linkOutput: null,
+      dataOutput: null,
+      alertMessage: null
+    }
+  },
+
+  methods: {
+    generateLink() {
+      this.alertMessage = null
+
+      // Check host configuration is set
+      if (this.form.webAppUrl === '' || this.form.server.host === '' || this.form.server.port === '') {
+        this.alertMessage = 'The host configuration is required.'
+        this.linkOutput = null
+        this.dataOutput = null
+        return
+      }
+
+      // Generate the link
+      const obj = {
+        hostConfig: {
+          ssl: this.form.server.ssl,
+          host: this.form.server.host,
+          port: this.form.server.port
+        }
+      }
+      if (this.form.userId.activated && this.form.userId.value !== '')obj.userId = this.form.userId.value
+      if (this.form.experimentId.activated && this.form.experimentId.value !== '')obj.experimentId = this.form.experimentId.value
+      if (this.form.experimentName.activated && this.form.experimentName.value !== '')obj.experimentName = this.form.experimentName.value
+      if (this.form.sceneName.activated && this.form.sceneName.value !== '')obj.sceneName = this.form.sceneName.value
+
+      // eslint-disable-next-line no-div-regex
+      const q = btoa(JSON.stringify(obj)).replace(/=/g, '')
+      this.linkOutput = `${this.form.webAppUrl}/#/?q=${q}`
+      this.dataOutput = JSON.stringify(obj, null, 2)
+    }
+  }
+}
+</script>