Skip to content

Commit

Permalink
fixup! Force the user to scroll text to accept the TOS
Browse files Browse the repository at this point in the history
Signed-off-by: greta <[email protected]>
  • Loading branch information
GretaD committed Jul 16, 2024
1 parent 9eddb5a commit 5ddf5db
Show file tree
Hide file tree
Showing 2 changed files with 222 additions and 219 deletions.
213 changes: 105 additions & 108 deletions src/UserApp.vue
Original file line number Diff line number Diff line change
@@ -1,139 +1,136 @@

Check failure on line 1 in src/UserApp.vue

View workflow job for this annotation

GitHub Actions / NPM lint

Too many blank lines at the beginning of file. Max of 0 allowed
<!--
- SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
- SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
- SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
<div id="terms_of_service_confirm">
<NcModal v-if="showModal"
:can-close="hasSigned"
@close="handleCloseModal">
<ModalContent @click="acceptTerms">
<template #header>
<h3>{{ t('terms_of_service', 'Terms of service') }}</h3>
<select v-if="terms.length > 1" v-model="selectedLanguage">
<option v-for="(language, index) in languages" :key="index" :value="index">
{{ language }}
</option>
</select>
</template>

<!-- eslint-disable-next-line vue/no-v-html -->
<div class="text-content" v-html="termsBody" />
</ModalContent>
</NcModal>
<div id="terms_of_service_content"
class="modal-content"

Check failure on line 8 in src/UserApp.vue

View workflow job for this annotation

GitHub Actions / NPM lint

Expected "\t" character, but found " " character
aria-live="polite">

Check failure on line 9 in src/UserApp.vue

View workflow job for this annotation

GitHub Actions / NPM lint

Expected "\t" character, but found " " character
<div class="modal-content__header">
<slot name="header" />
</div>

<!-- Scrollable terms of service -->
<div ref="termsContent" class="terms-content">
<slot />
</div>

<NcButton ref="acceptButton"
class="modal-content__button"

Check failure on line 20 in src/UserApp.vue

View workflow job for this annotation

GitHub Actions / NPM lint

Expected "\t" character, but found " " character
type="primary"

Check failure on line 21 in src/UserApp.vue

View workflow job for this annotation

GitHub Actions / NPM lint

Expected "\t" character, but found " " character
:wide="true"

Check failure on line 22 in src/UserApp.vue

View workflow job for this annotation

GitHub Actions / NPM lint

Expected "\t" character, but found " " character
autofocus

Check failure on line 23 in src/UserApp.vue

View workflow job for this annotation

GitHub Actions / NPM lint

Expected "\t" character, but found " " character
:title="t('terms_of_service', 'I acknowledge that I have read and agree to the above terms of service')"

Check failure on line 24 in src/UserApp.vue

View workflow job for this annotation

GitHub Actions / NPM lint

Expected "\t" character, but found " " character
:disabled="!isScrollComplete"

Check failure on line 25 in src/UserApp.vue

View workflow job for this annotation

GitHub Actions / NPM lint

Expected "\t" character, but found " " character
@click.prevent.stop="handleClick"

Check failure on line 26 in src/UserApp.vue

View workflow job for this annotation

GitHub Actions / NPM lint

Expected "\t" character, but found " " character
@keydown.enter="handleClick">
{{ t('terms_of_service', 'I acknowledge that I have read and agree to the above terms of service') }}
</NcButton>
</div>
</template>

<script>
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
import ModalContent from './components/ModalContent.vue'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'

export default {
name: 'UserApp',
name: 'ModalContent',

components: {
NcModal,
ModalContent,
},

data() {
return {
showModal: false,
hasSigned: false,
terms: {},
languages: [],
selectedLanguage: 0,
termsId: 0,
termsBody: '',
publicContent: null,
}
NcButton,
},

watch: {
selectedLanguage(newLanguage) {
this.selectTerms(newLanguage)
props: {
isScrollComplete: {
type: Boolean,
default: false,
},
},

mounted() {
this.loadTerms()
this.$nextTick(() => {
this.$refs.acceptButton.$el.focus()
})
},

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()
})
},

selectTerms(index) {
this.termsBody = this.terms[index].renderedBody
this.termsId = this.terms[index].id
},

showTerms() {
this.showModal = true
},

acceptTerms() {
this.hasSigned = true
this.showModal = false

let url = '/apps/terms_of_service/sign'
if (this.$root.source === 'public') {
url = '/apps/terms_of_service/sign_public'
handleClick() {
if (this.isScrollComplete) {
this.$emit('click')
}

axios.post(
generateUrl(url),
{ termId: this.termsId },
).then(() => {
window.location.reload()
})
},

handleCloseModal() {
this.showModal = false
},
},
}
</script>

<style lang="scss" scoped>

:deep .modal-container {
display: flex;
#terms_of_service_content.modal-content,
.modal-content {
padding: 0 12px;
height: 100%;
display: flex;
flex-direction: column;
color: var(--color-main-text);

&__header {
padding-top: 12px;
}

h3 {
float: left;
font-weight: 800;
}

&__button {
margin: 8px 0 12px 0;
}

.terms-content {
height: 100%;
overflow-y: auto;
flex: 1;
}

select {
float: right;
padding: 0 12px;

color: var(--color-main-text);
border: 1px solid var(--color-border-dark);
border-radius: var(--border-radius);
&:hover {
border-color: var(--color-primary-element);
}
}

:deep div.text-content {
height: 100%;
overflow: auto;
text-align: left;

h3 {
font-weight: 800;
}

p {
padding-top: 5px;
padding-bottom: 5px;
}

ol {
padding-left: 12px;
}

ul {
list-style-type: disc;
padding-left: 25px;
}

a {
text-decoration: underline;
color: var(--color-main-text) !important;
}
}
}
</style>

Loading

0 comments on commit 5ddf5db

Please sign in to comment.