Files
vuefilemanager/resources/js/views/SetupWizard/EnvironmentSetup.vue
Čarodej f6ea18fce2 - admin form fix
- backblaze new region
- webhook url new place
2022-03-15 16:39:17 +01:00

809 lines
31 KiB
Vue

<template>
<AuthContentWrapper ref="auth">
<!--Database Credentials-->
<AuthContent name="database-credentials" :visible="true" class="mt-6 mb-12 !max-w-2xl">
<Headline
class="mx-auto !mb-10 max-w-screen-sm"
title="Setup Wizard"
description="Set up your storage driver and email client."
>
<settings-icon
size="40"
class="vue-feather text-theme mx-auto mb-3 animate-[spin_5s_linear_infinite]"
/>
</Headline>
<ValidationObserver
@submit.prevent="EnvironmentSetupSubmit"
ref="environmentSetup"
v-slot="{ invalid }"
tag="form"
>
<div class="card text-left shadow-card">
<FormLabel>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'">
<SelectInput
v-model="storage.driver"
:options="storageServiceList"
:default="storage.driver"
placeholder="Select your storage service"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
<div v-if="storage.driver !== 'local'">
<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.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.secret"
placeholder="Paste your secret"
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Region" rules="required" v-slot="{ errors }">
<AppInputText
title="Region"
description="Select your region where is your bucket/space created."
:error="errors[0]"
>
<SelectInput
v-model="storage.region"
:options="regionList"
:default="storage.region"
placeholder="Select your region"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider
tag="div"
mode="passive"
name="Endpoint"
rules="required"
v-slot="{ errors }"
>
<AppInputText v-if="storage.driver !== 's3'" title="Endpoint URL" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="storage.endpoint"
placeholder="Type your endpoint"
type="text"
:class="{ '!border-rose-600': errors[0] }"
readonly
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Bucket" rules="required" v-slot="{ errors }">
<AppInputText
title="Bucket"
description="Provide your created unique bucket name"
:error="errors[0]"
:is-last="true"
>
<input
class="focus-border-theme input-dark"
v-model="storage.bucket"
placeholder="Type your bucket name"
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
</div>
<div class="card text-left shadow-card">
<FormLabel>Email Setup</FormLabel>
<ValidationProvider
tag="div"
mode="passive"
name="Mail Driver"
rules="required"
v-slot="{ errors }"
>
<AppInputText
title="Mail Driver"
:error="errors[0]"
:is-last="!mailDriver || mailDriver === 'log'"
>
<SelectInput
v-model="mailDriver"
:default="mailDriver"
:options="mailDriverList"
placeholder="Select your mail driver"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
<div v-if="mailDriver === '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="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="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="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="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"
rules="required"
v-slot="{ errors }"
>
<AppInputText title="Mail Encryption" :error="errors[0]" :is-last="true">
<SelectInput
v-model="smtp.encryption"
:default="smtp.encryption"
:options="mailEncryptionList"
placeholder="Select your mail encryption"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
</div>
<div v-if="mailDriver === '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="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="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]" :is-last="true">
<input
class="focus-border-theme input-dark"
v-model="mailgun.endpoint"
placeholder="Type your endpoint"
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
<div v-if="mailDriver === 'postmark'">
<ValidationProvider tag="div" mode="passive" name="Token" rules="required" v-slot="{ errors }">
<AppInputText title="Token" :error="errors[0]" :is-last="true">
<input
class="focus-border-theme input-dark"
v-model="postmark.token"
placeholder="Type your token"
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
<div v-if="mailDriver === '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="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="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="Default Region" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="ses.default_region"
placeholder="Type your default region"
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" :error="errors[0]" :is-last="true">
<input
class="focus-border-theme input-dark"
v-model="ses.session_token"
placeholder="Type your session token"
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
</div>
<div class="card text-left shadow-card">
<FormLabel>Environment Setup</FormLabel>
<ValidationProvider
tag="div"
mode="passive"
name="Environment"
rules="required"
v-slot="{ errors }"
>
<AppInputText title="Environment" :error="errors[0]" :is-last="true">
<SelectInput
v-model="environment"
:options="environmentSetupList"
default="production"
placeholder="Select your environment setup"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
</div>
<InfoBox v-if="isError" type="error" class="!mb-5">
<p>Whooops, something went wrong, please try it again.</p>
</InfoBox>
<AuthButton
class="w-full justify-center"
icon="chevron-right"
text="Save and Set General Settings"
:loading="isLoading"
:disabled="isLoading"
/>
</ValidationObserver>
</AuthContent>
</AuthContentWrapper>
</template>
<script>
import AppInputText from '../../components/Admin/AppInputText'
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
import SelectInput from '../../components/Others/Forms/SelectInput'
import FormLabel from '../../components/Others/Forms/FormLabel'
import InfoBox from '../../components/Others/Forms/InfoBox'
import AuthContent from '../../components/Auth/AuthContent'
import AuthButton from '../../components/Auth/AuthButton'
import { SettingsIcon } from 'vue-feather-icons'
import Headline from '../Auth/Headline'
import { required } from 'vee-validate/dist/rules'
import axios from 'axios'
import { mapGetters } from 'vuex'
export default {
name: 'EnvironmentSetup',
components: {
AuthContentWrapper,
ValidationProvider,
ValidationObserver,
AppInputText,
SettingsIcon,
SelectInput,
AuthContent,
AuthButton,
FormLabel,
required,
InfoBox,
Headline,
},
watch: {
'storage.driver': function () {
this.storage.region = ''
},
'storage.region': function (val) {
this.storage.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',
}[this.storage.driver]
},
},
computed: {
...mapGetters(['mailEncryptionList', 'mailDriverList']),
regionList() {
return {
storj: this.storjRegions,
s3: this.s3Regions,
spaces: this.digitalOceanRegions,
wasabi: this.wasabiRegions,
backblaze: this.backblazeRegions,
oss: this.ossRegions,
}[this.storage.driver]
},
},
data() {
return {
isError: false,
isLoading: false,
environment: 'production',
environmentSetupList: [
{
label: 'Production',
value: 'production',
},
{
label: 'Dev',
value: 'local',
},
],
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 East 1 (N. Virginia)',
value: 'us-east-1',
},
{
label: 'US East 2 (N. Virginia)',
value: 'us-east-2',
},
{
label: 'US West 1 (Oregon)',
value: 'us-west-1',
},
{
label: 'EU Central 1 (Amsterdam)',
value: 'eu-central-1',
},
],
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',
},
],
s3Regions: [
{
label: 'us-east-1',
value: 'us-east-1',
},
{
label: 'us-east-2',
value: 'us-east-2',
},
{
label: 'us-west-1',
value: 'us-west-1',
},
{
label: 'us-west-2',
value: 'us-west-2',
},
{
label: 'af-south-1',
value: 'af-south-1',
},
{
label: 'ap-east-1',
value: 'ap-east-1',
},
{
label: 'ap-south-1',
value: 'ap-south-1',
},
{
label: 'ap-northeast-2',
value: 'ap-northeast-2',
},
{
label: 'ap-southeast-1',
value: 'ap-southeast-1',
},
{
label: 'ap-southeast-2',
value: 'ap-southeast-2',
},
{
label: 'ap-northeast-1',
value: 'ap-northeast-1',
},
{
label: 'ca-central-1',
value: 'ca-central-1',
},
{
label: 'eu-central-1',
value: 'eu-central-1',
},
{
label: 'eu-west-1',
value: 'eu-west-1',
},
{
label: 'eu-west-2',
value: 'eu-west-2',
},
{
label: 'eu-south-1',
value: 'eu-south-1',
},
{
label: 'eu-west-3',
value: 'eu-west-3',
},
{
label: 'eu-north-1',
value: 'eu-north-1',
},
{
label: 'me-south-1',
value: 'me-south-1',
},
{
label: 'sa-east-1',
value: 'sa-east-1',
},
],
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',
},
],
storage: {
driver: 'local',
key: undefined,
secret: undefined,
endpoint: undefined,
region: undefined,
bucket: undefined,
},
mailDriver: undefined,
ses: {
access_key: undefined,
secret_access_key: undefined,
default_region: undefined,
session_token: undefined,
},
smtp: {
host: undefined,
port: undefined,
username: undefined,
password: undefined,
encryption: undefined,
},
mailgun: {
domain: undefined,
secret: undefined,
endpoint: undefined,
},
postmark: {
token: undefined,
},
}
},
methods: {
async EnvironmentSetupSubmit() {
if (this.$root.$data.config.isSetupWizardDemo) {
this.$router.push({ name: 'AppSetup' })
return
}
// Validate fields
const isValid = await this.$refs.environmentSetup.validate()
if (!isValid) return
// Start loading
this.isLoading = true
// Send request to get verify account
axios
.post('/api/setup/environment-setup', {
environment: this.environment,
storage: this.storage,
mailDriver: this.mailDriver,
smtp: this.smtp,
mailgun: this.mailgun,
ses: this.ses,
postmark: this.postmark,
})
.then(() => {
// Redirect to next step
this.$router.push({ name: 'AppSetup' })
})
.catch((error) => {
this.isError = true
})
.finally(() => {
this.isLoading = false
})
},
},
beforeMount() {
if (this.$root.$data.config.isSetupWizardDebug) {
this.mailDriver = 'smtp'
this.smtp = {
host: 'test.mail.com',
port: 445,
username: 'howdy@hi5ve.digital',
password: 'root',
encryption: 'ssl',
}
this.environment = 'local'
this.storage.driver = 'local'
//this.storage.key = '51oLNVBaNKcxHG0lFucxBbJyhxmTwmF3WnzVLRqMZj0'
//this.storage.secret = 'sC1YuKsbWv7MdWugb9ZsYBqv2QZJ+QOuHZHEddOsAao'
//this.storage.endpoint = 'https://nyc3.digitaloceanspaces.com'
//this.storage.bucket = 'cloud'
//this.storage.region = 'nyc3'
setTimeout(() => (this.storage.region = 'nyc3'), 100)
}
},
created() {
this.$scrollTop()
},
}
</script>