set storage driver via admin

public/mix-manifest.json

@@ -71,5 +71,6 @@
     "/js/chunks/shared-with-me.js": "/js/chunks/shared-with-me.js",
     "/js/chunks/invitation.js": "/js/chunks/invitation.js",
     "/css/tailwind.css": "/css/tailwind.css",
-    "/css/app.css": "/css/app.css"
+    "/css/app.css": "/css/app.css",
+    "/js/chunks/app-environment.js": "/js/chunks/app-environment.js"
 }

resources/js/components/Others/Forms/FormLabel.vue

@@ -10,6 +10,7 @@
         <bar-chart-icon v-if="icon === 'bar-chart'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
         <settings-icon v-if="icon === 'settings'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
         <hard-drive-icon v-if="icon === 'hard-drive'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
+        <mail-icon v-if="icon === 'mail'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
         <smartphone-icon v-if="icon === 'smartphone'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
         <shield-icon v-if="icon === 'shield'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
         <bell-icon v-if="icon === 'bell'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
@@ -23,6 +24,7 @@
 
 <script>
 import {
+	MailIcon,
     InfoIcon,
     DatabaseIcon,
     UsersIcon,
@@ -44,6 +46,7 @@ export default {
     name: 'FormLabel',
     props: ['icon'],
     components: {
+		MailIcon,
         InfoIcon,
         DatabaseIcon,
         UsersIcon,

resources/js/routes/routesAdmin.js

@@ -335,11 +335,11 @@ const routesAdmin = [
                         },
                     },
                     {
-                        name: 'AppEmail',
+                        name: 'AppEnvironment',
-                        path: '/admin/settings/email',
+                        path: '/admin/settings/environment',
                         component: () =>
                             import(
-                                /* webpackChunkName: "chunks/app-email" */ '../views/Admin/AppSettings/AppSettingsTabs/Email'
+                                /* webpackChunkName: "chunks/app-environment" */ '../views/Admin/AppSettings/AppSettingsTabs/Environment'
                             ),
                         meta: {
                             requiresAuth: true,

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

@@ -42,8 +42,8 @@ export default {
                     route: 'AppIndex',
                 },
                 {
-                    title: this.$t('admin_settings.tabs.email'),
+                    title: this.$t('Environment'),
-                    route: 'AppEmail',
+                    route: 'AppEnvironment',
                 },
                 {
                     title: this.$t('Server'),
@@ -53,7 +53,9 @@ export default {
         }
     },
     mounted() {
-        this.$router.push({ name: 'AppOthers' })
+		if (this.$route.path === '/admin/settings') {
+        	this.$router.push({ name: 'AppOthers' })
+		}
     },
 }
 </script>

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

@@ -1,5 +1,122 @@
 <template>
     <PageTab :is-loading="isLoading">
+		<ValidationObserver
+			@submit.prevent="storageSetupSubmit"
+			ref="storageSetup"
+			v-slot="{ invalid }"
+			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-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"
+							:default="storage.region"
+							placeholder="Select your region"
+							:isError="errors[0]"
+						/>
+					</AppInputText>
+				</ValidationProvider>
+
+				<ValidationProvider
+					v-if="storage.driver !== 's3'"
+					tag="div"
+					mode="passive"
+					name="Endpoint"
+					rules="required"
+					v-slot="{ errors }"
+				>
+					<AppInputText 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]"
+					>
+						<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>
+
+			<ButtonBase
+				:loading="isSendingStorageForm"
+				:disabled="isSendingStorageForm"
+				type="submit"
+				button-style="theme"
+				class="w-full sm:w-auto"
+			>
+                {{ $t('Save Storage Settings') }}
+            </ButtonBase>
+		</ValidationObserver>
+
         <ValidationObserver
             @submit.prevent="EmailSetupSubmit"
             ref="EmailSetup"
@@ -7,7 +124,7 @@
             tag="form"
             class="card shadow-card"
         >
-            <FormLabel>{{ $t('admin_settings.email.section_email') }}</FormLabel>
+            <FormLabel icon="mail">{{ $t('Mail Driver') }}</FormLabel>
 
             <ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
                 <AppInputText title="Mail Driver" :error="errors[0]">
@@ -198,8 +315,8 @@
             </div>
 
             <ButtonBase
-                :loading="isSendingRequest"
+                :loading="isSendingEmailForm"
-                :disabled="isSendingRequest"
+                :disabled="isSendingEmailForm"
                 type="submit"
                 button-style="theme"
                 class="w-full sm:w-auto"
@@ -227,7 +344,7 @@ import axios from 'axios'
 import { mapGetters } from 'vuex'
 
 export default {
-    name: 'AppAppearance',
+    name: 'AppEnvironment',
     components: {
         AppInputText,
         ValidationObserver,
@@ -242,14 +359,277 @@ export default {
         PageTab,
         InfoBox,
     },
+	watch: {
+		'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',
+			}[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 {
             isLoading: false,
-            isSendingRequest: false,
+            isSendingEmailForm: false,
+            isSendingStorageForm: false,
             mailDriver: 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 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: '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: undefined,
+				key: undefined,
+				secret: undefined,
+				endpoint: undefined,
+				region: undefined,
+				bucket: undefined,
+			},
             ses: {
                 access_key: undefined,
                 secret_access_key: undefined,
@@ -274,6 +654,44 @@ export default {
         }
     },
     methods: {
+		async storageSetupSubmit() {
+			// Validate fields
+			const isValid = await this.$refs.storageSetup.validate()
+
+			if (!isValid) return
+
+			// Start loading
+			this.isSendingStorageForm = true
+
+			axios
+				.post('/api/admin/settings/storage', {
+					storage: this.storage
+				})
+				.then(() => {
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('Your storage driver was updated.'),
+					})
+				})
+				.catch(() => {
+					events.$emit('toaster', {
+						type: 'danger',
+						message: this.$t('popup_error.title'),
+					})
+				})
+				.finally(() => {
+					this.isSendingStorageForm = false
+
+					this.storage = {
+						driver: undefined,
+						key: undefined,
+						secret: undefined,
+						endpoint: undefined,
+						region: undefined,
+						bucket: undefined,
+					}
+				})
+		},
         async EmailSetupSubmit() {
             // Validate fields
             const isValid = await this.$refs.EmailSetup.validate()
@@ -281,9 +699,8 @@ export default {
             if (!isValid) return
 
             // Start loading
-            this.isSendingRequest = true
+            this.isSendingEmailForm = true
 
-            // Send request to get verify account
             axios
                 .post('/api/admin/settings/email', {
                     environment: this.environment,
@@ -307,7 +724,7 @@ export default {
                     })
                 })
                 .finally(() => {
-                    this.isSendingRequest = false
+                    this.isSendingEmailForm = false
                 })
         },
     },

routes/admin.php

@@ -9,6 +9,7 @@ use Domain\Settings\Controllers\GetServerStatusController;
 use Domain\Settings\Controllers\GetSettingsValueController;
 use Domain\Admin\Controllers\Dashboard\GetNewbiesController;
 use Domain\Admin\Controllers\Users\ChangeUserRoleController;
+use Domain\Settings\Controllers\StoreStorageCredentialsController;
 use Domain\Settings\Controllers\UpdateSettingValueController;
 use Domain\Admin\Controllers\Users\ResetUserPasswordController;
 use Domain\Settings\Controllers\StoreEmailCredentialsController;
@@ -50,6 +51,7 @@ Route::group(['prefix' => 'settings'], function () {
 
     Route::get('/flush-cache', FlushCacheController::class);
     Route::post('/email', StoreEmailCredentialsController::class);
+    Route::post('/storage', StoreStorageCredentialsController::class);
 
     Route::post('/payment-service', StorePaymentServiceCredentialsController::class);
     Route::post('/social-service', StoreSocialServiceCredentialsController::class);

src/Domain/Settings/Controllers/StoreStorageCredentialsController.php

@@ -0,0 +1,47 @@
+<?php
+namespace Domain\Settings\Controllers;
+
+use Artisan;
+use Domain\Settings\Requests\StoreStorageCredentialsRequest;
+use Illuminate\Http\Response;
+use Domain\Settings\Requests\StoreEmailCredentialsRequest;
+
+class StoreStorageCredentialsController
+{
+    /**
+     * Set new email credentials to .env file
+     */
+    public function __invoke(StoreStorageCredentialsRequest $request): Response
+    {
+        // Abort in demo mode
+        abort_if(is_demo(), 204, 'Done.');
+
+        if (! app()->runningUnitTests()) {
+            $drivers = [
+                'local' => [
+                    'FILESYSTEM_DISK' => 'local',
+                ],
+                's3'    => [
+                    'FILESYSTEM_DISK'    => 's3',
+                    'S3_ACCESS_KEY_ID'     => $request->input('storage.key') ?? null,
+                    'S3_SECRET_ACCESS_KEY' => $request->input('storage.secret') ?? null,
+                    'S3_DEFAULT_REGION'    => $request->input('storage.region') ?? null,
+                    'S3_BUCKET'            => $request->input('storage.bucket') ?? null,
+                    'S3_URL'               => $request->input('storage.endpoint') ?? null,
+                ],
+            ];
+
+            // Get storage driver from request
+            $driver = 'local' === $request->input('storage.driver') ? 'local' : 's3';
+
+            // Storage credentials for storage
+            setEnvironmentValue(
+                $drivers[$driver]
+            );
+
+            Artisan::call('config:cache');
+        }
+
+        return response('Done', 204);
+    }
+}

src/Domain/Settings/Requests/StoreStorageCredentialsRequest.php

@@ -0,0 +1,29 @@
+<?php
+namespace Domain\Settings\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreStorageCredentialsRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'storage'          => 'required|array',
+        ];
+    }
+}

tests/Domain/Settings/SettingsTest.php

@@ -1,4 +1,5 @@
 <?php
+
 namespace Tests\Domain\Settings;
 
 use Storage;
@@ -198,4 +199,26 @@ class SettingsTest extends TestCase
                 'smtp.encryption' => 'tls',
             ])->assertStatus(204);
     }
+
+    /**
+     * @test
+     */
+    public function it_set_storage()
+    {
+        $admin = User::factory()
+            ->create(['role' => 'admin']);
+
+        $this
+            ->actingAs($admin)
+            ->postJson('/api/admin/settings/storage', [
+                'storage' => [
+                    'driver'   => 's3',
+                    'key'      => '123456',
+                    'secret'   => '123456',
+                    'region'   => 'frankfurt',
+                    'bucket'   => 'cloud',
+                    'endpoint' => 'https://cloud.frankfurt.storage.com',
+                ],
+            ])->assertStatus(204);
+    }
 }