Add botauth component

Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
Knut Ahlers 2024-07-13 12:33:56 +02:00
parent 1ea10da921
commit c74e122c38
Signed by: luzifer
SSH key fingerprint: SHA256:/xtE5lCgiRDQr8SLxHMS92ZBlACmATUmF1crK16Ks4E
3 changed files with 129 additions and 1 deletions

117
src/components/botauth.vue Normal file
View file

@ -0,0 +1,117 @@
<template>
<div class="container my-3 user-select-none">
<div class="row justify-content-center">
<div class="col col-9">
<div class="card">
<div class="card-header">
{{ $t('botauth.heading') }}
</div>
<div class="card-body">
<p>{{ $t('botauth.description') }}</p>
<ol>
<li
v-for="msg in $tm('botauth.directives')"
:key="msg"
>
{{ msg }}
</li>
</ol>
<div class="input-group">
<input
type="text"
class="form-control user-select-all"
:value="authURLs?.update_bot_token || ''"
:disabled="!authURLs?.update_bot_token"
readonly
>
<button
ref="copyBtn"
class="btn btn-primary"
:disabled="!authURLs?.update_bot_token"
@click="copyAuthURL"
>
<i class="fas fa-clipboard fa-fw" />
</button>
</div>
</div>
</div>
</div>
<div class="col col-3">
<div
v-if="botProfile.profile_image_url"
class="card"
>
<div class="card-body text-center">
<p>
<img
:src="botProfile.profile_image_url"
class="img rounded-circle w-50"
>
</p>
<p class="mb-0">
<code>{{ botProfile.display_name }}</code>
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
authURLs: {} as any,
botProfile: {} as any,
generalConfig: {} as any,
}
},
methods: {
copyAuthURL(): void {
navigator.clipboard.writeText(this.authURLs.update_bot_token)
.then(() => {
const btn = this.$refs.copyBtn as Element
btn.classList.replace('btn-primary', 'btn-success')
window.setTimeout(() => btn.classList.replace('btn-success', 'btn-primary'), 2500)
})
},
fetchAuthURLs(): Promise<void> {
return fetch('config-editor/auth-urls', this.$root?.fetchOpts)
.then((resp: Response) => this.$root?.parseResponseFromJSON(resp))
.then((data: any) => {
this.authURLs = data
})
},
fetchBotProfile(user: string): Promise<void> {
return fetch(`config-editor/user?user=${user}`, this.$root?.fetchOpts)
.then((resp: Response) => this.$root?.parseResponseFromJSON(resp))
.then((data: any) => {
this.botProfile = data
})
},
fetchGeneralConfig(): Promise<void> {
return fetch('config-editor/general', this.$root?.fetchOpts)
.then((resp: Response) => this.$root?.parseResponseFromJSON(resp))
.then((data: any) => {
this.generalConfig = data
})
},
},
mounted() {
this.fetchAuthURLs()
this.fetchGeneralConfig()
.then(() => this.fetchBotProfile(this.generalConfig.bot_name))
},
name: 'TwitchBotEditorBotAuth',
})
</script>

View file

@ -1,4 +1,14 @@
{ {
"botauth": {
"description": "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.",
"directives": [
"Copy the URL provided below",
"Open an incognito-tab or different browser, you are not logged into Twitch or are logged in with your bot account",
"Open the copied URL, sign in with the bot account and accept the permissions",
"You will see a message containing the authorized account. If this account is wrong, just start over, the token will be overwritten."
],
"heading": "Updating Bot-Authorization"
},
"dashboard": { "dashboard": {
"activeRaffles": { "activeRaffles": {
"caption": "Active", "caption": "Active",

View file

@ -1,12 +1,13 @@
import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router' import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router'
import BothAuth from './components/botauth.vue'
import Dashboard from './components/dashboard.vue' import Dashboard from './components/dashboard.vue'
const routes = [ const routes = [
{ component: Dashboard, name: 'dashboard', path: '/' }, { component: Dashboard, name: 'dashboard', path: '/' },
// General settings // General settings
{ component: {}, name: 'botAuth', path: '/bot-auth' }, { component: BothAuth, name: 'botAuth', path: '/bot-auth' },
{ component: {}, name: 'channels', path: '/channels' }, { component: {}, name: 'channels', path: '/channels' },
{ component: {}, name: 'editors', path: '/editors' }, { component: {}, name: 'editors', path: '/editors' },
{ component: {}, name: 'tokens', path: '/tokens' }, { component: {}, name: 'tokens', path: '/tokens' },