mirror of
https://github.com/Luzifer/twitch-bot.git
synced 2024-12-30 08:31:16 +00:00
Remove old interface
Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
parent
b90d9b3228
commit
7315ef3ae2
SSH key fingerprint:
SHA256:/xtE5lCgiRDQr8SLxHMS92ZBlACmATUmF1crK16Ks4E
10 changed files with 0 additions and 4571 deletions
|
|
@ -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'],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
356
src/app.vue
356
src/app.vue
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
26
src/const.js
26
src/const.js
|
|
@ -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}$/
|
|
||||||
|
|
@ -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…</p>
|
|
||||||
<b-form-checkbox-group
|
|
||||||
id="channelPermissions"
|
|
||||||
v-model="models.channelPermissions"
|
|
||||||
:options="extendedPermissions"
|
|
||||||
multiple
|
|
||||||
:select-size="extendedPermissions.length"
|
|
||||||
stacked
|
|
||||||
switches
|
|
||||||
/>
|
|
||||||
<p class="mt-3">
|
|
||||||
…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>
|
|
||||||
118
src/main.js
118
src/main.js
|
|
@ -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,
|
|
||||||
})
|
|
||||||
1185
src/raffle.vue
1185
src/raffle.vue
File diff suppressed because it is too large
Load diff
|
|
@ -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,
|
|
||||||
})
|
|
||||||
1282
src/rules.vue
1282
src/rules.vue
File diff suppressed because it is too large
Load diff
|
|
@ -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>
|
|
||||||
Loading…
Reference in a new issue