mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 02:50:39 +00:00
vue components refactoring
This commit is contained in:
Čarodej
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div
|
||||
:class="{ 'mb-6 sm:mb-7': !isLast }"
|
||||
class="w-full justify-between space-y-4 sm:flex sm:space-x-8 sm:space-x-2 sm:space-y-0"
|
||||
>
|
||||
<!--Label for input-->
|
||||
<div class="leading-5">
|
||||
<label class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
|
||||
|
||||
<!--Input Description-->
|
||||
<span v-if="description" class="block text-xs leading-4 dark:text-gray-500 text-gray-500" v-html="description"></span>
|
||||
|
||||
<!--Input Description-->
|
||||
<span v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--Form element-->
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppInputButton',
|
||||
props: ['description', 'isLast', 'title', 'error'],
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div :class="{ 'mb-6 sm:mb-7': !isLast }" class="flex w-full items-center justify-between space-x-2 sm:space-x-8">
|
||||
<!--Label for input-->
|
||||
<div class="leading-5">
|
||||
<label class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
|
||||
|
||||
<!--Input Description-->
|
||||
<span v-if="description" class="block text-xs leading-4 dark:text-gray-500 text-gray-500" v-html="description"></span>
|
||||
|
||||
<!--Input Description-->
|
||||
<span v-if="error" class="pt-2 text-xs dark:text-rose-600 text-rose-600">
|
||||
{{ error }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--Form element-->
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppInputSwitch',
|
||||
props: ['description', 'isLast', 'title', 'error'],
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div :class="{ 'mb-6 sm:mb-7': !isLast }">
|
||||
<!--Label for input-->
|
||||
<label v-if="title" class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200">
|
||||
{{ title }}:
|
||||
</label>
|
||||
|
||||
<!--Form element-->
|
||||
<slot />
|
||||
|
||||
<!--Input Description-->
|
||||
<span v-if="error" class="pt-2 text-xs dark:text-rose-600 text-rose-600">
|
||||
{{ error }}
|
||||
</span>
|
||||
|
||||
<!--Input Description-->
|
||||
<small v-if="description" class="block pt-2 text-xs leading-4 dark:text-gray-500 text-gray-500" v-html="description"></small>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppInputText',
|
||||
props: ['description', 'isLast', 'title', 'error'],
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<div>
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $te('mail_driver') ? $t('mail_driver') : 'Mail Setup' }}
|
||||
</FormLabel>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Mail Driver" :error="errors[0]" :is-last="mail.driver === undefined || mail.driver === 'log'">
|
||||
<SelectInput
|
||||
v-model="mail.driver"
|
||||
:default="mail.driver"
|
||||
:options="driversList"
|
||||
:placeholder="$te('select_mail_driver') ? $t('select_mail_driver') : 'Select your mail driver'"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<div v-if="mail.driver === 'smtp'">
|
||||
<ValidationProvider tag="div" mode="passive" name="Mail Host" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Mail Host" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.smtp.host"
|
||||
placeholder="Type your mail host"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Mail Port" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Mail Port" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.smtp.port"
|
||||
placeholder="Type your mail port"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Mail Username" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Mail Username" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model.lazy="mail.smtp.username"
|
||||
placeholder="Type your mail username"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Mail Password" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Mail Password" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.smtp.password"
|
||||
placeholder="Type your mail password"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
mode="passive"
|
||||
name="Mail Encryption"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<AppInputText title="Mail Encryption" :error="errors[0]" :is-last="! shouldSetSMTPEmail">
|
||||
<SelectInput
|
||||
v-model="mail.smtp.encryption"
|
||||
:default="mail.smtp.encryption"
|
||||
:options="mailEncryptionList"
|
||||
placeholder="Select your mail encryption"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider v-if="shouldSetSMTPEmail" tag="div" mode="passive" name="Mail From Address" rules="required|email" v-slot="{ errors }">
|
||||
<AppInputText title="Mail" :error="errors[0]" :is-last="true">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model.trim="mail.smtp.email"
|
||||
placeholder="Type your mail from address"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div v-if="mail.driver === 'mailgun'">
|
||||
<ValidationProvider tag="div" mode="passive" name="Domain" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Domain" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.mailgun.domain"
|
||||
placeholder="Type your domain"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Secret" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.mailgun.secret"
|
||||
placeholder="Type your secret"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Endpoint" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Endpoint" :error="errors[0]">
|
||||
<SelectInput
|
||||
v-model="mail.mailgun.endpoint"
|
||||
:options="mailgunRegions"
|
||||
placeholder="Select your endpoint"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
|
||||
<AppInputText title="Sender (Email)" :error="errors[0]" :is-last="true">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.mailgun.sender"
|
||||
placeholder="Type your sender email..."
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div v-if="mail.driver === 'postmark'">
|
||||
<ValidationProvider tag="div" mode="passive" name="Token" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Token" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.postmark.token"
|
||||
placeholder="Type your token"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
|
||||
<AppInputText title="Sender Signature (Email)" :error="errors[0]" :is-last="true">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.postmark.sender"
|
||||
placeholder="Type your sender signature..."
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div v-if="mail.driver === 'ses'">
|
||||
<ValidationProvider tag="div" mode="passive" name="Access Key" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Access Key" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.ses.access_key"
|
||||
placeholder="Type your access key"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
mode="passive"
|
||||
name="Secret Access Key"
|
||||
rules="required"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<AppInputText title="Secret Access Key" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.ses.secret_access_key"
|
||||
placeholder="Type your secret access key"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Default Region" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Region" :error="errors[0]">
|
||||
<SelectInput
|
||||
v-model="mail.ses.default_region"
|
||||
:options="s3Regions"
|
||||
placeholder="Select your region"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
|
||||
<AppInputText title="Identity (Email)" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.ses.sender"
|
||||
placeholder="Type your identity email..."
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Session Token" v-slot="{ errors }">
|
||||
<AppInputText title="Session Token (optional)" :error="errors[0]" :is-last="true">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.ses.session_token"
|
||||
placeholder="Type your session token"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
|
||||
import SelectInput from '../Inputs/SelectInput'
|
||||
import AppInputText from './Layouts/AppInputText'
|
||||
import FormLabel from '../UI/Labels/FormLabel'
|
||||
|
||||
export default {
|
||||
name: 'MailSetup',
|
||||
components: {
|
||||
ValidationObserver,
|
||||
ValidationProvider,
|
||||
AppInputText,
|
||||
SelectInput,
|
||||
FormLabel,
|
||||
},
|
||||
watch: {
|
||||
mail: {
|
||||
handler(newValue, oldValue) {
|
||||
this.$emit('input', newValue)
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'mail.smtp.username': function (val) {
|
||||
if (this.$isValidEmail(val)) {
|
||||
this.mail.smtp.email = undefined
|
||||
this.shouldSetSMTPEmail = false
|
||||
} else {
|
||||
this.shouldSetSMTPEmail = true
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
s3Regions() {
|
||||
return this.$store.getters.s3Regions
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shouldSetSMTPEmail: false,
|
||||
mail: {
|
||||
driver: undefined,
|
||||
ses: {
|
||||
access_key: undefined,
|
||||
secret_access_key: undefined,
|
||||
default_region: undefined,
|
||||
session_token: undefined,
|
||||
sender: undefined,
|
||||
},
|
||||
smtp: {
|
||||
host: undefined,
|
||||
port: undefined,
|
||||
email: undefined,
|
||||
username: undefined,
|
||||
password: undefined,
|
||||
encryption: undefined,
|
||||
},
|
||||
mailgun: {
|
||||
domain: undefined,
|
||||
secret: undefined,
|
||||
endpoint: undefined,
|
||||
sender: undefined,
|
||||
},
|
||||
postmark: {
|
||||
token: undefined,
|
||||
sender: undefined,
|
||||
},
|
||||
},
|
||||
mailgunRegions: [
|
||||
{
|
||||
label: 'US Endpoint (api.mailgun.net)',
|
||||
value: 'api.mailgun.net',
|
||||
},
|
||||
{
|
||||
label: 'EU Endpoint (api.eu.mailgun.net)',
|
||||
value: 'api.eu.mailgun.net',
|
||||
},
|
||||
],
|
||||
mailEncryptionList: [
|
||||
{
|
||||
label: 'TLS',
|
||||
value: 'tls',
|
||||
},
|
||||
{
|
||||
label: 'SSL',
|
||||
value: 'ssl',
|
||||
},
|
||||
{
|
||||
label: 'None',
|
||||
value: '',
|
||||
},
|
||||
],
|
||||
driversList: [
|
||||
{
|
||||
label: 'SMTP',
|
||||
value: 'smtp',
|
||||
},
|
||||
{
|
||||
label: 'Mailgun',
|
||||
value: 'mailgun',
|
||||
},
|
||||
{
|
||||
label: 'SES',
|
||||
value: 'ses',
|
||||
},
|
||||
{
|
||||
label: 'Postmark',
|
||||
value: 'postmark',
|
||||
},
|
||||
{
|
||||
label: 'None',
|
||||
value: 'log',
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,431 @@
|
||||
<template>
|
||||
<div>
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $te('storage_driver') ? $t('storage_driver') : 'Storage Setup' }}
|
||||
</FormLabel>
|
||||
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
mode="passive"
|
||||
name="Storage Service"
|
||||
rules="required"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<AppInputText title="Storage Service" :error="errors[0]" :is-last="storage.driver === 'local' || storage.driver === undefined">
|
||||
<SelectInput
|
||||
v-model="storage.driver"
|
||||
:options="storageServiceList"
|
||||
placeholder="Select your storage service"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<div v-if="s3PredefinedList.includes(storage.driver)">
|
||||
<ValidationProvider tag="div" mode="passive" name="Key" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Key" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="storage.s3.key"
|
||||
placeholder="Paste your key"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Secret" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="storage.s3.secret"
|
||||
placeholder="Paste your secret"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--List Region-->
|
||||
<ValidationProvider v-if="storage.driver !== 'other'" tag="div" mode="passive" name="Region" rules="required" v-slot="{ errors }">
|
||||
<AppInputText
|
||||
title="Region"
|
||||
description="Select your region where is your bucket created."
|
||||
:error="errors[0]"
|
||||
>
|
||||
<SelectInput
|
||||
v-model="storage.s3.region"
|
||||
:options="regionList"
|
||||
placeholder="Select your region"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--Input Region-->
|
||||
<ValidationProvider v-if="storage.driver === 'other'" tag="div" mode="passive" name="Region" rules="required" v-slot="{ errors }">
|
||||
<AppInputText
|
||||
title="Region"
|
||||
description="Type your region where is your bucket created."
|
||||
:error="errors[0]"
|
||||
>
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="storage.s3.region"
|
||||
placeholder="Type your region"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
:readonly="storage.driver !== 'other'"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
mode="passive"
|
||||
name="Endpoint"
|
||||
rules="required"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<AppInputText title="Endpoint URL" :description="endpointUrlDescription" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="storage.s3.endpoint"
|
||||
placeholder="Type your endpoint"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
:readonly="storage.driver !== 'other'"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Bucket" rules="required" v-slot="{ errors }">
|
||||
<AppInputText
|
||||
title="Bucket"
|
||||
description="Type your created unique bucket name"
|
||||
:is-last="true"
|
||||
:error="errors[0]"
|
||||
>
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="storage.s3.bucket"
|
||||
placeholder="Type your bucket name"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div v-if="storage.driver === 'ftp'">
|
||||
<ValidationProvider tag="div" mode="passive" name="FTP Host" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="FTP Host" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="storage.ftp.host"
|
||||
placeholder="Type your ftp host..."
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider tag="div" mode="passive" name="FTP Username" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="FTP Username" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="storage.ftp.user"
|
||||
placeholder="Type your ftp username..."
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<ValidationProvider tag="div" mode="passive" name="FTP Password" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="FTP Password" :error="errors[0]" :is-last="true">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="storage.ftp.password"
|
||||
placeholder="Type your ftp password..."
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
|
||||
import SelectInput from '../Inputs/SelectInput'
|
||||
import AppInputText from './Layouts/AppInputText'
|
||||
import FormLabel from '../UI/Labels/FormLabel'
|
||||
|
||||
export default {
|
||||
name: 'StorageSetup',
|
||||
components: {
|
||||
ValidationObserver,
|
||||
ValidationProvider,
|
||||
AppInputText,
|
||||
SelectInput,
|
||||
FormLabel,
|
||||
},
|
||||
watch: {
|
||||
storage: {
|
||||
handler(newValue, oldValue) {
|
||||
this.$emit('input', newValue)
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'storage.driver': function () {
|
||||
this.storage.s3.region = undefined
|
||||
},
|
||||
'storage.s3.region': function (val) {
|
||||
this.storage.s3.endpoint = {
|
||||
storj: 'https://gateway.' + val + '.storjshare.io',
|
||||
spaces: 'https://' + val + '.digitaloceanspaces.com',
|
||||
wasabi: 'https://s3.' + val + '.wasabisys.com',
|
||||
backblaze: 'https://s3.' + val + '.backblazeb2.com',
|
||||
oss: 'https://' + val + '.aliyuncs.com',
|
||||
s3: 'https://s3.' + val + '.amazonaws.com',
|
||||
other: undefined,
|
||||
}[this.storage.driver]
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
s3Regions() {
|
||||
return this.$store.getters.s3Regions
|
||||
},
|
||||
regionList() {
|
||||
return {
|
||||
storj: this.storjRegions,
|
||||
s3: this.s3Regions,
|
||||
spaces: this.digitalOceanRegions,
|
||||
wasabi: this.wasabiRegions,
|
||||
backblaze: this.backblazeRegions,
|
||||
oss: this.ossRegions,
|
||||
other: undefined,
|
||||
}[this.storage.driver]
|
||||
},
|
||||
endpointUrlDescription() {
|
||||
return this.storage.driver === 'other' ? this.$t('The endpoint url should start with https://') : ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
storage: {
|
||||
driver: undefined,
|
||||
s3: {
|
||||
key: undefined,
|
||||
secret: undefined,
|
||||
endpoint: undefined,
|
||||
region: undefined,
|
||||
bucket: undefined,
|
||||
},
|
||||
ftp: {
|
||||
host: undefined,
|
||||
user: undefined,
|
||||
password: undefined,
|
||||
}
|
||||
},
|
||||
ossRegions: [
|
||||
{
|
||||
label: 'China (Hangzhou)',
|
||||
value: 'oss-cn-hangzhou',
|
||||
},
|
||||
{
|
||||
label: 'China (Shanghai)',
|
||||
value: 'oss-cn-shanghai',
|
||||
},
|
||||
{
|
||||
label: 'China (Qingdao)',
|
||||
value: 'oss-cn-qingdao',
|
||||
},
|
||||
{
|
||||
label: 'China (Beijing)',
|
||||
value: 'oss-cn-beijing',
|
||||
},
|
||||
{
|
||||
label: 'China (Zhangjiakou)',
|
||||
value: 'oss-cn-zhangjiakou',
|
||||
},
|
||||
{
|
||||
label: 'China (Hohhot)',
|
||||
value: 'oss-cn-huhehaote',
|
||||
},
|
||||
{
|
||||
label: 'China (Ulanqab)',
|
||||
value: 'oss-cn-wulanchabu',
|
||||
},
|
||||
{
|
||||
label: 'China (Shenzhen)',
|
||||
value: 'oss-cn-shenzhen',
|
||||
},
|
||||
{
|
||||
label: 'China (Heyuan)',
|
||||
value: 'oss-cn-heyuan',
|
||||
},
|
||||
{
|
||||
label: 'China (Guangzhou)',
|
||||
value: 'oss-cn-guangzhou',
|
||||
},
|
||||
{
|
||||
label: 'China (Chengdu)',
|
||||
value: 'oss-cn-chengdu',
|
||||
},
|
||||
{
|
||||
label: 'China (Hong Kong)',
|
||||
value: 'oss-cn-hongkong',
|
||||
},
|
||||
],
|
||||
wasabiRegions: [
|
||||
{
|
||||
label: 'us-west-1',
|
||||
value: 'us-west-1',
|
||||
},
|
||||
{
|
||||
label: 'ap-northeast-1',
|
||||
value: 'ap-northeast-1',
|
||||
},
|
||||
{
|
||||
label: 'ap-northeast-2',
|
||||
value: 'ap-northeast-2',
|
||||
},
|
||||
{
|
||||
label: 'ca-central-1',
|
||||
value: 'ca-central-1',
|
||||
},
|
||||
{
|
||||
label: 'eu-central-1',
|
||||
value: 'eu-central-1',
|
||||
},
|
||||
{
|
||||
label: 'eu-central-2',
|
||||
value: 'eu-central-2',
|
||||
},
|
||||
{
|
||||
label: 'eu-west-1',
|
||||
value: 'eu-west-1',
|
||||
},
|
||||
{
|
||||
label: 'eu-west-2',
|
||||
value: 'eu-west-2',
|
||||
},
|
||||
{
|
||||
label: 'us-central-1',
|
||||
value: 'us-central-1',
|
||||
},
|
||||
{
|
||||
label: 'us-east-1',
|
||||
value: 'us-east-1',
|
||||
},
|
||||
{
|
||||
label: 'us-east-2',
|
||||
value: 'us-east-2',
|
||||
},
|
||||
],
|
||||
storjRegions: [
|
||||
{
|
||||
label: 'EU Central 1',
|
||||
value: 'eu1',
|
||||
},
|
||||
{
|
||||
label: 'US Central 1',
|
||||
value: 'us1',
|
||||
},
|
||||
{
|
||||
label: 'AP Central 1',
|
||||
value: 'ap1',
|
||||
},
|
||||
],
|
||||
backblazeRegions: [
|
||||
{
|
||||
label: 'us-west-001',
|
||||
value: 'us-west-001',
|
||||
},
|
||||
{
|
||||
label: 'us-west-002',
|
||||
value: 'us-west-002',
|
||||
},
|
||||
{
|
||||
label: 'us-west-004',
|
||||
value: 'us-west-004',
|
||||
},
|
||||
{
|
||||
label: 'eu-central-003',
|
||||
value: 'eu-central-003',
|
||||
},
|
||||
],
|
||||
digitalOceanRegions: [
|
||||
{
|
||||
label: 'New York',
|
||||
value: 'nyc3',
|
||||
},
|
||||
{
|
||||
label: 'San Francisco',
|
||||
value: 'sfo2',
|
||||
},
|
||||
{
|
||||
label: 'Amsterdam',
|
||||
value: 'ams3',
|
||||
},
|
||||
{
|
||||
label: 'Singapore',
|
||||
value: 'sgp1',
|
||||
},
|
||||
{
|
||||
label: 'Frankfurt',
|
||||
value: 'fra1',
|
||||
},
|
||||
],
|
||||
s3PredefinedList: [
|
||||
's3',
|
||||
'storj',
|
||||
'spaces',
|
||||
'wasabi',
|
||||
'backblaze',
|
||||
'oss',
|
||||
'other',
|
||||
],
|
||||
storageServiceList: [
|
||||
{
|
||||
label: 'Local Driver',
|
||||
value: 'local',
|
||||
},
|
||||
{
|
||||
label: 'Amazon Web Services S3',
|
||||
value: 's3',
|
||||
},
|
||||
{
|
||||
label: 'Storj',
|
||||
value: 'storj',
|
||||
},
|
||||
{
|
||||
label: 'Digital Ocean Spaces',
|
||||
value: 'spaces',
|
||||
},
|
||||
{
|
||||
label: 'Object Cloud Storage by Wasabi',
|
||||
value: 'wasabi',
|
||||
},
|
||||
{
|
||||
label: 'Backblaze B2 Cloud Storage',
|
||||
value: 'backblaze',
|
||||
},
|
||||
{
|
||||
label: 'Alibaba Cloud OSS',
|
||||
value: 'oss',
|
||||
},
|
||||
{
|
||||
label: 'Other S3 Compatible Service',
|
||||
value: 'other',
|
||||
},
|
||||
{
|
||||
label: 'FTP',
|
||||
value: 'ftp',
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user