nobswebdev/private_image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add not-found handling to ZK and hotlink viewer pages.

Browse Source 
Rename ViewerView and view store to ZkViewerView and useZkViewStore; unify hotlink load and ZK unlock error copy.
This commit is contained in:
nobswebdev
2026-10-30 17:43:29 +01:00
parent bb08bb389f
commit 19a8feff19
7 changed files with 85 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/consts/routeNames.ts
+1 -1
View File
@@ -1,7 +1,7 @@
export const ROUTE_NAMES = {
Upload: 'Upload',
About: 'About',
Viewer: 'Viewer',
ZkViewer: 'ZkViewer',
HotlinkViewer: 'HotlinkViewer',
Delete: 'Delete'
} as const;
frontend/src/router/index.ts
+4 -4
View File
@@ -29,15 +29,15 @@ const router = createRouter({
},
{
path: '/v/:id',
name: ROUTE_NAMES.Viewer,
component: () => import('@/views/ViewerView.vue'),
meta: { title: 'Private Image - Viewer' }
name: ROUTE_NAMES.ZkViewer,
component: () => import('@/views/ZkViewerView.vue'),
meta: { title: 'Private Image - ZK Viewer' }
},
{
path: '/h/:id/:secret',
name: ROUTE_NAMES.HotlinkViewer,
component: () => import('@/views/HotlinkViewerView.vue'),
meta: { title: 'Private Image - Viewer' }
meta: { title: 'Private Image - Hotlink Viewer' }
},
{
path: '/d/:id',
frontend/src/stores/view.ts → frontend/src/stores/zkView.ts
+1 -1
View File
@@ -7,7 +7,7 @@ import { toArrayBuffer } from '@/utils/toArrayBuffer';
import { decryptPasswordProtectedZkUpload } from '@/utils/upload/decryptPasswordProtectedZkUpload';
import { decryptZkUpload } from '@/utils/upload/decryptZkUpload';
export const useViewStore = defineStore('view', () => {
export const useZkViewStore = defineStore('zkView', () => {
const imageObjectUrl = ref<string | null>(null);
const clearImage = (): void => {
frontend/src/types/view/HotlinkViewerViewState.ts
+1
View File
@@ -0,0 +1 @@
export type HotlinkViewerViewState = 'invalidLink' | 'loading' | 'image' | 'notFound';
frontend/src/types/view/ZkViewerViewState.ts
+1
View File
@@ -0,0 +1 @@
export type ZkViewerViewState = 'loading' | 'password' | 'image' | 'invalidLink' | 'notFound';
frontend/src/views/HotlinkViewerView.vue
+39 -10
View File
@@ -1,33 +1,62 @@
<template>
<main class="flex w-full min-w-0 flex-1 flex-col items-center justify-center px-4 py-6 sm:px-6 sm:py-8">
<img
v-if="imageSrc"
:src="imageSrc"
class="max-h-[min(80vh,100dvh)] w-full object-contain"
/>
<main
class="mx-auto flex w-full max-w-lg flex-1 flex-col items-center justify-center gap-3 px-4 py-6 text-center sm:px-6 sm:py-8"
>
<p v-if="state === 'invalidLink'" class="text-sm text-muted-foreground">
This viewing link is incomplete. Use the hotlink URL from your upload results.
</p>
<p v-else-if="state === 'notFound'" class="text-sm text-muted-foreground">This image was not found.</p>
<template v-else>
<p v-if="state === 'loading'" class="text-sm text-muted-foreground sm:text-base">Loading image...</p>
<img
v-if="imageSrc"
:src="imageSrc"
class="max-h-[min(80vh,100dvh)] w-full object-contain"
:class="{ hidden: state === 'loading' }"
@load="onImageLoad"
@error="onImageError"
/>
</template>
</main>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { onBeforeMount, ref } from 'vue';
import { useRoute } from 'vue-router';
import { config } from '@/config';
import type { HotlinkViewerViewState } from '@/types/view/HotlinkViewerViewState';
import { buildHotlinkImagePath } from '@/utils/share/buildHotlinkImagePath';
const route = useRoute();
const imageSrc = computed((): string | null => {
const state = ref<HotlinkViewerViewState>('loading');
const imageSrc = ref<string | null>(null);
onBeforeMount(() => {
const uploadId = route.params.id;
const secret = route.params.secret;
if (typeof uploadId !== 'string' || typeof secret !== 'string' || !uploadId || !secret) {
return null;
state.value = 'invalidLink';
return;
}
const { baseUrlRoot } = config.api;
const path = buildHotlinkImagePath(uploadId, secret);
return `${baseUrlRoot}${path}`;
imageSrc.value = `${baseUrlRoot}${path}`;
});
const onImageLoad = (): void => {
state.value = 'image';
};
const onImageError = (): void => {
state.value = 'notFound';
};
</script>
frontend/src/views/ViewerView.vue → frontend/src/views/ZkViewerView.vue
+38 -20
View File
@@ -1,10 +1,18 @@
<template>
<main class="flex w-full min-w-0 flex-1 flex-col items-center justify-center px-4 py-6 sm:px-6 sm:py-8">
<p v-if="fetching" class="text-sm text-muted-foreground sm:text-base">Loading image...</p>
<main
class="mx-auto flex w-full max-w-lg flex-1 flex-col items-center justify-center gap-3 px-4 py-6 text-center sm:px-6 sm:py-8"
>
<p v-if="state === 'loading'" class="text-sm text-muted-foreground sm:text-base">Loading image...</p>
<p v-else-if="state === 'invalidLink'" class="text-sm text-muted-foreground">
This viewing link is incomplete. Use the viewer URL from your upload results.
</p>
<p v-else-if="state === 'notFound'" class="text-sm text-muted-foreground">This image was not found.</p>
<form
v-else-if="zkPayload"
class="flex w-full max-w-sm flex-col gap-3"
v-else-if="state === 'password'"
class="flex w-full max-w-sm flex-col gap-3 text-left"
@submit.prevent="onUnlockSubmit"
>
<label class="flex flex-col gap-1.5 text-sm">
@@ -30,7 +38,7 @@
</form>
<img
v-else-if="imageObjectUrl"
v-else-if="state === 'image' && imageObjectUrl"
:src="imageObjectUrl"
class="max-h-[min(80vh,100dvh)] w-full object-contain"
/>
@@ -41,14 +49,15 @@
import { storeToRefs } from 'pinia';
import { onBeforeMount, onBeforeUnmount, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useViewStore } from '@/stores/view';
import { useZkViewStore } from '@/stores/zkView';
import type { GetZkUploadCiphertextResult } from '@/types/upload/GetZkUploadCiphertextResult';
import type { ZkViewerViewState } from '@/types/view/ZkViewerViewState';
const route = useRoute();
const viewStore = useViewStore();
const { imageObjectUrl } = storeToRefs(viewStore);
const zkViewStore = useZkViewStore();
const { imageObjectUrl } = storeToRefs(zkViewStore);
const fetching = ref(false);
const state = ref<ZkViewerViewState>('loading');
const unlocking = ref(false);
const zkPayload = ref<GetZkUploadCiphertextResult | null>(null);
const fragmentKey = ref('');
@@ -58,38 +67,46 @@ const unlockError = ref('');
onBeforeMount(async () => {
const uploadId = route.params.id;
if (typeof uploadId !== 'string') {
if (typeof uploadId !== 'string' || !uploadId) {
state.value = 'invalidLink';
return;
}
const key = route.hash.slice(1);
if (!key) {
state.value = 'invalidLink';
return;
}
fragmentKey.value = key;
fetching.value = true;
state.value = 'loading';
try {
const payload = await viewStore.fetchZkCiphertext(uploadId);
const payload = await zkViewStore.fetchZkCiphertext(uploadId);
if (payload.passwordProtected) {
zkPayload.value = payload;
state.value = 'password';
return;
}
await viewStore.loadZk(payload, key);
await zkViewStore.loadZk(payload, key);
state.value = 'image';
} catch (error) {
console.error('[viewer] load failed', { uploadId, error });
} finally {
fetching.value = false;
console.error('[zk-viewer] load failed', { uploadId, error });
state.value = 'notFound';
}
});
onBeforeUnmount(() => {
cleanRefs();
viewStore.clearImage();
zkViewStore.clearImage();
});
const onUnlockSubmit = async (): Promise<void> => {
@@ -104,14 +121,15 @@ const onUnlockSubmit = async (): Promise<void> => {
unlockError.value = '';
try {
await viewStore.loadZk(payload, key, password.value);
await zkViewStore.loadZk(payload, key, password.value);
zkPayload.value = null;
password.value = '';
state.value = 'image';
} catch (error) {
console.error('[viewer] unlock failed', { error });
console.error('[zk-viewer] unlock failed', { error });
unlockError.value = 'Wrong password';
unlockError.value = 'Could not unlock this image. Check the viewer link and password, then try again.';
} finally {
unlocking.value = false;
}