Email functionality is done

src/static/app/src/components/settingsComponent/dashboardEmailSettings.vue

@@ -1,14 +1,14 @@
 <script setup>
 import LocaleText from "@/components/text/localeText.vue";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
-import {preventDefault} from "ol/events/Event.js";
-import {onMounted} from "vue";
-import {fetchPost} from "@/utilities/fetch.js";
+import {onMounted, ref} from "vue";
+import {fetchGet, fetchPost} from "@/utilities/fetch.js";
 const store = DashboardConfigurationStore()
 
 onMounted(() => {
-	document.querySelectorAll("#emailAccount input").forEach(x => {
-		x.addEventListener("blur", async () => {
+	checkEmailReady()
+	document.querySelectorAll("#emailAccount input, #emailAccount select").forEach(x => {
+		x.addEventListener("change", async () => {
 			let id = x.attributes.getNamedItem('id').value;
 			await fetchPost("/api/updateDashboardConfigurationItem", {
 				section: "Email",
@@ -22,22 +22,53 @@ onMounted(() => {
 					x.classList.remove('is-valid')
 					x.classList.add('is-invalid')
 				}
+				checkEmailReady()
 			})
 		})
 	})
 })
 
+const emailIsReady = ref(false)
+const testEmailReceiver = ref("")
+const testing = ref(false)
+
+const checkEmailReady = async () => {
+	await fetchGet("/api/email/ready", {}, (res) => {
+		emailIsReady.value = res.status
+	})
+}
+
+const sendTestEmail = async () => {
+	testing.value = true
+	await fetchPost("/api/email/send", {
+		receiver: testEmailReceiver.value,
+		subject: "WGDashboard Testing Email",
+		body: "Test 1, 2, 3! Hello World :)"
+	}, (res) => {
+		if (res.status){
+			store.newMessage("Server", "Test email sent successfully!", "success")
+		}else{
+			store.newMessage("Server", `Test email sent failed! Reason: ${res.message}`, "danger")
+		}
+		testing.value = false
+	})
+}
+
 </script>
 
 <template>
-	<div class="card" id="emailAccount">
+	<div class="card">
 		<div class="card-header">
-			<h6 class="my-2">
+			<h6 class="my-2 d-flex">
 				<LocaleText t="Email Account"></LocaleText>
+				<span class="text-success ms-auto" v-if="emailIsReady">
+					<i class="bi bi-check-circle-fill me-2"></i>
+					<LocaleText t="Ready"></LocaleText>
+				</span>
 			</h6>
 		</div>
 		<div class="card-body">
-			<form @submit="(e) => preventDefault(e)">
+			<form @submit="(e) => e.preventDefault(e)" id="emailAccount">
 				<div class="row gx-2 gy-2">
 					<div class="col-12 col-lg-4">
 						<div class="form-group">
@@ -70,12 +101,19 @@ onMounted(() => {
 									<LocaleText t="Encryption"></LocaleText>
 								</small></strong>
 							</label>
-							<input id="encryption"
-							       v-model="store.Configuration.Email.encryption"
-							       type="text" class="form-control">
+							<select class="form-select"
+							        v-model="store.Configuration.Email.encryption"
+							        id="encryption">
+								<option value="STARTTLS">
+									STARTTLS
+								</option>
+								<option value="NOTLS">
+									<LocaleText t="No Encryption"></LocaleText>
+								</option>
+							</select>
 						</div>
 					</div>
-					<div class="col-12 col-lg-6">
+					<div class="col-12 col-lg-4">
 						<div class="form-group">
 							<label for="username" class="text-muted mb-1">
 								<strong><small>
@@ -87,7 +125,7 @@ onMounted(() => {
 							       type="text" class="form-control">
 						</div>
 					</div>
-					<div class="col-12 col-lg-6">
+					<div class="col-12 col-lg-4">
 						<div class="form-group">
 							<label for="email_password" class="text-muted mb-1">
 								<strong><small>
@@ -99,8 +137,39 @@ onMounted(() => {
 							       type="password" class="form-control">
 						</div>
 					</div>
+					<div class="col-12 col-lg-4">
+						<div class="form-group">
+							<label for="send_from" class="text-muted mb-1">
+								<strong><small>
+									<LocaleText t="Send From"></LocaleText>
+								</small></strong>
+							</label>
+							<input id="send_from"
+							       v-model="store.Configuration.Email.send_from"
+							       type="text" class="form-control">
+						</div>
+					</div>
 				</div>
 			</form>
+			<hr>
+			<form 
+				@submit="(e) => {e.preventDefault(); sendTestEmail()}"
+				class="input-group mb-3">
+				<input type="email" class="form-control rounded-start-3" 
+				       v-model="testEmailReceiver"
+				       :disabled="testing"
+				       placeholder="Test Email Receiver">
+				<button class="btn bg-primary-subtle text-primary-emphasis border-primary-subtle rounded-end-3"
+				        type="submit" value="Submit"
+				        :disabled="testEmailReceiver.length === 0 || testing"
+				        id="button-addon2">
+					<i class="bi bi-send me-2" v-if="!testing"></i>
+					<span class="spinner-border spinner-border-sm me-2" v-else>
+						<span class="visually-hidden">Loading...</span>
+					</span>
+					<LocaleText :t="!testing ? 'Send Test Email':'Sending...'"></LocaleText>
+				</button>
+			</form>
 		</div>
 	</div>
 </template>

src/static/app/src/utilities/fetch.js

@@ -60,7 +60,6 @@ export const fetchPost = async (url, body, callback) => {
 		if (!x.ok){
 			if (x.status !== 200){
 				if (x.status === 401){
-					
 					store.newMessage("WGDashboard", "Sign in session ended, please sign in again", "warning")
 				}
 				throw new Error(x.statusText)