377 lines
13 KiB
Vue
377 lines
13 KiB
Vue
<template>
|
|
<tab
|
|
:label="$gettext('Services')"
|
|
:item-header-class="tabClass"
|
|
>
|
|
<form-fieldset>
|
|
<template #label>
|
|
{{ $gettext('AzuraCast Update Checks') }}
|
|
</template>
|
|
|
|
<div class="row g-3">
|
|
<form-markup
|
|
id="form_release_channel"
|
|
class="col-md-6"
|
|
:label="$gettext('Release Channel')"
|
|
>
|
|
<template #description>
|
|
<a
|
|
href="/docs/getting-started/updates/release-channels/"
|
|
target="_blank"
|
|
>
|
|
{{ $gettext('Learn more about release channels in the AzuraCast docs.') }}
|
|
</a>
|
|
</template>
|
|
|
|
<p class="card-text font-weight-bold">
|
|
{{ langReleaseChannel }}
|
|
</p>
|
|
</form-markup>
|
|
|
|
<form-group-checkbox
|
|
id="edit_form_check_for_updates"
|
|
class="col-md-6"
|
|
:field="v$.check_for_updates"
|
|
:label="$gettext('Show Update Announcements')"
|
|
:description="$gettext('Show new releases within your update channel on the AzuraCast homepage.')"
|
|
/>
|
|
</div>
|
|
</form-fieldset>
|
|
|
|
<form-fieldset>
|
|
<template #label>
|
|
{{ $gettext('LetsEncrypt') }}
|
|
</template>
|
|
<template #description>
|
|
{{
|
|
$gettext('LetsEncrypt provides simple, free SSL certificates allowing you to secure traffic through your control panel and radio streams.')
|
|
}}
|
|
</template>
|
|
|
|
<div class="row g-3">
|
|
<form-group-field
|
|
id="edit_form_acme_domains"
|
|
class="col-md-6"
|
|
:field="v$.acme_domains"
|
|
:label="$gettext('Domain Name(s)')"
|
|
:description="$gettext('All listed domain names should point to this AzuraCast installation. Separate multiple domain names with commas.')"
|
|
/>
|
|
|
|
<form-group-field
|
|
id="edit_form_acme_email"
|
|
class="col-md-6"
|
|
:field="v$.acme_email"
|
|
input-type="email"
|
|
:label="$gettext('E-mail Address (Optional)')"
|
|
:description="$gettext('Enter your e-mail address to receive updates about your certificate.')"
|
|
/>
|
|
|
|
<div class="form-group col">
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary btn-sm"
|
|
:disabled="v$.$anyDirty"
|
|
@click="generateAcmeCert"
|
|
>
|
|
<icon :icon="IconBadge" />
|
|
<span>
|
|
{{ $gettext('Generate/Renew Certificate') }}
|
|
<span v-if="v$.$anyDirty">
|
|
({{ $gettext('Save Changes first') }})
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form-fieldset>
|
|
|
|
<form-fieldset>
|
|
<template #label>
|
|
{{ $gettext('E-mail Delivery Service') }}
|
|
</template>
|
|
<template #description>
|
|
{{ $gettext('Used for "Forgot Password" functionality, web hooks and other functions.') }}
|
|
</template>
|
|
|
|
<div class="row g-3">
|
|
<form-group-checkbox
|
|
id="edit_form_mail_enabled"
|
|
class="col-md-12"
|
|
:field="v$.mail_enabled"
|
|
:label="$gettext('Enable Mail Delivery')"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
v-if="form.mail_enabled"
|
|
class="row g-3 mt-2"
|
|
>
|
|
<form-group-field
|
|
id="edit_form_mail_sender_name"
|
|
class="col-md-6"
|
|
:field="v$.mail_sender_name"
|
|
:label="$gettext('Sender Name')"
|
|
/>
|
|
|
|
<form-group-field
|
|
id="edit_form_mail_sender_email"
|
|
class="col-md-6"
|
|
:field="v$.mail_sender_email"
|
|
input-type="email"
|
|
:label="$gettext('Sender E-mail Address')"
|
|
/>
|
|
|
|
<form-group-field
|
|
id="edit_form_mail_smtp_host"
|
|
class="col-md-4"
|
|
:field="v$.mail_smtp_host"
|
|
:label="$gettext('SMTP Host')"
|
|
/>
|
|
|
|
<form-group-field
|
|
id="edit_form_mail_smtp_port"
|
|
class="col-md-3"
|
|
:field="v$.mail_smtp_port"
|
|
input-type="number"
|
|
:label="$gettext('SMTP Port')"
|
|
/>
|
|
|
|
<form-group-checkbox
|
|
id="edit_form_mail_smtp_secure"
|
|
class="col-md-5"
|
|
:field="v$.mail_smtp_secure"
|
|
:label="$gettext('Use Secure (TLS) SMTP Connection')"
|
|
:description="$gettext('Usually enabled for port 465, disabled for ports 587 or 25.')"
|
|
/>
|
|
|
|
<form-group-field
|
|
id="edit_form_mail_smtp_username"
|
|
class="col-md-6"
|
|
:field="v$.mail_smtp_username"
|
|
:label="$gettext('SMTP Username')"
|
|
/>
|
|
|
|
<form-group-field
|
|
id="edit_form_mail_smtp_password"
|
|
class="col-md-6"
|
|
:field="v$.mail_smtp_password"
|
|
input-type="password"
|
|
:label="$gettext('SMTP Password')"
|
|
/>
|
|
|
|
<div class="form-group col">
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-primary"
|
|
:disabled="v$.$anyDirty"
|
|
@click="openTestMessage"
|
|
>
|
|
<icon :icon="IconSend" />
|
|
<span>
|
|
{{ $gettext('Send Test Message') }}
|
|
<span v-if="v$.$anyDirty">
|
|
({{ $gettext('Save Changes first') }})
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form-fieldset>
|
|
|
|
<form-fieldset>
|
|
<template #label>
|
|
{{ $gettext('Avatar Service') }}
|
|
</template>
|
|
|
|
<div class="row g-3">
|
|
<form-group-multi-check
|
|
id="edit_form_avatar_service"
|
|
class="col-md-6"
|
|
:field="v$.avatar_service"
|
|
:options="avatarServiceOptions"
|
|
stacked
|
|
radio
|
|
:label="$gettext('Avatar Service')"
|
|
/>
|
|
|
|
<form-group-field
|
|
id="edit_form_avatar_default_url"
|
|
class="col-md-6"
|
|
:field="v$.avatar_default_url"
|
|
:label="$gettext('Default Avatar URL')"
|
|
/>
|
|
</div>
|
|
</form-fieldset>
|
|
|
|
<form-fieldset>
|
|
<template #label>
|
|
{{ $gettext('Album Art') }}
|
|
</template>
|
|
|
|
<div class="row g-3">
|
|
<form-group-checkbox
|
|
id="use_external_album_art_in_apis"
|
|
class="col-md-6"
|
|
:field="v$.use_external_album_art_in_apis"
|
|
>
|
|
<template #label>
|
|
{{ $gettext('Check Web Services for Album Art for "Now Playing" Tracks') }}
|
|
</template>
|
|
</form-group-checkbox>
|
|
|
|
<form-group-checkbox
|
|
id="use_external_album_art_when_processing_media"
|
|
class="col-md-6"
|
|
:field="v$.use_external_album_art_when_processing_media"
|
|
:label="$gettext('Check Web Services for Album Art When Uploading Media')"
|
|
/>
|
|
|
|
<form-group-field
|
|
id="edit_form_last_fm_api_key"
|
|
class="col-md-12"
|
|
:field="v$.last_fm_api_key"
|
|
:label="$gettext('Last.fm API Key')"
|
|
>
|
|
<template #description>
|
|
{{ $gettext('This service can provide album art for tracks where none is available locally.') }}
|
|
<br>
|
|
<a
|
|
href="https://www.last.fm/api/account/create"
|
|
target="_blank"
|
|
>
|
|
{{ $gettext('Apply for an API key at Last.fm') }}
|
|
</a>
|
|
</template>
|
|
</form-group-field>
|
|
</div>
|
|
</form-fieldset>
|
|
</tab>
|
|
|
|
<streaming-log-modal ref="$acmeModal" />
|
|
|
|
<admin-settings-test-message-modal
|
|
ref="$testMessageModal"
|
|
:test-message-url="testMessageUrl"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import FormMarkup from "~/components/Form/FormMarkup.vue";
|
|
import FormGroupField from "~/components/Form/FormGroupField.vue";
|
|
import FormFieldset from "~/components/Form/FormFieldset.vue";
|
|
import FormGroupCheckbox from "~/components/Form/FormGroupCheckbox.vue";
|
|
import AdminSettingsTestMessageModal from "~/components/Admin/Settings/TestMessageModal.vue";
|
|
import Icon from "~/components/Common/Icon.vue";
|
|
import StreamingLogModal from "~/components/Common/StreamingLogModal.vue";
|
|
import {computed, ref} from "vue";
|
|
import {useTranslate} from "~/vendor/gettext";
|
|
import {useAxios} from "~/vendor/axios";
|
|
import FormGroupMultiCheck from "~/components/Form/FormGroupMultiCheck.vue";
|
|
import {useVModel} from "@vueuse/core";
|
|
import {useVuelidateOnFormTab} from "~/functions/useVuelidateOnFormTab";
|
|
import Tab from "~/components/Common/Tab.vue";
|
|
import {IconBadge, IconSend} from "~/components/Common/icons";
|
|
|
|
const props = defineProps({
|
|
form: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
releaseChannel: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
testMessageUrl: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
acmeUrl: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['update:form']);
|
|
const form = useVModel(props, 'form', emit);
|
|
|
|
const {v$, tabClass} = useVuelidateOnFormTab(
|
|
{
|
|
check_for_updates: {},
|
|
acme_email: {},
|
|
acme_domains: {},
|
|
mail_enabled: {},
|
|
mail_sender_name: {},
|
|
mail_sender_email: {},
|
|
mail_smtp_host: {},
|
|
mail_smtp_port: {},
|
|
mail_smtp_secure: {},
|
|
mail_smtp_username: {},
|
|
mail_smtp_password: {},
|
|
avatar_service: {},
|
|
avatar_default_url: {},
|
|
use_external_album_art_in_apis: {},
|
|
use_external_album_art_when_processing_media: {},
|
|
last_fm_api_key: {},
|
|
},
|
|
form,
|
|
{
|
|
check_for_updates: 1,
|
|
acme_email: '',
|
|
acme_domains: '',
|
|
mail_enabled: false,
|
|
mail_sender_name: '',
|
|
mail_sender_email: '',
|
|
mail_smtp_host: '',
|
|
mail_smtp_port: '',
|
|
mail_smtp_secure: '',
|
|
mail_smtp_username: '',
|
|
mail_smtp_password: '',
|
|
avatar_service: 'gravatar',
|
|
avatar_default_url: '',
|
|
use_external_album_art_in_apis: false,
|
|
use_external_album_art_when_processing_media: false,
|
|
last_fm_api_key: ''
|
|
}
|
|
);
|
|
|
|
const {$gettext} = useTranslate();
|
|
|
|
const langReleaseChannel = computed(() => {
|
|
return (props.releaseChannel === 'stable')
|
|
? $gettext('Stable')
|
|
: $gettext('Rolling Release');
|
|
});
|
|
|
|
const avatarServiceOptions = computed(() => {
|
|
return [
|
|
{
|
|
value: 'libravatar',
|
|
text: 'Libravatar'
|
|
},
|
|
{
|
|
value: 'gravatar',
|
|
text: 'Gravatar'
|
|
},
|
|
{
|
|
value: 'disabled',
|
|
text: $gettext('Disabled')
|
|
}
|
|
]
|
|
});
|
|
|
|
const $acmeModal = ref<InstanceType<typeof StreamingLogModal> | null>(null);
|
|
const {axios} = useAxios();
|
|
|
|
const generateAcmeCert = () => {
|
|
axios.put(props.acmeUrl).then((resp) => {
|
|
$acmeModal.value?.show(resp.data.links.log);
|
|
});
|
|
}
|
|
|
|
const $testMessageModal = ref<InstanceType<typeof AdminSettingsTestMessageModal> | null>(null);
|
|
|
|
const openTestMessage = () => {
|
|
$testMessageModal.value?.open();
|
|
}
|
|
</script>
|