Force the user to scroll text to accept the TOS

Signed-off-by: greta <[email protected]>
nextcloud · Jun 28, 2024 · e74290d · e74290d
1 parent 9dd9067
commit e74290d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -5,7 +5,7 @@
 
 <template>
 	<Fragment>
-		<NcSettingsSection :title="t('terms_of_service', 'Terms of service')"
+		<NcSettingsSection :name="t('terms_of_service', 'Terms of service')"
 			:description="t('terms_of_service', 'Require users to accept the terms of service before accessing the service.')">
 			<NcCheckboxRadioSwitch type="switch"
 				:checked.sync="showForLoggedInUser">
@@ -21,11 +21,13 @@
 				<NcSelect v-model="country"
 					:options="countryOptions"
 					:placeholder="t('terms_of_service', 'Select a region')"
+					:aria-label-combobox="t('terms_of_service', 'Select a region')"
 					label="label"
 					track-by="value" />
 				<NcSelect v-model="language"
 					:options="languageOptions"
 					:placeholder="t('terms_of_service', 'Select a language')"
+					:aria-label-combobox="t('terms_of_service', 'Select a language')"
 					label="label"
 					track-by="value" />
 			</span>
@@ -45,7 +47,7 @@
 		</NcSettingsSection>
 
 		<NcSettingsSection v-if="hasTerms"
-			:title="t('terms_of_service', 'Existing terms of service')">
+			:name="t('terms_of_service', 'Existing terms of service')">
 			<NcButton :disabled="resetButtonDisabled"
 				type="error"
 				@click="onResetSignatories">

diff --git a/src/components/ModalContent.vue b/src/components/ModalContent.vue
@@ -1,27 +1,22 @@
-<!--
-  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
 <template>
-	<div id="terms_of_service_content"
-		class="modal-content"
-		aria-live="polite">
+	<div id="terms_of_service_content" class="modal-content" aria-live="polite">
 		<!-- Sticky Header -->
 		<div class="modal-content__header">
 			<slot name="header" />
 		</div>
 
 		<!-- Scrollable terms of service -->
-		<slot />
+		<div class="terms-content" @scroll="handleScroll">
+			<slot />
+		</div>
 
 		<!-- Sticky button -->
 		<NcButton ref="acceptButton"
 			class="modal-content__button"
 			type="primary"
 			:wide="true"
+			:disabled="!scrolledToBottom"
 			autofocus
-			:title="t('terms_of_service', 'I acknowledge that I have read and agree to the above terms of service')"
 			@click.prevent.stop="handleClick"
 			@keydown.enter="handleClick">
 			{{ t('terms_of_service', 'I acknowledge that I have read and agree to the above terms of service') }}
@@ -39,15 +34,27 @@ export default {
 		NcButton,
 	},
 
+	data() {
+		return {
+			scrolledToBottom: false,
+		}
+	},
+
 	mounted() {
 		this.$nextTick(() => {
 			this.$refs.acceptButton.$el.focus()
 		})
 	},
 
 	methods: {
+		handleScroll(event) {
+			const element = event.target
+			this.scrolledToBottom = element.scrollHeight - element.scrollTop === element.clientHeight
+		},
 		handleClick() {
-			this.$emit('click')
+			if (this.scrolledToBottom) {
+				this.$emit('click')
+			}
 		},
 	},
 }
@@ -122,6 +129,11 @@ export default {
 			color: var(--color-main-text) !important;
 		}
 	}
-}
 
+	.terms-content {
+		flex-grow: 1;
+		overflow-y: auto;
+		margin-bottom: 1em;
+	}
+}
 </style>