mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
feat(server,web,mobile): Add optional password option for share links. (#4655)
* feat(server,web,mobile): Add optional password option for share links. Signed-off-by: jarvis2f <137974272+jarvis2f@users.noreply.github.com> * feat(server,web): Update shared-link.controller and page.svelte for improved cookie handling and metadata updates. Signed-off-by: jarvis2f <137974272+jarvis2f@users.noreply.github.com> --------- Signed-off-by: jarvis2f <137974272+jarvis2f@users.noreply.github.com>
This commit is contained in:
jarvis2f
GitHub
parent
b34cbd881a
commit
8a6889529c
33 changed files with 556 additions and 41 deletions
60
web/src/api/open-api/api.ts
generated
60
web/src/api/open-api/api.ts
generated
|
|
@ -3038,6 +3038,12 @@ export interface SharedLinkCreateDto {
|
|||
* @memberof SharedLinkCreateDto
|
||||
*/
|
||||
'expiresAt'?: string | null;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof SharedLinkCreateDto
|
||||
*/
|
||||
'password'?: string;
|
||||
/**
|
||||
*
|
||||
* @type {boolean}
|
||||
|
|
@ -3089,6 +3095,12 @@ export interface SharedLinkEditDto {
|
|||
* @memberof SharedLinkEditDto
|
||||
*/
|
||||
'expiresAt'?: string | null;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof SharedLinkEditDto
|
||||
*/
|
||||
'password'?: string;
|
||||
/**
|
||||
*
|
||||
* @type {boolean}
|
||||
|
|
@ -3156,12 +3168,24 @@ export interface SharedLinkResponseDto {
|
|||
* @memberof SharedLinkResponseDto
|
||||
*/
|
||||
'key': string;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof SharedLinkResponseDto
|
||||
*/
|
||||
'password': string | null;
|
||||
/**
|
||||
*
|
||||
* @type {boolean}
|
||||
* @memberof SharedLinkResponseDto
|
||||
*/
|
||||
'showMetadata': boolean;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof SharedLinkResponseDto
|
||||
*/
|
||||
'token'?: string | null;
|
||||
/**
|
||||
*
|
||||
* @type {SharedLinkType}
|
||||
|
|
@ -13690,11 +13714,13 @@ export const SharedLinkApiAxiosParamCreator = function (configuration?: Configur
|
|||
},
|
||||
/**
|
||||
*
|
||||
* @param {string} [password]
|
||||
* @param {string} [token]
|
||||
* @param {string} [key]
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
getMySharedLink: async (key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
|
||||
getMySharedLink: async (password?: string, token?: string, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
|
||||
const localVarPath = `/shared-link/me`;
|
||||
// use dummy base URL string because the URL constructor only accepts absolute URLs.
|
||||
const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
|
||||
|
|
@ -13716,6 +13742,14 @@ export const SharedLinkApiAxiosParamCreator = function (configuration?: Configur
|
|||
// http bearer authentication required
|
||||
await setBearerAuthToObject(localVarHeaderParameter, configuration)
|
||||
|
||||
if (password !== undefined) {
|
||||
localVarQueryParameter['password'] = password;
|
||||
}
|
||||
|
||||
if (token !== undefined) {
|
||||
localVarQueryParameter['token'] = token;
|
||||
}
|
||||
|
||||
if (key !== undefined) {
|
||||
localVarQueryParameter['key'] = key;
|
||||
}
|
||||
|
|
@ -13959,12 +13993,14 @@ export const SharedLinkApiFp = function(configuration?: Configuration) {
|
|||
},
|
||||
/**
|
||||
*
|
||||
* @param {string} [password]
|
||||
* @param {string} [token]
|
||||
* @param {string} [key]
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
async getMySharedLink(key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SharedLinkResponseDto>> {
|
||||
const localVarAxiosArgs = await localVarAxiosParamCreator.getMySharedLink(key, options);
|
||||
async getMySharedLink(password?: string, token?: string, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SharedLinkResponseDto>> {
|
||||
const localVarAxiosArgs = await localVarAxiosParamCreator.getMySharedLink(password, token, key, options);
|
||||
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
|
||||
},
|
||||
/**
|
||||
|
|
@ -14053,7 +14089,7 @@ export const SharedLinkApiFactory = function (configuration?: Configuration, bas
|
|||
* @throws {RequiredError}
|
||||
*/
|
||||
getMySharedLink(requestParameters: SharedLinkApiGetMySharedLinkRequest = {}, options?: AxiosRequestConfig): AxiosPromise<SharedLinkResponseDto> {
|
||||
return localVarFp.getMySharedLink(requestParameters.key, options).then((request) => request(axios, basePath));
|
||||
return localVarFp.getMySharedLink(requestParameters.password, requestParameters.token, requestParameters.key, options).then((request) => request(axios, basePath));
|
||||
},
|
||||
/**
|
||||
*
|
||||
|
|
@ -14142,6 +14178,20 @@ export interface SharedLinkApiCreateSharedLinkRequest {
|
|||
* @interface SharedLinkApiGetMySharedLinkRequest
|
||||
*/
|
||||
export interface SharedLinkApiGetMySharedLinkRequest {
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof SharedLinkApiGetMySharedLink
|
||||
*/
|
||||
readonly password?: string
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof SharedLinkApiGetMySharedLink
|
||||
*/
|
||||
readonly token?: string
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
|
|
@ -14274,7 +14324,7 @@ export class SharedLinkApi extends BaseAPI {
|
|||
* @memberof SharedLinkApi
|
||||
*/
|
||||
public getMySharedLink(requestParameters: SharedLinkApiGetMySharedLinkRequest = {}, options?: AxiosRequestConfig) {
|
||||
return SharedLinkApiFp(this.configuration).getMySharedLink(requestParameters.key, options).then((request) => request(this.axios, this.basePath));
|
||||
return SharedLinkApiFp(this.configuration).getMySharedLink(requestParameters.password, requestParameters.token, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
let allowUpload = false;
|
||||
let showMetadata = true;
|
||||
let expirationTime = '';
|
||||
let password = '';
|
||||
let shouldChangeExpirationTime = false;
|
||||
let canCopyImagesToClipboard = true;
|
||||
const dispatch = createEventDispatcher();
|
||||
|
|
@ -40,6 +41,9 @@
|
|||
if (editingLink.description) {
|
||||
description = editingLink.description;
|
||||
}
|
||||
if (editingLink.password) {
|
||||
password = editingLink.password;
|
||||
}
|
||||
allowUpload = editingLink.allowUpload;
|
||||
allowDownload = editingLink.allowDownload;
|
||||
showMetadata = editingLink.showMetadata;
|
||||
|
|
@ -66,6 +70,7 @@
|
|||
expiresAt: expirationDate,
|
||||
allowUpload,
|
||||
description,
|
||||
password,
|
||||
allowDownload,
|
||||
showMetadata,
|
||||
},
|
||||
|
|
@ -81,7 +86,7 @@
|
|||
return;
|
||||
}
|
||||
|
||||
await copyToClipboard(sharedLink);
|
||||
await copyToClipboard(password ? `Link: ${sharedLink}\nPassword: ${password}` : sharedLink);
|
||||
};
|
||||
|
||||
const getExpirationTimeInMillisecond = () => {
|
||||
|
|
@ -119,6 +124,7 @@
|
|||
id: editingLink.id,
|
||||
sharedLinkEditDto: {
|
||||
description,
|
||||
password,
|
||||
expiresAt: shouldChangeExpirationTime ? expirationDate : undefined,
|
||||
allowUpload,
|
||||
allowDownload,
|
||||
|
|
@ -178,12 +184,16 @@
|
|||
<div class="mb-2 mt-4">
|
||||
<p class="text-xs">LINK OPTIONS</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-gray-100 p-4 dark:bg-black/40">
|
||||
<div class="rounded-lg bg-gray-100 p-4 dark:bg-black/40 max-h-[330px] overflow-y-scroll">
|
||||
<div class="flex flex-col">
|
||||
<div class="mb-2">
|
||||
<SettingInputField inputType={SettingInputFieldType.TEXT} label="Description" bind:value={description} />
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<SettingInputField inputType={SettingInputFieldType.TEXT} label="Password" bind:value={password} />
|
||||
</div>
|
||||
|
||||
<div class="my-3">
|
||||
<SettingSwitch bind:checked={showMetadata} title={'Show metadata'} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,14 @@ import featurePanelUrl from '$lib/assets/feature-panel.png';
|
|||
import { api as clientApi, ThumbnailFormat } from '@api';
|
||||
import { error } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
import type { AxiosError } from 'axios';
|
||||
|
||||
export const load = (async ({ params, locals: { api } }) => {
|
||||
export const load = (async ({ params, locals: { api }, cookies }) => {
|
||||
const { key } = params;
|
||||
const token = cookies.get('immich_shared_link_token');
|
||||
|
||||
try {
|
||||
const { data: sharedLink } = await api.sharedLinkApi.getMySharedLink({ key });
|
||||
const { data: sharedLink } = await api.sharedLinkApi.getMySharedLink({ key, token });
|
||||
|
||||
const assetCount = sharedLink.assets.length;
|
||||
const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;
|
||||
|
|
@ -23,6 +25,17 @@ export const load = (async ({ params, locals: { api } }) => {
|
|||
},
|
||||
};
|
||||
} catch (e) {
|
||||
// handle unauthorized error
|
||||
if ((e as AxiosError).response?.status === 401) {
|
||||
return {
|
||||
passwordRequired: true,
|
||||
sharedLinkKey: key,
|
||||
meta: {
|
||||
title: 'Password Required',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
throw error(404, {
|
||||
message: 'Invalid shared link',
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,20 +1,79 @@
|
|||
<script lang="ts">
|
||||
import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
|
||||
import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
|
||||
import { SharedLinkType } from '@api';
|
||||
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
|
||||
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
|
||||
import ThemeButton from '$lib/components/shared-components/theme-button.svelte';
|
||||
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||
import { api, SharedLinkType } from '@api';
|
||||
import type { PageData } from './$types';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
|
||||
export let data: PageData;
|
||||
const { sharedLink } = data;
|
||||
let { sharedLink, passwordRequired, sharedLinkKey: key } = data;
|
||||
let { title, description } = data.meta;
|
||||
|
||||
let isOwned = data.user ? data.user.id === sharedLink.userId : false;
|
||||
let isOwned = data.user ? data.user.id === sharedLink?.userId : false;
|
||||
let password = '';
|
||||
|
||||
const handlePasswordSubmit = async () => {
|
||||
try {
|
||||
const result = await api.sharedLinkApi.getMySharedLink({ password, key });
|
||||
passwordRequired = false;
|
||||
sharedLink = result.data;
|
||||
isOwned = data.user ? data.user.id === sharedLink.userId : false;
|
||||
title = (sharedLink.album ? sharedLink.album.albumName : 'Public Share') + ' - Immich';
|
||||
description = sharedLink.description || `${sharedLink.assets.length} shared photos & videos.`;
|
||||
} catch (error) {
|
||||
handleError(error, 'Failed to get shared link');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if sharedLink.type == SharedLinkType.Album}
|
||||
<svelte:head>
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
</svelte:head>
|
||||
{#if passwordRequired}
|
||||
<header>
|
||||
<ControlAppBar showBackButton={false}>
|
||||
<svelte:fragment slot="leading">
|
||||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
class="ml-6 flex place-items-center gap-2 hover:cursor-pointer"
|
||||
href="https://immich.app"
|
||||
>
|
||||
<ImmichLogo height={30} width={30} />
|
||||
<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">IMMICH</h1>
|
||||
</a>
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="trailing">
|
||||
<ThemeButton />
|
||||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
</header>
|
||||
<main
|
||||
class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
|
||||
>
|
||||
<div class="flex flex-col items-center justify-center mt-20">
|
||||
<div class="text-2xl font-bold text-immich-primary dark:text-immich-dark-primary">Password Required</div>
|
||||
<div class="mt-4 text-lg text-immich-primary dark:text-immich-dark-primary">
|
||||
Please enter the password to view this page.
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<input type="password" class="immich-form-input mr-2" placeholder="Password" bind:value={password} />
|
||||
<Button on:click={handlePasswordSubmit}>Submit</Button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{/if}
|
||||
|
||||
{#if !passwordRequired && sharedLink?.type == SharedLinkType.Album}
|
||||
<AlbumViewer {sharedLink} />
|
||||
{/if}
|
||||
|
||||
{#if sharedLink.type == SharedLinkType.Individual}
|
||||
{#if !passwordRequired && sharedLink?.type == SharedLinkType.Individual}
|
||||
<div class="immich-scrollbar">
|
||||
<IndividualSharedViewer {sharedLink} {isOwned} />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue