From f1f3e70d0d5e6e4efb35f96a9dc3d0123c88d213 Mon Sep 17 00:00:00 2001
From: Knut Ahlers <knut@ahlers.me>
Date: Thu, 13 Jun 2024 12:41:21 +0200
Subject: [PATCH] Remove old interface

Signed-off-by: Knut Ahlers <knut@ahlers.me>
---
 editor/.eslintrc.js   |  151 -----
 src/app.vue           |  356 ------------
 src/automessages.vue  |  445 --------------
 src/const.js          |   26 -
 src/generalConfig.vue |  778 -------------------------
 src/main.js           |  118 ----
 src/raffle.vue        | 1185 -------------------------------------
 src/router.js         |   35 --
 src/rules.vue         | 1282 -----------------------------------------
 src/tplEditor.vue     |  195 -------
 10 files changed, 4571 deletions(-)
 delete mode 100644 editor/.eslintrc.js
 delete mode 100644 src/app.vue
 delete mode 100644 src/automessages.vue
 delete mode 100644 src/const.js
 delete mode 100644 src/generalConfig.vue
 delete mode 100644 src/main.js
 delete mode 100644 src/raffle.vue
 delete mode 100644 src/router.js
 delete mode 100644 src/rules.vue
 delete mode 100644 src/tplEditor.vue

diff --git a/editor/.eslintrc.js b/editor/.eslintrc.js
deleted file mode 100644
index c2d2368..0000000
--- a/editor/.eslintrc.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
- * Hack to automatically load globally installed eslint modules
- * on Archlinux systems placed in /usr/lib/node_modules
- *
- * Source: https://github.com/eslint/eslint/issues/11914#issuecomment-569108633
- */
-
-const Module = require('module')
-
-const hacks = [
-  'babel-eslint',
-  'eslint-plugin-vue',
-]
-
-const ModuleFindPath = Module._findPath
-Module._findPath = (request, paths, isMain) => {
-  const r = ModuleFindPath(request, paths, isMain)
-  if (!r && hacks.includes(request)) {
-    return require.resolve(`/usr/lib/node_modules/${request}`)
-  }
-  return r
-}
-
-/*
- * ESLint configuration derived as differences from eslint:recommended
- * with changes I found useful to ensure code quality and equal formatting
- * https://eslint.org/docs/user-guide/configuring
- */
-
-module.exports = {
-  env: {
-    browser: true,
-    node: true,
-  },
-
-  extends: [
-    'plugin:vue/recommended',
-    'eslint:recommended', // https://eslint.org/docs/rules/
-  ],
-
-  globals: {
-    process: true,
-  },
-
-  parserOptions: {
-    ecmaVersion: 2020,
-    parser: 'babel-eslint',
-  },
-
-  plugins: [
-    // required to lint *.vue files
-    'vue',
-  ],
-
-  reportUnusedDisableDirectives: true,
-
-  root: true,
-
-  rules: {
-    'array-bracket-newline': ['error', { multiline: true }],
-    'array-bracket-spacing': ['error'],
-    'arrow-body-style': ['error', 'as-needed'],
-    'arrow-parens': ['error', 'as-needed'],
-    'arrow-spacing': ['error', { after: true, before: true }],
-    'block-spacing': ['error'],
-    'brace-style': ['error', '1tbs'],
-    'camelcase': ['error'],
-    'comma-dangle': ['error', 'always-multiline'],
-    'comma-spacing': ['error'],
-    'comma-style': ['error', 'last'],
-    'curly': ['error'],
-    'default-case-last': ['error'],
-    'default-param-last': ['error'],
-    'dot-location': ['error', 'property'],
-    'dot-notation': ['error'],
-    'eol-last': ['error', 'always'],
-    'eqeqeq': ['error', 'always', { null: 'ignore' }],
-    'func-call-spacing': ['error', 'never'],
-    'function-paren-newline': ['error', 'multiline'],
-    'generator-star-spacing': ['off'], // allow async-await
-    'implicit-arrow-linebreak': ['error'],
-    'indent': ['error', 2],
-    'key-spacing': ['error', { afterColon: true, beforeColon: false, mode: 'strict' }],
-    'keyword-spacing': ['error'],
-    'linebreak-style': ['error', 'unix'],
-    'lines-between-class-members': ['error'],
-    'multiline-comment-style': ['warn'],
-    'newline-per-chained-call': ['error'],
-    'no-alert': ['error'],
-    'no-console': ['off'],
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // allow debugger during development
-    'no-duplicate-imports': ['error'],
-    'no-else-return': ['error'],
-    'no-empty-function': ['error'],
-    'no-extra-parens': ['error'],
-    'no-implicit-coercion': ['error'],
-    'no-lonely-if': ['error'],
-    'no-multi-spaces': ['error'],
-    'no-multiple-empty-lines': ['warn', { max: 2, maxBOF: 0, maxEOF: 0 }],
-    'no-promise-executor-return': ['error'],
-    'no-return-assign': ['error'],
-    'no-script-url': ['error'],
-    'no-template-curly-in-string': ['error'],
-    'no-trailing-spaces': ['error'],
-    'no-unneeded-ternary': ['error'],
-    'no-unreachable-loop': ['error'],
-    'no-unsafe-optional-chaining': ['error'],
-    'no-useless-return': ['error'],
-    'no-var': ['error'],
-    'no-warning-comments': ['error'],
-    'no-whitespace-before-property': ['error'],
-    'object-curly-newline': ['error', { consistent: true }],
-    'object-curly-spacing': ['error', 'always'],
-    'object-shorthand': ['error'],
-    'padded-blocks': ['error', 'never'],
-    'prefer-arrow-callback': ['error'],
-    'prefer-const': ['error'],
-    'prefer-object-spread': ['error'],
-    'prefer-rest-params': ['error'],
-    'prefer-template': ['error'],
-    'quote-props': ['error', 'consistent-as-needed', { keywords: false }],
-    'quotes': ['error', 'single', { allowTemplateLiterals: true }],
-    'require-atomic-updates': ['error'],
-    'require-await': ['error'],
-    'semi': ['error', 'never'],
-    'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: false, ignoreMemberSort: false }],
-    'sort-keys': ['error', 'asc', { caseSensitive: true, natural: false }],
-    'space-before-blocks': ['error', 'always'],
-    'space-before-function-paren': ['error', 'never'],
-    'space-in-parens': ['error', 'never'],
-    'space-infix-ops': ['error'],
-    'space-unary-ops': ['error', { nonwords: false, words: true }],
-    'spaced-comment': ['warn', 'always'],
-    'switch-colon-spacing': ['error'],
-    'template-curly-spacing': ['error', 'never'],
-    'unicode-bom': ['error', 'never'],
-    'vue/new-line-between-multi-line-property': ['error'],
-    'vue/no-empty-component-block': ['error'],
-    'vue/no-reserved-component-names': ['error'],
-    'vue/no-template-target-blank': ['error'],
-    'vue/no-unused-properties': ['error'],
-    'vue/no-unused-refs': ['error'],
-    'vue/no-useless-mustaches': ['error'],
-    'vue/order-in-components': ['off'], // Collides with sort-keys
-    'vue/require-name-property': ['error'],
-    'vue/v-for-delimiter-style': ['error'],
-    'vue/v-on-function-call': ['error'],
-    'wrap-iife': ['error'],
-    'yoda': ['error'],
-  },
-}
diff --git a/src/app.vue b/src/app.vue
deleted file mode 100644
index c859531..0000000
--- a/src/app.vue
+++ /dev/null
@@ -1,356 +0,0 @@
-<template>
-  <div>
-    <b-navbar
-      toggleable="lg"
-      type="dark"
-      variant="primary"
-      class="mb-3"
-    >
-      <b-navbar-brand :to="{ name: 'general-config' }">
-        <font-awesome-icon
-          fixed-width
-          class="mr-1"
-          :icon="['fas', 'robot']"
-        />
-        Twitch-Bot
-      </b-navbar-brand>
-
-      <b-navbar-toggle target="nav-collapse" />
-
-      <b-collapse
-        id="nav-collapse"
-        is-nav
-      >
-        <b-navbar-nav v-if="isAuthenticated">
-          <b-nav-item
-            :to="{ name: 'general-config' }"
-          >
-            <font-awesome-icon
-              fixed-width
-              class="mr-1"
-              :icon="['fas', 'cog']"
-            />
-            General
-          </b-nav-item>
-          <b-nav-item
-            :to="{ name: 'edit-automessages' }"
-          >
-            <font-awesome-icon
-              fixed-width
-              class="mr-1"
-              :icon="['fas', 'envelope-open-text']"
-            />
-            Auto-Messages
-          </b-nav-item>
-          <b-nav-item
-            :to="{ name: 'edit-rules' }"
-          >
-            <font-awesome-icon
-              fixed-width
-              class="mr-1"
-              :icon="['fas', 'inbox']"
-            />
-            Rules
-          </b-nav-item>
-          <b-nav-item
-            :to="{ name: 'raffle' }"
-          >
-            <font-awesome-icon
-              fixed-width
-              class="mr-1"
-              :icon="['fas', 'dice']"
-            />
-            Raffle
-          </b-nav-item>
-        </b-navbar-nav>
-
-        <b-navbar-nav class="ml-auto">
-          <b-nav-text
-            v-if="loadingData"
-          >
-            <font-awesome-icon
-              fixed-width
-              class="text-warning"
-              :icon="['fas', 'spinner']"
-              pulse
-            />
-          </b-nav-text>
-
-          <b-nav-text
-            class="ml-2"
-          >
-            <template
-              v-for="check in status.checks"
-            >
-              <font-awesome-icon
-                :id="`statusCheck${check.name}`"
-                :key="check.key"
-                fixed-width
-                :class="{ 'text-danger': !check.success, 'text-success': check.success }"
-                :icon="['fas', 'question-circle']"
-              />
-              <b-tooltip
-                :key="check.key"
-                :target="`statusCheck${check.name}`"
-                triggers="hover"
-              >
-                {{ check.description }}
-              </b-tooltip>
-            </template>
-          </b-nav-text>
-
-          <b-nav-text class="ml-2">
-            <font-awesome-icon
-              v-if="configNotifySocketConnected"
-              id="socketConnectionStatus"
-              fixed-width
-              class="mr-1 text-success"
-              :icon="['fas', 'ethernet']"
-            />
-            <font-awesome-icon
-              v-else
-              id="socketConnectionStatus"
-              fixed-width
-              class="mr-1 text-danger"
-              :icon="['fas', 'ethernet']"
-            />
-            <b-tooltip
-              target="socketConnectionStatus"
-              triggers="hover"
-            >
-              <span v-if="configNotifySocketConnected">Connected to Bot</span>
-              <span v-else>Disconnected from Bot</span>
-            </b-tooltip>
-          </b-nav-text>
-
-          <b-nav-text class="ml-2">
-            <font-awesome-icon
-              id="botInfo"
-              fixed-width
-              class="mr-1"
-              :icon="['fas', 'info-circle']"
-            />
-            <b-tooltip
-              target="botInfo"
-              triggers="hover"
-            >
-              Version: <code>{{ $root.vars.Version }}</code>
-            </b-tooltip>
-          </b-nav-text>
-        </b-navbar-nav>
-      </b-collapse>
-    </b-navbar>
-
-    <b-container>
-      <!-- Error display -->
-      <b-row
-        v-if="error"
-        class="sticky-row"
-      >
-        <b-col>
-          <b-alert
-            dismissible
-            show
-            variant="danger"
-            @dismissed="error = null"
-          >
-            <font-awesome-icon
-              fixed-width
-              class="mr-1"
-              :icon="['fas', 'exclamation-circle']"
-            />
-            {{ error }}
-          </b-alert>
-        </b-col>
-      </b-row>
-
-      <!-- Working display -->
-      <b-row
-        v-if="changePending"
-        class="sticky-row"
-      >
-        <b-col>
-          <b-alert
-            show
-            variant="info"
-          >
-            <font-awesome-icon
-              fixed-width
-              class="mr-1"
-              :icon="['fas', 'spinner']"
-              pulse
-            />
-            Your change was submitted and is pending, please wait for config to be updated!
-          </b-alert>
-        </b-col>
-      </b-row>
-
-      <!-- Logged-out state -->
-      <b-row
-        v-if="!isAuthenticated"
-      >
-        <b-col
-          class="text-center"
-        >
-          <b-button
-            :disabled="!$root.vars.TwitchClientID"
-            :href="authURL"
-            variant="twitch"
-          >
-            <font-awesome-icon
-              fixed-width
-              class="mr-1"
-              :icon="['fab', 'twitch']"
-            />
-            Login with Twitch
-          </b-button>
-        </b-col>
-      </b-row>
-
-      <!-- Logged-in state -->
-      <router-view v-else />
-    </b-container>
-  </div>
-</template>
-
-<script>
-import * as constants from './const.js'
-
-import axios from 'axios'
-
-export default {
-  computed: {
-    authURL() {
-      const scopes = []
-
-      const params = new URLSearchParams()
-      params.set('client_id', this.$root.vars.TwitchClientID)
-      params.set('redirect_uri', window.location.href.split('#')[0].split('?')[0])
-      params.set('response_type', 'token')
-      params.set('scope', scopes.join(' '))
-
-      return `https://id.twitch.tv/oauth2/authorize?${params.toString()}`
-    },
-  },
-
-  created() {
-    this.$bus.$on(constants.NOTIFY_CHANGE_PENDING, p => {
-      this.changePending = Boolean(p)
-    })
-    this.$bus.$on(constants.NOTIFY_ERROR, err => {
-      this.error = err
-    })
-    this.$bus.$on(constants.NOTIFY_FETCH_ERROR, err => {
-      this.handleFetchError(err)
-    })
-    this.$bus.$on(constants.NOTIFY_LOADING_DATA, l => {
-      this.loadingData = Boolean(l)
-    })
-  },
-
-  data() {
-    return {
-      changePending: false,
-      configNotifyBackoff: 100,
-      configNotifySocket: null,
-      configNotifySocketConnected: false,
-      error: null,
-      loadingData: false,
-      status: {},
-    }
-  },
-
-  methods: {
-    fetchStatus() {
-      return axios.get('status/status.json?fail-status=200')
-        .then(resp => {
-          this.status = resp.data
-        })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    handleFetchError(err) {
-      switch (err.response.status) {
-      case 403:
-        this.$root.authToken = null
-        this.error = 'This user is not authorized for the config editor'
-        break
-      case 502:
-        this.error = 'Looks like the bot is currently not reachable. Please check it is running and refresh the interface.'
-        break
-      default:
-        this.error = `Something went wrong: ${err.response.data} (${err.response.status})`
-      }
-    },
-
-    openConfigNotifySocket() {
-      if (this.configNotifySocket) {
-        this.configNotifySocket.close()
-        this.configNotifySocket = null
-      }
-
-      const updateBackoffAndReconnect = () => {
-        this.configNotifyBackoff = Math.min(this.configNotifyBackoff * 1.5, 10000)
-        window.setTimeout(() => this.openConfigNotifySocket(), this.configNotifyBackoff)
-      }
-
-      this.configNotifySocket = new WebSocket(`${window.location.href.split('#')[0].replace(/^http/, 'ws')}config-editor/notify-config`)
-      this.configNotifySocket.onopen = () => {
-        console.debug('[notify] Socket connected')
-        this.configNotifySocketConnected = true
-      }
-      this.configNotifySocket.onmessage = evt => {
-        const msg = JSON.parse(evt.data)
-
-        console.debug(`[notify] Socket message received type=${msg.msg_type}`)
-        this.configNotifyBackoff = 100 // We've received a message, reset backoff
-
-        if (msg.msg_type !== 'ping') {
-          this.$bus.$emit(msg.msg_type)
-        }
-      }
-      this.configNotifySocket.onclose = evt => {
-        console.debug(`[notify] Socket was closed wasClean=${evt.wasClean}`)
-        this.configNotifySocketConnected = false
-        updateBackoffAndReconnect()
-      }
-    },
-  },
-
-  mounted() {
-    if (this.isAuthenticated) {
-      this.openConfigNotifySocket()
-    }
-
-    window.setInterval(() => this.fetchStatus(), 10000)
-    this.fetchStatus()
-  },
-
-  name: 'TwitchBotEditorApp',
-
-  props: {
-    isAuthenticated: {
-      required: true,
-      type: Boolean,
-    },
-  },
-
-  watch: {
-    isAuthenticated(to) {
-      if (to && !this.configNotifySocketConnected) {
-        this.openConfigNotifySocket()
-      }
-    },
-  },
-}
-</script>
-
-<style>
-.btn-twitch {
-  background-color: #6441a5;
-}
-.sticky-row {
-  position: sticky;
-  top: 0;
-}
-</style>
diff --git a/src/automessages.vue b/src/automessages.vue
deleted file mode 100644
index bebe96d..0000000
--- a/src/automessages.vue
+++ /dev/null
@@ -1,445 +0,0 @@
-<template>
-  <div>
-    <b-row>
-      <b-col>
-        <b-table
-          key="autoMessagesTable"
-          :busy="!autoMessages"
-          :fields="autoMessageFields"
-          hover
-          :items="autoMessages"
-          striped
-        >
-          <template #cell(actions)="data">
-            <b-button-group size="sm">
-              <b-button @click="editAutoMessage(data.item)">
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'pen']"
-                />
-              </b-button>
-              <b-button
-                variant="danger"
-                @click="deleteAutoMessage(data.item.uuid)"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'minus']"
-                />
-              </b-button>
-            </b-button-group>
-          </template>
-
-          <template #cell(channel)="data">
-            <font-awesome-icon
-              fixed-width
-              class="mr-1"
-              :icon="['fas', 'hashtag']"
-            />
-            {{ data.value }}
-          </template>
-
-          <template #cell(cron)="data">
-            <code>{{ data.value }}</code>
-          </template>
-
-          <template #cell(message)="data">
-            {{ data.value }}<br>
-            <b-badge
-              v-if="data.item.disable"
-              class="mt-1 mr-1"
-              variant="danger"
-            >
-              Disabled
-            </b-badge>
-            <b-badge
-              v-if="data.item.disable_on_template"
-              class="mt-1 mr-1"
-            >
-              Disable on Template
-            </b-badge>
-            <b-badge
-              v-if="data.item.only_on_live"
-              class="mt-1 mr-1"
-            >
-              Only during Stream
-            </b-badge>
-          </template>
-
-          <template #head(actions)="">
-            <b-button-group size="sm">
-              <b-button
-                variant="success"
-                @click="newAutoMessage"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'plus']"
-                />
-              </b-button>
-            </b-button-group>
-          </template>
-        </b-table>
-      </b-col>
-    </b-row>
-
-    <!-- Auto-Message Editor -->
-    <b-modal
-      v-if="showAutoMessageEditModal"
-      hide-header-close
-      :ok-disabled="!validateAutoMessage"
-      ok-title="Save"
-      size="lg"
-      :visible="showAutoMessageEditModal"
-      title="Edit Auto-Message"
-      @hidden="showAutoMessageEditModal=false"
-      @ok="saveAutoMessage"
-    >
-      <b-row>
-        <b-col cols="8">
-          <b-form-group
-            label="Channel"
-            label-for="formAutoMessageChannel"
-          >
-            <b-input-group
-              prepend="#"
-            >
-              <b-form-input
-                id="formAutoMessageChannel"
-                v-model="models.autoMessage.channel"
-                :state="validateAutoMessageChannel"
-                type="text"
-                required
-              />
-            </b-input-group>
-          </b-form-group>
-
-          <hr>
-
-          <b-form-group
-            label="Message"
-            label-for="formAutoMessageMessage"
-          >
-            <template-editor
-              id="formAutoMessageMessage"
-              v-model="models.autoMessage.message"
-              :state="models.autoMessage.message"
-              @valid-template="valid => updateTemplateValid('autoMessage.message', valid)"
-            />
-            <div slot="description">
-              <font-awesome-icon
-                fixed-width
-                class="mr-1 text-success"
-                :icon="['fas', 'code']"
-                title="Supports Templating"
-              />
-              Ensure the template result has a length of less than {{ validateAutoMessageMessageLength }} characters (Twitch message size limit)
-            </div>
-          </b-form-group>
-
-          <b-form-group>
-            <b-form-checkbox
-              v-model="models.autoMessage.use_action"
-              switch
-            >
-              Send message as action (<code>/me</code>)
-            </b-form-checkbox>
-          </b-form-group>
-
-          <hr>
-
-          <b-form-group
-            label="Sending Mode"
-            label-for="formAutoMessageSendMode"
-          >
-            <b-form-select
-              id="formAutoMessageSendMode"
-              v-model="models.autoMessage.sendMode"
-              :options="autoMessageSendModes"
-            />
-          </b-form-group>
-
-          <b-form-group
-            v-if="models.autoMessage.sendMode === 'cron'"
-            label="Send at"
-            label-for="formAutoMessageCron"
-          >
-            <b-form-input
-              id="formAutoMessageCron"
-              v-model="models.autoMessage.cron"
-              :state="validateAutoMessageCron"
-              type="text"
-            />
-
-            <div slot="description">
-              <code>@every [time]</code> or Cron syntax
-            </div>
-          </b-form-group>
-
-          <b-form-group
-            v-if="models.autoMessage.sendMode === 'lines'"
-            label="Send every"
-            label-for="formAutoMessageNLines"
-          >
-            <b-input-group
-              append="Lines"
-            >
-              <b-form-input
-                id="formAutoMessageNLines"
-                v-model="models.autoMessage.message_interval"
-                type="number"
-              />
-            </b-input-group>
-          </b-form-group>
-
-          <hr>
-
-          <b-form-group>
-            <b-form-checkbox
-              v-model="models.autoMessage.only_on_live"
-              switch
-            >
-              Send only when channel is live
-            </b-form-checkbox>
-          </b-form-group>
-
-          <b-form-group>
-            <b-form-checkbox
-              v-model="models.autoMessage.disable"
-              switch
-            >
-              Disable Auto-Message entirely
-            </b-form-checkbox>
-          </b-form-group>
-
-          <b-form-group
-            label="Disable on Template"
-            label-for="formAutoMessageDisableOnTemplate"
-          >
-            <div slot="description">
-              <font-awesome-icon
-                fixed-width
-                class="mr-1 text-success"
-                :icon="['fas', 'code']"
-                title="Supports Templating"
-              />
-              Template expression resulting in <code>true</code> to disable the rule or <code>false</code> to enable it
-            </div>
-            <template-editor
-              id="formAutoMessageDisableOnTemplate"
-              v-model="models.autoMessage.disable_on_template"
-              @valid-template="valid => updateTemplateValid('autoMessage.disable_on_template', valid)"
-            />
-          </b-form-group>
-        </b-col>
-
-        <b-col cols="4">
-          <h6>Getting Help</h6>
-          <p>
-            For information about available template functions and variables to use in the <strong>Message</strong> see the <a
-              href="https://github.com/Luzifer/twitch-bot/wiki#templating"
-              rel="noopener noreferrer"
-              target="_blank"
-            >Templating</a> section of the Wiki.
-          </p>
-          <p>
-            For information about the <strong>Cron</strong> syntax have a look at the <a
-              href="https://cron.help/"
-              rel="noopener noreferrer"
-              target="_blank"
-            >cron.help</a> site. Aditionally you can use <code>@every [time]</code> syntax. The <code>[time]</code> part is in format <code>1h30m20s</code>. You can leave out every segment but need to specify the unit of every segment. So for example <code>@every 1h</code> or <code>@every 10m</code> would be a valid specification.
-          </p>
-        </b-col>
-      </b-row>
-    </b-modal>
-  </div>
-</template>
-
-<script>
-import * as constants from './const.js'
-
-import axios from 'axios'
-import TemplateEditor from './tplEditor.vue'
-
-export default {
-  components: { TemplateEditor },
-  computed: {
-    validateAutoMessage() {
-      if (!this.models.autoMessage.sendMode) {
-        return false
-      }
-
-      if (this.models.autoMessage.sendMode === 'cron' && !this.validateAutoMessageCron) {
-        return false
-      }
-
-      if (this.models.autoMessage.sendMode === 'lines' && (!this.models.autoMessage.message_interval || Number(this.models.autoMessage.message_interval) <= 0)) {
-        return false
-      }
-
-      if (!this.validateAutoMessageChannel) {
-        return false
-      }
-
-      if (Object.entries(this.templateValid).filter(e => !e[1]).length > 0) {
-        return false
-      }
-
-      return true
-    },
-
-    validateAutoMessageChannel() {
-      return Boolean(this.models.autoMessage.channel?.match(/^[a-zA-Z0-9_]{4,25}$/))
-    },
-
-    validateAutoMessageCron() {
-      if (this.models.autoMessage.sendMode !== 'cron' && !this.models.autoMessage.cron) {
-        return true
-      }
-
-      return Boolean(this.models.autoMessage.cron?.match(constants.CRON_VALIDATION))
-    },
-
-    validateAutoMessageMessageLength() {
-      return this.models.autoMessage.use_action ? 496 : 500
-    },
-  },
-
-  data() {
-    return {
-      autoMessageFields: [
-        {
-          class: 'col-1 text-nowrap',
-          key: 'channel',
-          sortable: true,
-          thClass: 'align-middle',
-        },
-        {
-          class: 'col-9',
-          key: 'message',
-          sortable: true,
-          thClass: 'align-middle',
-        },
-        {
-          class: 'col-1 text-nowrap',
-          key: 'cron',
-          thClass: 'align-middle',
-        },
-        {
-          class: 'col-1 text-right',
-          key: 'actions',
-          label: '',
-          thClass: 'align-middle',
-        },
-      ],
-
-      autoMessageSendModes: [
-        { text: 'Cron', value: 'cron' },
-        { text: 'Number of lines', value: 'lines' },
-      ],
-
-      autoMessages: [],
-
-      models: {
-        autoMessage: {},
-      },
-
-      showAutoMessageEditModal: false,
-      templateValid: {},
-    }
-  },
-
-  methods: {
-    deleteAutoMessage(uuid) {
-      this.$bvModal.msgBoxConfirm('Do you really want to delete this message?', {
-        buttonSize: 'sm',
-        cancelTitle: 'NO',
-        centered: true,
-        okTitle: 'YES',
-        okVariant: 'danger',
-        size: 'sm',
-        title: 'Please Confirm',
-      })
-        .then(val => {
-          if (!val) {
-            return
-          }
-
-          return axios.delete(`config-editor/auto-messages/${uuid}`, this.$root.axiosOptions)
-            .then(() => {
-              this.$bus.$emit(constants.NOTIFY_CHANGE_PENDING, true)
-            })
-            .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-        })
-    },
-
-    editAutoMessage(msg) {
-      this.$set(this.models, 'autoMessage', {
-        ...msg,
-        sendMode: msg.cron ? 'cron' : 'lines',
-      })
-      this.templateValid = {}
-      this.showAutoMessageEditModal = true
-    },
-
-    fetchAutoMessages() {
-      this.$bus.$emit(constants.NOTIFY_LOADING_DATA, true)
-      return axios.get('config-editor/auto-messages', this.$root.axiosOptions)
-        .then(resp => {
-          this.autoMessages = resp.data
-          this.$bus.$emit(constants.NOTIFY_CHANGE_PENDING, false)
-          this.$bus.$emit(constants.NOTIFY_LOADING_DATA, false)
-        })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    newAutoMessage() {
-      this.$set(this.models, 'autoMessage', {})
-      this.templateValid = {}
-      this.showAutoMessageEditModal = true
-    },
-
-    saveAutoMessage(evt) {
-      if (!this.validateAutoMessage) {
-        evt.preventDefault()
-        return
-      }
-
-      const obj = { ...this.models.autoMessage }
-
-      if (this.models.autoMessage.sendMode === 'cron') {
-        delete obj.message_interval
-      } else if (this.models.autoMessage.sendMode === 'lines') {
-        delete obj.cron
-        obj.message_interval = Number(obj.message_interval) // Enforce this is a number, not a string
-      }
-
-      let promise = null
-      if (obj.uuid) {
-        promise = axios.put(`config-editor/auto-messages/${obj.uuid}`, obj, this.$root.axiosOptions)
-      } else {
-        promise = axios.post(`config-editor/auto-messages`, obj, this.$root.axiosOptions)
-      }
-
-      promise.then(() => {
-        this.$bus.$emit(constants.NOTIFY_CHANGE_PENDING, true)
-      })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    updateTemplateValid(id, valid) {
-      this.$set(this.templateValid, id, valid)
-    },
-  },
-
-  mounted() {
-    this.$bus.$on(constants.NOTIFY_CONFIG_RELOAD, () => {
-      this.fetchAutoMessages()
-    })
-
-    this.fetchAutoMessages()
-  },
-
-  name: 'TwitchBotEditorAppAutomessages',
-}
-</script>
diff --git a/src/const.js b/src/const.js
deleted file mode 100644
index 8ecace1..0000000
--- a/src/const.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export const BUILTIN_TEMPLATE_FUNCTIONS = [
-  'and',
-  'call',
-  'html',
-  'index',
-  'slice',
-  'js',
-  'len',
-  'not',
-  'or',
-  'print',
-  'printf',
-  'println',
-  'urlquery',
-]
-
-export const CRON_VALIDATION = /^(?:(?:@every (?:\d+(?:s|m|h))+)|(?:(?:(?:(?:\d+,)+\d+|(?:\d+(?:\/|-)\d+)|\d+|\*|\*\/\d+)(?: |$)){5}))$/
-export const NANO = 1000000000
-
-export const NOTIFY_CHANGE_PENDING = 'changePending'
-export const NOTIFY_CONFIG_RELOAD = 'configReload'
-export const NOTIFY_ERROR = 'error'
-export const NOTIFY_FETCH_ERROR = 'fetchError'
-export const NOTIFY_LOADING_DATA = 'loadingData'
-
-export const REGEXP_USER = /^[a-z0-9_]{4,25}$/
diff --git a/src/generalConfig.vue b/src/generalConfig.vue
deleted file mode 100644
index 9cdd28b..0000000
--- a/src/generalConfig.vue
+++ /dev/null
@@ -1,778 +0,0 @@
-<template>
-  <div>
-    <b-row>
-      <b-col>
-        <b-card no-body>
-          <b-card-header>
-            <font-awesome-icon
-              fixed-width
-              class="mr-1"
-              :icon="['fas', 'hashtag']"
-            />
-            Channels
-          </b-card-header>
-          <b-list-group flush>
-            <b-list-group-item
-              v-for="channel in sortedChannels"
-              :key="channel"
-              class="d-flex align-items-center align-middle"
-            >
-              <font-awesome-icon
-                fixed-width
-                class="mr-1"
-                :icon="['fas', 'hashtag']"
-              />
-              {{ channel }}
-              <span class="ml-auto mr-2">
-                <font-awesome-icon
-                  v-if="!generalConfig.channel_has_token[channel]"
-                  :id="`channelPublicWarn${channel}`"
-                  fixed-width
-                  class="ml-1 text-danger"
-                  :icon="['fas', 'exclamation-triangle']"
-                />
-                <font-awesome-icon
-                  v-else-if="!hasAllExtendedScopes(channel)"
-                  :id="`channelPublicWarn${channel}`"
-                  fixed-width
-                  class="ml-1 text-warning"
-                  :icon="['fas', 'exclamation-triangle']"
-                />
-                <b-tooltip
-                  :target="`channelPublicWarn${channel}`"
-                  triggers="hover"
-                >
-                  <template v-if="!generalConfig.channel_has_token[channel]">
-                    Bot is not authorized to access Twitch on behalf of this channels owner (tokens are missing).
-                    Click pencil to grant permissions.
-                  </template>
-                  <template v-else>
-                    Channel is missing {{ missingExtendedScopes(channel).length }} extended permissions.
-                    Click pencil to change granted permissions.
-                  </template>
-                </b-tooltip>
-              </span>
-              <b-button-group size="sm">
-                <b-button
-                  variant="primary"
-                  @click="editChannelPermissions(channel)"
-                >
-                  <font-awesome-icon
-                    fixed-width
-                    :icon="['fas', 'pencil-alt']"
-                  />
-                </b-button>
-                <b-button
-                  variant="danger"
-                  @click="removeChannel(channel)"
-                >
-                  <font-awesome-icon
-                    fixed-width
-                    :icon="['fas', 'minus']"
-                  />
-                </b-button>
-              </b-button-group>
-            </b-list-group-item>
-
-            <b-list-group-item>
-              <b-input-group>
-                <b-form-input
-                  v-model="models.addChannel"
-                  :state="!!validateUserName(models.addChannel)"
-                  @keyup.enter="addChannel"
-                />
-                <b-input-group-append>
-                  <b-button
-                    variant="success"
-                    :disabled="!validateUserName(models.addChannel)"
-                    @click="addChannel"
-                  >
-                    <font-awesome-icon
-                      fixed-width
-                      class="mr-1"
-                      :icon="['fas', 'plus']"
-                    />
-                    Add
-                  </b-button>
-                </b-input-group-append>
-              </b-input-group>
-            </b-list-group-item>
-          </b-list-group>
-        </b-card>
-      </b-col>
-      <b-col>
-        <b-card
-          no-body
-          class="mb-3"
-        >
-          <b-card-header>
-            <font-awesome-icon
-              fixed-width
-              class="mr-1"
-              :icon="['fas', 'users']"
-            />
-            Bot-Editors
-          </b-card-header>
-          <b-list-group flush>
-            <b-list-group-item
-              v-for="editor in sortedEditors"
-              :key="editor"
-              class="d-flex align-items-center align-middle"
-            >
-              <b-avatar
-                class="mr-3"
-                :src="userProfiles[editor] ? userProfiles[editor].profile_image_url : ''"
-              />
-              <span class="mr-auto">{{ userProfiles[editor] ? userProfiles[editor].display_name : editor }}</span>
-              <b-button
-                size="sm"
-                variant="danger"
-                @click="removeEditor(editor)"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'minus']"
-                />
-              </b-button>
-            </b-list-group-item>
-
-            <b-list-group-item>
-              <b-input-group>
-                <b-form-input
-                  v-model="models.addEditor"
-                  :state="!!validateUserName(models.addEditor)"
-                  @keyup.enter="addEditor"
-                />
-                <b-input-group-append>
-                  <b-button
-                    variant="success"
-                    :disabled="!validateUserName(models.addEditor)"
-                    @click="addEditor"
-                  >
-                    <font-awesome-icon
-                      fixed-width
-                      class="mr-1"
-                      :icon="['fas', 'plus']"
-                    />
-                    Add
-                  </b-button>
-                </b-input-group-append>
-              </b-input-group>
-            </b-list-group-item>
-          </b-list-group>
-        </b-card>
-
-        <b-card
-          no-body
-        >
-          <b-card-header
-            class="d-flex align-items-center align-middle"
-          >
-            <span class="mr-auto">
-              <font-awesome-icon
-                fixed-width
-                class="mr-1"
-                :icon="['fas', 'ticket-alt']"
-              />
-              Auth-Tokens
-            </span>
-            <b-button-group size="sm">
-              <b-button
-                variant="success"
-                @click="newAPIToken"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'plus']"
-                />
-              </b-button>
-            </b-button-group>
-          </b-card-header>
-          <b-list-group flush>
-            <b-list-group-item
-              v-if="createdAPIToken"
-              variant="success"
-            >
-              Token was created, copy it within 30s as you will not see it again:<br>
-              <code>{{ createdAPIToken.token }}</code>
-            </b-list-group-item>
-
-            <b-list-group-item
-              v-for="(token, uuid) in apiTokens"
-              :key="uuid"
-              class="d-flex align-items-center align-middle"
-            >
-              <span class="mr-auto">
-                {{ token.name }}<br>
-                <b-badge
-                  v-for="module in token.modules"
-                  :key="module"
-                  class="mr-1"
-                >{{ module === '*' ? 'ANY' : module }}</b-badge>
-              </span>
-              <b-button
-                size="sm"
-                variant="danger"
-                @click="removeAPIToken(uuid)"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'minus']"
-                />
-              </b-button>
-            </b-list-group-item>
-          </b-list-group>
-        </b-card>
-      </b-col>
-      <b-col>
-        <b-card
-          no-body
-          class="mb-3"
-          :border-variant="botConnectionCardVariant"
-        >
-          <b-card-header
-            class="d-flex align-items-center align-middle"
-            :header-bg-variant="botConnectionCardVariant"
-          >
-            <span class="mr-auto">
-              <font-awesome-icon
-                fixed-width
-                class="mr-1"
-                :icon="['fas', 'sign-in-alt']"
-              />
-              Bot Connection
-            </span>
-            <template v-if="generalConfig.bot_name">
-              <code
-                id="botUserName"
-              >
-                {{ generalConfig.bot_name }}
-                <b-tooltip
-                  target="botUserName"
-                  triggers="hover"
-                >
-                  Twitch Login-Name of the bot user currently authorized
-                </b-tooltip>
-              </code>
-            </template>
-            <template v-else>
-              <font-awesome-icon
-                id="botUserNameDC"
-                fixed-width
-                class="mr-1 text-danger"
-                :icon="['fas', 'unlink']"
-              />
-              <b-tooltip
-                target="botUserNameDC"
-                triggers="hover"
-              >
-                Bot is not currently authorized!
-              </b-tooltip>
-            </template>
-          </b-card-header>
-
-          <b-card-body>
-            <p>
-              Here you can manage your bots auth-token: it's required to communicate with Twitch Chat and APIs. The access will be valid as long as you don't change the password or revoke the apps permission in your bot account.
-            </p>
-            <ul>
-              <li>Copy the URL provided below</li>
-              <li><strong>Open an inkognito tab or different browser you are not logged into Twitch or are logged in with your bot account</strong></li>
-              <li>Open the copied URL, sign in with the bot account and accept the permissions</li>
-              <li>You will see a message containing the authorized account. If this account is wrong, just start over, the token will be overwritten.</li>
-            </ul>
-            <p
-              v-if="botMissingScopes > 0"
-              class="alert alert-warning"
-            >
-              <font-awesome-icon
-                fixed-width
-                class="mr-1"
-                :icon="['fas', 'exclamation-triangle']"
-              />
-              Bot is missing {{ botMissingScopes }} of its required scopes which will cause features not to work properly. Please re-authorize the bot using the URL below.
-            </p>
-            <b-input-group>
-              <b-form-input
-                placeholder="Loading..."
-                readonly
-                :value="botAuthTokenURL"
-                @focus="$event.target.select()"
-              />
-              <b-input-group-append>
-                <b-button
-                  :variant="copyButtonVariant.botConnection"
-                  @click="copyAuthURL('botConnection')"
-                >
-                  <font-awesome-icon
-                    fixed-width
-                    class="mr-1"
-                    :icon="['fas', 'clipboard']"
-                  />
-                  Copy
-                </b-button>
-              </b-input-group-append>
-            </b-input-group>
-          </b-card-body>
-        </b-card>
-      </b-col>
-    </b-row>
-
-    <!-- API-Token Editor -->
-    <b-modal
-      v-if="showAPITokenEditModal"
-      hide-header-close
-      :ok-disabled="!validateAPIToken"
-      ok-title="Save"
-      size="md"
-      :visible="showAPITokenEditModal"
-      title="New API-Token"
-      @hidden="showAPITokenEditModal=false"
-      @ok="saveAPIToken"
-    >
-      <b-form-group
-        label="Name"
-        label-for="formAPITokenName"
-      >
-        <b-form-input
-          id="formAPITokenName"
-          v-model="models.apiToken.name"
-          :state="Boolean(models.apiToken.name)"
-          type="text"
-        />
-      </b-form-group>
-
-      <b-form-group
-        label="Enabled for Modules"
-      >
-        <b-form-checkbox-group
-          v-model="models.apiToken.modules"
-          class="mb-3"
-          :options="availableModules"
-          text-field="text"
-          value-field="value"
-        />
-      </b-form-group>
-    </b-modal>
-
-    <!-- Channel Permission Editor -->
-    <b-modal
-      v-if="showPermissionEditModal"
-      hide-footer
-      size="lg"
-      title="Edit Permissions for Channel"
-      :visible="showPermissionEditModal"
-      @hidden="showPermissionEditModal=false"
-    >
-      <b-row>
-        <b-col>
-          <p>The bot should be able to&hellip;</p>
-          <b-form-checkbox-group
-            id="channelPermissions"
-            v-model="models.channelPermissions"
-            :options="extendedPermissions"
-            multiple
-            :select-size="extendedPermissions.length"
-            stacked
-            switches
-          />
-          <p class="mt-3">
-            &hellip;on this channel.
-          </p>
-        </b-col>
-        <b-col>
-          <p>
-            In order to access non-public information as channel-point redemptions or take actions limited to the channel owner the bot needs additional permissions. The <strong>owner</strong> of the channel needs to grant those!
-          </p>
-          <ul>
-            <li>Select permissions on the left side</li>
-            <li>Copy the URL provided below</li>
-            <li>Pass the URL to the channel owner and tell them to open it with their personal account logged in</li>
-            <li>The bot will display a message containing the updated account</li>
-          </ul>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col>
-          <b-input-group>
-            <b-form-input
-              placeholder="Loading..."
-              readonly
-              :value="extendedPermissionsURL"
-              @focus="$event.target.select()"
-            />
-            <b-input-group-append>
-              <b-button
-                :variant="copyButtonVariant.channelPermission"
-                @click="copyAuthURL('channelPermission')"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  class="mr-1"
-                  :icon="['fas', 'clipboard']"
-                />
-                Copy
-              </b-button>
-            </b-input-group-append>
-          </b-input-group>
-        </b-col>
-      </b-row>
-    </b-modal>
-  </div>
-</template>
-
-<script>
-import * as constants from './const.js'
-
-import axios from 'axios'
-
-export default {
-  computed: {
-    availableModules() {
-      return [
-        { text: 'ANY', value: '*' },
-        ...[...this.modules || []].sort()
-          .filter(m => m !== 'config-editor')
-          .map(m => ({ text: m, value: m })),
-      ]
-    },
-
-    botAuthTokenURL() {
-      if (!this.authURLs || !this.authURLs.update_bot_token) {
-        return ''
-      }
-
-      let scopes = [...this.$root.vars.DefaultBotScopes]
-
-      if (this.generalConfig && this.generalConfig.channel_scopes && this.generalConfig.channel_scopes[this.generalConfig.bot_name]) {
-        scopes = [
-          ...new Set([
-            ...scopes,
-            ...this.generalConfig.channel_scopes[this.generalConfig.bot_name],
-          ]),
-        ]
-      }
-
-      const u = new URL(this.authURLs.update_bot_token)
-      u.searchParams.set('scope', scopes.join(' '))
-      return u.toString()
-    },
-
-    botConnectionCardVariant() {
-      if (this.$parent.status.overall_status_success) {
-        return 'secondary'
-      }
-      return 'warning'
-    },
-
-    botMissingScopes() {
-      let missing = 0
-
-      if (!this.generalConfig || !this.generalConfig.channel_scopes || !this.generalConfig.bot_name) {
-        return -1
-      }
-
-      const grantedScopes = [...this.generalConfig.channel_scopes[this.generalConfig.bot_name] || []]
-
-      for (const scope of this.$root.vars.DefaultBotScopes) {
-        if (!grantedScopes.includes(scope)) {
-          missing++
-        }
-      }
-
-      return missing
-    },
-
-    extendedPermissions() {
-      return Object.keys(this.authURLs.available_extended_scopes || {})
-        .map(v => ({ text: this.authURLs.available_extended_scopes[v], value: v }))
-        .sort((a, b) => a.value.localeCompare(b.value))
-    },
-
-    extendedPermissionsURL() {
-      if (!this.authURLs?.update_channel_scopes) {
-        return null
-      }
-
-      const u = new URL(this.authURLs.update_channel_scopes)
-      u.searchParams.set('scope', this.models.channelPermissions.join(' '))
-      return u.toString()
-    },
-
-    sortedChannels() {
-      return [...this.generalConfig?.channels || []].sort((a, b) => a.toLocaleLowerCase().localeCompare(b.toLocaleLowerCase()))
-    },
-
-    sortedEditors() {
-      return [...this.generalConfig?.bot_editors || []].sort((a, b) => {
-        const an = this.userProfiles[a]?.login || a
-        const bn = this.userProfiles[b]?.login || b
-
-        return an.localeCompare(bn)
-      })
-    },
-
-    validateAPIToken() {
-      return this.models.apiToken.modules.length > 0 && Boolean(this.models.apiToken.name)
-    },
-  },
-
-  data() {
-    return {
-      apiTokens: {},
-      authURLs: {},
-      copyButtonVariant: {
-        botConnection: 'primary',
-        channelPermission: 'primary',
-      },
-
-      createdAPIToken: null,
-      generalConfig: {},
-      models: {
-        addChannel: '',
-        addEditor: '',
-        apiToken: {},
-        channelPermissions: [],
-      },
-
-      modules: [],
-
-      showAPITokenEditModal: false,
-      showPermissionEditModal: false,
-      userProfiles: {},
-    }
-  },
-
-  methods: {
-    addChannel() {
-      if (!this.validateUserName(this.models.addChannel)) {
-        return
-      }
-
-      this.generalConfig.channels.push(this.models.addChannel.replace(/^#*/, ''))
-      this.models.addChannel = ''
-
-      this.updateGeneralConfig()
-    },
-
-    addEditor() {
-      if (!this.validateUserName(this.models.addEditor)) {
-        return
-      }
-
-      this.fetchProfile(this.models.addEditor)
-      this.generalConfig.bot_editors.push(this.models.addEditor)
-      this.models.addEditor = ''
-
-      this.updateGeneralConfig()
-    },
-
-    copyAuthURL(type) {
-      let prom = null
-      let btnField = null
-
-      switch (type) {
-      case 'botConnection':
-        prom = navigator.clipboard.writeText(this.botAuthTokenURL)
-        btnField = 'botConnection'
-        break
-      case 'channelPermission':
-        prom = navigator.clipboard.writeText(this.extendedPermissionsURL)
-        btnField = 'channelPermission'
-        break
-      }
-
-      return prom
-        .then(() => {
-          this.copyButtonVariant[btnField] = 'success'
-        })
-        .catch(() => {
-          this.copyButtonVariant[btnField] = 'danger'
-        })
-        .finally(() => {
-          window.setTimeout(() => {
-            this.copyButtonVariant[btnField] = 'primary'
-          }, 2000)
-        })
-    },
-
-    editChannelPermissions(channel) {
-      let permissionSet = [...this.generalConfig.channel_scopes[channel] || []]
-
-      if (channel === this.generalConfig.bot_name) {
-        permissionSet = [
-          ...permissionSet,
-          ...this.$root.vars.DefaultBotScopes,
-        ]
-      }
-
-      this.models.channelPermissions = [...new Set(permissionSet)]
-      this.showPermissionEditModal = true
-    },
-
-    fetchAPITokens() {
-      this.$bus.$emit(constants.NOTIFY_LOADING_DATA, true)
-      return axios.get('config-editor/auth-tokens', this.$root.axiosOptions)
-        .then(resp => {
-          this.apiTokens = resp.data
-        })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    fetchAuthURLs() {
-      this.$bus.$emit(constants.NOTIFY_LOADING_DATA, true)
-      return axios.get('config-editor/auth-urls', this.$root.axiosOptions)
-        .then(resp => {
-          this.authURLs = resp.data
-        })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    fetchGeneralConfig() {
-      this.$bus.$emit(constants.NOTIFY_LOADING_DATA, true)
-      return axios.get('config-editor/general', this.$root.axiosOptions)
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-        .then(resp => {
-          this.generalConfig = resp.data
-
-          const promises = []
-          for (const editor of this.generalConfig.bot_editors) {
-            promises.push(this.fetchProfile(editor))
-          }
-
-          return Promise.all(promises)
-        })
-    },
-
-    fetchModules() {
-      this.$bus.$emit(constants.NOTIFY_LOADING_DATA, true)
-      return axios.get('config-editor/modules')
-        .then(resp => {
-          this.modules = resp.data
-        })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    fetchProfile(user) {
-      this.$bus.$emit(constants.NOTIFY_LOADING_DATA, true)
-      return axios.get(`config-editor/user?user=${user}`, this.$root.axiosOptions)
-        .then(resp => {
-          this.$set(this.userProfiles, user, resp.data)
-          this.$bus.$emit(constants.NOTIFY_LOADING_DATA, false)
-        })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    hasAllExtendedScopes(channel) {
-      if (!this.generalConfig.channel_scopes[channel]) {
-        return false
-      }
-
-      for (const scope in this.authURLs.available_extended_scopes) {
-        if (!this.generalConfig.channel_scopes[channel].includes(scope)) {
-          return false
-        }
-      }
-
-      return true
-    },
-
-    missingExtendedScopes(channel) {
-      if (!this.generalConfig.channel_scopes[channel]) {
-        return Object.keys(this.authURLs.available_extended_scopes || {})
-      }
-
-      const missing = []
-
-      for (const scope in this.authURLs.available_extended_scopes) {
-        if (!this.generalConfig.channel_scopes[channel].includes(scope)) {
-          missing.push(scope)
-        }
-      }
-
-      return missing
-    },
-
-    newAPIToken() {
-      this.$set(this.models, 'apiToken', {
-        modules: [],
-        name: '',
-      })
-      this.showAPITokenEditModal = true
-    },
-
-    removeAPIToken(uuid) {
-      axios.delete(`config-editor/auth-tokens/${uuid}`, this.$root.axiosOptions)
-        .then(() => {
-          this.$bus.$emit(constants.NOTIFY_CHANGE_PENDING, true)
-        })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    removeChannel(channel) {
-      this.generalConfig.channels = this.generalConfig.channels
-        .filter(ch => ch !== channel)
-
-      this.updateGeneralConfig()
-    },
-
-    removeEditor(editor) {
-      this.generalConfig.bot_editors = this.generalConfig.bot_editors
-        .filter(ed => ed !== editor)
-
-      this.updateGeneralConfig()
-    },
-
-    saveAPIToken(evt) {
-      if (!this.validateAPIToken) {
-        evt.preventDefault()
-        return
-      }
-
-      axios.post(`config-editor/auth-tokens`, this.models.apiToken, this.$root.axiosOptions)
-        .then(resp => {
-          this.createdAPIToken = resp.data
-          this.$bus.$emit(constants.NOTIFY_CHANGE_PENDING, true)
-          window.setTimeout(() => {
-            this.createdAPIToken = null
-          }, 30000)
-        })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    updateGeneralConfig() {
-      axios.put('config-editor/general', this.generalConfig, this.$root.axiosOptions)
-        .then(() => {
-          this.$bus.$emit(constants.NOTIFY_CHANGE_PENDING, true)
-        })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    validateUserName(user) {
-      return user.match(constants.REGEXP_USER)
-    },
-  },
-
-  mounted() {
-    this.$bus.$on(constants.NOTIFY_CONFIG_RELOAD, () => {
-      Promise.all([
-        this.fetchGeneralConfig(),
-        this.fetchAPITokens(),
-        this.fetchAuthURLs(),
-      ]).then(() => {
-        this.$bus.$emit(constants.NOTIFY_CHANGE_PENDING, false)
-        this.$bus.$emit(constants.NOTIFY_LOADING_DATA, false)
-      })
-    })
-
-    Promise.all([
-      this.fetchGeneralConfig(),
-      this.fetchAPITokens(),
-      this.fetchAuthURLs(),
-      this.fetchModules(),
-    ]).then(() => this.$bus.$emit(constants.NOTIFY_LOADING_DATA, false))
-  },
-
-  name: 'TwitchBotEditorAppGeneralConfig',
-}
-</script>
diff --git a/src/main.js b/src/main.js
deleted file mode 100644
index 257b357..0000000
--- a/src/main.js
+++ /dev/null
@@ -1,118 +0,0 @@
-/* eslint-disable sort-imports */
-
-// Darkly design
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-import 'bootswatch/dist/darkly/bootstrap.css'
-
-import axios from 'axios'
-
-// Vue & BootstrapVue
-import Vue from 'vue'
-import { BootstrapVue } from 'bootstrap-vue'
-import VueRouter from 'vue-router'
-
-Vue.use(BootstrapVue)
-Vue.use(VueRouter)
-
-// FontAwesome
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { fab } from '@fortawesome/free-brands-svg-icons'
-import { fas } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
-
-library.add(fab, fas)
-Vue.component('FontAwesomeIcon', FontAwesomeIcon)
-Vue.component('FontAwesomeLayers', FontAwesomeLayers)
-
-// App
-import App from './app.vue'
-import Router from './router.js'
-
-Vue.config.devtools = process.env.NODE_ENV === 'dev'
-Vue.config.silent = process.env.NODE_ENV !== 'dev'
-
-Vue.prototype.$bus = new Vue()
-
-new Vue({
-  components: { App },
-  computed: {
-    axiosOptions() {
-      return {
-        headers: {
-          authorization: this.authToken,
-        },
-      }
-    },
-  },
-
-  data: {
-    authToken: null,
-    commonToastOpts: {
-      appendToast: true,
-      autoHideDelay: 3000,
-      bodyClass: 'd-none',
-      solid: true,
-      toaster: 'b-toaster-bottom-right',
-    },
-
-    vars: {},
-  },
-
-  el: '#app',
-
-  methods: {
-    fetchVars() {
-      return axios.get('editor/vars.json')
-        .then(resp => {
-          this.vars = resp.data
-        })
-    },
-
-    toastError(message, options = {}) {
-      this.$bvToast.toast('...', {
-        ...this.commonToastOpts,
-        ...options,
-        noAutoHide: true,
-        title: message,
-        variant: 'danger',
-      })
-    },
-
-    toastInfo(message, options = {}) {
-      this.$bvToast.toast('...', {
-        ...this.commonToastOpts,
-        ...options,
-        title: message,
-        variant: 'info',
-      })
-    },
-
-    toastSuccess(message, options = {}) {
-      this.$bvToast.toast('...', {
-        ...this.commonToastOpts,
-        ...options,
-        title: message,
-        variant: 'success',
-      })
-    },
-  },
-
-  mounted() {
-    this.fetchVars()
-
-    const params = new URLSearchParams(window.location.hash.replace(/^[#/]+/, ''))
-    if (params.has('access_token')) {
-      this.authToken = params.get('access_token') || null
-      this.$router.replace({ name: 'general-config' })
-    }
-  },
-
-  name: 'TwitchBotEditor',
-
-  render(h) {
-    return h(App, { props: { isAuthenticated: Boolean(this.authToken) } })
-  },
-
-  router: Router,
-})
diff --git a/src/raffle.vue b/src/raffle.vue
deleted file mode 100644
index f07104e..0000000
--- a/src/raffle.vue
+++ /dev/null
@@ -1,1185 +0,0 @@
-<template>
-  <div>
-    <b-row>
-      <b-col>
-        <b-table
-          :busy="!raffleTableItems"
-          :fields="raffleFields"
-          hover
-          :items="raffleTableItems"
-          striped
-          primary-key="id"
-        >
-          <template #cell(_actions)="data">
-            <b-button-group size="sm">
-              <b-button
-                v-if="data.item.status === 'planned'"
-                variant="success"
-                title="Start Raffle"
-                @click="startRaffle(data.item.id)"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'play']"
-                />
-              </b-button>
-              <b-button
-                v-else-if="data.item.status === 'active'"
-                variant="warning"
-                title="Close Raffle"
-                @click="closeRaffle(data.item.id)"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'stop']"
-                />
-              </b-button>
-              <b-button
-                v-else-if="data.item.status === 'ended'"
-                variant="warning"
-                title="Re-Open Raffle"
-                @click="reopenRaffle(data.item.id)"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'play']"
-                />
-              </b-button>
-
-              <b-button
-                variant="info"
-                :disabled="data.item.status === 'planned'"
-                title="Manage Entries"
-                @click="showEntryDialog(data.item.id)"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'people-group']"
-                />
-              </b-button>
-
-              <b-button
-                variant="primary"
-                title="Edit Raffle"
-                @click="editRaffle(data.item)"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'pen']"
-                />
-              </b-button>
-
-              <b-button
-                title="Duplicate Raffle"
-                @click="cloneRaffle(data.item.id)"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'clone']"
-                />
-              </b-button>
-
-              <b-button
-                variant="warning"
-                :disabled="data.item.status !== 'ended'"
-                title="Reset Raffle"
-                @click="resetRaffle(data.item.id)"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'recycle']"
-                />
-              </b-button>
-
-              <b-button
-                variant="danger"
-                title="Delete Raffle"
-                @click="deleteRaffle(data.item.id)"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'minus']"
-                />
-              </b-button>
-            </b-button-group>
-          </template>
-
-          <template #cell(_status)="data">
-            <font-awesome-icon
-              v-if="data.item.status == 'planned'"
-              fixed-width
-              :icon="['fas', 'pen-ruler']"
-              title="Planned"
-            />
-            <span v-else-if="data.item.status == 'active'">
-              <font-awesome-icon
-                fixed-width
-                :icon="['fas', 'spinner']"
-                spin-pulse
-                title="In Progress"
-                class="mr-1"
-              />
-              <small class="text-muted">{{ raffleTimer(data.item) }}</small>
-            </span>
-            <font-awesome-icon
-              v-else-if="data.item.status == 'ended'"
-              fixed-width
-              :icon="['fas', 'stop']"
-              title="Ended"
-            />
-            <font-awesome-icon
-              v-else
-              fixed-width
-              :icon="['fas', 'question']"
-            />
-          </template>
-
-          <template #head(_actions)="">
-            <b-button-group size="sm">
-              <b-button
-                variant="success"
-                title="Create New Raffle"
-                @click="newRaffle"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'plus']"
-                />
-              </b-button>
-
-              <b-button
-                variant="secondary"
-                title="Refresh Raffle"
-                @click="fetchRaffles"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'rotate']"
-                />
-              </b-button>
-            </b-button-group>
-          </template>
-        </b-table>
-      </b-col>
-    </b-row>
-
-    <!-- Entries Modal -->
-    <b-modal
-      v-if="showRaffleEntriesModal"
-      scrollable
-      size="lg"
-      :visible="showRaffleEntriesModal"
-      :title="`Entries: ${openedRaffle.title}`"
-      hide-footer
-      @hidden="closeEntriesModal"
-    >
-      <b-list-group
-        v-if="raffleEntries.length > 0"
-        flush
-      >
-        <b-list-group-item class="d-flex justify-content-between align-items-center">
-          <strong>{{ raffleEntries.length }} entrant(s)</strong>
-          <b-button-group size="sm">
-            <b-button
-              variant="success"
-              :disabled="openedRaffle.status !== 'ended'"
-              @click="pickWinner"
-            >
-              <font-awesome-icon
-                fixed-width
-                :icon="['fas', 'crown']"
-              />
-              Pick Winner
-            </b-button>
-            <b-button
-              variant="secondary"
-              title="Refresh Entries"
-              @click="refreshOpenendRaffle"
-            >
-              <font-awesome-icon
-                fixed-width
-                :icon="['fas', 'rotate']"
-                :spin="openedRaffleReloading"
-              />
-            </b-button>
-          </b-button-group>
-        </b-list-group-item>
-        <b-list-group-item
-          v-for="entry in raffleEntries"
-          :key="entry.id"
-        >
-          <div class="d-flex align-items-center">
-            <font-awesome-layers
-              v-if="entry.wasPicked"
-              class="mr-1"
-              :title="entry.wasRedrawn ? 'Was Redrawn' : 'Has Won'"
-            >
-              <font-awesome-icon
-                fixed-width
-                :icon="['fas', 'crown']"
-                :class="entry.wasRedrawn ? 'text-muted' : 'text-warning'"
-              />
-              <font-awesome-icon
-                v-if="entry.wasRedrawn"
-                fixed-width
-                :icon="['fas', 'slash']"
-                class="text-danger"
-              />
-            </font-awesome-layers>
-
-            <font-awesome-icon
-              v-if="entry.enteredAs === 'everyone'"
-              fixed-width
-              :icon="['fas', 'user']"
-              title="Does not Follow"
-            />
-            <font-awesome-icon
-              v-else-if="entry.enteredAs === 'follower'"
-              fixed-width
-              :icon="['fas', 'heart']"
-              title="Follower"
-            />
-            <font-awesome-icon
-              v-else-if="entry.enteredAs === 'reward'"
-              fixed-width
-              :icon="['fas', 'coins']"
-              title="Subscriber"
-            />
-            <font-awesome-icon
-              v-else-if="entry.enteredAs === 'subscriber'"
-              fixed-width
-              :icon="['fas', 'star']"
-              title="Subscriber"
-            />
-            <font-awesome-icon
-              v-else-if="entry.enteredAs === 'vip'"
-              fixed-width
-              :icon="['fas', 'gem']"
-              title="VIP"
-            />
-            <font-awesome-icon
-              v-else
-              fixed-width
-              :icon="['fas', 'question']"
-            />
-
-            <span class="ml-1">{{ entry.userDisplayName }}</span>
-            <b-badge
-              variant="secondary"
-              class="ml-auto"
-            >
-              {{ new Date(entry.enteredAt).toLocaleString() }}
-            </b-badge>
-          </div>
-          <b-row>
-            <b-col cols="11">
-              <pre
-                v-if="entry.drawResponse"
-                class="mb-0 mt-2"
-              ><code>{{ entry.drawResponse }}</code></pre>
-            </b-col>
-            <b-col cols="1">
-              <b-button
-                v-if="entry.wasPicked && !entry.wasRedrawn"
-                variant="danger"
-                size="sm"
-                title="Re-Draw Winner"
-                @click="repickWinner(entry.id)"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'recycle']"
-                />
-              </b-button>
-            </b-col>
-          </b-row>
-        </b-list-group-item>
-      </b-list-group>
-      <p
-        v-else
-        class="mb-0"
-      >
-        No one entered into this raffle.
-      </p>
-    </b-modal>
-
-    <!-- Raffle Editor -->
-    <b-modal
-      v-if="showRaffleEditModal"
-      hide-header-close
-      :ok-disabled="!validateRaffle()"
-      ok-title="Save"
-      scrollable
-      size="xl"
-      :visible="showRaffleEditModal"
-      title="Edit Raffle"
-      @hidden="showRaffleEditModal=false"
-      @ok="saveRaffle"
-    >
-      <b-row>
-        <!-- Keyword / Title -->
-        <b-col cols="3">
-          <b-form-group
-            description="Where to do the raffle?"
-            label="Channel"
-            label-for="formRaffleChannel"
-          >
-            <b-input-group prepend="#">
-              <b-form-input
-                id="formRaffleChannel"
-                v-model="models.raffle.channel"
-                type="text"
-                :state="validateRaffleChannel()"
-                :disabled="models.raffle.status !== 'planned'"
-              />
-            </b-input-group>
-          </b-form-group>
-        </b-col>
-        <b-col cols="3">
-          <b-form-group
-            description="Keyword to use in chat to enter"
-            label="Keyword"
-            label-for="formRaffleKeyword"
-          >
-            <b-form-input
-              id="formRaffleKeyword"
-              v-model="models.raffle.keyword"
-              type="text"
-              :state="validateRaffleNonEmpty(models.raffle.keyword)"
-              :disabled="models.raffle.status !== 'planned'"
-            />
-          </b-form-group>
-        </b-col>
-        <b-col cols="6">
-          <b-form-group
-            description="Title of the raffle (displayed in overview and available in chat)"
-            label="Title"
-            label-for="formRaffleTitle"
-          >
-            <b-form-input
-              id="formRaffleTitle"
-              v-model="models.raffle.title"
-              type="text"
-              :state="validateRaffleNonEmpty(models.raffle.title)"
-            />
-          </b-form-group>
-        </b-col>
-      </b-row>
-
-      <b-row class="mt-3">
-        <!-- Allow / Multiplier / Times -->
-        <b-col>
-          <b-card
-            header="Allowed Entries"
-            no-body
-          >
-            <b-list-group flush>
-              <b-list-group-item>
-                <b-form-checkbox
-                  v-model="models.raffle.allowEveryone"
-                  switch
-                  :state="validateRaffleHasAllowedEntries()"
-                  :disabled="models.raffle.status !== 'planned'"
-                >
-                  Everyone
-                </b-form-checkbox>
-              </b-list-group-item>
-              <b-list-group-item>
-                <b-form
-                  inline
-                  class="d-flex justify-content-between"
-                >
-                  <b-form-checkbox
-                    v-model="models.raffle.allowFollower"
-                    switch
-                    :state="validateRaffleHasAllowedEntries()"
-                    :disabled="models.raffle.status !== 'planned'"
-                  >
-                    Followers, since
-                  </b-form-checkbox>
-                  <b-input-group
-                    size="sm"
-                    append="min"
-                    class="col-5 px-0"
-                  >
-                    <b-form-input
-                      v-model="models.raffle.minFollowAge"
-                      class="text-right"
-                      type="number"
-                      placeholder="min. Age"
-                      min="0"
-                      :state="validateRaffleIsNumber(models.raffle.minFollowAge)"
-                      :disabled="models.raffle.status !== 'planned'"
-                    />
-                  </b-input-group>
-                </b-form>
-              </b-list-group-item>
-              <b-list-group-item>
-                <b-form-checkbox
-                  v-model="models.raffle.allowSubscriber"
-                  switch
-                  :state="validateRaffleHasAllowedEntries()"
-                  :disabled="models.raffle.status !== 'planned'"
-                >
-                  Subscribers
-                </b-form-checkbox>
-              </b-list-group-item>
-              <b-list-group-item>
-                <b-form-checkbox
-                  v-model="models.raffle.allowVIP"
-                  switch
-                  :state="validateRaffleHasAllowedEntries()"
-                  :disabled="models.raffle.status !== 'planned'"
-                >
-                  VIPs
-                </b-form-checkbox>
-              </b-list-group-item>
-            </b-list-group>
-          </b-card>
-        </b-col>
-
-        <b-col>
-          <b-card header="Luck Modifiers">
-            <b-row>
-              <b-col>
-                <b-form-group
-                  label="Followers"
-                  label-for="formRaffleMultiFollower"
-                >
-                  <b-form-input
-                    id="formRaffleMultiFollower"
-                    v-model="models.raffle.multiFollower"
-                    type="number"
-                    min="0"
-                    step="0.1"
-                    size="sm"
-                    :state="validateRaffleIsNumber(models.raffle.multiFollower)"
-                    :disabled="models.raffle.status !== 'planned'"
-                  />
-                </b-form-group>
-              </b-col>
-
-              <b-col>
-                <b-form-group
-                  label="Subs"
-                  label-for="formRaffleMultiSubs"
-                >
-                  <b-form-input
-                    id="formRaffleMultiSubs"
-                    v-model="models.raffle.multiSubscriber"
-                    type="number"
-                    min="0"
-                    step="0.1"
-                    size="sm"
-                    :state="validateRaffleIsNumber(models.raffle.multiSubscriber)"
-                    :disabled="models.raffle.status !== 'planned'"
-                  />
-                </b-form-group>
-              </b-col>
-
-              <b-col>
-                <b-form-group
-                  label="VIPs"
-                  label-for="formRaffleMultiVIP"
-                >
-                  <b-form-input
-                    id="formRaffleMultiVIP"
-                    v-model="models.raffle.multiVIP"
-                    type="number"
-                    min="0"
-                    step="0.1"
-                    size="sm"
-                    :state="validateRaffleIsNumber(models.raffle.multiVIP)"
-                    :disabled="models.raffle.status !== 'planned'"
-                  />
-                </b-form-group>
-              </b-col>
-            </b-row>
-            <b-row>
-              <b-col>
-                <b-form-text>
-                  The base amount of tickets for <strong>Everyone</strong> is always <code>1.0</code>. You can
-                  increase chances for certain user groups. Groups are checked from right to left: If the user
-                  is VIP, Sub and Follower they are assigned <strong>VIPkeyword</strong> multiplier.
-                </b-form-text>
-              </b-col>
-            </b-row>
-            <!-- -->
-          </b-card>
-        </b-col>
-
-        <b-col>
-          <b-card
-            header="Times"
-            no-body
-          >
-            <b-list-group flush>
-              <b-list-group-item class="d-flex justify-content-between align-items-center">
-                <span>Auto-Start*</span>
-                <b-form-input
-                  v-model="models.raffle.autoStartAt"
-                  class="col-7"
-                  type="datetime-local"
-                  size="sm"
-                  :min="transformISOToDateTimeLocal(new Date())"
-                  :disabled="models.raffle.status !== 'planned'"
-                />
-              </b-list-group-item>
-
-              <b-list-group-item class="d-flex justify-content-between align-items-center">
-                <span>Duration</span>
-                <b-input-group
-                  size="sm"
-                  append="min"
-                  class="col-5 px-0"
-                >
-                  <b-form-input
-                    v-model="models.raffle.closeAfter"
-                    type="number"
-                    step="1"
-                    min="0"
-                    class="text-right"
-                    :state="validateRaffleIsNumber(models.raffle.closeAfter)"
-                  />
-                </b-input-group>
-              </b-list-group-item>
-
-              <b-list-group-item class="d-flex justify-content-between align-items-center">
-                <span>Close At*</span>
-                <b-form-input
-                  v-model="models.raffle.closeAt"
-                  class="col-7"
-                  type="datetime-local"
-                  size="sm"
-                  :min="transformISOToDateTimeLocal(new Date())"
-                />
-              </b-list-group-item>
-
-              <b-list-group-item class="d-flex justify-content-between align-items-center">
-                <span>Respond in</span>
-                <b-input-group
-                  size="sm"
-                  append="sec"
-                  class="col-5 px-0"
-                >
-                  <b-form-input
-                    v-model="models.raffle.waitForResponse"
-                    type="number"
-                    step="1"
-                    min="0"
-                    class="text-right"
-                    :state="validateRaffleIsNumber(models.raffle.waitForResponse)"
-                  />
-                </b-input-group>
-              </b-list-group-item>
-
-              <b-list-group-item>
-                <b-form-text>
-                  * Optional, when <strong>Close At</strong> is specified, <strong>Duration</strong> is ignored,
-                  when no <strong>Auto-Start</strong> is specified the raffle must be started manually. If you
-                  set <strong>Respond In</strong> to 0, no chat responses from that user are recorded after
-                  picking them as winner.
-                </b-form-text>
-              </b-list-group-item>
-            </b-list-group>
-          </b-card>
-        </b-col>
-      </b-row>
-
-      <b-row class="mt-3">
-        <!-- Texts / Entries -->
-        <b-col>
-          <b-card
-            header="Texts"
-            no-body
-          >
-            <b-list-group flush>
-              <b-list-group-item class="">
-                <div class="d-flex align-items-center mb-1">
-                  <b-form-checkbox
-                    v-model="models.raffle.textEntryPost"
-                    switch
-                    class="mr-n2"
-                  >
-                    Message on successful entry
-                  </b-form-checkbox>
-                </div>
-                <template-editor
-                  v-model="models.raffle.textEntry"
-                />
-              </b-list-group-item>
-
-              <b-list-group-item class="">
-                <div class="d-flex align-items-center mb-1">
-                  <b-form-checkbox
-                    v-model="models.raffle.textEntryFailPost"
-                    switch
-                    class="mr-n2"
-                  >
-                    Message on failed entry
-                  </b-form-checkbox>
-                </div>
-                <template-editor
-                  v-model="models.raffle.textEntryFail"
-                />
-              </b-list-group-item>
-
-              <b-list-group-item class="">
-                <div class="d-flex align-items-center mb-1">
-                  <b-form-checkbox
-                    v-model="models.raffle.textWinPost"
-                    switch
-                    class="mr-n2"
-                  >
-                    Message on winner draw
-                  </b-form-checkbox>
-                </div>
-                <template-editor
-                  v-model="models.raffle.textWin"
-                />
-              </b-list-group-item>
-
-              <b-list-group-item class="">
-                <div class="d-flex justify-content-between align-items-center mb-1">
-                  <b-form-checkbox
-                    v-model="models.raffle.textReminderPost"
-                    switch
-                    class="mr-n2"
-                  >
-                    Periodic reminder
-                  </b-form-checkbox>
-                  <b-input-group
-                    prepend="every"
-                    append="min"
-                    size="sm"
-                    class="col-2 px-0"
-                  >
-                    <b-form-input
-                      v-model="models.raffle.textReminderInterval"
-                      type="number"
-                      step="1"
-                      min="0"
-                      class="text-right"
-                      :state="validateRaffleIsNumber(models.raffle.textReminderInterval)"
-                    />
-                  </b-input-group>
-                </div>
-                <template-editor
-                  v-model="models.raffle.textReminder"
-                />
-              </b-list-group-item>
-
-              <b-list-group-item class="">
-                <div class="d-flex align-items-center mb-1">
-                  <b-form-checkbox
-                    v-model="models.raffle.textClosePost"
-                    switch
-                    class="mr-n2"
-                  >
-                    Message on raffle close
-                  </b-form-checkbox>
-                </div>
-                <template-editor
-                  v-model="models.raffle.textClose"
-                />
-              </b-list-group-item>
-
-              <b-list-group-item>
-                <b-form-text>
-                  Available variables are <code>.user</code> and <code>.raffle</code> with
-                  access to all of these configurations most notably <code>.raffle.Title</code>
-                  and <code>.raffle.Keyword</code>.
-                </b-form-text>
-              </b-list-group-item>
-            </b-list-group>
-          </b-card>
-        </b-col>
-      </b-row>
-    </b-modal>
-  </div>
-</template>
-
-<script>
-import * as constants from './const.js'
-
-import axios from 'axios'
-import TemplateEditor from './tplEditor.vue'
-
-const ONE_MINUTE = 60000000000 // nanoseconds
-const ONE_SECOND = 1000000000 // nanoseconds
-
-export default {
-  components: { TemplateEditor },
-  computed: {
-    raffleEntries() {
-      const entries = [...this.openedRaffle.entries || []]
-      entries.sort((a, b) => {
-        const isWinner = e => e.wasPicked && !e.wasRedrawn
-        const wasWinnner = e => e.wasPicked && e.wasRedrawn
-
-        if (isWinner(a) && !isWinner(b)) {
-          return -1
-        } else if (isWinner(b) && !isWinner(a)) {
-          return 1
-        } else if (wasWinnner(a) && !wasWinnner(b)) {
-          return -1
-        } else if (wasWinnner(b) && !wasWinnner(a)) {
-          return 1
-        }
-
-        // Everything else: Order by ID DESC
-        return b.id - a.id
-      })
-
-      return entries
-    },
-
-    raffleTableItems() {
-      const raffles = [...this.raffles]
-      raffles.sort((a, b) => {
-        const scores = { active: 0, ended: 2, planned: 1 }
-
-        if (scores[a.status] !== scores[b.status]) {
-          return scores[a.status] - scores[b.status]
-        }
-
-        return b.id - a.id
-      })
-      return raffles
-    },
-  },
-
-  data() {
-    return {
-      models: { raffle: {} },
-      now: new Date(),
-      openedRaffle: {},
-      openedRaffleReloading: false,
-      raffleFields: [
-        {
-          class: 'col-1',
-          key: '_status',
-          label: 'Status',
-          tdClass: 'text-center align-middle',
-          thClass: 'align-middle text-center',
-        },
-        {
-          class: 'col-1',
-          key: 'channel',
-          label: 'Channel',
-          tdClass: 'align-middle',
-          thClass: 'align-middle',
-        },
-        {
-          class: 'col-1',
-          key: 'keyword',
-          label: 'Keyword',
-          tdClass: 'align-middle',
-          thClass: 'align-middle',
-        },
-        {
-          class: 'col-7',
-          key: 'title',
-          label: 'Title',
-          tdClass: 'align-middle',
-          thClass: 'align-middle',
-        },
-        {
-          class: 'col-2 text-right',
-          key: '_actions',
-          label: '',
-          tdClass: 'align-middle',
-          thClass: 'align-middle',
-        },
-      ],
-
-      raffles: [],
-      reopenRaffleDuration: 60,
-      showRaffleEditModal: false,
-      showRaffleEntriesModal: false,
-    }
-  },
-
-  methods: {
-    cloneRaffle(id) {
-      return axios.put(`raffle/${id}/clone`, {}, this.$root.axiosOptions)
-        .then(() => this.$root.toastSuccess('Raffle cloned'))
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    closeEntriesModal() {
-      this.openedRaffle = {}
-      this.showRaffleEntriesModal = false
-    },
-
-    closeRaffle(id) {
-      this.$bvModal.msgBoxConfirm('Do you really want to close entries for this raffle?', {
-        buttonSize: 'sm',
-        cancelTitle: 'NO',
-        centered: true,
-        okTitle: 'YES',
-        okVariant: 'danger',
-        size: 'sm',
-        title: 'Please Confirm',
-      })
-        .then(val => {
-          if (!val) {
-            return
-          }
-
-          return axios.put(`raffle/${id}/close`, {}, this.$root.axiosOptions)
-            .then(() => this.$root.toastSuccess('Raffle closed'))
-            .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-        })
-    },
-
-    deleteRaffle(id) {
-      this.$bvModal.msgBoxConfirm('Do you really want to delete this raffle and all its entries?', {
-        buttonSize: 'sm',
-        cancelTitle: 'NO',
-        centered: true,
-        okTitle: 'YES',
-        okVariant: 'danger',
-        size: 'sm',
-        title: 'Please Confirm',
-      })
-        .then(val => {
-          if (!val) {
-            return
-          }
-
-          return axios.delete(`raffle/${id}`, this.$root.axiosOptions)
-            .then(() => this.$root.toastSuccess('Raffle deleted'))
-            .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-        })
-    },
-
-    editRaffle(raffle) {
-      this.$set(this.models, 'raffle', raffle)
-      this.showRaffleEditModal = true
-    },
-
-    fetchRaffles() {
-      return axios.get('raffle/', this.$root.axiosOptions)
-        .then(resp => {
-          this.raffles = resp.data.map(raffle => this.transformRaffleFromDB(raffle))
-        })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    newRaffle() {
-      this.$set(this.models, 'raffle', {
-        /* eslint-disable sort-keys */
-        channel: '',
-        keyword: '!enter',
-        status: 'planned',
-        title: '',
-
-        allowEveryone: false,
-        allowFollower: true,
-        allowSubscriber: true,
-        allowVIP: true,
-        minFollowAge: 0,
-
-        multiFollower: 1.0,
-        multiSubscriber: 1.0,
-        multiVIP: 1.0,
-
-        autoStartAt: null,
-        closeAfter: 0,
-        closeAt: null,
-        waitForResponse: 30,
-
-        textClose: 'The raffle "{{ .raffle.Title }}" is closed now, you can no longer enter!',
-        textClosePost: false,
-
-        textEntry: '{{ mention .user }} you are registered, good luck!',
-        textEntryPost: true,
-
-        textEntryFail: '{{ mention .user }} couldn\'t register you, sorry.',
-        textEntryFailPost: false,
-
-        textWin: '{{ mention .user }} you won! Please speak up in chat to claim your price!',
-        textWinPost: false,
-
-        textReminder: 'We are currently doing a raffle until {{ dateInZone "15:04" .raffle.CloseAt "Europe/Berlin" }}: "{{ .raffle.Title }}" - type "{{ .raffle.Keyword }}" to enter!',
-        textReminderInterval: 15,
-        textReminderPost: false,
-        /* eslint-enable sort-keys */
-      })
-      this.showRaffleEditModal = true
-    },
-
-    pickWinner() {
-      this.openedRaffleReloading = true
-      return axios.put(`raffle/${this.openedRaffle.id}/pick`, {}, this.$root.axiosOptions)
-        .then(() => this.$root.toastSuccess('Winner picked!'))
-        .catch(() => this.$root.toastError('Could not pick winner!'))
-    },
-
-    raffleTimer(raffle) {
-      const parts = []
-      let tte = new Date(raffle.closeAt) - this.now
-
-      for (const d of [3600000, 60000, 1000]) {
-        const pt = Math.floor(tte / d)
-        parts.push(String(pt).padStart(2, '0'))
-        tte -= pt * d
-      }
-
-      return parts.join(':')
-    },
-
-    refreshOpenendRaffle() {
-      this.openedRaffleReloading = true
-      return axios.get(`raffle/${this.openedRaffle.id}`, this.$root.axiosOptions)
-        .then(resp => {
-          this.openedRaffle = resp.data
-          this.openedRaffleReloading = false
-        })
-    },
-
-    reopenRaffle(raffleId) {
-      let duration = 10
-
-      const h = this.$createElement
-      const content = h('div', {}, [
-        h('b-input-group', { props: { append: 'min' } }, [
-          h('b-form-input', {
-            class: 'text-right',
-            on: {
-              input(value) {
-                duration = Number(value)
-              },
-            },
-            props: {
-              min: '0',
-              step: '1',
-              type: 'number',
-              value: duration,
-            },
-          }),
-        ]),
-        h('b-form-text', { domProps: { innerHTML: 'The raffle will be re-opened and the "Close At" attribute will be set to the given duration from now.' } }),
-        h('b-form-text', { domProps: { innerHTML: 'This will <strong>NOT</strong> clear the entrants, so don\'t use this for another raffle, use the "Duplicate Raffle" functionality for that.' } }),
-      ])
-
-
-      this.$bvModal.msgBoxConfirm([content], {
-        buttonSize: 'sm',
-        centered: true,
-        size: 'sm',
-        title: 'Re-Open the Raffle?',
-      })
-        .then(val => {
-          if (!val) {
-            return
-          }
-
-          return axios.put(`raffle/${raffleId}/reopen?duration=${duration * 60}`, {}, this.$root.axiosOptions)
-            .then(() => this.$root.toastSuccess('Raffle re-opened'))
-            .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-        })
-    },
-
-    repickWinner(winnerId) {
-      this.openedRaffleReloading = true
-      return axios.put(`raffle/${this.openedRaffle.id}/repick/${winnerId}`, {}, this.$root.axiosOptions)
-        .then(() => this.$root.toastSuccess('Winner re-picked!'))
-        .catch(() => this.$root.toastError('Could not re-pick winner!'))
-    },
-
-    resetRaffle(id) {
-      this.$bvModal.msgBoxConfirm('Do you really want to reset this raffle?', {
-        buttonSize: 'sm',
-        cancelTitle: 'NO',
-        centered: true,
-        okTitle: 'YES',
-        okVariant: 'danger',
-        size: 'sm',
-        title: 'Please Confirm',
-      })
-        .then(val => {
-          if (!val) {
-            return
-          }
-
-          return axios.put(`raffle/${id}/reset`, {}, this.$root.axiosOptions)
-            .then(() => this.$root.toastSuccess('Raffle reset'))
-            .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-        })
-    },
-
-    saveRaffle() {
-      if (this.models.raffle.id) {
-        return axios.put(`raffle/${this.models.raffle.id}`, this.transformRaffleToDB(this.models.raffle), this.$root.axiosOptions)
-          .then(() => this.$root.toastSuccess('Raffle updated'))
-          .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-      }
-
-      return axios.post('raffle/', this.transformRaffleToDB(this.models.raffle), this.$root.axiosOptions)
-        .then(() => this.$root.toastSuccess('Raffle created'))
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    showEntryDialog(raffleId) {
-      this.openedRaffle = { id: raffleId }
-      return this.refreshOpenendRaffle()
-        .then(() => {
-          this.showRaffleEntriesModal = true
-        })
-    },
-
-    startRaffle(id) {
-      return axios.put(`raffle/${id}/start`, {}, this.$root.axiosOptions)
-        .then(() => this.$root.toastSuccess('Raffle started'))
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    transformISOToDateTimeLocal(t) {
-      const d = new Date(t)
-      d.setMinutes(d.getMinutes() - d.getTimezoneOffset())
-      return d.toISOString().slice(0, 16)
-    },
-
-    transformRaffleFromDB(raffle) {
-      return {
-        /* eslint-disable sort-keys */
-        ...raffle,
-
-        channel: raffle.channel.replace(/^#/, ''),
-
-        // Transform durations
-        closeAfter: raffle.closeAfter / ONE_MINUTE,
-        minFollowAge: raffle.minFollowAge / ONE_MINUTE,
-        textReminderInterval: raffle.textReminderInterval / ONE_MINUTE,
-        waitForResponse: raffle.waitForResponse / ONE_SECOND,
-
-        // Transform date values
-        autoStartAt: raffle.autoStartAt ? this.transformISOToDateTimeLocal(raffle.autoStartAt) : '',
-        closeAt: raffle.closeAt ? this.transformISOToDateTimeLocal(raffle.closeAt) : '',
-        /* eslint-enable sort-keys */
-      }
-    },
-
-    transformRaffleToDB(raffle) {
-      return {
-        /* eslint-disable sort-keys */
-        ...raffle,
-
-        channel: `#${raffle.channel.replace(/^#/, '')}`,
-
-        // Transform durations
-        closeAfter: Number(raffle.closeAfter) * ONE_MINUTE,
-        minFollowAge: Number(raffle.minFollowAge) * ONE_MINUTE,
-        textReminderInterval: Number(raffle.textReminderInterval) * ONE_MINUTE,
-        waitForResponse: Number(raffle.waitForResponse) * ONE_SECOND,
-
-        // Transform date values
-        autoStartAt: !raffle.autoStartAt ? null : new Date(raffle.autoStartAt).toISOString(),
-        closeAt: !raffle.closeAt ? null : new Date(raffle.closeAt).toISOString(),
-
-        // Transform numeric values
-        multiFollower: Number(raffle.multiFollower),
-        multiSubscriber: Number(raffle.multiSubscriber),
-        multiVIP: Number(raffle.multiVIP),
-        /* eslint-enable sort-keys */
-      }
-    },
-
-    validateRaffle() {
-      if (this.models.raffle.status === 'ended') {
-        // You must not modify running raffles
-        return false
-      }
-
-      for (const nf of [
-        'closeAfter', 'minFollowAge', 'textReminderInterval', 'waitForResponse',
-        'multiFollower', 'multiSubscriber', 'multiVIP',
-      ]) {
-        // You must not put text in numeric fields
-        if (this.validateRaffleIsNumber(this.models.raffle[nf]) === false) {
-          return false
-        }
-      }
-
-      if (this.validateRaffleChannel() === false) {
-        return false
-      }
-
-      for (const nef of ['keyword', 'title']) {
-        if (this.validateRaffleNonEmpty(this.models.raffle[nef]) === false) {
-          // You must fill certain fields
-          return false
-        }
-      }
-
-      if (!this.models.raffle.closeAfter && !this.models.raffle.closeAt) {
-        return false
-      }
-
-      if (this.validateRaffleHasAllowedEntries() === false) {
-        // You must allow someone to enter
-        return false
-      }
-
-      return true
-    },
-
-    validateRaffleChannel() {
-      if (!/^[a-zA-Z0-9]{4,25}$/.test(this.models.raffle.channel)) {
-        return false
-      }
-      return null
-    },
-
-    validateRaffleHasAllowedEntries() {
-      if (this.models.raffle.allowEveryone || this.models.raffle.allowFollower || this.models.raffle.allowSubscriber || this.models.raffle.allowVIP) {
-        return null
-      }
-      return false
-    },
-
-    validateRaffleIsNumber(n) {
-      if (isNaN(Number(n))) {
-        return false
-      }
-      return null
-    },
-
-    validateRaffleNonEmpty(str) {
-      if (!str || str.trim().length === 0) {
-        return false
-      }
-      return null
-    },
-  },
-
-  mounted() {
-    this.fetchRaffles()
-
-    this.$bus.$on('raffleChanged', () => {
-      this.fetchRaffles()
-
-      if (this.openedRaffle?.id) {
-        this.refreshOpenendRaffle()
-      }
-    })
-
-    this.$bus.$on('raffleEntryChanged', () => {
-      if (!this.openedRaffle?.id) {
-        // We ignore this when there is no opened raffle
-        return
-      }
-
-      this.refreshOpenendRaffle()
-    })
-
-    window.setInterval(() => {
-      this.now = new Date()
-    }, 1000)
-  },
-
-  name: 'TwitchBotEditorAppRaffle',
-}
-</script>
diff --git a/src/router.js b/src/router.js
deleted file mode 100644
index 60191fe..0000000
--- a/src/router.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/* eslint-disable sort-imports */
-
-import VueRouter from 'vue-router'
-
-import Automessages from './automessages.vue'
-import GeneralConfig from './generalConfig.vue'
-import Raffle from './raffle.vue'
-import Rules from './rules.vue'
-
-const routes = [
-  {
-    component: GeneralConfig,
-    name: 'general-config',
-    path: '/',
-  },
-  {
-    component: Automessages,
-    name: 'edit-automessages',
-    path: '/automessages',
-  },
-  {
-    component: Raffle,
-    name: 'raffle',
-    path: '/raffle',
-  },
-  {
-    component: Rules,
-    name: 'edit-rules',
-    path: '/rules',
-  },
-]
-
-export default new VueRouter({
-  routes,
-})
diff --git a/src/rules.vue b/src/rules.vue
deleted file mode 100644
index c7a8216..0000000
--- a/src/rules.vue
+++ /dev/null
@@ -1,1282 +0,0 @@
-<template>
-  <div>
-    <b-row class="mb-2">
-      <b-col>
-        <b-input-group>
-          <b-form-input
-            v-model.lazy="filter"
-            placeholder="Search in / filter rules..."
-          />
-          <b-input-group-append>
-            <b-button @click="filter = ''">
-              <font-awesome-icon
-                fixed-width
-                :icon="['fas', 'trash']"
-              />
-            </b-button>
-          </b-input-group-append>
-        </b-input-group>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col>
-        <b-table
-          key="rulesTable"
-          :busy="!rules"
-          :fields="rulesFields"
-          hover
-          :items="filteredRules"
-          striped
-        >
-          <template #cell(_actions)="data">
-            <b-button-group size="sm">
-              <b-button
-                v-if="data.item.subscribe_from"
-                disabled
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'download']"
-                />
-              </b-button>
-              <b-button
-                v-else
-                @click="editRule(data.item)"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'pen']"
-                />
-              </b-button>
-              <b-button
-                variant="danger"
-                @click="deleteRule(data.item.uuid)"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'minus']"
-                />
-              </b-button>
-            </b-button-group>
-          </template>
-
-          <template #cell(_match)="data">
-            <b-badge
-              v-for="badge in formatRuleMatch(data.item)"
-              :key="badge.key"
-              class="m-1 text-truncate text-left col-12"
-              style="max-width: 250px;"
-            >
-              <strong>{{ badge.key }}</strong> <code class="ml-2">{{ badge.value }}</code>
-            </b-badge>
-          </template>
-
-          <template #cell(_description)="data">
-            <template v-if="data.item.description">
-              {{ data.item.description }}<br>
-            </template>
-            <b-badge
-              v-if="data.item.subscribe_from"
-              class="mt-1 mr-1"
-              variant="primary"
-            >
-              Shared
-            </b-badge>
-            <b-badge
-              v-if="data.item.disable"
-              class="mt-1 mr-1"
-              variant="danger"
-            >
-              Disabled
-            </b-badge>
-            <b-badge
-              v-for="(badge, idx) in formatRuleActions(data.item)"
-              :key="`${badge}-${idx}`"
-              class="mt-1 mr-1"
-            >
-              {{ badge }}
-            </b-badge>
-          </template>
-
-          <template #head(_actions)="">
-            <b-button-group size="sm">
-              <b-button
-                variant="success"
-                @click="newRule"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'plus']"
-                />
-              </b-button>
-              <b-button
-                variant="secondary"
-                @click="showRuleSubscribeModal=true"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'download']"
-                />
-              </b-button>
-            </b-button-group>
-          </template>
-        </b-table>
-      </b-col>
-    </b-row>
-
-    <b-modal
-      v-if="showRuleSubscribeModal"
-      hide-header-close
-      :ok-disabled="!models.subscriptionURL"
-      ok-title="Subscribe"
-      size="md"
-      :visible="showRuleSubscribeModal"
-      title="Subscribe Rule"
-      @hidden="showRuleSubscribeModal=false"
-      @ok="subscribeRule"
-    >
-      <b-form-group
-        label="Rule Subscription URL"
-        label-for="formRuleSubURL"
-      >
-        <b-form-input
-          id="formRuleSubURL"
-          v-model="models.subscriptionURL"
-          :state="Boolean(models.subscriptionURL)"
-          type="text"
-        />
-      </b-form-group>
-    </b-modal>
-
-    <!-- Rule Editor -->
-    <b-modal
-      v-if="showRuleEditModal"
-      hide-header-close
-      :ok-disabled="!validateRule()"
-      ok-title="Save"
-      scrollable
-      size="xl"
-      :visible="showRuleEditModal"
-      title="Edit Rule"
-      @hidden="showRuleEditModal=false"
-      @ok="saveRule"
-    >
-      <b-row>
-        <b-col cols="6">
-          <b-form-group
-            description="Human readable description for the rules list"
-            label="Description"
-            label-for="formRuleDescription"
-          >
-            <b-form-input
-              id="formRuleDescription"
-              v-model="models.rule.description"
-              type="text"
-            />
-          </b-form-group>
-
-          <hr>
-
-          <b-tabs
-            content-class="mt-3"
-            small
-          >
-            <b-tab>
-              <div slot="title">
-                Matcher <b-badge>{{ countRuleMatchers }}</b-badge>
-              </div>
-
-              <b-form-group
-                description="Channel with leading hash: #mychannel - matches all channels if none are given"
-                label="Match Channels"
-                label-for="formRuleMatchChannels"
-              >
-                <b-form-tags
-                  id="formRuleMatchChannels"
-                  v-model="models.rule.match_channels"
-                  no-add-on-enter
-                  placeholder="Enter channels separated by space or comma"
-                  remove-on-delete
-                  separator=" ,"
-                  :tag-validator="(tag) => Boolean(tag.match(/^#[a-zA-Z0-9_]{4,25}$/))"
-                />
-              </b-form-group>
-
-              <b-form-group
-                description="Matches no events if not set"
-                label="Match Event"
-                label-for="formRuleMatchEvent"
-              >
-                <b-form-select
-                  id="formRuleMatchEvent"
-                  v-model="models.rule.match_event"
-                  :options="availableEvents"
-                />
-              </b-form-group>
-
-              <b-form-group
-                description="Regular expression to match the message, matches all messages when not set"
-                label="Match Message"
-                label-for="formRuleMatchMessage"
-              >
-                <b-form-input
-                  id="formRuleMatchMessage"
-                  v-model="models.rule.match_message"
-                  :state="models.rule.match_message__validation"
-                  type="text"
-                />
-              </b-form-group>
-
-              <b-form-group
-                description="Matches all users if none are given"
-                label="Match Users"
-                label-for="formRuleMatchUsers"
-              >
-                <b-form-tags
-                  id="formRuleMatchUsers"
-                  v-model="models.rule.match_users"
-                  no-add-on-enter
-                  placeholder="Enter usernames separated by space or comma"
-                  remove-on-delete
-                  separator=" ,"
-                  :tag-validator="(tag) => Boolean(tag.match(/^[a-z0-9_]{4,25}$/))"
-                />
-              </b-form-group>
-            </b-tab>
-
-            <b-tab>
-              <div slot="title">
-                Cooldown <b-badge>{{ countRuleCooldowns }}</b-badge>
-              </div>
-
-              <b-row>
-                <b-col>
-                  <b-form-group
-                    label="Rule Cooldown"
-                    label-for="formRuleRuleCooldown"
-                  >
-                    <b-form-input
-                      id="formRuleRuleCooldown"
-                      v-model="models.rule.cooldown"
-                      placeholder="No Cooldown"
-                      :state="validateDuration(models.rule.cooldown, false)"
-                      type="text"
-                    />
-                  </b-form-group>
-                </b-col>
-                <b-col>
-                  <b-form-group
-                    label="Channel Cooldown"
-                    label-for="formRuleChannelCooldown"
-                  >
-                    <b-form-input
-                      id="formRuleChannelCooldown"
-                      v-model="models.rule.channel_cooldown"
-                      placeholder="No Cooldown"
-                      :state="validateDuration(models.rule.channel_cooldown, false)"
-                      type="text"
-                    />
-                  </b-form-group>
-                </b-col>
-                <b-col>
-                  <b-form-group
-                    label="User Cooldown"
-                    label-for="formRuleUserCooldown"
-                  >
-                    <b-form-input
-                      id="formRuleUserCooldown"
-                      v-model="models.rule.user_cooldown"
-                      placeholder="No Cooldown"
-                      :state="validateDuration(models.rule.user_cooldown, false)"
-                      type="text"
-                    />
-                  </b-form-group>
-                </b-col>
-              </b-row>
-
-              <b-form-group
-                :description="`Available badges: ${$root.vars.IRCBadges ? $root.vars.IRCBadges.join(', ') : ''}`"
-                label="Skip Cooldown for"
-                label-for="formRuleSkipCooldown"
-              >
-                <b-form-tags
-                  id="formRuleSkipCooldown"
-                  v-model="models.rule.skip_cooldown_for"
-                  no-add-on-enter
-                  placeholder="Enter badges separated by space or comma"
-                  remove-on-delete
-                  separator=" ,"
-                  :tag-validator="validateTwitchBadge"
-                />
-              </b-form-group>
-            </b-tab>
-
-            <b-tab>
-              <div slot="title">
-                Conditions <b-badge>{{ countRuleConditions }}</b-badge>
-              </div>
-
-              <p>Disable rule&hellip;</p>
-              <b-row>
-                <b-col>
-                  <b-form-group>
-                    <b-form-checkbox
-                      v-model="models.rule.disable"
-                      switch
-                    >
-                      completely
-                    </b-form-checkbox>
-                  </b-form-group>
-                </b-col>
-                <b-col>
-                  <b-form-group>
-                    <b-form-checkbox
-                      v-model="models.rule.disable_on_offline"
-                      switch
-                    >
-                      when channel is offline
-                    </b-form-checkbox>
-                  </b-form-group>
-                </b-col>
-                <b-col>
-                  <b-form-group>
-                    <b-form-checkbox
-                      v-model="models.rule.disable_on_permit"
-                      switch
-                    >
-                      when user has permit
-                    </b-form-checkbox>
-                  </b-form-group>
-                </b-col>
-              </b-row>
-
-              <b-form-group
-                :description="`Available badges: ${$root.vars.IRCBadges ? $root.vars.IRCBadges.join(', ') : ''}`"
-                label="Disable Rule for"
-                label-for="formRuleDisableOn"
-              >
-                <b-form-tags
-                  id="formRuleDisableOn"
-                  v-model="models.rule.disable_on"
-                  no-add-on-enter
-                  placeholder="Enter badges separated by space or comma"
-                  remove-on-delete
-                  separator=" ,"
-                  :tag-validator="validateTwitchBadge"
-                />
-              </b-form-group>
-
-              <b-form-group
-                :description="`Available badges: ${$root.vars.IRCBadges ? $root.vars.IRCBadges.join(', ') : ''}`"
-                label="Enable Rule for"
-                label-for="formRuleEnableOn"
-              >
-                <b-form-tags
-                  id="formRuleEnableOn"
-                  v-model="models.rule.enable_on"
-                  no-add-on-enter
-                  placeholder="Enter badges separated by space or comma"
-                  remove-on-delete
-                  separator=" ,"
-                  :tag-validator="validateTwitchBadge"
-                />
-              </b-form-group>
-
-              <b-form-group
-                label="Disable on Template"
-                label-for="formRuleDisableOnTemplate"
-              >
-                <div slot="description">
-                  <font-awesome-icon
-                    fixed-width
-                    class="mr-1 text-success"
-                    :icon="['fas', 'code']"
-                    title="Supports Templating"
-                  />
-                  Template expression resulting in <code>true</code> to disable the rule or <code>false</code> to enable it
-                </div>
-                <template-editor
-                  id="formRuleDisableOnTemplate"
-                  v-model="models.rule.disable_on_template"
-                  @valid-template="valid => updateTemplateValid('rule.disable_on_template', valid)"
-                />
-              </b-form-group>
-            </b-tab>
-
-            <b-tab>
-              <div slot="title">
-                Exceptions <b-badge>{{ countRuleExceptions }}</b-badge>
-              </div>
-
-              <b-alert
-                show
-                variant="info"
-              >
-                <font-awesome-icon
-                  fixed-width
-                  :icon="['fas', 'info-circle']"
-                />
-                If the message does match one of these regular expressions, the rule is not executed.
-                (Use for example to disable link protection on certain messages.)
-              </b-alert>
-
-              <b-list-group flush>
-                <b-list-group-item>
-                  <b-input-group>
-                    <b-form-input
-                      v-model="models.addException"
-                      :state="!!models.addException__validation"
-                      @keyup="validateExceptionRegex"
-                      @paste="validateExceptionRegex"
-                      @keyup.enter="addException"
-                    />
-                    <b-input-group-append>
-                      <b-button
-                        variant="success"
-                        :disabled="!models.addException__validation"
-                        @click="addException"
-                      >
-                        <font-awesome-icon
-                          fixed-width
-                          class="mr-1"
-                          :icon="['fas', 'plus']"
-                        />
-                        Add
-                      </b-button>
-                    </b-input-group-append>
-                  </b-input-group>
-                </b-list-group-item>
-
-                <b-list-group-item
-                  v-for="ex in models.rule.disable_on_match_messages"
-                  :key="ex"
-                  class="d-flex align-items-center align-middle"
-                >
-                  <code class="mr-auto">{{ ex }}</code>
-                  <b-button
-                    size="sm"
-                    variant="danger"
-                    @click="removeException(ex)"
-                  >
-                    <font-awesome-icon
-                      fixed-width
-                      :icon="['fas', 'minus']"
-                    />
-                  </b-button>
-                </b-list-group-item>
-              </b-list-group>
-            </b-tab>
-          </b-tabs>
-        </b-col>
-
-        <b-col cols="6">
-          <div
-            class="accordion"
-            role="tablist"
-          >
-            <b-card
-              v-for="(action, idx) in models.rule.actions"
-              :key="`${models.rule.uuid}-action-${idx}`"
-              no-body
-              class="mb-1"
-            >
-              <b-card-header
-                header-tag="header"
-                class="p-1 d-flex"
-                role="tab"
-              >
-                <b-button-group class="flex-fill">
-                  <b-button
-                    v-b-toggle="`${models.rule.uuid}-action-${idx}`"
-                    block
-                    variant="primary"
-                  >
-                    {{ getActionDefinitionByType(action.type).name }}
-                    <font-awesome-icon
-                      v-if="actionHasValidationError(idx)"
-                      fixed-width
-                      class="mr-1 text-danger"
-                      :icon="['fas', 'exclamation-triangle']"
-                    />
-                  </b-button>
-                  <b-button
-                    :disabled="idx === 0"
-                    variant="secondary"
-                    @click="moveAction(idx, -1)"
-                  >
-                    <font-awesome-icon
-                      fixed-width
-                      class="mr-1"
-                      :icon="['fas', 'chevron-up']"
-                    />
-                  </b-button>
-                  <b-button
-                    :disabled="idx === models.rule.actions.length - 1"
-                    variant="secondary"
-                    @click="moveAction(idx, +1)"
-                  >
-                    <font-awesome-icon
-                      fixed-width
-                      class="mr-1"
-                      :icon="['fas', 'chevron-down']"
-                    />
-                  </b-button>
-                  <b-button
-                    variant="danger"
-                    @click="removeAction(idx)"
-                  >
-                    <font-awesome-icon
-                      fixed-width
-                      class="mr-1"
-                      :icon="['fas', 'trash']"
-                    />
-                  </b-button>
-                </b-button-group>
-              </b-card-header>
-              <b-collapse
-                :id="`${models.rule.uuid}-action-${idx}`"
-                accordion="my-accordion"
-                role="tabpanel"
-              >
-                <b-card-body v-if="getActionDefinitionByType(action.type).fields && getActionDefinitionByType(action.type).fields.length > 0">
-                  <template
-                    v-for="field in getActionDefinitionByType(action.type).fields"
-                  >
-                    <b-form-group
-                      v-if="field.type === 'bool'"
-                      :key="field.name"
-                    >
-                      <div slot="description">
-                        {{ field.description }}
-                      </div>
-
-                      <b-form-checkbox
-                        v-model="models.rule.actions[idx].attributes[field.key]"
-                        switch
-                      >
-                        {{ field.name }}
-                      </b-form-checkbox>
-                    </b-form-group>
-
-                    <b-form-group
-                      v-else-if="field.type === 'stringslice'"
-                      :key="field.name"
-                      :label="field.name"
-                      :label-for="`${models.rule.uuid}-action-${idx}-${field.key}`"
-                    >
-                      <div slot="description">
-                        <font-awesome-icon
-                          v-if="field.support_template"
-                          fixed-width
-                          class="mr-1 text-success"
-                          :icon="['fas', 'code']"
-                          title="Supports Templating"
-                        />
-                        {{ field.description }}
-                      </div>
-
-                      <b-form-tags
-                        :id="`${models.rule.uuid}-action-${idx}-${field.key}`"
-                        v-model="models.rule.actions[idx].attributes[field.key]"
-                        :state="validateActionArgument(idx, field.key)"
-                        placeholder="Enter elements and press enter to add the element"
-                        remove-on-delete
-                      />
-                    </b-form-group>
-
-                    <b-form-group
-                      v-else-if="field.support_template"
-                      :key="field.name"
-                      :label="field.name"
-                      :label-for="`${models.rule.uuid}-action-${idx}-${field.key}`"
-                    >
-                      <div slot="description">
-                        <font-awesome-icon
-                          fixed-width
-                          class="mr-1 text-success"
-                          :icon="['fas', 'code']"
-                          title="Supports Templating"
-                        />
-                        {{ field.description }}
-                      </div>
-
-                      <template-editor
-                        :id="`${models.rule.uuid}-action-${idx}-${field.key}`"
-                        v-model="models.rule.actions[idx].attributes[field.key]"
-                        :state="validateActionArgument(idx, field.key)"
-                        @valid-template="valid => updateTemplateValid(`${models.rule.uuid}-action-${idx}-${field.key}`, valid)"
-                      />
-                    </b-form-group>
-
-                    <b-form-group
-                      v-else
-                      :key="field.name"
-                      :label="field.name"
-                      :label-for="`${models.rule.uuid}-action-${idx}-${field.key}`"
-                    >
-                      <div slot="description">
-                        {{ field.description }}
-                      </div>
-
-                      <b-form-input
-                        :id="`${models.rule.uuid}-action-${idx}-${field.key}`"
-                        v-model="models.rule.actions[idx].attributes[field.key]"
-                        :placeholder="field.default"
-                        :required="!field.optional"
-                        :state="validateActionArgument(idx, field.key)"
-                        type="text"
-                      />
-                    </b-form-group>
-                  </template>
-                </b-card-body>
-                <b-card-body v-else>
-                  This action has no attributes.
-                </b-card-body>
-              </b-collapse>
-            </b-card>
-
-            <hr>
-
-            <b-form-group
-              :description="addActionDescription"
-              label="Add Action"
-              label-for="ruleAddAction"
-            >
-              <b-input-group>
-                <b-form-select
-                  id="ruleAddAction"
-                  v-model="models.addAction"
-                  :options="availableActionsForAdd"
-                />
-                <b-input-group-append>
-                  <b-button
-                    :disabled="!models.addAction"
-                    variant="success"
-                    @click="addAction"
-                  >
-                    <font-awesome-icon
-                      fixed-width
-                      class="mr-1"
-                      :icon="['fas', 'plus']"
-                    />
-                    Add
-                  </b-button>
-                </b-input-group-append>
-              </b-input-group>
-            </b-form-group>
-            <div />
-          </div>
-        </b-col>
-      </b-row>
-    </b-modal>
-  </div>
-</template>
-
-<script>
-import * as constants from './const.js'
-
-import axios from 'axios'
-import TemplateEditor from './tplEditor.vue'
-
-export default {
-  components: { TemplateEditor },
-  computed: {
-    addActionDescription() {
-      if (!this.models.addAction) {
-        return ''
-      }
-
-      for (const action of this.actions) {
-        if (action.type === this.models.addAction) {
-          return action.description
-        }
-      }
-
-      throw new Error('found no description for action')
-    },
-
-    availableActionsForAdd() {
-      return this.actions.map(a => ({ text: a.name, value: a.type }))
-    },
-
-    availableEvents() {
-      return [
-        { text: 'Clear Event-Matching', value: null },
-        ...this.$root.vars.KnownEvents,
-      ]
-    },
-
-    countRuleConditions() {
-      let count = 0
-      count += this.models.rule.disable ? 1 : 0
-      count += this.models.rule.disable_on_offline ? 1 : 0
-      count += this.models.rule.disable_on_permit ? 1 : 0
-      count += this.models.rule.disable_on ? 1 : 0
-      count += this.models.rule.enable_on ? 1 : 0
-      count += this.models.rule.disable_on_template ? 1 : 0
-      return count
-    },
-
-    countRuleCooldowns() {
-      let count = 0
-      count += this.models.rule.cooldown ? 1 : 0
-      count += this.models.rule.channel_cooldown ? 1 : 0
-      count += this.models.rule.user_cooldown ? 1 : 0
-      count += this.models.rule.skip_cooldown_for ? 1 : 0
-      return count
-    },
-
-    countRuleExceptions() {
-      return (this.models.rule?.disable_on_match_messages || []).length
-    },
-
-    countRuleMatchers() {
-      let count = 0
-      count += this.models.rule.match_channels ? 1 : 0
-      count += this.models.rule.match_event ? 1 : 0
-      count += this.models.rule.match_message ? 1 : 0
-      count += this.models.rule.match_users ? 1 : 0
-      return count
-    },
-
-    filteredRules() {
-      const rules = [...this.rules]
-        .filter(rule => !this.filter || rule.description?.toLocaleLowerCase().includes(this.filter?.toLocaleLowerCase()))
-      rules.sort((a, b) => a.description?.toLocaleLowerCase().localeCompare(b.description?.toLocaleLowerCase()))
-      return rules
-    },
-  },
-
-  data() {
-    return {
-      actions: [],
-      filter: '',
-      models: {
-        addAction: '',
-        addException: '',
-        rule: {},
-        subscriptionURL: '',
-      },
-
-      rules: [],
-      rulesFields: [
-        {
-          class: 'col-3',
-          key: '_match',
-          label: 'Match',
-          thClass: 'align-middle',
-        },
-        {
-          class: 'col-8',
-          key: '_description',
-          label: 'Description',
-          thClass: 'align-middle',
-        },
-        {
-          class: 'col-1 text-right',
-          key: '_actions',
-          label: '',
-          thClass: 'align-middle',
-        },
-      ],
-
-      showRuleEditModal: false,
-      showRuleSubscribeModal: false,
-      templateValid: {},
-      validateReason: null,
-    }
-  },
-
-  methods: {
-    actionHasValidationError(idx) {
-      const action = this.models.rule.actions[idx]
-      const def = this.getActionDefinitionByType(action.type)
-
-      for (const field of def.fields || []) {
-        if (!this.validateActionArgument(idx, field.key)) {
-          return true
-        }
-      }
-
-      return false
-    },
-
-    addAction() {
-      if (!this.models.rule.actions) {
-        this.$set(this.models.rule, 'actions', [])
-      }
-
-      this.models.rule.actions.push({ attributes: {}, type: this.models.addAction })
-    },
-
-    addException() {
-      this.validateRegex(this.models.addException, false)
-        .then(ok => {
-          if (!ok) {
-            return
-          }
-
-          this.models.rule.disable_on_match_messages.push(this.models.addException)
-          this.models.addException = ''
-        })
-    },
-
-    deleteRule(uuid) {
-      this.$bvModal.msgBoxConfirm('Do you really want to delete this rule?', {
-        buttonSize: 'sm',
-        cancelTitle: 'NO',
-        centered: true,
-        okTitle: 'YES',
-        okVariant: 'danger',
-        size: 'sm',
-        title: 'Please Confirm',
-      })
-        .then(val => {
-          if (!val) {
-            return
-          }
-
-          return axios.delete(`config-editor/rules/${uuid}`, this.$root.axiosOptions)
-            .then(() => {
-              this.$bus.$emit(constants.NOTIFY_CHANGE_PENDING, true)
-            })
-            .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-        })
-    },
-
-    editRule(msg) {
-      this.$set(this.models, 'rule', {
-        ...msg,
-        actions: msg.actions?.map(action => ({ ...action, attributes: action.attributes || {} })) || [],
-        channel_cooldown: this.fixDurationRepresentationToString(msg.channel_cooldown),
-        cooldown: this.fixDurationRepresentationToString(msg.cooldown),
-        user_cooldown: this.fixDurationRepresentationToString(msg.user_cooldown),
-      })
-      this.templateValid = {}
-      this.showRuleEditModal = true
-      this.validateMatcherRegex()
-    },
-
-    fetchActions() {
-      this.$bus.$emit(constants.NOTIFY_LOADING_DATA, true)
-      return axios.get('config-editor/actions')
-        .then(resp => {
-          this.actions = resp.data
-        })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    fetchRules() {
-      this.$bus.$emit(constants.NOTIFY_LOADING_DATA, true)
-      return axios.get('config-editor/rules', this.$root.axiosOptions)
-        .then(resp => {
-          this.rules = resp.data
-          this.$bus.$emit(constants.NOTIFY_CHANGE_PENDING, false)
-        })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    fixDurationRepresentationToInt64(value) {
-      let match = null
-
-      switch (typeof value) {
-      case 'string':
-        match = value.match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?/)
-        return ((Number(match[1]) || 0) * 3600 + (Number(match[2]) || 0) * 60 + (Number(match[3]) || 0)) * constants.NANO
-
-      default:
-        return value
-      }
-    },
-
-    fixDurationRepresentationToString(value) {
-      let repr = ''
-
-      switch (typeof value) {
-      case 'number':
-        value /= constants.NANO
-
-        if (value >= 3600) {
-          const h = Math.floor(value / 3600)
-          repr += `${h}h`
-          value -= h * 3600
-        }
-
-        if (value >= 60) {
-          const m = Math.floor(value / 60)
-          repr += `${m}m`
-          value -= m * 60
-        }
-
-        if (value > 0) {
-          repr += `${value}s`
-        }
-
-        return repr
-
-      default:
-        return value
-      }
-    },
-
-    formatRuleActions(rule) {
-      const badges = []
-
-      for (const action of rule.actions || []) {
-        for (const actionDefinition of this.actions) {
-          if (actionDefinition.type !== action.type) {
-            continue
-          }
-
-          badges.push(actionDefinition.name)
-        }
-      }
-
-      return badges
-    },
-
-    formatRuleMatch(rule) {
-      const badges = []
-
-      if (rule.match_channels) {
-        badges.push({ key: 'Channels', value: rule.match_channels.join(', ') })
-      }
-
-      if (rule.match_event) {
-        badges.push({ key: 'Event', value: rule.match_event })
-      }
-
-      if (rule.match_message) {
-        badges.push({ key: 'Message', value: rule.match_message })
-      }
-
-      if (rule.match_users) {
-        badges.push({ key: 'Users', value: rule.match_users.join(', ') })
-      }
-
-      return badges
-    },
-
-    getActionDefinitionByType(type) {
-      for (const ad of this.actions) {
-        if (ad.type === type) {
-          return ad
-        }
-      }
-
-      return null
-    },
-
-    moveAction(idx, direction) {
-      const tmp = [...this.models.rule.actions]
-
-      const eltmp = tmp[idx]
-      tmp[idx] = tmp[idx + direction]
-      tmp[idx + direction] = eltmp
-
-      this.$set(this.models.rule, 'actions', tmp)
-    },
-
-    newRule() {
-      this.$set(this.models, 'rule', { match_message__validation: true })
-      this.templateValid = {}
-      this.showRuleEditModal = true
-    },
-
-    removeAction(idx) {
-      this.models.rule.actions = this.models.rule.actions.filter((_, i) => i !== idx)
-    },
-
-    removeException(ex) {
-      this.models.rule.disable_on_match_messages = this.models.rule.disable_on_match_messages.filter(r => r !== ex)
-    },
-
-    saveRule(evt) {
-      if (!this.validateRule()) {
-        evt.preventDefault()
-        return
-      }
-
-      const obj = {
-        ...this.models.rule,
-        actions: this.models.rule.actions.map(action => ({
-          ...action,
-          attributes: Object.fromEntries(Object.entries(action.attributes)
-            .filter(att => {
-              const def = this.getActionDefinitionByType(action.type)
-              const field = def.fields.filter(field => field.key === att[0])[0]
-
-              if (!field) {
-                // The field is not defined, drop it
-                return false
-              }
-
-              if (att[1] === null || att[1] === undefined) {
-                // Drop null / undefined values
-                return false
-              }
-
-              // Check for zero-values and drop the field on zero-value
-              switch (field.type) {
-              case 'bool':
-                if (att[1] === false && field.optional) {
-                  return false
-                }
-                break
-
-              case 'duration':
-                if (att[1] === '0s' || att[1] === '') {
-                  return false
-                }
-                break
-
-              case 'int64':
-                if (att[1] === 0 || att[1] === '') {
-                  return false
-                }
-                break
-
-              case 'string':
-                if (att[1] === '') {
-                  return false
-                }
-                break
-
-              case 'stringslice':
-                if (att[1] === null || att[1].length === 0) {
-                  return false
-                }
-                break
-              }
-
-              return true
-            })),
-        })),
-
-        match_message: this.models.rule.match_message === '' ? null : this.models.rule.match_message,
-      }
-
-      if (obj.cooldown) {
-        obj.cooldown = this.fixDurationRepresentationToInt64(obj.cooldown)
-      } else {
-        delete obj.cooldown
-      }
-
-      if (obj.channel_cooldown) {
-        obj.channel_cooldown = this.fixDurationRepresentationToInt64(obj.channel_cooldown)
-      } else {
-        delete obj.channel_cooldown
-      }
-
-      if (obj.user_cooldown) {
-        obj.user_cooldown = this.fixDurationRepresentationToInt64(obj.user_cooldown)
-      } else {
-        delete obj.user_cooldown
-      }
-
-      let promise = null
-      if (obj.uuid) {
-        promise = axios.put(`config-editor/rules/${obj.uuid}`, obj, this.$root.axiosOptions)
-      } else {
-        promise = axios.post(`config-editor/rules`, obj, this.$root.axiosOptions)
-      }
-
-      promise.then(() => {
-        this.$bus.$emit(constants.NOTIFY_CHANGE_PENDING, true)
-      })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    subscribeRule() {
-      axios.post(`config-editor/rules`, {
-        subscribe_from: this.models.subscriptionURL,
-      }, this.$root.axiosOptions)
-        .then(() => {
-          this.models.subscriptionURL = ''
-          this.$bus.$emit(constants.NOTIFY_CHANGE_PENDING, true)
-        })
-        .catch(err => this.$bus.$emit(constants.NOTIFY_FETCH_ERROR, err))
-    },
-
-    updateTemplateValid(id, valid) {
-      this.$set(this.templateValid, id, valid)
-    },
-
-    validateActionArgument(idx, key) {
-      const action = this.models.rule.actions[idx]
-      const def = this.getActionDefinitionByType(action.type)
-
-      if (!def || !def.fields) {
-        return false
-      }
-
-      for (const field of def.fields) {
-        if (field.key !== key) {
-          continue
-        }
-
-        switch (field.type) {
-        case 'bool':
-          if (!field.optional && typeof action.attributes[field.key] !== 'boolean') {
-            return false
-          }
-          break
-
-        case 'duration':
-          if (!this.validateDuration(action.attributes[field.key], !field.optional)) {
-            return false
-          }
-          break
-
-        case 'int64':
-          if (!field.optional && !action.attributes[field.key]) {
-            return false
-          }
-
-          if (action.attributes[field.key] && isNaN(action.attributes[field.key])) {
-            return false
-          }
-
-          break
-
-        case 'string':
-          if (!field.optional && !action.attributes[field.key]) {
-            return false
-          }
-          break
-
-        case 'stringslice':
-          if (!field.optional && !action.attributes[field.key]) {
-            return false
-          }
-          break
-        }
-        break
-      }
-
-      return true
-    },
-
-    validateDuration(duration, required) {
-      if (!duration && !required) {
-        return true
-      }
-
-      if (!duration && required) {
-        return false
-      }
-
-      return Boolean(duration.match(/^(?:\d+(?:s|m|h))+$/))
-    },
-
-    validateExceptionRegex() {
-      return this.validateRegex(this.models.addException, false)
-        .then(res => this.$set(this.models, 'addException__validation', res))
-    },
-
-    validateMatcherRegex() {
-      if (this.models.rule.match_message === '') {
-        this.$set(this.models.rule, 'match_message__validation', true)
-        return
-      }
-
-      return this.validateRegex(this.models.rule.match_message, true)
-        .then(res => this.$set(this.models.rule, 'match_message__validation', res))
-    },
-
-    validateRegex(regex, allowEmpty = true) {
-      if (regex === '' && !allowEmpty) {
-        return new Promise(resolve => {
-          resolve(false)
-        })
-      }
-
-      return axios.put(`config-editor/validate-regex?regexp=${encodeURIComponent(regex)}`)
-        .then(() => true)
-        .catch(() => false)
-    },
-
-    validateRule() {
-      if (Object.entries(this.templateValid).filter(e => !e[1]).length > 0) {
-        this.validateReason = 'templateValid'
-        return false
-      }
-
-      if (!this.models.rule.match_message__validation) {
-        this.validateReason = 'rule.match_message__validation'
-        return false
-      }
-
-      if (!this.validateDuration(this.models.rule.cooldown, false)) {
-        this.validateReason = 'rule.cooldown'
-        return false
-      }
-
-      if (!this.validateDuration(this.models.rule.user_cooldown, false)) {
-        this.validateReason = 'rule.user_cooldown'
-        return false
-      }
-
-      if (!this.validateDuration(this.models.rule.channel_cooldown, false)) {
-        this.validateReason = 'rule.channel_cooldown'
-        return false
-      }
-
-      for (const action of this.models.rule.actions || []) {
-        const def = this.getActionDefinitionByType(action.type)
-        if (!def) {
-          this.validateReason = `nodef: ${action.type}`
-          return false
-        }
-
-        if (!def.fields) {
-          // No fields to check
-          continue
-        }
-
-        for (const field of def.fields) {
-          if (!field.optional && action.attributes[field.key] === undefined) {
-            this.validateReason = `${action.type} -> ${field.key} -> opt`
-            return false
-          }
-
-          if (field.type === 'duration' && !this.validateDuration(action.attributes[field.key], !field.optional)) {
-            this.validateReason = `${action.type} -> ${field.key} -> duration`
-            return false
-          }
-        }
-      }
-
-      return true
-    },
-
-    validateTwitchBadge(tag) {
-      return this.$root.vars.IRCBadges.includes(tag)
-    },
-  },
-
-  mounted() {
-    this.$bus.$on(constants.NOTIFY_CONFIG_RELOAD, () => {
-      this.fetchRules()
-        .then(() => this.$bus.$emit(constants.NOTIFY_LOADING_DATA, false))
-    })
-
-    Promise.all([
-      this.fetchRules(),
-      this.fetchActions(),
-    ]).then(() => this.$bus.$emit(constants.NOTIFY_LOADING_DATA, false))
-  },
-
-  name: 'TwitchBotEditorAppRules',
-
-  watch: {
-    'models.rule.match_message'(to, from) {
-      if (to === from) {
-        return
-      }
-
-      this.validateMatcherRegex()
-    },
-  },
-}
-</script>
diff --git a/src/tplEditor.vue b/src/tplEditor.vue
deleted file mode 100644
index 2ac2376..0000000
--- a/src/tplEditor.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-  <div>
-    <div :class="wrapClasses">
-      <div ref="editor" />
-    </div>
-    <div
-      v-if="!isValid && validationError"
-      class="d-block invalid-feedback"
-    >
-      {{ validationError }}
-    </div>
-  </div>
-</template>
-
-<script>
-import * as constants from './const.js'
-import axios from 'axios'
-import { CodeJar } from 'codejar/codejar.js'
-import Prism from 'prismjs'
-import { withLineNumbers } from 'codejar/linenumbers.js'
-
-export default {
-  computed: {
-    grammar() {
-      return {
-        template: {
-          inside: {
-            boolean: /\b(?:true|false)\b/,
-            comment: /\/\*[\s\S]*\*\//,
-            function: RegExp(`\\b(?:${[...constants.BUILTIN_TEMPLATE_FUNCTIONS, ...this.$root.vars.TemplateFunctions].join('|')})\\b`),
-            keyword: /\b(?:if|else|end|range)\b/,
-            number: /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
-            operator: /\b(?:eq|ne|lt|le|gt|ge)\b/,
-            string: {
-              greedy: true,
-              pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
-            },
-
-            variable: /(^|\s)\.\w+\b/,
-          },
-
-          pattern: /\{\{.*?\}\}/s,
-        },
-      }
-    },
-
-    wrapClasses() {
-      return {
-        'form-control': true,
-        'is-invalid': this.state === false || !this.isValid,
-        'is-valid': this.state === true && this.isValid,
-        'template-editor': true,
-      }
-    },
-  },
-
-  data() {
-    return {
-      emittedCode: '',
-      isValid: true,
-      jar: null,
-      validationError: '',
-    }
-  },
-
-  methods: {
-    highlight(editor) {
-      const code = editor.textContent
-      editor.innerHTML = Prism.highlight(code, this.grammar, 'template')
-    },
-
-    validateTemplate(template) {
-      if (template === '') {
-        this.isValid = true
-        this.validationError = ''
-        this.$emit('valid-template', true)
-        return
-      }
-
-      return axios.put(`config-editor/validate-template?template=${encodeURIComponent(template)}`)
-        .then(() => {
-          this.isValid = true
-          this.validationError = ''
-          this.$emit('valid-template', true)
-        })
-        .catch(resp => {
-          this.isValid = false
-          this.validationError = resp.response.data.split(':1:')[1]
-          this.$emit('valid-template', false)
-        })
-    },
-  },
-
-  mounted() {
-    this.jar = CodeJar(this.$refs.editor, withLineNumbers(this.highlight), {
-      indentOn: /[{(]$/,
-      tab: ' '.repeat(2),
-    })
-    this.jar.onUpdate(code => {
-      this.validateTemplate(code)
-      this.emittedCode = code
-      this.$emit('input', code)
-    })
-    this.jar.updateCode(this.value)
-  },
-
-  name: 'TwitchBotEditorAppTemplateEditor',
-
-  props: {
-    state: {
-      default: null,
-      required: false,
-      type: Boolean,
-    },
-
-    value: {
-      default: '',
-      required: false,
-      type: String,
-    },
-  },
-
-  watch: {
-    value(to, from) {
-      if (to === from || to === this.emittedCode) {
-        return
-      }
-
-      this.jar.updateCode(to)
-    },
-  },
-}
-</script>
-
-<style>
-.template-editor {
-  color: #444;
-  font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
-  font-size: 87.5%;
-  height: fit-content;
-  padding: 0;
-}
-
-.template-editor .codejar-wrap {
-  background-color: #fff;
-  border-radius: 0.25rem;
-}
-
-.template-editor .codejar-linenumbers {
-  padding-right: 0.5em;
-  text-align: right;
-}
-
-.template-editor .codejar-linenumbers div {
-  padding-bottom: 0.5em;
-  padding-top: 0.5em;
-}
-
-.template-editor .codejar-linenumbers + div {
-  margin-left: 35px;
-  padding-bottom: 0.5em;
-  padding-left: 0.5em !important;
-  padding-top: 0.5em;
-}
-
-.template-editor .token.comment {
-	color: #7D8B99;
-}
-
-.template-editor .token.operator {
-	color: #5F6364;
-}
-
-.template-editor .token.boolean,
-.template-editor .token.number {
-	color: #c92c2c;
-}
-
-.template-editor .token.keyword {
-  color: #e83e8c;
-}
-
-.template-editor .token.string {
-	color: #2f9c0a;
-}
-
-.template-editor .token.variable {
-	color: #a67f59;
-	background: rgba(255, 255, 255, 0.5);
-}
-
-.template-editor .token.function {
-	color: #1990b8;
-}
-</style>