vikunja/frontend/src/views/sharing/LinkSharingAuth.vue

154 lines
3.2 KiB
Vue

<template>
<div>
<Message v-if="loading">
{{ $t('sharing.authenticating') }}
</Message>
<div
v-if="authenticateWithPassword"
class="box"
>
<p class="pb-2">
{{ $t('sharing.passwordRequired') }}
</p>
<div class="field">
<div class="control">
<input
id="linkSharePassword"
v-model="password"
v-focus
type="password"
class="input"
:placeholder="$t('user.auth.passwordPlaceholder')"
@keyup.enter.prevent="authenticate()"
>
</div>
</div>
<x-button
:loading="loading"
@click="authenticate()"
>
{{ $t('user.auth.login') }}
</x-button>
<Message
v-if="errorMessage !== ''"
variant="danger"
class="mt-4"
>
{{ errorMessage }}
</Message>
</div>
</div>
</template>
<script lang="ts" setup>
import {ref, computed} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {useI18n} from 'vue-i18n'
import {useTitle} from '@vueuse/core'
import Message from '@/components/misc/message.vue'
import {LINK_SHARE_HASH_PREFIX} from '@/constants/linkShareHash'
import {useBaseStore} from '@/stores/base'
import {useAuthStore} from '@/stores/auth'
import {useRedirectToLastVisited} from '@/composables/useRedirectToLastVisited'
const {t} = useI18n({useScope: 'global'})
useTitle(t('sharing.authenticating'))
const {getLastVisitedRoute} = useRedirectToLastVisited()
function useAuth() {
const baseStore = useBaseStore()
const authStore = useAuthStore()
const route = useRoute()
const router = useRouter()
const loading = ref(false)
const authenticateWithPassword = ref(false)
const errorMessage = ref('')
const password = ref('')
const authLinkShare = computed(() => authStore.authLinkShare)
async function authenticate() {
authenticateWithPassword.value = false
errorMessage.value = ''
if (authLinkShare.value) {
// FIXME: push to 'project.list' since authenticated?
return
}
// TODO: no password
loading.value = true
try {
const {project_id: projectId} = await authStore.linkShareAuth({
hash: route.params.share,
password: password.value,
})
const logoVisible = route.query.logoVisible
? route.query.logoVisible === 'true'
: true
baseStore.setLogoVisible(logoVisible)
const hash = LINK_SHARE_HASH_PREFIX + route.params.share
const last = getLastVisitedRoute()
if (last) {
return router.push({
...last,
hash,
})
}
return router.push({
name: 'project.index',
params: {
projectId,
},
hash,
})
} catch (e) {
if (e?.response?.data?.code === 13001) {
authenticateWithPassword.value = true
return
}
// TODO: Put this logic in a global errorMessage handler method which checks all auth codes
let err = t('sharing.error')
if (e?.response?.data?.message) {
err = e.response.data.message
}
if (e?.response?.data?.code === 13002) {
err = t('sharing.invalidPassword')
}
errorMessage.value = err
} finally {
loading.value = false
}
}
authenticate()
return {
loading,
authenticateWithPassword,
errorMessage,
password,
authenticate,
}
}
const {
loading,
authenticateWithPassword,
errorMessage,
password,
authenticate,
} = useAuth()
</script>