From 4e0747cf08fde361adbc2b190542b6d9f20a5dad Mon Sep 17 00:00:00 2001
From: Carl Schwan <carl@carlschwan.eu>
Date: Thu, 23 Jul 2026 22:47:57 +0200
Subject: [PATCH] feat(admin): Use FormBox in admin settings

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
---
 src/components/ProviderGeneralSection.vue | 49 +++++++++-------
 src/components/ProviderSettingsDialog.vue | 69 +++++++++++++----------
 2 files changed, 67 insertions(+), 51 deletions(-)

diff --git a/src/components/ProviderGeneralSection.vue b/src/components/ProviderGeneralSection.vue
index 6eab1d26c..01f4e2a06 100644
--- a/src/components/ProviderGeneralSection.vue
+++ b/src/components/ProviderGeneralSection.vue
@@ -3,26 +3,28 @@ SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
 SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<template v-for="(attribute, key) in generalSettings" :key="key">
-		<template v-if="attribute.type === 'checkbox' && !attribute.global && attribute.provider_type === '' || attribute.provider_type === type">
-			<NcCheckboxRadioSwitch
-				:modelValue="modelValue[key] === '1'"
-				@update:modelValue="(val: boolean) => update(key, val ? '1' : '0')">
-				{{ attribute.text }}
-			</NcCheckboxRadioSwitch>
-			<NcNoteCard v-if="key === 'is_saml_request_using_post'" type="warning">
-				{{ t('user_saml', 'This feature might not work with all identity providers. Use only if your IdP specifically requires POST binding for SAML requests.') }}
-			</NcNoteCard>
+	<NcFormBox>
+		<template v-for="(attribute, key) in generalSettings" :key="key">
+			<template v-if="attribute.type === 'checkbox' && !attribute.global && attribute.provider_type === '' || attribute.provider_type === type">
+				<NcFormBoxSwitch
+					:modelValue="modelValue[key] === '1'"
+					@update:modelValue="(val: boolean) => update(key, val ? '1' : '0')">
+					{{ attribute.text }}
+				</NcFormBoxSwitch>
+				<NcNoteCard v-if="key === 'is_saml_request_using_post'" type="warning" class="no-margin">
+					{{ t('user_saml', 'This feature might not work with all identity providers. Use only if your IdP specifically requires POST binding for SAML requests.') }}
+				</NcNoteCard>
+			</template>
+			<NcInputField
+				v-else-if="attribute.type === 'line' && !attribute.global"
+				:id="'user-saml-general-' + key"
+				:label="attribute.text"
+				:modelValue="modelValue[key] ?? ''"
+				:required="attribute.required"
+				:helperText="hasWarning(key) ? t('user_saml', 'Environment var starting with HTTP_ are dangerous as HTTP headers are saved in these environment variables') : undefined"
+				@update:modelValue="(val: string|number) => update(key, val + '')" />
 		</template>
-		<NcInputField
-			v-else-if="attribute.type === 'line' && !attribute.global"
-			:id="'user-saml-general-' + key"
-			:label="attribute.text"
-			:modelValue="modelValue[key] ?? ''"
-			:required="attribute.required"
-			:helperText="hasWarning(key) ? t('user_saml', 'Environment var starting with HTTP_ are dangerous as HTTP headers are saved in these environment variables') : undefined"
-			@update:modelValue="(val: string|number) => update(key, val + '')" />
-	</template>
+	</NcFormBox>
 </template>
 
 <script setup lang="ts">
@@ -30,7 +32,8 @@ import type { SettingsMap } from '../types.ts'
 
 import { translate as t } from '@nextcloud/l10n'
 import { ref } from 'vue'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 
@@ -84,3 +87,9 @@ function hasWarning(key: string): boolean {
 	return key === 'uid_mapping' && props.type === 'env' && (props.modelValue[key] ?? '').startsWith('HTTP_')
 }
 </script>
+
+<style scopped>
+.no-margin {
+	margin-block: 0 !important;
+}
+</style>
diff --git a/src/components/ProviderSettingsDialog.vue b/src/components/ProviderSettingsDialog.vue
index 72a268b4c..615a65e00 100644
--- a/src/components/ProviderSettingsDialog.vue
+++ b/src/components/ProviderSettingsDialog.vue
@@ -129,40 +129,46 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 				:level="3"
 				:description="t('user_saml', 'For increased security we recommend enabling the following settings if supported by your environment.')">
 				<h4>{{ t('user_saml', 'Signatures and encryption offered') }}</h4>
-				<NcCheckboxRadioSwitch
-					v-for="(text, key) in securityOffer"
-					:key="key"
-					:modelValue="draft.security?.[key] === '1'"
-					@update:modelValue="(val) => setDraft('security', key, val ? '1' : '0')">
-					{{ text }}
-				</NcCheckboxRadioSwitch>
+				<NcFormBox>
+					<NcFormBoxSwitch
+						v-for="(text, key) in securityOffer"
+						:key="key"
+						:modelValue="draft.security?.[key] === '1'"
+						@update:modelValue="(val) => setDraft('security', key, val ? '1' : '0')">
+						{{ text }}
+					</NcFormBoxSwitch>
+				</NcFormBox>
 
 				<h4>{{ t('user_saml', 'Signatures and encryption required') }}</h4>
-				<NcCheckboxRadioSwitch
-					v-for="(text, key) in securityRequired"
-					:key="key"
-					:modelValue="draft.security?.[key] === '1'"
-					@update:modelValue="(val) => setDraft('security', key, val ? '1' : '0')">
-					{{ text }}
-				</NcCheckboxRadioSwitch>
-
-				<h4>{{ t('user_saml', 'General') }}</h4>
-				<template v-for="(attribute, key) in securityGeneral" :key="key">
-					<NcInputField
-						v-if="typeof attribute === 'object' && attribute.type === 'line'"
-						:id="'user-saml-' + key"
-						:label="attribute.text"
-						:modelValue="draft.security?.[key] ?? ''"
-						:required="attribute.required"
-						placeholder="http://www.w3.org/2001/04/xmldsig-more#rsa-sha256"
-						@update:modelValue="(val) => setDraft('security', key, val + '')" />
-					<NcCheckboxRadioSwitch
-						v-else
+				<NcFormBox>
+					<NcFormBoxSwitch
+						v-for="(text, key) in securityRequired"
+						:key="key"
 						:modelValue="draft.security?.[key] === '1'"
 						@update:modelValue="(val) => setDraft('security', key, val ? '1' : '0')">
-						{{ attribute }}
-					</NcCheckboxRadioSwitch>
-				</template>
+						{{ text }}
+					</NcFormBoxSwitch>
+				</NcFormBox>
+
+				<h4>{{ t('user_saml', 'General') }}</h4>
+				<NcFormBox>
+					<template v-for="(attribute, key) in securityGeneral" :key="key">
+						<NcInputField
+							v-if="typeof attribute === 'object' && attribute.type === 'line'"
+							:id="'user-saml-' + key"
+							:label="attribute.text"
+							:modelValue="draft.security?.[key] ?? ''"
+							:required="attribute.required"
+							placeholder="http://www.w3.org/2001/04/xmldsig-more#rsa-sha256"
+							@update:modelValue="(val) => setDraft('security', key, val + '')" />
+						<NcFormBoxSwitch
+							v-else
+							:modelValue="draft.security?.[key] === '1'"
+							@update:modelValue="(val) => setDraft('security', key, val ? '1' : '0')">
+							{{ attribute }}
+						</NcFormBoxSwitch>
+					</template>
+				</NcFormBox>
 			</NcSettingsSection>
 
 			<!-- User Filtering -->
@@ -214,8 +220,9 @@ import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { computed, ref, watch } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcSelect from '@nextcloud/vue/components/NcSelect'