Browse Source

Added link decoder in LinkGenerator

rigwild 11 months ago
parent
commit
a0148b2add
1 changed files with 118 additions and 53 deletions
  1. 118 53
      src/views/LinkGenerator.vue

+ 118 - 53
src/views/LinkGenerator.vue

@@ -1,6 +1,7 @@
 <template>
   <v-layout justify-center align-center>
     <v-flex xs12 sm8>
+      <!-- Link encoder -->
       <v-card>
         <v-container fluid fill-height>
           <v-layout column align-center>
@@ -10,11 +11,11 @@
               <v-form>
                 <h2>*Host configuration</h2>
                 <v-text-field
-                  v-model="form.webAppUrl"
+                  v-model="encoder.webAppUrl"
                   label="*Web application link"
                 />
                 <v-text-field
-                  v-model="form.hostConfig"
+                  v-model="encoder.hostConfig"
                   label="*Server link"
                 />
 
@@ -22,7 +23,7 @@
                 <v-layout row wrap>
                   <v-flex xs4>
                     <v-checkbox
-                      v-model="form.userId.activated"
+                      v-model="encoder.userId.activated"
                       color="primary"
                       label="User ID"
                     />
@@ -30,10 +31,10 @@
                   <v-spacer />
                   <v-flex xs8>
                     <v-text-field
-                      v-model="form.userId.value"
+                      v-model="encoder.userId.value"
                       label="User ID"
                       type="text"
-                      :disabled="!form.userId.activated"
+                      :disabled="!encoder.userId.activated"
                     />
                   </v-flex>
                 </v-layout>
@@ -41,7 +42,7 @@
                 <v-layout row wrap>
                   <v-flex xs4>
                     <v-checkbox
-                      v-model="form.experimentId.activated"
+                      v-model="encoder.experimentId.activated"
                       color="primary"
                       label="Experiment ID"
                     />
@@ -49,10 +50,10 @@
                   <v-spacer />
                   <v-flex xs8>
                     <v-text-field
-                      v-model="form.experimentId.value"
+                      v-model="encoder.experimentId.value"
                       label="Experiment ID"
                       type="text"
-                      :disabled="!form.experimentId.activated"
+                      :disabled="!encoder.experimentId.activated"
                     />
                   </v-flex>
                 </v-layout>
@@ -62,20 +63,20 @@
                 <v-layout row wrap>
                   <v-flex xs4>
                     <v-checkbox
-                      v-model="form.experimentName.activated"
+                      v-model="encoder.experimentName.activated"
                       color="primary"
                       label="Experiment name"
-                      @click="form.sceneName.activated = false"
+                      @click="encoder.sceneName.activated = false"
                     />
                   </v-flex>
                   <v-flex xs8>
                     <v-select
-                      v-model="form.experimentName.value"
-                      :items="experimentsSelectItems"
+                      v-model="encoder.experimentName.value"
+                      :items="encoder.experimentsSelectItems"
                       item-text="text"
                       item-value="value"
                       label="Experiment name"
-                      :disabled="!form.experimentName.activated"
+                      :disabled="!encoder.experimentName.activated"
                     />
                   </v-flex>
                 </v-layout>
@@ -83,48 +84,77 @@
                 <v-layout row wrap>
                   <v-flex xs4>
                     <v-checkbox
-                      v-model="form.sceneName.activated"
+                      v-model="encoder.sceneName.activated"
                       color="primary"
                       label="Scene name"
-                      :disabled="!form.experimentName.activated || form.experimentName.value === ''"
+                      :disabled="!encoder.experimentName.activated || encoder.experimentName.value === ''"
                     />
                   </v-flex>
                   <v-spacer />
                   <v-flex xs8>
                     <v-select
-                      v-model="form.sceneName.value"
-                      :items="scenesSelectItems"
+                      v-model="encoder.sceneName.value"
+                      :items="encoder.scenesSelectItems"
                       item-text="text"
                       item-value="value"
                       label="Scene name"
-                      :disabled="!form.sceneName.activated"
+                      :disabled="!encoder.sceneName.activated"
                     />
                   </v-flex>
                 </v-layout>
 
                 <v-btn color="primary" @click="generateLink">Generate link</v-btn>
 
-                <div v-if="linkOutput && dataOutput">
+                <div v-if="encoder.linkOutput && encoder.dataOutput">
                   <h2 class="mt-5">Result</h2>
                   <v-textarea
-                    :value="linkOutput"
+                    :value="encoder.linkOutput"
                     label="Your generated link"
                     type="text"
                     readonly
                   />
 
                   Data in the generated link:
-                  <pre>{{ dataOutput }}</pre>
+                  <pre>{{ encoder.dataOutput }}</pre>
                 </div>
 
                 <v-slide-y-transition mode="out-in">
-                  <v-alert v-if="alertMessage" :value="true" type="info" v-text="alertMessage" />
+                  <v-alert v-if="encoder.alertMessage" :value="true" type="info" v-text="encoder.alertMessage" />
                 </v-slide-y-transition>
               </v-form>
             </v-card-text>
           </v-layout>
         </v-container>
       </v-card>
+      <!--/ Link encoder -->
+
+      <!-- Link decoder -->
+      <v-card class="mt-5">
+        <v-container fluid fill-height>
+          <v-layout column align-center>
+            <v-card-title class="headline d-block text-md-center font-weight-bold">Link decoder</v-card-title>
+
+            <v-card-text>
+              <v-form>
+                <v-text-field
+                  v-model="decoder.link"
+                  label="Link to decode"
+                />
+
+                <div v-if="decoder.dataOutput">
+                  Data in the provided link:
+                  <pre>{{ decoder.dataOutput }}</pre>
+                </div>
+
+                <v-slide-y-transition mode="out-in">
+                  <v-alert v-if="decoder.alertMessage" :value="true" type="info" v-text="decoder.alertMessage" />
+                </v-slide-y-transition>
+              </v-form>
+            </v-card-text>
+          </v-layout>
+        </v-container>
+      </v-card>
+      <!--/ Link decoder -->
     </v-flex>
   </v-layout>
 </template>
@@ -139,7 +169,7 @@ export default {
   },
   data() {
     return {
-      form: {
+      encoder: {
         webAppUrl: 'https://diran.univ-littoral.fr',
         hostConfig: 'https://diran.univ-littoral.fr',
 
@@ -161,36 +191,48 @@ export default {
         sceneName: {
           activated: false,
           value: ''
-        }
-      },
+        },
 
-      experimentsSelectItems: null,
-      scenesSelectItems: null,
+        experimentsSelectItems: null,
+        scenesSelectItems: null,
+
+        linkOutput: null,
+        dataOutput: null,
+        alertMessage: null
+      },
 
-      linkOutput: null,
-      dataOutput: null,
-      alertMessage: null
+      decoder: {
+        link: '',
+        dataOutput: null,
+        alertMessage: null
+      }
     }
   },
 
   watch: {
-    'form.experimentName.activated'(newValue) {
+    'encoder.experimentName.activated'(newValue) {
       // Reset available scenes if experiment changed
-      if (!newValue) this.scenesSelectItems = null
+      if (!newValue) this.encoder.scenesSelectItems = null
     },
-    'form.experimentName.value'(newValue) {
+    'encoder.experimentName.value'(newValue) {
       // Reset available scenes if experiment changed
-      if (newValue !== '') this.scenesSelectItems = getExperimentSceneList(this.form.experimentName.value)
+      if (newValue !== '') this.encoder.scenesSelectItems = getExperimentSceneList(this.encoder.experimentName.value)
     },
-    'form.sceneName.activated'(newValue) {
+    'encoder.sceneName.activated'(newValue) {
       // Load available scenes when sceneName is activated
-      if (newValue) this.scenesSelectItems = getExperimentSceneList(this.form.experimentName.value)
-      else this.scenesSelectItems = null
+      if (newValue) this.encoder.scenesSelectItems = getExperimentSceneList(this.encoder.experimentName.value)
+      else this.encoder.scenesSelectItems = null
+    },
+
+    'decoder.link'(newValue) {
+      this.decoder.alertMessage = null
+      if (newValue) this.decode(newValue)
+      else this.decoder.dataOutput = null
     }
   },
 
   mounted() {
-    this.experimentsSelectItems = Experiments.map(expe => ({
+    this.encoder.experimentsSelectItems = Experiments.map(expe => ({
       text: `${expe.name} - ${expe.meta.fullName}`,
       value: expe.name
     }))
@@ -201,26 +243,49 @@ export default {
       this.alertMessage = null
 
       // Check host configuration is set
-      if (this.form.webAppUrl === '' || this.form.hostConfig === '') {
-        this.alertMessage = 'The host configuration is required.'
-        this.linkOutput = null
-        this.dataOutput = null
+      if (this.encoder.webAppUrl === '' || this.encoder.hostConfig === '') {
+        this.encoder.alertMessage = 'The host configuration is required.'
+        this.encoder.linkOutput = null
+        this.encoder.dataOutput = null
         return
       }
 
       // Generate the link
-      const obj = {
-        hostConfig: this.form.hostConfig
+      let obj = {
+        hostConfig: this.encoder.hostConfig
+      }
+      if (this.encoder.userId.activated && this.encoder.userId.value !== '') obj.userId = this.encoder.userId.value
+      if (this.encoder.experimentId.activated && this.encoder.experimentId.value !== '') obj.experimentId = this.encoder.experimentId.value
+      if (this.encoder.experimentName.activated && this.encoder.experimentName.value !== '') obj.experimentName = this.encoder.experimentName.value
+      if (this.encoder.sceneName.activated && this.encoder.sceneName.value !== '') obj.sceneName = this.encoder.sceneName.value
+
+      const q = btoa(JSON.stringify(obj)).replace(/[=]/g, '')
+      this.encoder.linkOutput = `${this.encoder.webAppUrl}/#/?q=${q}`
+      this.encoder.dataOutput = JSON.stringify(obj, null, 2)
+    },
+
+    decode(link) {
+      try {
+        const matched = link.match(/\?q=(.*)/)
+        if (!matched || matched.length !== 2) throw new Error('The provided link is invalid.')
+        let q = matched[1]
+        try {
+          q = atob(q)
+        }
+        catch {
+          throw new Error('"q" is not a base64-encoded string.')
+        }
+        try {
+          q = JSON.parse(q)
+        }
+        catch {
+          throw new Error(`"q" encoded data is not JSON valid. Decoded base64 data: ${q}`)
+        }
+        this.decoder.dataOutput = JSON.stringify(q, null, 2)
+      }
+      catch (err) {
+        this.decoder.alertMessage = err.message
       }
-      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)
     }
   }
 }