set broadcasting in admin and setup wizard

resources/js/bootstrap.js

@@ -23,10 +23,11 @@ window.Pusher = require('pusher-js');
 if (config.broadcasting) {
 	window.Echo = new Echo({
 		broadcaster: 'pusher',
-		key: 'local',
-		wsHost: window.location.hostname,
-		wsPort: 8002,
-		wssPort: 8002,
+		cluster: config.broadcastingCluster,
+		key: config.broadcastingKey,
+		wsHost: config.broadcastingHost,
+		wsPort: config.broadcastingPort,
+		wssPort: config.broadcastingPort,
 		forceTLS: false,
 		enabledTransports: ['ws', 'wss'],
 	});

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

@@ -17,6 +17,7 @@
         <bell-icon v-if="icon === 'bell'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
         <key-icon v-if="icon === 'key'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
         <users-icon v-if="icon === 'users'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
+        <wifi-icon v-if="icon === 'wifi'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
         <b class="text-md font-bold dark:text-gray-200 sm:text-lg">
             <slot></slot>
         </b>
@@ -25,6 +26,7 @@
 
 <script>
 import {
+	WifiIcon,
 	ListIcon,
 	MailIcon,
     InfoIcon,
@@ -48,6 +50,7 @@ export default {
     name: 'FormLabel',
     props: ['icon'],
     components: {
+		WifiIcon,
 		ListIcon,
 		MailIcon,
         InfoIcon,

resources/js/components/Others/Notifications/Toaster.vue

@@ -10,10 +10,8 @@
             <!--Content-->
             <div class="flex items-center justify-between">
                 <div class="flex items-start">
-                    <div>
-                        <check-icon v-if="item.type === 'success'" size="22" class="vue-feather dark:text-green-600 text-green-600" />
-                        <x-icon v-if="item.type === 'danger'" size="22" class="vue-feather dark:text-red-600 text-red-600" />
-                    </div>
+					<check-icon v-if="item.type === 'success'" size="22" class="vue-feather dark:text-green-600 text-green-600" />
+					<x-icon v-if="item.type === 'danger'" size="22" class="vue-feather dark:text-red-600 text-red-600" />
 
                     <p
                         class="px-4 font-bold"
@@ -31,12 +29,13 @@
 </template>
 
 <script>
-import { CheckIcon } from 'vue-feather-icons'
+import { CheckIcon, XIcon } from 'vue-feather-icons'
 
 export default {
 	name: 'Toaster',
     components: {
         CheckIcon,
+		XIcon,
     },
     props: [
 		'barColor',

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()
 

resources/js/views/SetupWizard/EnvironmentSetup.vue

@@ -363,6 +363,98 @@
                     </div>
                 </div>
 
+				<div class="card text-left 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]" :is-last="broadcast.driver === 'none' || broadcast.driver === undefined">
+							<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]" :is-last="true">
+								<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]" :is-last="true">
+								<SelectInput
+									v-model="broadcast.cluster"
+									:options="pusherClusters"
+									placeholder="Select your cluster"
+									:isError="errors[0]"
+								/>
+							</AppInputText>
+						</ValidationProvider>
+					</div>
+				</div>
+
                 <div class="card text-left shadow-card">
                     <FormLabel>Environment Setup</FormLabel>
 
@@ -738,6 +830,67 @@ export default {
             postmark: {
                 token: undefined,
             },
+			broadcast: {
+				driver: undefined,
+				id: undefined,
+				key: undefined,
+				secret: undefined,
+				cluster: undefined,
+				port: undefined,
+				host: 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',
+				},
+			],
         }
     },
     methods: {
@@ -758,6 +911,7 @@ export default {
             // Send request to get verify account
             axios
                 .post('/api/setup/environment-setup', {
+                    broadcast: this.broadcast,
                     environment: this.environment,
                     storage: this.storage,
                     mailDriver: this.mailDriver,

resources/views/index.blade.php

@@ -74,12 +74,15 @@
         // todo: refactoring
 
 		let config = {
-			ip: '{{ config('broadcasting.connections.pusher.options.host') }}',
 			host: '{{ url('/') }}',
 			api: '{{ url('/api') }}',
 			locale: '{{ app()->getLocale() }}',
 
             broadcasting: '{{ config('broadcasting.default') }}',
+            broadcastingKey: '{{ config('broadcasting.connections.pusher.key') }}',
+            broadcastingHost: '{{ config('broadcasting.connections.pusher.options.host') }}',
+            broadcastingPort: '{{ config('broadcasting.connections.pusher.options.port') }}',
+            broadcastingCluster: '{{ config('broadcasting.connections.pusher.options.cluster') }}',
 
 			app_logo: '{{ $settings->app_logo ?? null }}',
 			app_logo_dark: '{{ $settings->app_logo_dark ?? null }}',