121 lines
3.1 KiB
Vue
121 lines
3.1 KiB
Vue
<template>
|
|
<div id="user-privacy-policy">
|
|
<ErrorMessage :message="errorMessages" v-if="errorMessages" />
|
|
<div v-if="user.accepted_privacy_policy">
|
|
<p>
|
|
<i18n-t keypath="user.YOU_HAVE_ACCEPTED_PRIVACY_POLICY">
|
|
<router-link to="/privacy-policy">
|
|
{{ $t('privacy_policy.TITLE') }}
|
|
</router-link>
|
|
</i18n-t>
|
|
</p>
|
|
<button class="cancel" @click="$router.push('/profile')">
|
|
{{ $t('user.PROFILE.BACK_TO_PROFILE') }}
|
|
</button>
|
|
</div>
|
|
<form v-else @submit.prevent="onSubmit()">
|
|
<div class="policy-content">
|
|
<PrivacyPolicy />
|
|
</div>
|
|
<label for="accepted_policy" class="accepted_policy">
|
|
<input
|
|
type="checkbox"
|
|
id="accepted_policy"
|
|
required
|
|
v-model="acceptedPolicy"
|
|
/>
|
|
<span>
|
|
<i18n-t keypath="user.READ_AND_ACCEPT_PRIVACY_POLICY">
|
|
{{ $t('privacy_policy.TITLE') }}
|
|
</i18n-t>
|
|
</span>
|
|
</label>
|
|
<router-link to="/profile/edit/account">
|
|
{{ $t('user.I_WANT_TO_DELETE_MY_ACCOUNT') }}
|
|
</router-link>
|
|
<div class="form-buttons">
|
|
<button class="confirm" type="submit">
|
|
{{ $t('buttons.SUBMIT') }}
|
|
</button>
|
|
<button class="cancel" @click="$router.push('/profile')">
|
|
{{ $t('user.PROFILE.BACK_TO_PROFILE') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, onUnmounted, toRefs } from 'vue'
|
|
import type { ComputedRef } from 'vue'
|
|
|
|
import PrivacyPolicy from '@/components/PrivacyPolicy.vue'
|
|
import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
|
|
import type { IAuthUserProfile } from '@/types/user'
|
|
import { useStore } from '@/use/useStore'
|
|
|
|
interface Props {
|
|
user: IAuthUserProfile
|
|
}
|
|
const props = defineProps<Props>()
|
|
const { user } = toRefs(props)
|
|
|
|
const store = useStore()
|
|
|
|
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
|
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
|
)
|
|
const acceptedPolicy = ref(false)
|
|
|
|
function onSubmit() {
|
|
store.dispatch(
|
|
AUTH_USER_STORE.ACTIONS.ACCEPT_PRIVACY_POLICY,
|
|
acceptedPolicy.value
|
|
)
|
|
}
|
|
|
|
onUnmounted(() => {
|
|
store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~@/scss/vars.scss';
|
|
|
|
#user-privacy-policy {
|
|
padding: $default-padding 0;
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $default-padding;
|
|
|
|
.policy-content {
|
|
height: 500px;
|
|
border: 1px solid #ccc;
|
|
overflow: auto;
|
|
margin: $default-margin;
|
|
border-radius: $border-radius;
|
|
|
|
@media screen and (max-width: $small-limit) {
|
|
margin: $default-margin 0;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.privacy-policy-text {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.form-buttons {
|
|
display: flex;
|
|
gap: $default-padding;
|
|
flex-direction: row;
|
|
@media screen and (max-width: $x-small-limit) {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|