mirror of
https://github.com/Luzifer/twitch-bot.git
synced 2024-11-08 16:20:02 +00:00
Add botauth component
Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
parent
1ea10da921
commit
c74e122c38
3 changed files with 129 additions and 1 deletions
117
src/components/botauth.vue
Normal file
117
src/components/botauth.vue
Normal 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>
|
|
@ -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",
|
||||||
|
|
|
@ -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' },
|
||||||
|
|
Loading…
Reference in a new issue