Ability to set custom s3 compatible service in administration settings and setup wizard

changelog.md

@@ -1,6 +1,7 @@
 ## Version 2.0.11
 #### Release date: 1. April 2022
 - Improved email setup in administration settings and setup wizard
+- Ability to set custom s3 compatible service in administration settings and setup wizard
 
 ## Version 2.0.0 - 2.0.10
 #### Release date: 31. March 2022

public/mix-manifest.json

@@ -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=7008cbc674035319",
+    "/chunks/app-environment.js": "/chunks/app-environment.js?id=1f5458233a20b263",
     "/chunks/app-others.js": "/chunks/app-others.js?id=16dc948aa2205189",
     "/chunks/app-sign-in-out.js": "/chunks/app-sign-in-out.js?id=1cfffc99465b9a7a",
     "/chunks/app-adsense.js": "/chunks/app-adsense.js?id=a5dc9e715f8561bd",
@@ -72,5 +72,5 @@
     "/chunks/invitation.js": "/chunks/invitation.js?id=9ed8456c9d6d5ce1",
     "/css/tailwind.css": "/css/tailwind.css",
     "/css/app.css": "/css/app.css",
-    "/chunks/environment.js": "/chunks/environment.js?id=50e798871582c3fa"
+    "/chunks/environment.js": "/chunks/environment.js?id=cef6ee74e56cb0d0"
 }

resources/js/views/Admin/AppSettings/AppSettingsTabs/Environment.vue

@@ -164,10 +164,11 @@
 					</AppInputText>
 				</ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Region" rules="required" v-slot="{ errors }">
+				<!--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."
+						description="Select your region where is your bucket created."
 						:error="errors[0]"
 					>
 						<SelectInput
@@ -180,6 +181,24 @@
 					</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"
@@ -187,14 +206,14 @@
 					rules="required"
 					v-slot="{ errors }"
 				>
-					<AppInputText title="Endpoint URL" :error="errors[0]">
+					<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
+							:readonly="storage.driver !== 'other'"
 						/>
 					</AppInputText>
 				</ValidationProvider>
@@ -202,7 +221,7 @@
 				<ValidationProvider tag="div" mode="passive" name="Bucket" rules="required" v-slot="{ errors }">
 					<AppInputText
 						title="Bucket"
-						description="Provide your created unique bucket name"
+						description="Type your created unique bucket name"
 						:error="errors[0]"
 					>
 						<input
@@ -501,6 +520,7 @@ export default {
 				backblaze: 'https://s3.' + val + '.backblazeb2.com',
 				oss: 'https://' + val + '.aliyuncs.com',
 				s3: 'https://s3.amazonaws.com',
+				other: undefined,
 			}[this.storage.driver]
 		},
 	},
@@ -514,8 +534,12 @@ export default {
 				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 {
@@ -810,6 +834,10 @@ export default {
 					label: 'Alibaba Cloud OSS',
 					value: 'oss',
 				},
+				{
+					label: 'Other S3 Compatible Service',
+					value: 'other',
+				},
 			],
 			storage: {
 				driver: undefined,

resources/js/views/SetupWizard/EnvironmentSetup.vue

@@ -65,7 +65,8 @@
                             </AppInputText>
                         </ValidationProvider>
 
-                        <ValidationProvider tag="div" mode="passive" name="Region" rules="required" v-slot="{ errors }">
+						<!--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."
@@ -81,6 +82,24 @@
                             </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"
@@ -88,14 +107,14 @@
                             rules="required"
                             v-slot="{ errors }"
                         >
-                            <AppInputText title="Endpoint URL" :error="errors[0]">
+                            <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
+									:readonly="storage.driver !== 'other'"
                                 />
                             </AppInputText>
                         </ValidationProvider>
@@ -103,7 +122,7 @@
                         <ValidationProvider tag="div" mode="passive" name="Bucket" rules="required" v-slot="{ errors }">
                             <AppInputText
                                 title="Bucket"
-                                description="Provide your created unique bucket name"
+                                description="Type your created unique bucket name"
                                 :error="errors[0]"
                                 :is-last="true"
                             >
@@ -562,6 +581,7 @@ export default {
                 backblaze: 'https://s3.' + val + '.backblazeb2.com',
                 oss: 'https://' + val + '.aliyuncs.com',
 				s3: 'https://s3.amazonaws.com',
+				other: undefined,
 			}[this.storage.driver]
         },
     },
@@ -575,8 +595,12 @@ export default {
                 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 {
@@ -827,6 +851,10 @@ export default {
                     label: 'Alibaba Cloud OSS',
                     value: 'oss',
                 },
+				{
+					label: 'Other S3 Compatible Service',
+					value: 'other',
+				},
             ],
             storage: {
                 driver: 'local',