Merge pull request #19 from LibreCodeCoop/feat/sponsor-messaging-admin-banner

feat: sponsor messaging admin banner

Author: vitormattos

appinfo/info.xml

@@ -19,9 +19,9 @@ Each field can be governed with edit and visibility rules so teams can combine s
 
 ## Donation
 
-Developed with ❤️ by [LibreCode](https://librecode.coop). Help us transform people and businesses through cooperativism.
+Developed with ❤️ by [LibreCode](https://librecode.coop). Ongoing maintenance, bug fixes, and long-term sustainability depend on community support.
 
-* [Donate with GitHub Sponsor: ![Donate using GitHub Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/libresign)
+* [Sponsor LibreSign on GitHub (monthly recurring support is especially welcome): ![Donate using GitHub Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/LibreSign)
 	]]></description>
 	<version>0.0.1-dev</version>
 	<licence>agpl</licence>
@@ -39,7 +39,8 @@ Developed with ❤️ by [LibreCode](https://librecode.coop). Help us transform
 	<screenshot small-thumbnail="https://raw.githubusercontent.com/LibreCodeCoop/profile_fields/main/img/screenshots/user-management-dialog-thumb.png">https://raw.githubusercontent.com/LibreCodeCoop/profile_fields/main/img/screenshots/user-management-dialog.png</screenshot>
 	<screenshot small-thumbnail="https://raw.githubusercontent.com/LibreCodeCoop/profile_fields/main/img/screenshots/personal-settings-thumb.png">https://raw.githubusercontent.com/LibreCodeCoop/profile_fields/main/img/screenshots/personal-settings.png</screenshot>
 	<screenshot small-thumbnail="https://raw.githubusercontent.com/LibreCodeCoop/profile_fields/main/img/screenshots/workflow-notify-admins-thumb.png">https://raw.githubusercontent.com/LibreCodeCoop/profile_fields/main/img/screenshots/workflow-notify-admins.png</screenshot>
-	<donation title="Donate via GitHub Sponsors">https://github.com/sponsors/LibreSign</donation>
+	<donation title="Sponsor LibreSign on GitHub (monthly recurring preferred)">https://github.com/sponsors/LibreSign</donation>
+	<donation type="stripe" title="Donate via Stripe">https://buy.stripe.com/eVqfZibhx8QO3LseWc2kw00</donation>
 	<dependencies>
 		<nextcloud min-version="32" max-version="34"/>
 	</dependencies>

src/views/AdminSettings.vue

@@ -22,6 +22,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 		<NcNoteCard v-if="errorMessage" type="error" data-testid="profile-fields-admin-error">
 			{{ errorMessage }}
 		</NcNoteCard>
+		<NcNoteCard v-if="showSupportBanner" type="info" data-testid="profile-fields-admin-support-banner">
+			<div class="profile-fields-admin__support-banner">
+				<p>
+					This app is open source and released under the AGPL license.
+					To keep development and maintenance active, please
+					<a href="https://github.com/sponsors/LibreSign" target="_blank" rel="noopener noreferrer">sponsor LibreSign on GitHub Sponsors</a>
+					If possible, choose a monthly sponsorship.
+				</p>
+				<div class="profile-fields-admin__support-banner-actions">
+					<NcButton class="profile-fields-admin__support-banner-action" variant="tertiary-no-background" @click="dismissSupportBanner">
+						Not now
+					</NcButton>
+				</div>
+			</div>
+		</NcNoteCard>
 		<span
 			class="profile-fields-admin__success-announcement"
 			data-testid="profile-fields-admin-success"
@@ -421,12 +436,23 @@ const definitions = ref<FieldDefinition[]>([])
 const isLoading = ref(true)
 const isSaving = ref(false)
 const errorMessage = ref('')
+const supportBannerStorageKey = 'profile_fields_support_banner_dismissed'
+const showSupportBanner = ref(true)
 const selectedId = ref<number | null>(null)
 const justSavedId = ref<number | null>(null)
 let justSavedTimeout: ReturnType<typeof setTimeout> | null = null
 const successMessage = ref('')
 let successMessageTimeout: ReturnType<typeof setTimeout> | null = null
 
+const dismissSupportBanner = () => {
+	showSupportBanner.value = false
+	try {
+		window.localStorage.setItem(supportBannerStorageKey, '1')
+	} catch {
+		// Ignore storage errors and keep only in-memory dismissal.
+	}
+}
+
 const setSuccessMessage = (message: string) => {
 	if (successMessageTimeout !== null) {
 		clearTimeout(successMessageTimeout)
@@ -1002,6 +1028,11 @@ watch(() => form.type, (newType: FieldType) => {
 
 onMounted(() => {
 	loadDefinitions()
+	try {
+		showSupportBanner.value = window.localStorage.getItem(supportBannerStorageKey) !== '1'
+	} catch {
+		showSupportBanner.value = true
+	}
 	compactLayoutMediaQuery = window.matchMedia('(max-width: 1024px)')
 	updateCompactLayout(compactLayoutMediaQuery.matches)
 	compactLayoutMediaQuery.addEventListener('change', handleCompactLayoutChange)
@@ -1081,6 +1112,35 @@ onBeforeUnmount(() => {
 		gap: 20px;
 	}
 
+	&__support-banner {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		gap: 10px;
+		width: 100%;
+
+		p {
+			margin: 0;
+			overflow-wrap: anywhere;
+			line-height: 1.5;
+		}
+
+		a {
+			font-weight: 600;
+			overflow-wrap: anywhere;
+		}
+	}
+
+	&__support-banner-actions {
+		display: flex;
+		justify-content: flex-end;
+		width: 100%;
+	}
+
+	&__support-banner-action {
+		flex: 0 0 auto;
+		white-space: nowrap;
+	}
+
 	&__field-helper {
 		margin: 8px 0 0;
 		color: var(--color-text-maxcontrast);
@@ -1601,6 +1661,18 @@ onBeforeUnmount(() => {
 			width: 100%;
 		}
 
+		&__support-banner {
+			gap: 8px;
+
+			:deep(.button-vue) {
+				max-width: 100%;
+			}
+		}
+
+		&__support-banner-actions {
+			justify-content: flex-start;
+		}
+
 		&__submit-row,
 		&__editor-actions {
 			flex-wrap: wrap;