vuefilemanager/resources/js/views/SetupWizard/EnvironmentSetup.vue

<template>
    <AuthContentWrapper ref="auth">
        <!--Database Credentials-->
        <AuthContent name="database-credentials" :visible="true" class="!max-w-2xl mt-6 mb-12">
            <Headline class="mx-auto max-w-screen-sm !mb-10" title="Setup Wizard" description="Set up your storage driver and email client.">
                <settings-icon size="40" class="vue-feather text-theme mx-auto animate-[spin_5s_linear_infinite] mb-3" />
            </Headline>

            <ValidationObserver @submit.prevent="EnvironmentSetupSubmit" ref="environmentSetup" v-slot="{ invalid }" tag="form">

				<div class="card shadow-card text-left">
					<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="local" 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-red': 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-red': 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" :key="storage.driver" 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-red': 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-red': errors[0] }" />
							</AppInputText>
						</ValidationProvider>
					</div>
				</div>

				<div class="card shadow-card text-left">
					<FormLabel>Email Setup</FormLabel>

					<ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
						<AppInputText title="Mail Driver" :error="errors[0]">
							<SelectInput v-model="mail.driver" :options="mailDriverList" default="smtp" placeholder="Select your mail driver" :isError="errors[0]" />
						</AppInputText>
					</ValidationProvider>

					<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.host" placeholder="Type your mail host" type="text" :class="{ 'border-red': 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.port" placeholder="Type your mail port" type="text" :class="{ 'border-red': 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="mail.username" placeholder="Type your mail username" type="text" :class="{ 'border-red': 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.password" placeholder="Type your mail password" type="text" :class="{ 'border-red': 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="mail.encryption" :options="encryptionList" placeholder="Select your mail encryption" :isError="errors[0]" />
						</AppInputText>
					</ValidationProvider>
				</div>

				<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 { mapGetters } from 'vuex'
import axios from 'axios'

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) {
            if (this.storage.driver === 'spaces') this.storage.endpoint = 'https://' + val + '.digitaloceanspaces.com'

            if (this.storage.driver === 'wasabi') this.storage.endpoint = 'https://s3.' + val + '.wasabisys.com'

            if (this.storage.driver === 'backblaze') this.storage.endpoint = 'https://s3.' + val + '.backblazeb2.com'

            if (this.storage.driver === 'oss') this.storage.endpoint = 'https://' + val + '.aliyuncs.com'
        },
    },
    computed: {
        regionList() {
            switch (this.storage.driver) {
                case 's3':
                    return this.s3Regions
                    break
                case 'spaces':
                    return this.digitalOceanRegions
                    break
                case 'wasabi':
                    return this.wasabiRegions
                    break
                case 'backblaze':
                    return this.backblazeRegions
                    break
                case 'oss':
                    return this.ossRegions
                    break
            }
        },
    },
    data() {
        return {
            isLoading: false,
            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',
                },
            ],
            backblazeRegions: [
                {
                    label: 'us-west-001',
                    value: 'us-west-001',
                },
                {
                    label: 'us-west-002',
                    value: 'us-west-002',
                },
                {
                    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: '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',
                },
            ],
            encryptionList: [
                {
                    label: 'TLS',
                    value: 'tls',
                },
                {
                    label: 'SSL',
                    value: 'ssl',
                },
            ],
            mailDriverList: [
                {
                    label: 'smtp',
                    value: 'smtp',
                },
                {
                    label: 'sendmail',
                    value: 'sendmail',
                },
                {
                    label: 'mailgun',
                    value: 'mailgun',
                },
                {
                    label: 'ses',
                    value: 'ses',
                },
                {
                    label: 'postmark',
                    value: 'postmark',
                },
                {
                    label: 'log',
                    value: 'log',
                },
                {
                    label: 'array',
                    value: 'array',
                },
            ],
            storage: {
                driver: 'local',
                key: '',
                secret: '',
                endpoint: '',
                region: '',
                bucket: '',
            },
            mail: {
                driver: 'smtp',
                host: '',
                port: '',
                username: '',
                password: '',
                encryption: '',
            },
        }
    },
    methods: {
        async EnvironmentSetupSubmit() {
			if (this.$root.$data.config.isSetupWizardDemo) {
				this.$router.push({name: 'AppSetup'})
			}

            // 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', {
                    storage: this.storage,
                    mail: this.mail,
                })
                .then((response) => {
                    // End loading
                    this.isLoading = false

                    // Redirect to next step
                    this.$router.push({ name: 'AppSetup' })
                })
                .catch((error) => {
                    // End loading
                    this.isLoading = false
                })
        },
    },
    created() {
        this.$scrollTop()
    },
}
</script>