Force the user to scroll text to be able to accept the TOS

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">

src/Registration.vue

@@ -24,7 +24,7 @@
 			<NcModal v-if="showModal"
 				:can-close="hasSigned"
 				@close="handleCloseModal">
-				<ModalContent @click="acceptTerms">
+				<ModalContent :is-scroll-complete="hasScrolledToBottom" @click="acceptTerms">
 					<template #header>
 						<h3>{{ t('terms_of_service', 'Terms of service') }}</h3>
 						<select v-if="terms.length > 1" v-model="selectedLanguage">
@@ -35,7 +35,10 @@
 					</template>
 
 					<!-- eslint-disable-next-line vue/no-v-html -->
-					<div class="text-content" v-html="termsBody" />
+					<div ref="termsContent"
+						class="text-content"
+						@scroll="checkScroll"
+						v-html="termsBody" />
 				</ModalContent>
 			</NcModal>
 		</div>
@@ -68,6 +71,7 @@
 			termsId: 0,
 			termsBody: '',
 			publicContent: null,
+			hasScrolledToBottom: false,
 		}
 	},
 
@@ -128,6 +132,14 @@
 				return
 			}
 			this.showModal = true
+			this.$nextTick(() => {
+				this.checkScroll()
+			})
+		},
+		checkScroll() {
+			const termsContent = this.$refs.termsContent
+			const isScrollable = termsContent.scrollHeight > termsContent.clientHeight
+			this.hasScrolledToBottom = !isScrollable || (termsContent.scrollHeight - termsContent.scrollTop <= termsContent.clientHeight + 1)
 		},
 
 		acceptTerms() {

src/UserApp.vue

@@ -8,7 +8,7 @@
 		<NcModal v-if="showModal"
 			:can-close="hasSigned"
 			@close="handleCloseModal">
-			<ModalContent @click="acceptTerms">
+			<ModalContent :is-scroll-complete="hasScrolledToBottom" @click="acceptTerms">
 				<template #header>
 					<h3>{{ t('terms_of_service', 'Terms of service') }}</h3>
 					<select v-if="terms.length > 1" v-model="selectedLanguage">
@@ -19,7 +19,10 @@
 				</template>
 
 				<!-- eslint-disable-next-line vue/no-v-html -->
-				<div class="text-content" v-html="termsBody" />
+				<div ref="termsContent"
+					class="text-content"
+					@scroll="checkScroll"
+					v-html="termsBody" />
 			</ModalContent>
 		</NcModal>
 	</div>
@@ -49,6 +52,7 @@
 			termsId: 0,
 			termsBody: '',
 			publicContent: null,
+			hasScrolledToBottom: false,
 		}
 	},
 
@@ -63,38 +67,38 @@
 	},
 
 	methods: {
-		loadTerms() {
-			axios
-				.get(generateUrl('/apps/terms_of_service/terms'))
-				.then(response => {
-					this.hasSigned = response.data.hasSigned
-					this.terms = response.data.terms
-
-					const language = OC.getLanguage().split('-')[0]
-
-					if (!this.terms.length || this.hasSigned) {
-						return
-					}
-
-					// make it Vue
-					this.publicContent = document.getElementById('files-public-content')
-					if (this.publicContent !== null) {
-						this.publicContent.style.visibility = 'hidden'
-					}
-
-					this.selectTerms(0)
-					if (this.terms.length > 1) {
-						Object.keys(this.terms).forEach((index) => {
-							if (language === this.terms[index].languageCode) {
-								this.selectedLanguage = index
-							}
-
-							this.languages.push(response.data.languages[this.terms[index].languageCode])
-						})
-					}
-
-					this.showTerms()
-				})
+		async loadTerms() {
+			try {
+				const response = await axios.get(generateUrl('/apps/terms_of_service/terms'))
+				this.hasSigned = response.data.hasSigned
+				this.terms = response.data.terms
+
+				const language = OC.getLanguage().split('-')[0]
+
+				if (!this.terms.length || this.hasSigned) {
+					return
+				}
+
+				this.publicContent = document.getElementById('files-public-content')
+				if (this.publicContent !== null) {
+					this.publicContent.style.visibility = 'hidden'
+				}
+
+				this.selectTerms(0)
+				if (this.terms.length > 1) {
+					Object.keys(this.terms).forEach((index) => {
+						if (language === this.terms[index].languageCode) {
+							this.selectedLanguage = index
+						}
+
+						this.languages.push(response.data.languages[this.terms[index].languageCode])
+					})
+				}
+
+				this.showTerms()
+			} catch (error) {
+				console.error('Error loading terms:', error)
+			}
 		},
 
 		selectTerms(index) {
@@ -104,6 +108,9 @@
 
 		showTerms() {
 			this.showModal = true
+			this.$nextTick(() => {
+				this.checkScroll()
+			})
 		},
 
 		acceptTerms() {
@@ -126,12 +133,18 @@
 		handleCloseModal() {
 			this.showModal = false
 		},
+
+		checkScroll() {
+			const termsContent = this.$refs.termsContent
+			const isScrollable = termsContent.scrollHeight > termsContent.clientHeight
+
+			this.hasScrolledToBottom = !isScrollable || (termsContent.scrollHeight - termsContent.scrollTop <= termsContent.clientHeight + 1)
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-
 :deep .modal-container {
 	display: flex;
 	height: 100%;

src/components/ModalContent.vue

@@ -2,7 +2,6 @@
   - 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"
@@ -13,7 +12,9 @@
 		</div>
 
 		<!-- Scrollable terms of service -->
-		<slot />
+		<div ref="termsContent" class="terms-content">
+			<slot />
+		</div>
 
 		<!-- Sticky button -->
 		<NcButton ref="acceptButton"
@@ -22,6 +23,7 @@
 			:wide="true"
 			autofocus
 			:title="t('terms_of_service', 'I acknowledge that I have read and agree to the above terms of service')"
+			:disabled="!isScrollComplete"
 			@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,6 +41,13 @@ export default {
 		NcButton,
 	},
 
+	props: {
+		isScrollComplete: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
 	mounted() {
 		this.$nextTick(() => {
 			this.$refs.acceptButton.$el.focus()
@@ -47,12 +56,13 @@ export default {
 
 	methods: {
 		handleClick() {
-			this.$emit('click')
+			if (this.isScrollComplete) {
+				this.$emit('click')
+			}
 		},
 	},
 }
 </script>
-
 <style lang="scss" scoped>
 /* Little hack to strengthen the css selector so links with dark mode on the registration page are readable */
 #terms_of_service_content.modal-content,
@@ -76,10 +86,15 @@ export default {
 		margin: 8px 0 12px 0;
 	}
 
+	.terms-content {
+		height: 100%;
+		overflow-y: auto;
+		flex: 1;
+	}
+
 	select {
 		float: right;
 		padding: 0 12px;
-
 		/**
 		 * Need to overwrite the rules of guest.css
 		 */
@@ -90,7 +105,6 @@ export default {
 			border-color: var(--color-primary-element);
 		}
 	}
-
 	/**
 	 * Basic Markdown support
 	 */
@@ -123,5 +137,11 @@ export default {
 		}
 	}
 }
+</style>
 
+<style lang="scss" scoped>
+:deep .modal-container {
+	display: flex;
+	height: 100%;
+}
 </style>