set broadcasting in admin and setup wizard

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

@@ -1,5 +1,116 @@
 <template>
     <PageTab :is-loading="isLoading">
+
+		<!--Broadcasting setup-->
+        <ValidationObserver
+			@submit.prevent="broadcastSetupSubmit"
+			ref="broadcastSetup"
+			v-slot="{ invalid }"
+			tag="form"
+			class="card shadow-card"
+		>
+            <FormLabel icon="wifi">
+				{{ $t('Broadcasting') }}
+			</FormLabel>
+
+            <ValidationProvider tag="div" mode="passive" name="Broadcast Driver" rules="required" v-slot="{ errors }">
+                <AppInputText title="Broadcast Driver" :error="errors[0]">
+                    <SelectInput
+						v-model="broadcast.driver"
+						:options="broadcastDrivers"
+						placeholder="Select your broadcast driver"
+						:isError="errors[0]"
+					/>
+                </AppInputText>
+            </ValidationProvider>
+
+			<div v-if="broadcast.driver === 'native'">
+				<ValidationProvider tag="div" mode="passive" name="Host" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Hostname or IP" :error="errors[0]">
+                        <input
+							class="focus-border-theme input-dark"
+							v-model="broadcast.host"
+							placeholder="Type your hostname or IP"
+							type="text"
+							:class="{ '!border-rose-600': errors[0] }"
+						/>
+                    </AppInputText>
+                </ValidationProvider>
+
+				<ValidationProvider tag="div" mode="passive" name="Port" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Port" :error="errors[0]">
+                        <input
+							class="focus-border-theme input-dark"
+							v-model="broadcast.port"
+							placeholder="Type your port"
+							type="text"
+							:class="{ '!border-rose-600': errors[0] }"
+						/>
+                    </AppInputText>
+                </ValidationProvider>
+			</div>
+
+            <div v-if="broadcast.driver === 'pusher'">
+                <ValidationProvider tag="div" mode="passive" name="App ID" rules="required" v-slot="{ errors }">
+                    <AppInputText title="App ID" :error="errors[0]">
+                        <input
+							class="focus-border-theme input-dark"
+							v-model="broadcast.id"
+							placeholder="Type your app id"
+							type="text"
+							:class="{ '!border-rose-600': errors[0] }"
+						/>
+                    </AppInputText>
+                </ValidationProvider>
+
+                <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="broadcast.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="broadcast.secret"
+							placeholder="Paste your secret"
+							type="text"
+							:class="{ '!border-rose-600': errors[0] }"
+						/>
+                    </AppInputText>
+                </ValidationProvider>
+
+                <ValidationProvider tag="div" mode="passive" name="Cluster" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Cluster" :error="errors[0]">
+                        <SelectInput
+							v-model="broadcast.cluster"
+							:options="pusherClusters"
+							placeholder="Select your cluster"
+							:isError="errors[0]"
+						/>
+                    </AppInputText>
+                </ValidationProvider>
+            </div>
+
+            <ButtonBase
+				:loading="isSendingBroadcastForm"
+				:disabled="isSendingBroadcastForm"
+				type="submit"
+				button-style="theme"
+				class="w-full sm:w-auto"
+			>
+                {{ $t('Save Broadcast Settings') }}
+            </ButtonBase>
+        </ValidationObserver>
+
+		<!--Storage setup-->
 		<ValidationObserver
 			@submit.prevent="storageSetupSubmit"
 			ref="storageSetup"
@@ -117,8 +228,9 @@
             </ButtonBase>
 		</ValidationObserver>
 
+		<!--Mail setup-->
         <ValidationObserver
-            @submit.prevent="EmailSetupSubmit"
+            @submit.prevent="emailSetupSubmit"
             ref="EmailSetup"
             v-slot="{ invalid }"
             tag="form"
@@ -391,7 +503,60 @@ export default {
             isLoading: false,
             isSendingEmailForm: false,
             isSendingStorageForm: false,
+			isSendingBroadcastForm: false,
             mailDriver: undefined,
+			broadcastDrivers: [
+				{
+					label: 'Pusher',
+					value: 'pusher',
+				},
+				{
+					label: 'VueFileManager Broadcast Server',
+					value: 'native',
+				},
+				{
+					label: 'None',
+					value: 'none',
+				},
+			],
+			pusherClusters: [
+				{
+					label: 'US East (N. Virginia)',
+					value: 'mt1',
+				},
+				{
+					label: 'Asia Pacific (Singapore)',
+					value: 'ap1',
+				},
+				{
+					label: 'Asia Pacific (Mumbai)',
+					value: 'ap2',
+				},
+				{
+					label: 'US East (Ohio)',
+					value: 'us2',
+				},
+				{
+					label: 'Asia Pacific (Tokyo)',
+					value: 'ap3',
+				},
+				{
+					label: 'US West (Oregon)',
+					value: 'us3',
+				},
+				{
+					label: 'Asia Pacific (Sydney)',
+					value: 'ap4',
+				},
+				{
+					label: 'EU (Ireland)',
+					value: 'eu',
+				},
+				{
+					label: 'South America (São Paulo)',
+					value: 'sa1',
+				},
+			],
 			ossRegions: [
 				{
 					label: 'China (Hangzhou)',
@@ -655,9 +820,55 @@ export default {
             postmark: {
                 token: undefined,
             },
+			broadcast: {
+				driver: undefined,
+				id: undefined,
+				key: undefined,
+				secret: undefined,
+				cluster: undefined,
+				port: undefined,
+				host: undefined,
+			}
         }
     },
     methods: {
+		async broadcastSetupSubmit() {
+			// Validate fields
+			const isValid = await this.$refs.broadcastSetup.validate()
+
+			if (!isValid) return
+
+			// Start loading
+			this.isSendingBroadcastForm = true
+
+			axios
+				.post('/api/admin/settings/broadcast', {...this.broadcast})
+				.then(() => {
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('Your broadcast driver was updated.'),
+					})
+				})
+				.catch(() => {
+					events.$emit('toaster', {
+						type: 'danger',
+						message: this.$t('popup_error.title'),
+					})
+				})
+				.finally(() => {
+					this.isSendingBroadcastForm = false
+
+					this.broadcast = {
+						driver: undefined,
+						id: undefined,
+						key: undefined,
+						secret: undefined,
+						cluster: undefined,
+						host: undefined,
+						port: undefined,
+					}
+				})
+		},
 		async storageSetupSubmit() {
 			// Validate fields
 			const isValid = await this.$refs.storageSetup.validate()
@@ -696,7 +907,7 @@ export default {
 					}
 				})
 		},
-        async EmailSetupSubmit() {
+        async emailSetupSubmit() {
             // Validate fields
             const isValid = await this.$refs.EmailSetup.validate()