chore: move frontend files
This commit is contained in:
156
frontend/src/views/sharing/LinkSharingAuth.vue
Normal file
156
frontend/src/views/sharing/LinkSharingAuth.vue
Normal file
@ -0,0 +1,156 @@
|
||||
<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 {PROJECT_VIEWS, type ProjectView} from '@/types/ProjectView'
|
||||
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 view = route.query.view && Object.values(PROJECT_VIEWS).includes(route.query.view as ProjectView)
|
||||
? route.query.view
|
||||
: 'list'
|
||||
|
||||
const hash = LINK_SHARE_HASH_PREFIX + route.params.share
|
||||
|
||||
const last = getLastVisitedRoute()
|
||||
if (last) {
|
||||
return router.push({
|
||||
...last,
|
||||
hash,
|
||||
})
|
||||
}
|
||||
|
||||
return router.push({
|
||||
name: `project.${view}`,
|
||||
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>
|
Reference in New Issue
Block a user