feat(customvariables): get and post URLs for custom variables (#2456)

URL must be generated through UI

Requested by https://ideas.sogebot.xyz/posts/145/url-call-to-change-variable

locales/cs/ui.registry.customvariables.json

@@ -1,4 +1,7 @@
 {
+  "urls": "Adresy URL",
+  "generateurl": "Vygenerovat novou URL",
+  "show-examples": "Ukázat CURL příklady",
   "response": {
     "name": "Odpověď po nastavení",
     "default": "Výchozí",

locales/en/ui.registry.customvariables.json

@@ -1,4 +1,7 @@
 {
+  "urls": "URLs",
+  "generateurl": "Generate new URL",
+  "show-examples": "show CURL examples",
   "response": {
     "name": "Response after variable set",
     "default": "Default",

src/bot/customvariables.js

@@ -23,6 +23,53 @@ class CustomVariables {
     }
   }
 
+  async getURL(req: Request, res: Response) {
+    try {
+      const variable = (await global.db.engine.find('custom.variables'))
+        .find(variable => {
+          return _.get(variable, 'urls', []).find(url => url.id === req.params.id)
+        });
+      if (variable) {
+        if (_.get(variable.urls.find(url => url.id === req.params.id), 'access.GET', false)) {
+          return res.status(200).send({ value: await this.getValueOf(variable.variableName) });
+        } else {
+          return res.status(403).send({ error: 'This endpoint is not enabled for GET', code: 403 });
+        }
+      } else {
+        return res.status(404).send({ error: 'Variable not found', code: 404 });
+      }
+    } catch (e) {
+      res.status(500).send({ error: 'Internal Server Error', code: 500 });
+      throw e;
+    }
+  }
+
+  async postURL(req: Request, res: Response) {
+    try {
+      const variable = (await global.db.engine.find('custom.variables'))
+        .find(variable => {
+          return _.get(variable, 'urls', []).find(url => url.id === req.params.id)
+        });
+      if (variable) {
+        if (_.get(variable.urls.find(url => url.id === req.params.id), 'access.POST', false)) {
+          const value = await this.setValueOf(variable.variableName, req.body.value, {});
+          if (value.isOk) {
+            return res.status(200).send({ oldValue: variable.currentValue, value: value.updated.setValue });
+          } else {
+            return res.status(400).send({ error: 'This value is not applicable for this endpoint', code: 400 });
+          }
+        } else {
+          return res.status(403).send({ error: 'This endpoint is not enabled for POST', code: 403 });
+        }
+      } else {
+        return res.status(404).send({ error: 'Variable not found', code: 404 });
+      }
+    } catch (e) {
+      res.status(500).send({ error: 'Internal Server Error', code: 500 });
+      throw e;
+    }
+  }
+
   async addMenuAndListenersToPanel () {
     clearTimeout(this.timeouts[`${this.constructor.name}.addMenuAndListenersToPanel`]);
 
@@ -291,12 +338,6 @@ class CustomVariables {
     } else {
       // set item permission to owner if missing
       item.permission = typeof item.permission === 'undefined' ? permission.CASTERS : item.permission;
-      let [isVIP, isMod, isOwner] = await Promise.all([
-        commons.isVIP(opts.sender),
-        commons.isModerator(opts.sender),
-        commons.isOwner(opts.sender)
-      ]);
-
       if (typeof opts.sender === 'string') {
         opts.sender = {
           username: opts.sender,

src/bot/panel.js

@@ -51,6 +51,14 @@ function Panel () {
     global.systems.highlights.url(req, res)
   })
 
+  // customvariables system
+  app.get('/customvariables/:id', (req, res) => {
+    global.customvariables.getURL(req, res)
+  })
+  app.post('/customvariables/:id', (req, res) => {
+    global.customvariables.postURL(req, res)
+  })
+
   // static routing
   app.use('/dist', express.static(path.join(__dirname, '..', 'public', 'dist')))
   app.get('/popout/', this.authUser, function (req, res) {

src/panel/views/registries/custom-variables/custom-variables-edit.vue

@@ -57,6 +57,73 @@
         ></b-form-input>
       </b-form-group>
 
+      <b-form-group>
+        <label>{{translate('registry.customvariables.urls')}}</label> <b-button size="sm" :variant="showCurlExample ? 'secondary' : 'outline-secondary'" @click="showCurlExample = !showCurlExample">{{translate('registry.customvariables.show-examples')}}</b-button>
+        <b-row v-if="showCurlExample">
+          <b-col class="mb-0 p-3 mt-3 ml-3 mr-3 border">
+            <kbd style="font-size: 0.7rem;">
+              $ curl -X GET {{origin}}/customvariables/&lt;generated-id&gt; <br/>
+              { "value": "{{currentValue}}" }
+            </kbd>
+          </b-col>
+          <b-col class="mb-0 p-3 mt-3 ml-3 mr-3 border">
+            <kbd style="font-size: 0.7rem;">
+              $ curl -X POST {{origin}}/customvariables/&lt;generated-id&gt; -H "Content-Type:
+ application/json" -d '{ "value": "yourNewValue" }' <br/>
+              { "oldValue": "{{currentValue}}", "value": "yourNewValue" }
+            </kbd>
+          </b-col>
+        </b-row>
+        <b-row v-if="showCurlExample">
+          <b-col class="mb-0 p-3 mt-3 ml-3 mr-3 border">
+            <kbd style="font-size: 0.7rem;">
+              $ curl -X GET {{origin}}/customvariables/&lt;generated-id&gt; <br/>
+              { "error": "This endpoint is not enabled for GET", code: 403 }
+            </kbd>
+          </b-col>
+          <b-col class="mb-0 p-3 mt-3 ml-3 mr-3 border">
+            <kbd style="font-size: 0.7rem;">
+              $ curl -X POST {{origin}}/customvariables/&lt;generated-id&gt; -H "Content-Type:
+ application/json" -d '{ "value": "yourNewValue" }' <br/>
+              { "error": "This endpoint is not enabled for POST", code: 400 }
+            </kbd>
+          </b-col>
+        </b-row>
+        <b-row v-if="showCurlExample">
+          <b-col class="p-3 m-3"></b-col>
+          <b-col class="p-3 m-3 border">
+            <kbd style="font-size: 0.7rem;">
+              $ curl -X POST {{origin}}/customvariables/&lt;generated-id&gt; -H "Content-Type:
+ application/json" -d '{ "value": "yourNewValue" }' <br/>
+              { "error": "This value is not applicable for this endpoint", code: 400 }
+            </kbd>
+          </b-col>
+        </b-row>
+        <b-row v-if="showCurlExample">
+          <b-col class="p-3 m-3"></b-col>
+          <b-col class="p-3 m-3 border">
+            <kbd style="font-size: 0.7rem;">
+              $ curl -X POST {{origin}}/customvariables/&lt;generated-id&gt; -H "Content-Type:
+ application/json" -d '{ "value": "yourNewValue" }' <br/>
+              { "error": "This value is not applicable for this endpoint", acceptableValues: ['value1', 'value2'], code: 400 }
+            </kbd>
+          </b-col>
+        </b-row>
+        <b-list-group>
+          <b-list-group-item v-for="url of urls" :key="url.id" class="p-0 d-flex">
+            <b-button-group size="sm" class="btn-block" style="flex-basis: max-content;">
+              <b-button :variant="url.access.GET ? 'success' : 'danger'" @click="url.access.GET = !url.access.GET">GET</b-button>
+              <b-button :variant="url.access.POST ? 'success' : 'danger'" @click="url.access.POST = !url.access.POST">POST</b-button>
+            </b-button-group>
+            <div class="w-100 p-2">{{origin}}/customvariables/{{url.id}}</div>
+            <b-button-group size="sm" class="btn-block" style="flex-basis: max-content;">
+              <hold-button class="btn-danger btn-sm" icon="trash" @trigger="removeURL(url.id)"/>
+            </b-button-group>
+          </b-list-group-item>
+          <b-list-group-item button variant="info" @click="generateURL"><fa icon="plus"/> {{ translate('registry.customvariables.generateurl') }}</b-list-group-item>
+        </b-list-group>
+      </b-form-group>
+
       <b-row>
         <b-col>
           <b-form-group
@@ -216,6 +283,7 @@
 <script lang="ts">
 import { Vue, Component, Watch } from 'vue-property-decorator';
 import { chunk, orderBy, get } from 'lodash';
+import uuid from 'uuid/v4';
 
 import { codemirror } from 'vue-codemirror';
 import 'codemirror/lib/codemirror.css';
@@ -275,12 +343,15 @@ export default class customVariablesEdit extends Vue {
   selectedRunEvery: string = 'isUsed';
   runEveryX: number = 1;
 
+  showCurlExample: boolean = false;
+
   variableName: string = '';
   description: string = '';
   currentValue: string = '';
   usableOptions: string = '';
   readOnly: boolean = false;
   permission: string | null = null;
+  urls: { id: string; access: { GET: boolean; POST: boolean }}[] = [];
 
   evalValue: string = evalDefault;
   evalError: string | null = null
@@ -330,6 +401,7 @@ export default class customVariablesEdit extends Vue {
             this.selectedType = data.variable.type;
             this.responseType = data.variable.responseType;
             this.responseText = data.variable.responseText;
+            this.urls = data.variable.urls || [];
             this.permission = data.variable.permission || 0;
             this.readOnly = data.variable.readOnly || false;
             for (let h of data.history) {
@@ -376,6 +448,21 @@ export default class customVariablesEdit extends Vue {
     }
   }
 
+  get origin() {
+    return window.location.origin;
+  }
+
+  generateURL() {
+    this.urls.push({
+      id: uuid(),
+      access: { GET: false, POST: false }
+    });
+  }
+
+  removeURL(id) {
+    this.urls = this.urls.filter(o => o.id !== id);
+  }
+
   getPermissionName(id) {
     if (!id) return 'Disabled'
     const permission = this.permissions.find((o) => {
@@ -445,6 +532,7 @@ export default class customVariablesEdit extends Vue {
         variableName: this.variableName,
         description: this.description,
         currentValue: this.currentValue,
+        urls: this.urls,
         usableOptions: this.usableOptions || '',
         evalValue: this.evalValue,
         runEvery: this.selectedType === 'eval'