110 lines
3.2 KiB
Vue
110 lines
3.2 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, ref } from 'vue'
|
|
import { useL10n } from '@KTXC'
|
|
|
|
const { t } = useL10n('user_profile')
|
|
|
|
const recentDevices = ref([
|
|
{ id: 'newForYou', email: true, browser: true, app: true },
|
|
{ id: 'accountActivity', email: true, browser: true, app: true },
|
|
{ id: 'newBrowserSignIn', email: true, browser: true, app: false },
|
|
{ id: 'newDeviceLinked', email: true, browser: false, app: false },
|
|
])
|
|
|
|
const notificationTypeLabels = computed<Record<string, string>>(() => ({
|
|
newForYou: t('notifications.types.newForYou', 'New for you'),
|
|
accountActivity: t('notifications.types.accountActivity', 'Account activity'),
|
|
newBrowserSignIn: t('notifications.types.newBrowserSignIn', 'A new browser used to sign in'),
|
|
newDeviceLinked: t('notifications.types.newDeviceLinked', 'A new device is linked'),
|
|
}))
|
|
|
|
const notificationTimingOptions = computed(() => [
|
|
{ value: 'online', title: t('notifications.timing.online', 'Only when I\'m online') },
|
|
{ value: 'anytime', title: t('notifications.timing.anytime', 'Anytime') },
|
|
])
|
|
|
|
const selectedNotification = ref('online')
|
|
</script>
|
|
|
|
<template>
|
|
<VCard :title="t('notifications.title', 'Notifications')">
|
|
<VCardText>
|
|
{{ t('notifications.permissionDescription', 'We need permission from your browser to show notifications.') }}
|
|
<a href="javascript:void(0)">{{ t('notifications.requestPermission', 'Request Permission') }}</a>
|
|
</VCardText>
|
|
|
|
<VTable class="text-no-wrap">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">
|
|
{{ t('notifications.columns.type', 'Type') }}
|
|
</th>
|
|
<th scope="col">
|
|
{{ t('notifications.columns.email', 'EMAIL') }}
|
|
</th>
|
|
<th scope="col">
|
|
{{ t('notifications.columns.browser', 'BROWSER') }}
|
|
</th>
|
|
<th scope="col">
|
|
{{ t('notifications.columns.app', 'App') }}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="device in recentDevices"
|
|
:key="device.id"
|
|
>
|
|
<td>
|
|
{{ notificationTypeLabels[device.id] }}
|
|
</td>
|
|
<td>
|
|
<VCheckbox v-model="device.email" />
|
|
</td>
|
|
<td>
|
|
<VCheckbox v-model="device.browser" />
|
|
</td>
|
|
<td>
|
|
<VCheckbox v-model="device.app" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</VTable>
|
|
<VDivider />
|
|
|
|
<VCardText>
|
|
<VForm @submit.prevent="() => {}">
|
|
<p class="text-base font-weight-medium">
|
|
{{ t('notifications.timingQuestion', 'When should we send you notifications?') }}
|
|
</p>
|
|
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<VSelect
|
|
v-model="selectedNotification"
|
|
mandatory
|
|
:items="notificationTimingOptions"
|
|
/>
|
|
</VCol>
|
|
</VRow>
|
|
|
|
<div class="d-flex flex-wrap gap-4 mt-4">
|
|
<VBtn type="submit">
|
|
{{ t('actions.saveChanges', 'Save changes') }}
|
|
</VBtn>
|
|
<VBtn
|
|
color="secondary"
|
|
variant="outlined"
|
|
type="reset"
|
|
>
|
|
{{ t('actions.reset', 'Reset') }}
|
|
</VBtn>
|
|
</div>
|
|
</VForm>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|