1
0
Fork 0
mirror of https://github.com/VueTorrent/VueTorrent.git synced 2025-03-26 03:20:47 +03:00
VueTorrent/src/components/Settings/WebUI.vue
2023-11-29 08:25:43 +01:00

276 lines
10 KiB
Vue

<script setup lang="ts">
import PasswordField from '@/components/Core/PasswordField.vue'
import { usePreferenceStore } from '@/stores'
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const preferenceStore = usePreferenceStore()
const dynDnsProvider = ref('https://www.dyndns.com/account/services/hosts/add.html')
const dynDnsProviderOptions = [
{
title: t('settings.webUI.dynDns.providers.dynDns'),
value: 'https://www.dyndns.com/account/services/hosts/add.html'
},
{
title: t('settings.webUI.dynDns.providers.noIp'),
value: 'https://www.no-ip.com/services/managed_dns/free_dynamic_dns.html'
}
]
const webUiPassword = ref('')
function registerDynDNS() {
window.open(dynDnsProvider.value)
}
watch(webUiPassword, newValue => {
preferenceStore.preferences!.web_ui_password = newValue === '' ? undefined : newValue
})
</script>
<template>
<v-list>
<v-list-subheader>{{ t('settings.webUI.interface.subheader') }}</v-list-subheader>
<v-list-item>
<v-row>
<v-col cols="9">
<v-text-field v-model="preferenceStore.preferences!.web_ui_address" hide-details :label="t('settings.webUI.interface.ipAddress')" />
</v-col>
<v-col cols="3">
<v-text-field v-model="preferenceStore.preferences!.web_ui_port" hide-details :label="t('settings.webUI.interface.port')" />
</v-col>
<v-col cols="12" class="pt-0">
<v-checkbox v-model="preferenceStore.preferences!.web_ui_upnp" hide-details :label="t('settings.webUI.interface.useUPnP')" />
</v-col>
</v-row>
</v-list-item>
<v-list-item>
<v-row>
<v-col cols="12">
<div class="d-flex align-center">
<span><v-checkbox-btn v-model="preferenceStore.preferences!.alternative_webui_enabled" /></span>
<v-text-field
v-model="preferenceStore.preferences!.alternative_webui_path"
:disabled="!preferenceStore.preferences!.alternative_webui_enabled"
hide-details
:label="t('settings.webUI.interface.useAlternativeWebUI')" />
</div>
</v-col>
</v-row>
</v-list-item>
<v-divider class="mt-3" />
<v-list-subheader>{{ t('settings.webUI.authentication.subheader') }}</v-list-subheader>
<v-list-item>
<v-row>
<v-col cols="12" sm="6">
<v-text-field v-model="preferenceStore.preferences!.web_ui_username" hide-details :label="t('settings.webUI.authentication.username')" />
</v-col>
<v-col cols="12" sm="6">
<PasswordField
v-model="webUiPassword"
autocapitalize="off"
hide-details
persistent-placeholder
:placeholder="t('settings.webUI.authentication.passwordPlaceholder')"
:label="t('settings.webUI.authentication.password')" />
</v-col>
<v-col cols="12" class="py-0">
<v-checkbox v-model="preferenceStore.preferences!.bypass_local_auth" hide-details :label="t('settings.webUI.authentication.bypassLocalhost')" />
</v-col>
<v-col cols="12" class="pt-0">
<v-checkbox v-model="preferenceStore.preferences!.bypass_auth_subnet_whitelist_enabled" hide-details :label="t('settings.webUI.authentication.bypassWhitelist')" />
<v-textarea
v-model="preferenceStore.preferences!.bypass_auth_subnet_whitelist"
:disabled="!preferenceStore.preferences!.bypass_auth_subnet_whitelist_enabled"
type="number"
hide-details
:placeholder="$t('settings.webUI.authentication.whitelistExamples')" />
</v-col>
</v-row>
</v-list-item>
<v-list-item>
<v-row>
<v-col cols="12" sm="4">
<v-text-field v-model="preferenceStore.preferences!.web_ui_max_auth_fail_count" type="number" hide-details :label="t('settings.webUI.authentication.maxAttempts')" />
</v-col>
<v-col cols="12" sm="4">
<v-text-field
v-model="preferenceStore.preferences!.web_ui_ban_duration"
type="number"
persistent-hint
:hint="t('settings.webUI.authentication.banDurationHint')"
:label="t('settings.webUI.authentication.banDuration')" />
</v-col>
<v-col cols="12" sm="4">
<v-text-field
v-model="preferenceStore.preferences!.web_ui_session_timeout"
type="number"
persistent-hint
:hint="t('settings.webUI.authentication.sessionTimeoutHint')"
:label="t('settings.webUI.authentication.sessionTimeout')" />
</v-col>
</v-row>
</v-list-item>
<v-divider class="mt-3" />
<v-list-item>
<v-row>
<v-col cols="12" class="pb-0">
<v-checkbox v-model="preferenceStore.preferences!.use_https" hide-details :label="t('settings.webUI.https.subheader')" />
</v-col>
<v-col cols="12" class="pt-0">
<v-text-field
v-model="preferenceStore.preferences!.web_ui_https_cert_path"
:disabled="!preferenceStore.preferences!.use_https"
hide-details
:label="t('settings.webUI.https.certificate')" />
</v-col>
<v-col cols="12">
<v-text-field
v-model="preferenceStore.preferences!.web_ui_https_key_path"
:disabled="!preferenceStore.preferences!.use_https"
hide-details
:label="t('settings.webUI.https.key')" />
</v-col>
</v-row>
</v-list-item>
<v-list-item>
<a href="https://httpd.apache.org/docs/current/ssl/ssl_faq.html#aboutcerts" target="_blank">{{ t('settings.webUI.https.tip') }}</a>
</v-list-item>
<v-divider />
<v-list-subheader>{{ t('settings.webUI.security.subheader') }}</v-list-subheader>
<v-list-item>
<v-row>
<v-col cols="12" class="py-0">
<v-checkbox
v-model="preferenceStore.preferences!.web_ui_clickjacking_protection_enabled"
hide-details
density="compact"
:label="t('settings.webUI.security.clickjacking')" />
</v-col>
<v-col cols="12" class="py-0">
<v-checkbox v-model="preferenceStore.preferences!.web_ui_csrf_protection_enabled" hide-details density="compact" :label="t('settings.webUI.security.csrf')" />
</v-col>
<v-col cols="12" class="py-0">
<v-checkbox
v-model="preferenceStore.preferences!.web_ui_secure_cookie_enabled"
:disabled="!preferenceStore.preferences!.use_https"
hide-details
density="compact"
:label="t('settings.webUI.security.secureCookie')" />
</v-col>
<v-col cols="12" class="py-0">
<v-checkbox
v-model="preferenceStore.preferences!.web_ui_host_header_validation_enabled"
hide-details
density="compact"
:label="t('settings.webUI.security.hostHeaderValidation')" />
</v-col>
<v-col cols="12">
<v-textarea
v-model="preferenceStore.preferences!.web_ui_domain_list"
:disabled="!preferenceStore.preferences!.web_ui_host_header_validation_enabled"
auto-grow
clearable
persistent-hint
:hint="t('settings.webUI.security.hostHeaderValidationHint')" />
</v-col>
</v-row>
</v-list-item>
<v-divider />
<v-list-item>
<v-checkbox v-model="preferenceStore.preferences!.web_ui_use_custom_http_headers_enabled" hide-details :label="t('settings.webUI.customHeaders')" />
</v-list-item>
<v-list-item>
<v-textarea
v-model="preferenceStore.preferences!.web_ui_custom_http_headers"
:disabled="!preferenceStore.preferences!.web_ui_use_custom_http_headers_enabled"
auto-grow
clearable
persistent-hint
:hint="t('settings.webUI.customHeadersHint')"
:placeholder="t('settings.webUI.customHeadersPlaceholder')" />
</v-list-item>
<v-divider />
<v-list-item>
<v-checkbox v-model="preferenceStore.preferences!.web_ui_reverse_proxy_enabled" hide-details :label="t('settings.webUI.reverseProxySupport')" />
</v-list-item>
<v-list-item>
<v-text-field
v-model="preferenceStore.preferences!.web_ui_reverse_proxies_list"
:disabled="!preferenceStore.preferences!.web_ui_reverse_proxy_enabled"
clearable
persistent-hint
:hint="t('settings.webUI.proxiesListHint')"
:label="t('settings.webUI.proxiesList')" />
</v-list-item>
<v-divider />
<v-list-item>
<v-checkbox v-model="preferenceStore.preferences!.dyndns_enabled" hide-details :label="t('settings.webUI.dynDns.subheader')" />
</v-list-item>
<v-list-item>
<v-row>
<v-col cols="8">
<v-select v-model="dynDnsProvider" :disabled="!preferenceStore.preferences!.dyndns_enabled" density="compact" hide-details :items="dynDnsProviderOptions" />
</v-col>
<v-col cols="4">
<v-btn :disabled="!preferenceStore.preferences!.dyndns_enabled" @click="registerDynDNS">
{{ $t('settings.webUI.dynDns.registerBtn') }}
</v-btn>
</v-col>
</v-row>
</v-list-item>
<v-list-item>
<v-text-field
v-model="preferenceStore.preferences!.dyndns_domain"
:disabled="!preferenceStore.preferences!.dyndns_enabled"
hide-details
:label="t('settings.webUI.dynDns.domainName')" />
</v-list-item>
<v-list-item>
<v-row>
<v-col cols="12" sm="6" class="pb-0">
<v-text-field
v-model="preferenceStore.preferences!.dyndns_username"
:disabled="!preferenceStore.preferences!.dyndns_enabled"
density="compact"
hide-details
:label="t('settings.webUI.dynDns.username')" />
</v-col>
<v-col cols="12" sm="6">
<PasswordField
v-model="preferenceStore.preferences!.dyndns_password"
:disabled="!preferenceStore.preferences!.dyndns_enabled"
density="compact"
hide-details
:label="t('settings.webUI.dynDns.password')"
:hide-icon="!preferenceStore.preferences!.dyndns_enabled" />
</v-col>
</v-row>
</v-list-item>
</v-list>
</template>
<style scoped lang="scss"></style>