feat: Added background brightness setting (#1915)

Closes https://github.com/go-vikunja/vikunja/pull/1142

---------

Co-authored-by: Mithilesh Gupta <guptamithilesh@protonmail.com>
Co-authored-by: kolaente <k@knt.li>

frontend/src/components/home/ContentAuth.vue

@@ -15,7 +15,10 @@
 			<div
 				:class="{'is-visible': background}"
 				class="app-container-background background-fade-in d-print-none"
-				:style="{'background-image': background && `url(${background})`}"
+				:style="{
+					'background-image': background && `url(${background})`,
+					'filter': backgroundBrightness && `brightness(${backgroundBrightness}%)`
+				}"
 			/>
 			<Navigation class="d-print-none" />
 			<main
@@ -81,6 +84,12 @@ import {useProjectStore} from '@/stores/projects'
 
 import {useRouteWithModal} from '@/composables/useRouteWithModal'
 import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+const backgroundBrightness = computed(() => 
+	authStore.settings?.frontendSettings?.backgroundBrightness,
+)
 
 const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
 

frontend/src/i18n/lang/en.json

@@ -181,6 +181,9 @@
           "dark": "Dark"
         }
       },
+      "backgroundBrightness": {
+        "title": "Background brightness"
+      },
       "apiTokens": {
         "title": "API Tokens",
         "general": "API tokens allow you to use Vikunja's API without user credentials.",

frontend/src/modelTypes/IUserSettings.ts

@@ -21,6 +21,7 @@ export interface IFrontendSettings {
 	dateDisplay: DateDisplay
 	timeFormat: TimeFormat
 	defaultTaskRelationType: IRelationKind
+	backgroundBrightness: number | null
 }
 
 export interface IExtraSettingsLink {

frontend/src/stores/auth.ts

@@ -137,6 +137,7 @@ export const useAuthStore = defineStore('auth', () => {
 				dateDisplay: DATE_DISPLAY.RELATIVE,
 				timeFormat: TIME_FORMAT.HOURS_24,
 				defaultTaskRelationType: RELATION_KIND.RELATED,
+				backgroundBrightness: 100,
 				...newSettings.frontendSettings,
 			},
 		})

frontend/src/views/user/settings/General.vue

@@ -314,9 +314,24 @@
 					{{ $t('user.settings.general.allowIconChanges') }}
 				</label>
 			</div>
+			<div class="field">
+				<label class="two-col">
+					<span>
+						{{ $t('user.settings.backgroundBrightness.title') }}
+					</span>
+					<input 
+						v-model.number="settings.frontendSettings.backgroundBrightness"
+						class="input"
+						type="number"
+						min="0"
+						max="100"
+						@blur="enforceBackgroundBrightnessBounds"
+					>
+				</label>
+			</div>
 		</div>
 	</Card>
-	
+
 	<Card
 		:title="$t('user.settings.sections.privacy')"
 		class="general-settings section-block"
@@ -473,6 +488,18 @@ watch(
 	{deep: true},
 )
 
+function enforceBackgroundBrightnessBounds() {
+	const value = Number(settings.value.frontendSettings.backgroundBrightness)
+    
+	if (!value || isNaN(value)) {
+		settings.value.frontendSettings.backgroundBrightness = null
+	} else if (value < 0) {
+		settings.value.frontendSettings.backgroundBrightness = 0
+	} else if (value > 100) {
+		settings.value.frontendSettings.backgroundBrightness = 100
+	}
+}
+
 function useAvailableTimezones(settingsRef: Ref<IUserSettings>) {
 	const availableTimezones = ref<{value: string, label: string}[]>([])
 	const searchResults = ref<{value: string, label: string}[]>([])