set broadcasting in admin and setup wizard

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,