From e71810a9bbf9f303492b2ed6802c493eb5d4d546 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Tue, 12 Apr 2022 08:36:10 +0200
Subject: [PATCH] mail setup refactoring

---
 public/mix-manifest.json                      |   4 +-
 resources/js/components/Setup/MailSetup.vue   | 358 +++++++++
 .../js/components/Setup/StorageSetup.vue      |  85 +-
 resources/js/store/modules/lists.js           |  99 ++-
 .../AppSettingsTabs/Environment.vue           | 750 ++++++------------
 .../js/views/SetupWizard/EnvironmentSetup.vue | 602 ++++----------
 .../StoreEmailCredentialsController.php       |   1 +
 .../StoreEnvironmentSettingsController.php    |   1 +
 8 files changed, 810 insertions(+), 1090 deletions(-)
 create mode 100644 resources/js/components/Setup/MailSetup.vue

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index efbb49a0..e524e04b 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -6,7 +6,7 @@
     "/chunks/status-check.js": "/chunks/status-check.js?id=f82f9939c1326fe2",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=df5bd89528649783",
     "/chunks/database.js": "/chunks/database.js?id=15cc488117dccf7b",
-    "/chunks/environment.js": "/chunks/environment.js?id=a47beaba2035573d",
+    "/chunks/environment.js": "/chunks/environment.js?id=0cae9f804ca48d0e",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=15938ff1ad2d6ed2",
     "/chunks/admin-account.js": "/chunks/admin-account.js?id=916450217130f3b8",
     "/chunks/shared.js": "/chunks/shared.js?id=ec06bf0d3ada0f65",
@@ -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=fc46ec03276194e0",
+    "/chunks/app-environment.js": "/chunks/app-environment.js?id=eb6659a1355f0dff",
     "/chunks/app-others.js": "/chunks/app-others.js?id=abb8d96cd7c3a576",
     "/chunks/app-sign-in-out.js": "/chunks/app-sign-in-out.js?id=1cfffc99465b9a7a",
     "/chunks/app-adsense.js": "/chunks/app-adsense.js?id=a5dc9e715f8561bd",
diff --git a/resources/js/components/Setup/MailSetup.vue b/resources/js/components/Setup/MailSetup.vue
new file mode 100644
index 00000000..655daf49
--- /dev/null
+++ b/resources/js/components/Setup/MailSetup.vue
@@ -0,0 +1,358 @@
+<template>
+	<div>
+		<FormLabel icon="hard-drive">
+			{{ $te('mail_driver') ? $t('mail_driver') : 'Mail Setup' }}
+		</FormLabel>
+
+		<ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
+			<AppInputText title="Mail Driver" :error="errors[0]" :is-last="mail.driver === undefined || mail.driver === 'log'">
+				<SelectInput
+					v-model="mail.driver"
+					:default="mail.driver"
+					:options="driversList"
+					:placeholder="$te('select_mail_driver') ? $t('select_mail_driver') : 'Select your mail driver'"
+					:isError="errors[0]"
+				/>
+			</AppInputText>
+		</ValidationProvider>
+
+		<div v-if="mail.driver === 'smtp'">
+			<ValidationProvider tag="div" mode="passive" name="Mail Host" rules="required" v-slot="{ errors }">
+				<AppInputText title="Mail Host" :error="errors[0]">
+					<input
+						class="focus-border-theme input-dark"
+						v-model="mail.smtp.host"
+						placeholder="Type your mail host"
+						type="text"
+						:class="{ '!border-rose-600': errors[0] }"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+
+			<ValidationProvider tag="div" mode="passive" name="Mail Port" rules="required" v-slot="{ errors }">
+				<AppInputText title="Mail Port" :error="errors[0]">
+					<input
+						class="focus-border-theme input-dark"
+						v-model="mail.smtp.port"
+						placeholder="Type your mail port"
+						type="text"
+						:class="{ '!border-rose-600': errors[0] }"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+
+			<ValidationProvider tag="div" mode="passive" name="Mail Username" rules="required" v-slot="{ errors }">
+				<AppInputText title="Mail Username" :error="errors[0]">
+					<input
+						class="focus-border-theme input-dark"
+						v-model.lazy="mail.smtp.username"
+						placeholder="Type your mail username"
+						type="text"
+						:class="{ '!border-rose-600': errors[0] }"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+
+			<ValidationProvider tag="div" mode="passive" name="Mail Password" rules="required" v-slot="{ errors }">
+				<AppInputText title="Mail Password" :error="errors[0]">
+					<input
+						class="focus-border-theme input-dark"
+						v-model="mail.smtp.password"
+						placeholder="Type your mail password"
+						type="text"
+						:class="{ '!border-rose-600': errors[0] }"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+
+			<ValidationProvider
+				tag="div"
+				mode="passive"
+				name="Mail Encryption"
+				v-slot="{ errors }"
+			>
+				<AppInputText title="Mail Encryption" :error="errors[0]" :is-last="! shouldSetSMTPEmail">
+					<SelectInput
+						v-model="mail.smtp.encryption"
+						:default="mail.smtp.encryption"
+						:options="mailEncryptionList"
+						placeholder="Select your mail encryption"
+						:isError="errors[0]"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+
+			<ValidationProvider v-if="shouldSetSMTPEmail" tag="div" mode="passive" name="Mail From Address" rules="required|email" v-slot="{ errors }">
+				<AppInputText title="Mail" :error="errors[0]" :is-last="true">
+					<input
+						class="focus-border-theme input-dark"
+						v-model.trim="mail.smtp.email"
+						placeholder="Type your mail from address"
+						type="text"
+						:class="{ '!border-rose-600': errors[0] }"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+		</div>
+
+		<div v-if="mail.driver === 'mailgun'">
+			<ValidationProvider tag="div" mode="passive" name="Domain" rules="required" v-slot="{ errors }">
+				<AppInputText title="Domain" :error="errors[0]">
+					<input
+						class="focus-border-theme input-dark"
+						v-model="mail.mailgun.domain"
+						placeholder="Type your domain"
+						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="mail.mailgun.secret"
+						placeholder="Type your secret"
+						type="text"
+						:class="{ '!border-rose-600': errors[0] }"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+
+			<ValidationProvider tag="div" mode="passive" name="Endpoint" rules="required" v-slot="{ errors }">
+				<AppInputText title="Endpoint" :error="errors[0]">
+					<SelectInput
+						v-model="mail.mailgun.endpoint"
+						:options="mailgunRegions"
+						placeholder="Select your endpoint"
+						:isError="errors[0]"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+
+			<ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
+				<AppInputText title="Sender (Email)" :error="errors[0]" :is-last="true">
+					<input
+						class="focus-border-theme input-dark"
+						v-model="mail.mailgun.sender"
+						placeholder="Type your sender email..."
+						type="text"
+						:class="{ '!border-rose-600': errors[0] }"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+		</div>
+
+		<div v-if="mail.driver === 'postmark'">
+			<ValidationProvider tag="div" mode="passive" name="Token" rules="required" v-slot="{ errors }">
+				<AppInputText title="Token" :error="errors[0]">
+					<input
+						class="focus-border-theme input-dark"
+						v-model="mail.postmark.token"
+						placeholder="Type your token"
+						type="text"
+						:class="{ '!border-rose-600': errors[0] }"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+
+			<ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
+				<AppInputText title="Sender Signature (Email)" :error="errors[0]" :is-last="true">
+					<input
+						class="focus-border-theme input-dark"
+						v-model="mail.postmark.sender"
+						placeholder="Type your sender signature..."
+						type="text"
+						:class="{ '!border-rose-600': errors[0] }"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+		</div>
+
+		<div v-if="mail.driver === 'ses'">
+			<ValidationProvider tag="div" mode="passive" name="Access Key" rules="required" v-slot="{ errors }">
+				<AppInputText title="Access Key" :error="errors[0]">
+					<input
+						class="focus-border-theme input-dark"
+						v-model="mail.ses.access_key"
+						placeholder="Type your access key"
+						type="text"
+						:class="{ '!border-rose-600': errors[0] }"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+
+			<ValidationProvider
+				tag="div"
+				mode="passive"
+				name="Secret Access Key"
+				rules="required"
+				v-slot="{ errors }"
+			>
+				<AppInputText title="Secret Access Key" :error="errors[0]">
+					<input
+						class="focus-border-theme input-dark"
+						v-model="mail.ses.secret_access_key"
+						placeholder="Type your secret access key"
+						type="text"
+						:class="{ '!border-rose-600': errors[0] }"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+
+			<ValidationProvider tag="div" mode="passive" name="Default Region" rules="required" v-slot="{ errors }">
+				<AppInputText title="Region" :error="errors[0]">
+					<SelectInput
+						v-model="mail.ses.default_region"
+						:options="s3Regions"
+						placeholder="Select your region"
+						:isError="errors[0]"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+
+			<ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
+				<AppInputText title="Identity (Email)" :error="errors[0]">
+					<input
+						class="focus-border-theme input-dark"
+						v-model="mail.ses.sender"
+						placeholder="Type your identity email..."
+						type="text"
+						:class="{ '!border-rose-600': errors[0] }"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+
+			<ValidationProvider tag="div" mode="passive" name="Session Token" v-slot="{ errors }">
+				<AppInputText title="Session Token (optional)" :error="errors[0]" :is-last="true">
+					<input
+						class="focus-border-theme input-dark"
+						v-model="mail.ses.session_token"
+						placeholder="Type your session token"
+						type="text"
+						:class="{ '!border-rose-600': errors[0] }"
+					/>
+				</AppInputText>
+			</ValidationProvider>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
+	import SelectInput from '../Others/Forms/SelectInput'
+	import AppInputText from '../Admin/AppInputText'
+	import FormLabel from '../Others/Forms/FormLabel'
+
+	export default {
+		name: 'MailSetup',
+		components: {
+			ValidationObserver,
+			ValidationProvider,
+			AppInputText,
+			SelectInput,
+			FormLabel,
+		},
+		watch: {
+			mail: {
+				handler(newValue, oldValue) {
+					this.$emit('input', newValue)
+				},
+				deep: true
+			},
+			'mail.smtp.username': function (val) {
+				if (this.$isValidEmail(val)) {
+					this.mail.smtp.email = undefined
+					this.shouldSetSMTPEmail = false
+				} else {
+					this.shouldSetSMTPEmail = true
+				}
+			},
+		},
+		computed: {
+			s3Regions() {
+				return this.$store.getters.s3Regions
+			},
+		},
+		data() {
+			return {
+				shouldSetSMTPEmail: false,
+				mail: {
+					driver: undefined,
+					ses: {
+						access_key: undefined,
+						secret_access_key: undefined,
+						default_region: undefined,
+						session_token: undefined,
+						sender: undefined,
+					},
+					smtp: {
+						host: undefined,
+						port: undefined,
+						email: undefined,
+						username: undefined,
+						password: undefined,
+						encryption: undefined,
+					},
+					mailgun: {
+						domain: undefined,
+						secret: undefined,
+						endpoint: undefined,
+						sender: undefined,
+					},
+					postmark: {
+						token: undefined,
+						sender: undefined,
+					},
+				},
+				mailgunRegions: [
+					{
+						label: 'US Endpoint (api.mailgun.net)',
+						value: 'api.mailgun.net',
+					},
+					{
+						label: 'EU Endpoint (api.eu.mailgun.net)',
+						value: 'api.eu.mailgun.net',
+					},
+				],
+				mailEncryptionList: [
+					{
+						label: 'TLS',
+						value: 'tls',
+					},
+					{
+						label: 'SSL',
+						value: 'ssl',
+					},
+					{
+						label: 'None',
+						value: '',
+					},
+				],
+				driversList: [
+					{
+						label: 'SMTP',
+						value: 'smtp',
+					},
+					{
+						label: 'Mailgun',
+						value: 'mailgun',
+					},
+					{
+						label: 'SES',
+						value: 'ses',
+					},
+					{
+						label: 'Postmark',
+						value: 'postmark',
+					},
+					{
+						label: 'None',
+						value: 'log',
+					},
+				],
+			}
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Setup/StorageSetup.vue b/resources/js/components/Setup/StorageSetup.vue
index b9722106..b513f67a 100644
--- a/resources/js/components/Setup/StorageSetup.vue
+++ b/resources/js/components/Setup/StorageSetup.vue
@@ -158,6 +158,9 @@
 			},
 		},
 		computed: {
+			s3Regions() {
+				return this.$store.getters.s3Regions
+			},
 			regionList() {
 				return {
 					storj: this.storjRegions,
@@ -333,88 +336,6 @@
 						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',
diff --git a/resources/js/store/modules/lists.js b/resources/js/store/modules/lists.js
index 26992f22..d80cf5dd 100644
--- a/resources/js/store/modules/lists.js
+++ b/resources/js/store/modules/lists.js
@@ -1,38 +1,92 @@
 const defaultState = {
-    mailEncryptionList: [
+    s3Regions: [
         {
-            label: 'TLS',
-            value: 'tls',
+            label: 'us-east-1',
+            value: 'us-east-1',
         },
         {
-            label: 'SSL',
-            value: 'ssl',
+            label: 'us-east-2',
+            value: 'us-east-2',
         },
         {
-            label: 'None',
-            value: '',
-        },
-    ],
-    mailDriverList: [
-        {
-            label: 'SMTP',
-            value: 'smtp',
+            label: 'us-west-1',
+            value: 'us-west-1',
         },
         {
-            label: 'Mailgun',
-            value: 'mailgun',
+            label: 'us-west-2',
+            value: 'us-west-2',
         },
         {
-            label: 'SES',
-            value: 'ses',
+            label: 'af-south-1',
+            value: 'af-south-1',
         },
         {
-            label: 'Postmark',
-            value: 'postmark',
+            label: 'ap-east-1',
+            value: 'ap-east-1',
         },
         {
-            label: 'None',
-            value: 'log',
+            label: 'ap-south-1',
+            value: 'ap-south-1',
+        },
+        {
+            label: 'ap-southeast-1',
+            value: 'ap-southeast-1',
+        },
+        {
+            label: 'ap-southeast-2',
+            value: 'ap-southeast-2',
+        },
+        {
+            label: 'ap-southeast-3',
+            value: 'ap-southeast-3',
+        },
+        {
+            label: 'ap-northeast-1',
+            value: 'ap-northeast-1',
+        },
+        {
+            label: 'ap-northeast-2',
+            value: 'ap-northeast-2',
+        },
+        {
+            label: 'ap-northeast-3',
+            value: 'ap-northeast-3',
+        },
+        {
+            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',
         },
     ],
     transactionColumns: [
@@ -1061,16 +1115,15 @@ const defaultState = {
 }
 
 const getters = {
-    mailEncryptionList: (state) => state.mailEncryptionList,
     transactionColumns: (state) => state.transactionColumns,
     subscriptionTypes: (state) => state.subscriptionTypes,
     teamPermissions: (state) => state.teamPermissions,
-    mailDriverList: (state) => state.mailDriverList,
     expirationList: (state) => state.expirationList,
     currencyList: (state) => state.currencyList,
     intervalList: (state) => state.intervalList,
     timezones: (state) => state.timezones,
     countries: (state) => state.countries,
+    s3Regions: (state) => state.s3Regions,
     roles: (state) => state.roles,
 }
 
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Environment.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Environment.vue
index 5a43aaaa..c6fd1fd4 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Environment.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Environment.vue
@@ -1,137 +1,136 @@
 <template>
     <PageTab :is-loading="isLoading">
-
-		<!--Broadcasting setup-->
+        <!--Broadcasting setup-->
         <ValidationObserver
-			@submit.prevent="broadcastSetupSubmit"
-			ref="broadcastSetup"
-			v-slot="{ invalid }"
-			tag="form"
-			class="card shadow-card"
-		>
+            @submit.prevent="broadcastSetupSubmit"
+            ref="broadcastSetup"
+            v-slot="{ invalid }"
+            tag="form"
+            class="card shadow-card"
+        >
             <FormLabel icon="wifi">
-				{{ $t('broadcasting') }}
-			</FormLabel>
+                {{ $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]"
-					/>
+                        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 }">
+            <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] }"
-						/>
+                            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 }">
+                <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] }"
-						/>
+                            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>
 
             <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] }"
-						/>
+                            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] }"
-						/>
+                            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] }"
-						/>
+                            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]"
-						/>
+                            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"
-			>
+                :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"
-			v-slot="{ invalid }"
-			tag="form"
-			class="card shadow-card"
-		>
-			<StorageSetup v-model="storage" />
+        <!--Storage setup-->
+        <ValidationObserver
+            @submit.prevent="storageSetupSubmit"
+            ref="storageSetup"
+            v-slot="{ invalid }"
+            tag="form"
+            class="card shadow-card"
+        >
+            <StorageSetup v-model="storage" />
 
-			<ButtonBase
-				:loading="isSendingStorageForm"
-				:disabled="isSendingStorageForm"
-				type="submit"
-				button-style="theme"
-				class="w-full sm:w-auto mt-6 sm:mt-7"
-			>
+            <ButtonBase
+                :loading="isSendingStorageForm"
+                :disabled="isSendingStorageForm"
+                type="submit"
+                button-style="theme"
+                class="mt-6 w-full sm:mt-7 sm:w-auto"
+            >
                 {{ $t('save_storage_settings') }}
             </ButtonBase>
-		</ValidationObserver>
+        </ValidationObserver>
 
-		<!--Mail setup-->
+        <!--Mail setup-->
         <ValidationObserver
             @submit.prevent="emailSetupSubmit"
             ref="EmailSetup"
@@ -139,247 +138,14 @@
             tag="form"
             class="card shadow-card"
         >
-            <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]">
-                    <SelectInput
-                        v-model="mailDriver"
-                        :default="mailDriver"
-                        :options="mailDriverList"
-                        :placeholder="$t('select_mail_driver')"
-                        :isError="errors[0]"
-                    />
-                </AppInputText>
-            </ValidationProvider>
-
-            <div v-if="mailDriver === 'smtp'">
-                <ValidationProvider tag="div" mode="passive" name="Mail Host" rules="required" v-slot="{ errors }">
-                    <AppInputText title="Mail Host" :error="errors[0]">
-                        <input
-                            class="focus-border-theme input-dark"
-                            v-model="smtp.host"
-                            placeholder="Type your mail host"
-                            type="text"
-                            :class="{ '!border-rose-600': errors[0] }"
-                        />
-                    </AppInputText>
-                </ValidationProvider>
-
-                <ValidationProvider tag="div" mode="passive" name="Mail Port" rules="required" v-slot="{ errors }">
-                    <AppInputText title="Mail Port" :error="errors[0]">
-                        <input
-                            class="focus-border-theme input-dark"
-                            v-model="smtp.port"
-                            placeholder="Type your mail port"
-                            type="text"
-                            :class="{ '!border-rose-600': errors[0] }"
-                        />
-                    </AppInputText>
-                </ValidationProvider>
-
-                <ValidationProvider tag="div" mode="passive" name="Mail Username" rules="required" v-slot="{ errors }">
-                    <AppInputText title="Mail Username" :error="errors[0]">
-                        <input
-                            class="focus-border-theme input-dark"
-                            v-model.lazy="smtp.username"
-                            placeholder="Type your mail username"
-                            type="text"
-                            :class="{ '!border-rose-600': errors[0] }"
-                        />
-                    </AppInputText>
-                </ValidationProvider>
-
-                <ValidationProvider tag="div" mode="passive" name="Mail Password" rules="required" v-slot="{ errors }">
-                    <AppInputText title="Mail Password" :error="errors[0]">
-                        <input
-                            class="focus-border-theme input-dark"
-                            v-model="smtp.password"
-                            placeholder="Type your mail password"
-                            type="text"
-                            :class="{ '!border-rose-600': errors[0] }"
-                        />
-                    </AppInputText>
-                </ValidationProvider>
-
-                <ValidationProvider
-                    tag="div"
-                    mode="passive"
-                    name="Mail Encryption"
-                    v-slot="{ errors }"
-                >
-                    <AppInputText title="Mail Encryption" :error="errors[0]">
-                        <SelectInput
-                            v-model="smtp.encryption"
-                            :default="smtp.encryption"
-                            :options="mailEncryptionList"
-                            placeholder="Select your mail encryption"
-                            :isError="errors[0]"
-                        />
-                    </AppInputText>
-                </ValidationProvider>
-
-				<ValidationProvider v-if="shouldSetSMTPEmail" tag="div" mode="passive" name="Mail From Address" rules="required|email" v-slot="{ errors }">
-                    <AppInputText title="Mail" :error="errors[0]">
-                        <input
-							class="focus-border-theme input-dark"
-							v-model.trim="smtp.email"
-							placeholder="Type your mail from address"
-							type="text"
-							:class="{ '!border-rose-600': errors[0] }"
-						/>
-                    </AppInputText>
-                </ValidationProvider>
-            </div>
-
-            <div v-if="mailDriver === 'mailgun'">
-                <ValidationProvider tag="div" mode="passive" name="Domain" rules="required" v-slot="{ errors }">
-                    <AppInputText title="Domain" :error="errors[0]">
-                        <input
-                            class="focus-border-theme input-dark"
-                            v-model="mailgun.domain"
-                            placeholder="Type your domain"
-                            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="mailgun.secret"
-                            placeholder="Type your secret"
-                            type="text"
-                            :class="{ '!border-rose-600': errors[0] }"
-                        />
-                    </AppInputText>
-                </ValidationProvider>
-
-                <ValidationProvider tag="div" mode="passive" name="Endpoint" rules="required" v-slot="{ errors }">
-                    <AppInputText title="Endpoint" :error="errors[0]">
-						<SelectInput
-							v-model="mailgun.endpoint"
-							:options="mailgunRegions"
-							placeholder="Select your endpoint"
-							:isError="errors[0]"
-						/>
-                    </AppInputText>
-                </ValidationProvider>
-
-				<ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
-                    <AppInputText title="Sender (Email)" :error="errors[0]">
-                        <input
-							class="focus-border-theme input-dark"
-							v-model="mailgun.sender"
-							placeholder="Type your sender email..."
-							type="text"
-							:class="{ '!border-rose-600': errors[0] }"
-						/>
-                    </AppInputText>
-                </ValidationProvider>
-            </div>
-
-            <div v-if="mailDriver === 'postmark'">
-                <ValidationProvider tag="div" mode="passive" name="Token" rules="required" v-slot="{ errors }">
-                    <AppInputText title="Token" :error="errors[0]">
-                        <input
-                            class="focus-border-theme input-dark"
-                            v-model="postmark.token"
-                            placeholder="Type your token"
-                            type="text"
-                            :class="{ '!border-rose-600': errors[0] }"
-                        />
-                    </AppInputText>
-                </ValidationProvider>
-
-                <ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
-                    <AppInputText title="Sender Signature (Email)" :error="errors[0]">
-                        <input
-                            class="focus-border-theme input-dark"
-                            v-model="postmark.sender"
-                            placeholder="Type your sender signature..."
-                            type="text"
-                            :class="{ '!border-rose-600': errors[0] }"
-                        />
-                    </AppInputText>
-                </ValidationProvider>
-            </div>
-
-            <div v-if="mailDriver === 'ses'">
-                <ValidationProvider tag="div" mode="passive" name="Access Key" rules="required" v-slot="{ errors }">
-                    <AppInputText title="Access Key" :error="errors[0]">
-                        <input
-                            class="focus-border-theme input-dark"
-                            v-model="ses.access_key"
-                            placeholder="Type your access key"
-                            type="text"
-                            :class="{ '!border-rose-600': errors[0] }"
-                        />
-                    </AppInputText>
-                </ValidationProvider>
-
-                <ValidationProvider
-                    tag="div"
-                    mode="passive"
-                    name="Secret Access Key"
-                    rules="required"
-                    v-slot="{ errors }"
-                >
-                    <AppInputText title="Secret Access Key" :error="errors[0]">
-                        <input
-                            class="focus-border-theme input-dark"
-                            v-model="ses.secret_access_key"
-                            placeholder="Type your secret access key"
-                            type="text"
-                            :class="{ '!border-rose-600': errors[0] }"
-                        />
-                    </AppInputText>
-                </ValidationProvider>
-
-                <ValidationProvider tag="div" mode="passive" name="Default Region" rules="required" v-slot="{ errors }">
-                    <AppInputText title="Region" :error="errors[0]">
-						<SelectInput
-							v-model="ses.default_region"
-							:options="s3Regions"
-							placeholder="Select your region"
-							:isError="errors[0]"
-						/>
-                    </AppInputText>
-                </ValidationProvider>
-
-				<ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
-                    <AppInputText title="Identity (Email)" :error="errors[0]">
-                        <input
-							class="focus-border-theme input-dark"
-							v-model="ses.sender"
-							placeholder="Type your identity email..."
-							type="text"
-							:class="{ '!border-rose-600': errors[0] }"
-						/>
-                    </AppInputText>
-                </ValidationProvider>
-
-                <ValidationProvider tag="div" mode="passive" name="Session Token" v-slot="{ errors }">
-                    <AppInputText title="Session Token (optional)" :error="errors[0]">
-                        <input
-                            class="focus-border-theme input-dark"
-                            v-model="ses.session_token"
-                            placeholder="Type your session token"
-                            type="text"
-                            :class="{ '!border-rose-600': errors[0] }"
-                        />
-                    </AppInputText>
-                </ValidationProvider>
-            </div>
+            <MailSetup v-model="mail" />
 
             <ButtonBase
                 :loading="isSendingEmailForm"
                 :disabled="isSendingEmailForm"
                 type="submit"
                 button-style="theme"
-                class="w-full sm:w-auto"
+                class="mt-6 w-full sm:mt-7 sm:w-auto"
             >
                 {{ $t('admin_settings.email.save_button') }}
             </ButtonBase>
@@ -388,229 +154,177 @@
 </template>
 
 <script>
-import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
+import { ValidationObserver, ValidationProvider } from 'vee-validate/dist/vee-validate.full'
 import SelectInput from '../../../../components/Others/Forms/SelectInput'
 import FormLabel from '../../../../components/Others/Forms/FormLabel'
 import AppInputText from '../../../../components/Admin/AppInputText'
+import StorageSetup from '../../../../components/Setup/StorageSetup'
 import ButtonBase from '../../../../components/FilesView/ButtonBase'
 import PageTab from '../../../../components/Others/Layout/PageTab'
-import StorageSetup from "../../../../components/Setup/StorageSetup"
-import {events} from '../../../../bus'
-import {mapGetters} from 'vuex'
+import MailSetup from '../../../../components/Setup/MailSetup'
+import { events } from '../../../../bus'
 import axios from 'axios'
 
 export default {
     name: 'AppEnvironment',
     components: {
-		StorageSetup,
-        AppInputText,
         ValidationObserver,
         ValidationProvider,
+        StorageSetup,
+        AppInputText,
         SelectInput,
         ButtonBase,
+        MailSetup,
         FormLabel,
         PageTab,
-
-    },
-	watch: {
-		'smtp.username': function (val) {
-			if (this.$isValidEmail(val)) {
-				this.smtp.email = undefined
-				this.shouldSetSMTPEmail = false
-			} else {
-				this.shouldSetSMTPEmail = true
-			}
-		},
-	},
-    computed: {
-        ...mapGetters([
-			'mailEncryptionList',
-			'mailDriverList'
-		]),
     },
     data() {
         return {
-			shouldSetSMTPEmail: false,
+            storage: undefined,
+            mail: undefined,
             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',
-				},
-			],
-			mailgunRegions: [
-				{
-					label: 'US Endpoint (api.mailgun.net)',
-					value: 'api.mailgun.net',
-				},
-				{
-					label: 'EU Endpoint (api.eu.mailgun.net)',
-					value: 'api.eu.mailgun.net',
-				},
-			],
-			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',
-				},
-			],
-			storage: undefined,
-            ses: {
-                access_key: undefined,
-                secret_access_key: undefined,
-                default_region: undefined,
-                session_token: undefined,
-				sender: undefined,
-			},
-            smtp: {
-                host: undefined,
-                port: undefined,
-				email: undefined,
-                username: undefined,
-                password: undefined,
-                encryption: undefined,
-            },
-            mailgun: {
-                domain: undefined,
+            isSendingBroadcastForm: false,
+            broadcast: {
+                driver: undefined,
+                id: undefined,
+                key: undefined,
                 secret: undefined,
-                endpoint: undefined,
-				sender: undefined,
+                cluster: undefined,
+                port: undefined,
+                host: undefined,
             },
-            postmark: {
-                token: undefined,
-				sender: 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: {
-		async broadcastSetupSubmit() {
-			// Validate fields
-			const isValid = await this.$refs.broadcastSetup.validate()
+        async broadcastSetupSubmit() {
+            // Validate fields
+            const isValid = await this.$refs.broadcastSetup.validate()
 
-			if (!isValid) return
+            if (!isValid) return
 
-			// Start loading
-			this.isSendingBroadcastForm = true
+            // Start loading
+            this.isSendingBroadcastForm = true
 
-			axios
-				.post('/api/admin/settings/broadcast', {...this.broadcast})
-				.then(() => {
-					events.$emit('toaster', {
-						type: 'success',
-						message: this.$t('broadcast_driver_updated'),
-					})
-				})
-				.catch(() => {
-					events.$emit('toaster', {
-						type: 'danger',
-						message: this.$t('popup_error.title'),
-					})
-				})
-				.finally(() => {
-					this.isSendingBroadcastForm = false
+            axios
+                .post('/api/admin/settings/broadcast', { ...this.broadcast })
+                .then(() => {
+                    events.$emit('toaster', {
+                        type: 'success',
+                        message: this.$t('broadcast_driver_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()
+                    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()
 
-			if (!isValid) return
+            if (!isValid) return
 
-			// Start loading
-			this.isSendingStorageForm = true
+            // Start loading
+            this.isSendingStorageForm = true
 
-			axios
-				.post('/api/admin/settings/storage', {
-					storage: this.storage
-				})
-				.then(() => {
-					this.storage = undefined
+            axios
+                .post('/api/admin/settings/storage', {
+                    storage: this.storage,
+                })
+                .then(() => {
+                    this.storage = undefined
 
-					events.$emit('toaster', {
-						type: 'success',
-						message: this.$t('storage_driver_updated'),
-					})
-				})
-				.catch((error) => {
-					if (error.response.status === 401 && error.response.data.type === 's3-connection-error') {
-						events.$emit('alert:open', {
-							title: 'S3 Connection Error - Wrong Credentials or Not Permitted',
-							message: error.response.data.message,
-						})
-					} else {
-						events.$emit('toaster', {
-							type: 'danger',
-							message: this.$t('popup_error.title'),
-						})
-					}
-				})
-				.finally(() => {
-					this.isSendingStorageForm = false
-				})
-		},
+                    events.$emit('toaster', {
+                        type: 'success',
+                        message: this.$t('storage_driver_updated'),
+                    })
+                })
+                .catch((error) => {
+                    if (error.response.status === 401 && error.response.data.type === 's3-connection-error') {
+                        events.$emit('alert:open', {
+                            title: 'S3 Connection Error - Wrong Credentials or Not Permitted',
+                            message: error.response.data.message,
+                        })
+                    } else {
+                        events.$emit('toaster', {
+                            type: 'danger',
+                            message: this.$t('popup_error.title'),
+                        })
+                    }
+                })
+                .finally(() => {
+                    this.isSendingStorageForm = false
+                })
+        },
         async emailSetupSubmit() {
             // Validate fields
             const isValid = await this.$refs.EmailSetup.validate()
@@ -622,13 +336,11 @@ export default {
 
             axios
                 .post('/api/admin/settings/email', {
-                    environment: this.environment,
-                    storage: this.storage,
-                    mailDriver: this.mailDriver,
-                    smtp: this.smtp,
-                    mailgun: this.mailgun,
-                    ses: this.ses,
-                    postmark: this.postmark,
+                    mailDriver: this.mail.driver,
+                    postmark: this.mail.postmark,
+                    mailgun: this.mail.mailgun,
+                    smtp: this.mail.smtp,
+                    ses: this.mail.ses,
                 })
                 .then(() => {
                     events.$emit('toaster', {
@@ -637,17 +349,17 @@ export default {
                     })
                 })
                 .catch((error) => {
-					if (error.response.status === 401 && error.response.data.type === 'mailer-connection-error') {
-						events.$emit('alert:open', {
-							title: 'Mailer Connection Error - Wrong Credentials',
-							message: error.response.data.message,
-						})
-					} else {
-						events.$emit('toaster', {
-							type: 'danger',
-							message: this.$t('popup_error.title'),
-						})
-					}
+                    if (error.response.status === 401 && error.response.data.type === 'mailer-connection-error') {
+                        events.$emit('alert:open', {
+                            title: 'Mailer Connection Error - Wrong Credentials',
+                            message: error.response.data.message,
+                        })
+                    } else {
+                        events.$emit('toaster', {
+                            type: 'danger',
+                            message: this.$t('popup_error.title'),
+                        })
+                    }
                 })
                 .finally(() => {
                     this.isSendingEmailForm = false
diff --git a/resources/js/views/SetupWizard/EnvironmentSetup.vue b/resources/js/views/SetupWizard/EnvironmentSetup.vue
index 7e0ed1d3..367f8786 100644
--- a/resources/js/views/SetupWizard/EnvironmentSetup.vue
+++ b/resources/js/views/SetupWizard/EnvironmentSetup.vue
@@ -19,150 +19,81 @@
                 v-slot="{ invalid }"
                 tag="form"
             >
-				<StorageSetup v-model="storage" class="card shadow-card text-left" />
+                <StorageSetup v-model="storage" class="card text-left shadow-card" />
+
+                <MailSetup v-model="mail" class="card text-left shadow-card" />
 
                 <div class="card text-left shadow-card">
-                    <FormLabel>Email Setup</FormLabel>
+                    <FormLabel icon="wifi">
+                        {{ $t('Broadcasting') }}
+                    </FormLabel>
 
                     <ValidationProvider
                         tag="div"
                         mode="passive"
-                        name="Mail Driver"
+                        name="Broadcast Driver"
                         rules="required"
                         v-slot="{ errors }"
                     >
                         <AppInputText
-                            title="Mail Driver"
+                            title="Broadcast Driver"
                             :error="errors[0]"
-                            :is-last="!mailDriver || mailDriver === 'log'"
+                            :is-last="broadcast.driver === 'none' || broadcast.driver === undefined"
                         >
                             <SelectInput
-                                v-model="mailDriver"
-                                :default="mailDriver"
-                                :options="mailDriverList"
-                                placeholder="Select your mail driver"
+                                v-model="broadcast.driver"
+                                :options="broadcastDrivers"
+                                placeholder="Select your broadcast driver"
                                 :isError="errors[0]"
                             />
                         </AppInputText>
                     </ValidationProvider>
 
-                    <div v-if="mailDriver === 'smtp'">
-                        <ValidationProvider
-                            tag="div"
-                            mode="passive"
-                            name="Mail Host"
-                            rules="required"
-                            v-slot="{ errors }"
-                        >
-                            <AppInputText title="Mail Host" :error="errors[0]">
+                    <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="smtp.host"
-                                    placeholder="Type your mail host"
+                                    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="Mail Port"
-                            rules="required"
-                            v-slot="{ errors }"
-                        >
-                            <AppInputText title="Mail Port" :error="errors[0]">
+                        <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="smtp.port"
-                                    placeholder="Type your mail port"
+                                    v-model="broadcast.port"
+                                    placeholder="Type your port"
                                     type="text"
                                     :class="{ '!border-rose-600': errors[0] }"
                                 />
                             </AppInputText>
                         </ValidationProvider>
-
-                        <ValidationProvider
-                            tag="div"
-                            mode="passive"
-                            name="Mail Username"
-                            rules="required"
-                            v-slot="{ errors }"
-                        >
-                            <AppInputText title="Mail Username" :error="errors[0]">
-                                <input
-                                    class="focus-border-theme input-dark"
-                                    v-model.lazy="smtp.username"
-                                    placeholder="Type your mail username"
-                                    type="text"
-                                    :class="{ '!border-rose-600': errors[0] }"
-                                />
-                            </AppInputText>
-                        </ValidationProvider>
-
-                        <ValidationProvider
-                            tag="div"
-                            mode="passive"
-                            name="Mail Password"
-                            rules="required"
-                            v-slot="{ errors }"
-                        >
-                            <AppInputText title="Mail Password" :error="errors[0]">
-                                <input
-                                    class="focus-border-theme input-dark"
-                                    v-model="smtp.password"
-                                    placeholder="Type your mail password"
-                                    type="text"
-                                    :class="{ '!border-rose-600': errors[0] }"
-                                />
-                            </AppInputText>
-                        </ValidationProvider>
-
-                        <ValidationProvider
-                            tag="div"
-                            mode="passive"
-                            name="Mail Encryption"
-                            v-slot="{ errors }"
-                        >
-                            <AppInputText title="Mail Encryption" :error="errors[0]" :is-last="! shouldSetSMTPEmail">
-                                <SelectInput
-                                    v-model="smtp.encryption"
-                                    :default="smtp.encryption"
-                                    :options="mailEncryptionList"
-                                    placeholder="Select your mail encryption"
-                                    :isError="errors[0]"
-                                />
-                            </AppInputText>
-                        </ValidationProvider>
-
-						<ValidationProvider
-							v-if="shouldSetSMTPEmail"
-							tag="div"
-							mode="passive"
-							name="Mail From Address"
-							rules="required|email"
-							v-slot="{ errors }"
-						>
-                            <AppInputText title="Mail" :error="errors[0]" :is-last="true">
-                                <input
-									class="focus-border-theme input-dark"
-									v-model.lazy="smtp.email"
-									placeholder="Type your mail from address"
-									type="text"
-									:class="{ '!border-rose-600': errors[0] }"
-								/>
-                            </AppInputText>
-                        </ValidationProvider>
                     </div>
 
-                    <div v-if="mailDriver === 'mailgun'">
-                        <ValidationProvider tag="div" mode="passive" name="Domain" rules="required" v-slot="{ errors }">
-                            <AppInputText title="Domain" :error="errors[0]">
+                    <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="mailgun.domain"
-                                    placeholder="Type your domain"
+                                    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] }"
                                 />
@@ -173,83 +104,8 @@
                             <AppInputText title="Secret" :error="errors[0]">
                                 <input
                                     class="focus-border-theme input-dark"
-                                    v-model="mailgun.secret"
-                                    placeholder="Type your secret"
-                                    type="text"
-                                    :class="{ '!border-rose-600': errors[0] }"
-                                />
-                            </AppInputText>
-                        </ValidationProvider>
-
-						<ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
-							<AppInputText title="Sender (Email)" :error="errors[0]">
-								<input
-									class="focus-border-theme input-dark"
-									v-model="mailgun.sender"
-									placeholder="Type your sender email..."
-									type="text"
-									:class="{ '!border-rose-600': errors[0] }"
-								/>
-							</AppInputText>
-						</ValidationProvider>
-
-                        <ValidationProvider
-                            tag="div"
-                            mode="passive"
-                            name="Endpoint"
-                            rules="required"
-                            v-slot="{ errors }"
-                        >
-                            <AppInputText title="Endpoint" :error="errors[0]" :is-last="true">
-								<SelectInput
-									v-model="mailgun.endpoint"
-									:options="mailgunRegions"
-									placeholder="Select your endpoint"
-									:isError="errors[0]"
-								/>
-                            </AppInputText>
-                        </ValidationProvider>
-                    </div>
-
-                    <div v-if="mailDriver === 'postmark'">
-                        <ValidationProvider tag="div" mode="passive" name="Token" rules="required" v-slot="{ errors }">
-                            <AppInputText title="Token" :error="errors[0]">
-                                <input
-                                    class="focus-border-theme input-dark"
-                                    v-model="postmark.token"
-                                    placeholder="Type your token"
-                                    type="text"
-                                    :class="{ '!border-rose-600': errors[0] }"
-                                />
-                            </AppInputText>
-                        </ValidationProvider>
-
-						<ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
-							<AppInputText title="Sender Signature (Email)" :is-last="true" :error="errors[0]">
-								<input
-									class="focus-border-theme input-dark"
-									v-model="postmark.sender"
-									placeholder="Type your sender signature..."
-									type="text"
-									:class="{ '!border-rose-600': errors[0] }"
-								/>
-							</AppInputText>
-						</ValidationProvider>
-                    </div>
-
-                    <div v-if="mailDriver === 'ses'">
-                        <ValidationProvider
-                            tag="div"
-                            mode="passive"
-                            name="Access Key"
-                            rules="required"
-                            v-slot="{ errors }"
-                        >
-                            <AppInputText title="Access Key" :error="errors[0]">
-                                <input
-                                    class="focus-border-theme input-dark"
-                                    v-model="ses.access_key"
-                                    placeholder="Type your access key"
+                                    v-model="broadcast.secret"
+                                    placeholder="Paste your secret"
                                     type="text"
                                     :class="{ '!border-rose-600': errors[0] }"
                                 />
@@ -259,156 +115,22 @@
                         <ValidationProvider
                             tag="div"
                             mode="passive"
-                            name="Secret Access Key"
+                            name="Cluster"
                             rules="required"
                             v-slot="{ errors }"
                         >
-                            <AppInputText title="Secret Access Key" :error="errors[0]">
-                                <input
-                                    class="focus-border-theme input-dark"
-                                    v-model="ses.secret_access_key"
-                                    placeholder="Type your secret access key"
-                                    type="text"
-                                    :class="{ '!border-rose-600': errors[0] }"
-                                />
-                            </AppInputText>
-                        </ValidationProvider>
-
-                        <ValidationProvider
-                            tag="div"
-                            mode="passive"
-                            name="Default Region"
-                            rules="required"
-                            v-slot="{ errors }"
-                        >
-                            <AppInputText title="Region" :error="errors[0]">
-								<SelectInput
-									v-model="ses.default_region"
-									:options="s3Regions"
-									placeholder="Select your region"
-									:isError="errors[0]"
-								/>
-                            </AppInputText>
-                        </ValidationProvider>
-
-						<ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
-							<AppInputText title="Identity (Email)" :error="errors[0]">
-								<input
-									class="focus-border-theme input-dark"
-									v-model="ses.sender"
-									placeholder="Type your identity email..."
-									type="text"
-									:class="{ '!border-rose-600': errors[0] }"
-								/>
-							</AppInputText>
-						</ValidationProvider>
-
-                        <ValidationProvider tag="div" mode="passive" name="Session Token" v-slot="{ errors }">
-                            <AppInputText title="Session Token (optional)" :error="errors[0]" :is-last="true">
-                                <input
-                                    class="focus-border-theme input-dark"
-                                    v-model="ses.session_token"
-                                    placeholder="Type your session token"
-                                    type="text"
-                                    :class="{ '!border-rose-600': errors[0] }"
+                            <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 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>
 
@@ -448,26 +170,27 @@
 </template>
 
 <script>
-import AppInputText from '../../components/Admin/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
 import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
 import SelectInput from '../../components/Others/Forms/SelectInput'
 import FormLabel from '../../components/Others/Forms/FormLabel'
+import StorageSetup from '../../components/Setup/StorageSetup'
+import AppInputText from '../../components/Admin/AppInputText'
 import InfoBox from '../../components/Others/Forms/InfoBox'
 import AuthContent from '../../components/Auth/AuthContent'
 import AuthButton from '../../components/Auth/AuthButton'
+import MailSetup from '../../components/Setup/MailSetup'
+import { required } from 'vee-validate/dist/rules'
 import { SettingsIcon } from 'vue-feather-icons'
 import Headline from '../Auth/Headline'
-import { required } from 'vee-validate/dist/rules'
+import { events } from '../../bus'
 import axios from 'axios'
-import { mapGetters } from 'vuex'
-import {events} from "../../bus";
-import StorageSetup from "../../components/Setup/StorageSetup";
 
 export default {
     name: 'EnvironmentSetup',
     components: {
-		StorageSetup,
+        MailSetup,
+        StorageSetup,
         AuthContentWrapper,
         ValidationProvider,
         ValidationObserver,
@@ -481,26 +204,9 @@ export default {
         InfoBox,
         Headline,
     },
-    watch: {
-		'smtp.username': function (val) {
-			if (this.$isValidEmail(val)) {
-				this.smtp.email = undefined
-				this.shouldSetSMTPEmail = false
-			} else {
-				this.shouldSetSMTPEmail = true
-			}
-		},
-    },
-    computed: {
-        ...mapGetters([
-			'mailEncryptionList',
-			'mailDriverList',
-		]),
-    },
     data() {
         return {
-			shouldSetSMTPEmail: false,
-			isError: false,
+            isError: false,
             isLoading: false,
             environment: 'production',
             environmentSetupList: [
@@ -514,103 +220,68 @@ export default {
                 },
             ],
             storage: undefined,
-            mailDriver: undefined,
-            ses: {
-                access_key: undefined,
-                secret_access_key: undefined,
-                default_region: undefined,
-                session_token: undefined,
-				sender: undefined,
-			},
-            smtp: {
-                host: undefined,
-                port: undefined,
-				email: undefined,
-				username: undefined,
-                password: undefined,
-                encryption: undefined,
-            },
-            mailgun: {
-                domain: undefined,
+            mail: undefined,
+            broadcast: {
+                driver: undefined,
+                id: undefined,
+                key: undefined,
                 secret: undefined,
-                endpoint: undefined,
-				sender: undefined,
+                cluster: undefined,
+                port: undefined,
+                host: undefined,
             },
-            postmark: {
-                token: undefined,
-				sender: 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',
-				},
-			],
-			mailgunRegions: [
-				{
-					label: 'US Endpoint (api.mailgun.net)',
-					value: 'api.mailgun.net',
-				},
-				{
-					label: 'EU Endpoint (api.eu.mailgun.net)',
-					value: 'api.eu.mailgun.net',
-				},
-			],
-			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',
-				},
-			],
+            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: {
@@ -634,30 +305,33 @@ export default {
                     broadcast: this.broadcast,
                     environment: this.environment,
                     storage: this.storage,
-                    mailDriver: this.mailDriver,
-                    smtp: this.smtp,
-                    mailgun: this.mailgun,
-                    ses: this.ses,
-                    postmark: this.postmark,
+                    mailDriver: this.mail.driver,
+                    smtp: this.mail.smtp,
+                    mailgun: this.mail.mailgun,
+                    ses: this.mail.ses,
+                    postmark: this.mail.postmark,
                 })
                 .then(() => {
                     // Redirect to next step
                     this.$router.push({ name: 'AppSetup' })
                 })
                 .catch((error) => {
-					if (error.response.status === 401 && error.response.data.type === 's3-connection-error') {
-						events.$emit('alert:open', {
-							title: 'S3 Connection Error - Wrong Credentials or Not Permitted',
-							message: error.response.data.message,
-						})
-					} else if (error.response.status === 401 && error.response.data.type === 'mailer-connection-error') {
-						events.$emit('alert:open', {
-							title: 'Mailer Connection Error - Wrong Credentials',
-							message: error.response.data.message,
-						})
-					} else {
-                    	this.isError = true
-					}
+                    if (error.response.status === 401 && error.response.data.type === 's3-connection-error') {
+                        events.$emit('alert:open', {
+                            title: 'S3 Connection Error - Wrong Credentials or Not Permitted',
+                            message: error.response.data.message,
+                        })
+                    } else if (
+                        error.response.status === 401 &&
+                        error.response.data.type === 'mailer-connection-error'
+                    ) {
+                        events.$emit('alert:open', {
+                            title: 'Mailer Connection Error - Wrong Credentials',
+                            message: error.response.data.message,
+                        })
+                    } else {
+                        this.isError = true
+                    }
                 })
                 .finally(() => {
                     this.isLoading = false
@@ -666,11 +340,11 @@ export default {
     },
     beforeMount() {
         if (this.$root.$data.config.isSetupWizardDebug) {
-            this.mailDriver = 'smtp'
             this.environment = 'local'
             this.storage.driver = 'local'
 
-            this.smtp = {
+            this.mail.driver = 'smtp'
+            this.mail.smtp = {
                 host: 'test.mail.com',
                 port: 445,
                 username: 'howdy@hi5ve.digital',
diff --git a/src/Domain/Settings/Controllers/StoreEmailCredentialsController.php b/src/Domain/Settings/Controllers/StoreEmailCredentialsController.php
index d0fd6476..ebd9d6b8 100644
--- a/src/Domain/Settings/Controllers/StoreEmailCredentialsController.php
+++ b/src/Domain/Settings/Controllers/StoreEmailCredentialsController.php
@@ -55,6 +55,7 @@ class StoreEmailCredentialsController
                     'session_token'     => $request->input('ses.session_token'),
                     'identity'          => $request->input('ses.sender'),
                 ]),
+                default => null
             };
 
             $mail = [
diff --git a/src/Domain/SetupWizard/Controllers/StoreEnvironmentSettingsController.php b/src/Domain/SetupWizard/Controllers/StoreEnvironmentSettingsController.php
index 19cf8580..2fe4caef 100644
--- a/src/Domain/SetupWizard/Controllers/StoreEnvironmentSettingsController.php
+++ b/src/Domain/SetupWizard/Controllers/StoreEnvironmentSettingsController.php
@@ -62,6 +62,7 @@ class StoreEnvironmentSettingsController extends Controller
                     'session_token'     => $request->input('ses.session_token'),
                     'identity'          => $request->input('ses.sender'),
                 ]),
+                default => null
             };
 
             $setup = [