cphipps/watchstate
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Covered more plex backend users cases.

Browse Source
This commit is contained in:
Abdulmhsen B. A. A
2024-05-08 16:38:10 +03:00
parent ccb00dfda1
commit 9a7ce04969
4 changed files with 176 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
frontend/components/BackendAdd.vue
View File

@@ -1,31 +1,30 @@
<template>
<Message v-if="'plex' === backend.type" message_class="is-warning" title="Please read">
<span class="icon-text">
<span class="icon"><i class="fas fa-exclamation"></i></span>
<span>Currently, <strong>Add Backend</strong> via WebUI doesn't cover all plex different behaviors. The WebUI
currently doesn't generate access tokens for users.</span>
</span>
<div class="content mt-4">
<h5>Example of limitations.</h5>
<ul>
<li>If you are using the admin token, you should select the admin user from the list.</li>
<li>If you are using a limited token, you have to manually enter the user id. If you plan on using webhooks, if
not using <code>1</code> should be ok.
</li>
</ul>
<p>
<strong>Workaround:</strong> You can go into the console and use the <code>config:add</code> command which is
designed to handle all these edge cases.
</p>
</div>
</Message>
<form id="backend_add_form" @submit.prevent="addBackend" @change="changeStage">
<div class="box">
<div class="field">
<label class="label">Type</label>
<div class="control has-icons-left">
<div class="select is-fullwidth">
<select v-model="backend.type" class="is-capitalized" required>
<option v-for="type in supported" :key="'type-'+type" :value="type">
{{ type }}
</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-server"></i>
</div>
<p class="help">
Select the type of backend you want to add. Supported backends are: <code>{{ supported.join(', ') }}</code>.
</p>
</div>
</div>
<div class="field">
<label class="label">Name</label>
<div class="control has-icons-left">
<input class="input" type="text" v-model="backend.name">
<input class="input" type="text" v-model="backend.name" required>
<div class="icon is-small is-left">
<i class="fas fa-user"></i>
</div>
@@ -36,23 +35,6 @@
</div>
</div>
<div class="field">
<label class="label">Type</label>
<div class="control has-icons-left">
<div class="select is-fullwidth">
<select v-model="backend.type" class="is-capitalized">
<option value="">Select Backend type.</option>
<option v-for="type in supported" :key="'type-'+type" :value="type">
{{ type }}
</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-cloud"></i>
</div>
</div>
</div>
<div class="field">
<label class="label">
<template v-if="'plex' !== backend.type">API Token</template>
@@ -65,10 +47,8 @@
</div>
<p class="help">
<template v-if="'plex'===backend.type">
Enter the <code>X-Plex-Token</code>. <a target="_blank"
href="https://support.plex.tv/articles/204059436-finding-an-authentication-token-x-plex-token/">
Visit This article for more information
</a>.
Enter the <code>X-Plex-Token</code>.<a target="_blank" href="https://support.plex.tv/articles/204059436">
Visit This article for more information</a>.
</template>
<template v-else>
Generate a new API token from <code>Dashboard > Settings > API Keys</code>.
@@ -77,7 +57,32 @@
</div>
</div>
<div class="field">
<div class="field" v-if="'plex' === backend.type && stage >=1">
<label class="label">Plex Server URL</label>
<div class="control has-icons-left">
<div class="select is-fullwidth" v-if="servers.length > 0">
<select v-model="backend.url" class="is-capital" @change="updateIdentifier" required>
<option v-for="server in servers" :key="'server-'+server.uuid" :value="server.uri">
{{ server.name }} - {{ server.address }}
</option>
</select>
</div>
<input class="input" type="text" v-model="backend.url" v-else required>
<div class="icon is-small is-left">
<i class="fas fa-link" v-if="!serversLoading"></i>
<i class="fas fa-spinner fa-pulse" v-else></i>
</div>
<p class="help">
<template v-if="servers.length<1">
Enter the URL of the backend. For example <code>http://localhost:32400</code>.&nbsp;
</template>
<a href="javascript:void(0)" @click="getServers">Attempt to discover servers associated with the token</a>.
</p>
</div>
</div>
<div class="field" v-if="'plex' !== backend.type">
<label class="label">URL</label>
<div class="control has-icons-left">
<input class="input" type="text" v-model="backend.url" required>
@@ -91,8 +96,8 @@
</div>
<template v-if="stage >= 2">
<div class="field">
<label class="label">Backend Unique ID</label>
<div class="field" v-if="'plex' !== backend.type">
<label class="label">Unique Identifier</label>
<div class="control has-icons-left">
<input class="input" type="text" v-model="backend.uuid" required>
<div class="icon is-small is-left">
@@ -101,17 +106,19 @@
</div>
<p class="help">
The Unique identifier for the backend.
<a href="javascript:void(0)" @click="getUUid">Get from the backend.</a>
<a href="javascript:void(0)" @click="getUUid">Load automatically.</a>
</p>
</div>
</div>
<div class="field">
<label class="label">Backend User ID</label>
<label class="label">
<template v-if="users.length>0">Associated User</template>
<template v-else>User ID</template>
</label>
<div class="control has-icons-left">
<div class="select is-fullwidth" v-if="users.length>0">
<select v-model="backend.user" class="is-capitalized">
<option value="">Select User</option>
<option v-for="user in users" :key="'uid-'+user.id" :value="user.id">
{{ user.name }}
</option>
@@ -197,6 +204,13 @@ import {notification} from "~/utils/index.js";
const emit = defineEmits(['addBackend'])
const props = defineProps({
backends: {
type: Array,
required: true
}
})
const backend = ref({
name: '',
type: '',
@@ -220,10 +234,12 @@ const backend = ref({
})
const users = ref([])
const supported = ref([])
const servers = ref([])
const stage = ref(0)
const usersLoading = ref(false)
const uuidLoading = ref(false)
const serversLoading = ref(false)
const getUUid = async () => {
const required_values = ['type', 'token', 'url'];
@@ -255,7 +271,7 @@ const getUUid = async () => {
}
const getUsers = async (showAlert = true) => {
const required_values = ['type', 'token', 'url', 'uuid'];
const required_values = ['type', 'token', 'url', 'uuid']
if (required_values.some(v => !backend.value[v])) {
if (showAlert) {
@@ -282,7 +298,7 @@ const getUsers = async (showAlert = true) => {
}
}
const response = await request(`/backends/users/${backend.value.type}`, {
const response = await request(`/backends/users/${backend.value.type}?tokens=1`, {
method: 'POST',
body: JSON.stringify(data)
})
@@ -297,11 +313,16 @@ const getUsers = async (showAlert = true) => {
}
users.value = json
backend.value.user = users.value[0].id
}
watch(stage, async (value) => {
if (value >= 1 && 'plex' === backend.value.type && servers.value.length < 1) {
await getServers()
}
if (value >= 2) {
if (!backend.value.uuid) {
if ('plex' !== backend.value.type && !backend.value.uuid) {
await getUUid();
}
@@ -314,19 +335,57 @@ watch(stage, async (value) => {
onMounted(async () => {
const response = await request('/system/supported')
supported.value = await response.json()
backend.value.type = supported.value[0]
})
const changeStage = () => {
const required = ['name', 'type', 'token', 'url']
const required = ['name', 'type', 'token']
if ('plex' !== backend.value.type) {
required.push('url')
}
if (required.some(v => !backend.value[v])) {
stage.value = 0
} else {
stage.value = 2
return
}
if (props.backends.find(b => b.name === backend.value.name)) {
notification('error', 'Error', `Backend with name ${backend.value.name} already exists.`)
stage.value = 0
return
}
if ('plex' === backend.value.type && !backend.value.uuid) {
stage.value = 1
return
}
stage.value = 2
}
const addBackend = async () => {
const required_values = ['name', 'type', 'token', 'url', 'uuid', 'user'];
if (required_values.some(v => !backend.value[v])) {
required_values.forEach(v => {
if (!backend.value[v]) {
notification('error', 'Error', `Please fill the required field: ${v}.`)
}
})
return
}
if ('plex' === backend.value.type) {
let token = users.value.find(u => u.id === backend.value.user).token
if (token !== backend.value.token) {
backend.value.options = {
ADMIN_TOKEN: backend.value.token
}
backend.value.token = token
}
}
const response = await request(`/backends/`, {
method: 'POST',
headers: {
@@ -346,4 +405,45 @@ const addBackend = async () => {
return true
}
const getServers = async () => {
if ('plex' !== backend.value.type || servers.value.length > 0) {
return
}
if (!backend.value.token) {
notification('error', 'Error', `Token is required to get list of servers.`)
return
}
serversLoading.value = true
let data = {
token: backend.value.token,
url: window.location.origin,
};
const response = await request(`/backends/discover/${backend.value.type}`, {
method: 'POST',
body: JSON.stringify(data)
})
serversLoading.value = false
const json = await response.json()
if (200 !== response.status) {
notification('error', 'Error', `${json.error.code}: ${json.error.message}`)
return
}
servers.value = json
backend.value.url = json[0].uri
backend.value.uuid = json[0].uuid
}
const updateIdentifier = async () => {
backend.value.uuid = servers.value.find(s => s.uri === backend.value.url).identifier
await getUsers()
}
</script>