From b37bbe38dc7582f577cb9ea426cf0a8ef3b02855 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Mon, 11 Apr 2022 17:20:59 +0200
Subject: [PATCH] storage setup refactoring

---
 public/mix-manifest.json                      |   4 +-
 .../js/components/Setup/StorageSetup.vue      | 455 +++++++++++++++++
 .../AppSettingsTabs/Environment.vue           | 457 +-----------------
 .../js/views/SetupWizard/EnvironmentSetup.vue | 429 +---------------
 4 files changed, 480 insertions(+), 865 deletions(-)
 create mode 100644 resources/js/components/Setup/StorageSetup.vue

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index c0b38774..efbb49a0 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -6,7 +6,7 @@
     "/chunks/status-check.js": "/chunks/status-check.js?id=f82f9939c1326fe2",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=df5bd89528649783",
     "/chunks/database.js": "/chunks/database.js?id=15cc488117dccf7b",
-    "/chunks/environment.js": "/chunks/environment.js?id=4764d8f6d5c22b3c",
+    "/chunks/environment.js": "/chunks/environment.js?id=a47beaba2035573d",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=15938ff1ad2d6ed2",
     "/chunks/admin-account.js": "/chunks/admin-account.js?id=916450217130f3b8",
     "/chunks/shared.js": "/chunks/shared.js?id=ec06bf0d3ada0f65",
@@ -42,7 +42,7 @@
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=55da23af2b076069",
     "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=a694a01f3641712c",
     "/chunks/app-index.js": "/chunks/app-index.js?id=efdbfa062749ca00",
-    "/chunks/app-environment.js": "/chunks/app-environment.js?id=0f8a318553409406",
+    "/chunks/app-environment.js": "/chunks/app-environment.js?id=fc46ec03276194e0",
     "/chunks/app-others.js": "/chunks/app-others.js?id=abb8d96cd7c3a576",
     "/chunks/app-sign-in-out.js": "/chunks/app-sign-in-out.js?id=1cfffc99465b9a7a",
     "/chunks/app-adsense.js": "/chunks/app-adsense.js?id=a5dc9e715f8561bd",
diff --git a/resources/js/components/Setup/StorageSetup.vue b/resources/js/components/Setup/StorageSetup.vue
new file mode 100644
index 00000000..b9722106
--- /dev/null
+++ b/resources/js/components/Setup/StorageSetup.vue
@@ -0,0 +1,455 @@
+<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="storage.driver !== 'local' && 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.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>
+
+			<!--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.region"
+						:options="regionList"
+						:default="storage.region"
+						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.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.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.bucket"
+						placeholder="Type your bucket name"
+						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 '../Others/Forms/SelectInput'
+	import AppInputText from '../Admin/AppInputText'
+	import FormLabel from '../Others/Forms/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.region = undefined
+			},
+			'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',
+					s3: 'https://s3.' + val + '.amazonaws.com',
+					other: undefined,
+				}[this.storage.driver]
+			},
+		},
+		computed: {
+			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,
+					key: undefined,
+					secret: undefined,
+					endpoint: undefined,
+					region: undefined,
+					bucket: 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',
+					},
+				],
+				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',
+					},
+					{
+						label: 'Other S3 Compatible Service',
+						value: 'other',
+					},
+				],
+			}
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Environment.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Environment.vue
index 62103af7..5a43aaaa 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Environment.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Environment.vue
@@ -118,129 +118,14 @@
 			tag="form"
 			class="card shadow-card"
 		>
-			<FormLabel icon="hard-drive">
-				{{ $t('storage_driver') }}
-			</FormLabel>
-
-			<ValidationProvider
-				tag="div"
-				mode="passive"
-				name="Storage Service"
-				rules="required"
-				v-slot="{ errors }"
-			>
-				<AppInputText title="Storage Service" :error="errors[0]">
-					<SelectInput
-						v-model="storage.driver"
-						:options="storageServiceList"
-						placeholder="Select your storage service"
-						:isError="errors[0]"
-					/>
-				</AppInputText>
-			</ValidationProvider>
-
-			<div v-if="storage.driver !== 'local' && 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.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>
-
-				<!--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.region"
-							:options="regionList"
-							:default="storage.region"
-							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.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.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"
-						:error="errors[0]"
-					>
-						<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>
+			<StorageSetup v-model="storage" />
 
 			<ButtonBase
 				:loading="isSendingStorageForm"
 				:disabled="isSendingStorageForm"
 				type="submit"
 				button-style="theme"
-				class="w-full sm:w-auto"
+				class="w-full sm:w-auto mt-6 sm:mt-7"
 			>
                 {{ $t('save_storage_settings') }}
             </ButtonBase>
@@ -503,36 +388,29 @@
 </template>
 
 <script>
-import AppInputText from '../../../../components/Admin/AppInputText'
-import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
+import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
 import SelectInput from '../../../../components/Others/Forms/SelectInput'
-import ImageInput from '../../../../components/Others/Forms/ImageInput'
 import FormLabel from '../../../../components/Others/Forms/FormLabel'
+import AppInputText from '../../../../components/Admin/AppInputText'
 import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import SetupBox from '../../../../components/Others/Forms/SetupBox'
 import PageTab from '../../../../components/Others/Layout/PageTab'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
-import { required } from 'vee-validate/dist/rules'
-import { events } from '../../../../bus'
+import StorageSetup from "../../../../components/Setup/StorageSetup"
+import {events} from '../../../../bus'
+import {mapGetters} from 'vuex'
 import axios from 'axios'
-import { mapGetters } from 'vuex'
 
 export default {
     name: 'AppEnvironment',
     components: {
+		StorageSetup,
         AppInputText,
         ValidationObserver,
         ValidationProvider,
-        PageTabGroup,
         SelectInput,
-        ImageInput,
         ButtonBase,
         FormLabel,
-        SetupBox,
-        required,
         PageTab,
-        InfoBox,
+
     },
 	watch: {
 		'smtp.username': function (val) {
@@ -543,37 +421,12 @@ export default {
 				this.shouldSetSMTPEmail = true
 			}
 		},
-		'storage.driver': function () {
-			this.storage.region = undefined
-		},
-		'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',
-				s3: 'https://s3.' + val + '.amazonaws.com',
-				other: undefined,
-			}[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,
-				other: undefined,
-			}[this.storage.driver]
-		},
-		endpointUrlDescription() {
-			return this.storage.driver === 'other' ? this.$t('The endpoint url should start with https://') : ''
-		}
+        ...mapGetters([
+			'mailEncryptionList',
+			'mailDriverList'
+		]),
     },
     data() {
         return {
@@ -645,280 +498,7 @@ export default {
 					value: 'sa1',
 				},
 			],
-			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',
-				},
-			],
-			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',
-				},
-				{
-					label: 'Other S3 Compatible Service',
-					value: 'other',
-				},
-			],
-			storage: {
-				driver: undefined,
-				key: undefined,
-				secret: undefined,
-				endpoint: undefined,
-				region: undefined,
-				bucket: undefined,
-			},
+			storage: undefined,
             ses: {
                 access_key: undefined,
                 secret_access_key: undefined,
@@ -1007,14 +587,7 @@ export default {
 					storage: this.storage
 				})
 				.then(() => {
-					this.storage = {
-						driver: undefined,
-						key: undefined,
-						secret: undefined,
-						endpoint: undefined,
-						region: undefined,
-						bucket: undefined,
-					}
+					this.storage = undefined
 
 					events.$emit('toaster', {
 						type: 'success',
diff --git a/resources/js/views/SetupWizard/EnvironmentSetup.vue b/resources/js/views/SetupWizard/EnvironmentSetup.vue
index e716b3de..7e0ed1d3 100644
--- a/resources/js/views/SetupWizard/EnvironmentSetup.vue
+++ b/resources/js/views/SetupWizard/EnvironmentSetup.vue
@@ -19,124 +19,7 @@
                 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>
-
-						<!--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/space created."
-                                :error="errors[0]"
-                            >
-                                <SelectInput
-                                    v-model="storage.region"
-                                    :options="regionList"
-                                    :default="storage.region"
-                                    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.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.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"
-                                :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>
+				<StorageSetup v-model="storage" class="card shadow-card text-left" />
 
                 <div class="card text-left shadow-card">
                     <FormLabel>Email Setup</FormLabel>
@@ -579,10 +462,12 @@ import { required } from 'vee-validate/dist/rules'
 import axios from 'axios'
 import { mapGetters } from 'vuex'
 import {events} from "../../bus";
+import StorageSetup from "../../components/Setup/StorageSetup";
 
 export default {
     name: 'EnvironmentSetup',
     components: {
+		StorageSetup,
         AuthContentWrapper,
         ValidationProvider,
         ValidationObserver,
@@ -605,37 +490,12 @@ export default {
 				this.shouldSetSMTPEmail = true
 			}
 		},
-        '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',
-				s3: 'https://s3.' + val + '.amazonaws.com',
-				other: undefined,
-			}[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,
-				other: undefined,
-            }[this.storage.driver]
-        },
-		endpointUrlDescription() {
-			return this.storage.driver === 'other' ? this.$t('The endpoint url should start with https://') : ''
-		}
+        ...mapGetters([
+			'mailEncryptionList',
+			'mailDriverList',
+		]),
     },
     data() {
         return {
@@ -653,280 +513,7 @@ export default {
                     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-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',
-                },
-            ],
-            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',
-                },
-				{
-					label: 'Other S3 Compatible Service',
-					value: 'other',
-				},
-            ],
-            storage: {
-                driver: 'local',
-                key: undefined,
-                secret: undefined,
-                endpoint: undefined,
-                region: undefined,
-                bucket: undefined,
-            },
+            storage: undefined,
             mailDriver: undefined,
             ses: {
                 access_key: undefined,