TermsRequest.vue

<script setup>
import { useRouter } from 'vue-router'

import SectionTitle from '@/components/SectionTitle.vue'
import { useSessionStore } from '@/stores/session'

const emit = defineEmits(['onCloseModal'])

const router = useRouter()

const session = useSessionStore()

async function acceptTerms() {
  try {
    const response = await session.updateSharing(session.self.id, { sharingAllowed: true })

    if (response.success) {
      emit('onCloseModal')

      await session.fetchSelf()
    }
  } catch (error) {
    console.error('ERROR:', error.name)
  }

}
function rejectTerms() {
  router.push({ name: 'landing' })
}
</script>

<template>
  <div class="tos-request">
    <div class="tos-request__content">
      <SectionTitle value="Nutzungsbedingungen" />
      <div>
        <!-- DEVINFO - ToS: Hier den Text für die Nutzungsbedingungen (Eigentümer, falls abweichend) eintragen -->
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna
        sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra
        imperdiet enim. Fusce est. Vivamus a tellus.
        <!-- END - ToS -->
      </div>
    </div>
    <div class="tos-request__action">
      <button class="button primary" type="button" @click="acceptTerms()">Akzeptieren</button>
      <button class="button primary" type="button" @click="rejectTerms()">Nicht akzeptieren</button>
    </div>
  </div>
</template>

<style scoped>
.tos-request {
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

.tos-request__content {
  overflow: hidden;
  padding: var(--spacing);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

.tos-request__content>div:last-of-type {
  overflow-y: auto;
}

.tos-request__action {
  padding: var(--spacing);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}
</style>