Integrated e-mail alerts, added dialog option for release alerts.

components/user/preferences.vue

@@ -9,6 +9,9 @@ const pageContext = inject('pageContext');
 const { user } = pageContext;
 
 const settings = reactive({
+	alertNotificationsEnabled: true,
+	alertEmailsEnabled: true,
+	alertEmailsFrequency: null,
 	...user.settings,
 });
 
@@ -22,16 +25,32 @@ async function updateSettings() {
 		class="profile-section"
 		@submit.prevent
 	>
+		<h3 class="heading settings-heading">Alerts</h3>
+
 		<div class="setting">
 			<span class="setting-label">
-				<strong class="setting-title">Enable alert e-mails</strong>
-				<span class="setting-description">Whether you receive e-mail alerts</span>
+				<strong class="setting-title">Enable alert notifications</strong>
+				<span class="setting-description">Your alerts can trigger notifications in traxxx</span>
 			</span>
 
 			<span class="setting-value">
 				<Checkbox
-					:checked="settings.alertEmailEnabled"
-					@change="(checked) => { settings.alertEmailEnabled = checked; updateSettings(); }"
+					:checked="settings.alertNotificationsEnabled"
+					@change="(checked) => { settings.alertNotificationsEnabled = checked; updateSettings(); }"
+				/>
+			</span>
+		</div>
+
+		<div class="setting">
+			<span class="setting-label">
+				<strong class="setting-title">Enable alert e-mails</strong>
+				<span class="setting-description">Your alerts can trigger e-mails</span>
+			</span>
+
+			<span class="setting-value">
+				<Checkbox
+					:checked="settings.alertEmailsEnabled"
+					@change="(checked) => { settings.alertEmailsEnabled = checked; updateSettings(); }"
 				/>
 			</span>
 		</div>
@@ -39,12 +58,12 @@ async function updateSettings() {
 		<label class="setting">
 			<span class="setting-label">
 				<strong class="setting-title">Alert e-mail frequency</strong>
-				<span class="setting-description">How often you receive your e-mail alerts</span>
+				<span class="setting-description">Alert e-mails are sent immediately, or accumulated and sent periodically</span>
 			</span>
 
 			<span class="setting-value">
 				<select
-					v-model="settings.alertEmailFrequency"
+					v-model="settings.alertEmailsFrequency"
 					class="input"
 					@change="updateSettings"
 				>
@@ -63,6 +82,10 @@ async function updateSettings() {
 	background: var(--background);
 }
 
+.profile-section .heading {
+	margin: .5rem 1rem 0 1rem;
+}
+
 .setting {
 	width: 100%;
 	display: flex;