Add friendly aliases for client proofing links
This commit is contained in:
@@ -52,6 +52,7 @@ function CreateForm({ onCreated }: { onCreated: () => void }) {
|
||||
const [albums, setAlbums] = useState<AlbumOption[] | null>(null);
|
||||
const [clientName, setClientName] = useState('');
|
||||
const [albumId, setAlbumId] = useState('');
|
||||
const [alias, setAlias] = useState('');
|
||||
const [expiresOn, setExpiresOn] = useState('');
|
||||
const [download, setDownload] = useState<Download>('none');
|
||||
const [limit, setLimit] = useState('');
|
||||
@@ -76,6 +77,7 @@ function CreateForm({ onCreated }: { onCreated: () => void }) {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
clientName,
|
||||
alias: alias.trim() || null,
|
||||
albumId,
|
||||
expiresOn: expiresOn || null,
|
||||
download,
|
||||
@@ -83,6 +85,7 @@ function CreateForm({ onCreated }: { onCreated: () => void }) {
|
||||
}),
|
||||
});
|
||||
setClientName('');
|
||||
setAlias('');
|
||||
setAlbumId('');
|
||||
setExpiresOn('');
|
||||
setDownload('none');
|
||||
@@ -113,6 +116,22 @@ function CreateForm({ onCreated }: { onCreated: () => void }) {
|
||||
maxLength={120}
|
||||
required
|
||||
/>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="proof-alias">Client URL alias (optional)</label>
|
||||
<input
|
||||
id="proof-alias"
|
||||
value={alias}
|
||||
onChange={(e) =>
|
||||
setAlias(
|
||||
e.target.value
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/[^A-Za-z0-9-]/g, ''),
|
||||
)
|
||||
}
|
||||
placeholder="Client"
|
||||
maxLength={64}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="proof-album">Album</label>
|
||||
@@ -294,6 +313,30 @@ function SessionCard({
|
||||
{copied === 'link' ? <Icons.IconCheck size={14} /> : <Icons.IconCopy size={14} />}{' '}
|
||||
{copied === 'link' ? 'Copied' : 'Copy link'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="admin-btn admin-btn-ghost admin-btn-sm"
|
||||
onClick={() => {
|
||||
const next = window.prompt(
|
||||
'Client URL alias (leave blank to remove):',
|
||||
session.alias ?? '',
|
||||
);
|
||||
|
||||
if (next === null) return;
|
||||
|
||||
const cleaned = next
|
||||
.trim()
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/[^A-Za-z0-9-]/g, '');
|
||||
|
||||
void patch({
|
||||
alias: cleaned || null,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Icons.IconLink size={14} />
|
||||
{session.alias ? ' Change alias' : ' Set alias'}
|
||||
</button>
|
||||
<a
|
||||
className="admin-btn admin-btn-ghost admin-btn-sm"
|
||||
href={session.link}
|
||||
|
||||
54
app/c/[alias]/page.tsx
Normal file
54
app/c/[alias]/page.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import type { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
|
||||
import { findSessionByAlias } from '@/lib/proofSessions';
|
||||
import {
|
||||
proofMetadata,
|
||||
renderProof,
|
||||
} from '../../proof/renderProof';
|
||||
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
|
||||
interface ClientPageProps {
|
||||
params: Promise<{
|
||||
alias: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: ClientPageProps): Promise<Metadata> {
|
||||
const { alias } = await params;
|
||||
|
||||
const session = await findSessionByAlias(alias);
|
||||
|
||||
if (!session) {
|
||||
return {
|
||||
title: 'Not found',
|
||||
robots: {
|
||||
index: false,
|
||||
follow: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return proofMetadata(session.token);
|
||||
}
|
||||
|
||||
|
||||
export default async function ClientPage({
|
||||
params,
|
||||
}: ClientPageProps) {
|
||||
const { alias } = await params;
|
||||
|
||||
const session = await findSessionByAlias(alias);
|
||||
|
||||
if (!session) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return renderProof(session.token);
|
||||
}
|
||||
@@ -1,121 +1,34 @@
|
||||
/**
|
||||
* A client proofing link: /proof/<token>.
|
||||
*
|
||||
* Renders the session's album with the proofing controls in session mode —
|
||||
* hearts save to the server, and the client submits the selection when done.
|
||||
* The album does not have to be published; see immich.getProofingAlbum().
|
||||
*
|
||||
* Kept out of search engines and the sitemap: the URL is the credential.
|
||||
*/
|
||||
|
||||
import type { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { immich } from '@/lib/immich';
|
||||
import { getConfig, hasExifPanelContent } from '@/lib/config';
|
||||
import { encodeAssetId } from '@/lib/tokens';
|
||||
import { getServerDictionary } from '@/lib/i18n/server';
|
||||
import { downloadsRemaining, findSessionByToken, isExpired } from '@/lib/proofSessions';
|
||||
import { AlbumDetailView } from '../../[...path]/AlbumDetailView';
|
||||
import { toPhotoItems } from '../../[...path]/photoItems';
|
||||
|
||||
import {
|
||||
proofMetadata,
|
||||
renderProof,
|
||||
} from '../renderProof';
|
||||
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
|
||||
interface ProofPageProps {
|
||||
params: Promise<{ token: string }>;
|
||||
params: Promise<{
|
||||
token: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: ProofPageProps): Promise<Metadata> {
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: ProofPageProps): Promise<Metadata> {
|
||||
const { token } = await params;
|
||||
const session = await findSessionByToken(token);
|
||||
const t = getServerDictionary();
|
||||
return {
|
||||
// An expired link names nobody, not even in the tab title — but the tab
|
||||
// says the same as the page, rather than "not found" over "expired".
|
||||
title: !session
|
||||
? t.error.notFoundTitle
|
||||
: isExpired(session)
|
||||
? t.proofSession.expiredTitle
|
||||
: t.proofSession.greeting(session.clientName),
|
||||
robots: { index: false, follow: false },
|
||||
// Never let the link travel as a Referer, not even to our own font host.
|
||||
referrer: 'no-referrer',
|
||||
};
|
||||
|
||||
return proofMetadata(token);
|
||||
}
|
||||
|
||||
export default async function ProofPage({ params }: ProofPageProps) {
|
||||
|
||||
export default async function ProofPage({
|
||||
params,
|
||||
}: ProofPageProps) {
|
||||
const { token } = await params;
|
||||
const session = await findSessionByToken(token);
|
||||
if (!session) notFound();
|
||||
|
||||
const t = getServerDictionary();
|
||||
|
||||
if (isExpired(session)) {
|
||||
return (
|
||||
<div className="empty-state">
|
||||
<h1 className="empty-state__title">{t.proofSession.expiredTitle}</h1>
|
||||
<p className="empty-state__text">{t.proofSession.expiredText}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const album = await immich.getProofingAlbum(session.albumId);
|
||||
if (!album) notFound();
|
||||
|
||||
const config = getConfig();
|
||||
const images = toPhotoItems(
|
||||
album.assets,
|
||||
config.exif.onHover && config.exif.camera,
|
||||
config.exif.caption,
|
||||
);
|
||||
|
||||
// Only what is still in the album: a photo removed in Immich after it was
|
||||
// picked drops out of the selection instead of haunting the counter.
|
||||
const inAlbum = new Set(album.assets.map((a) => a.id));
|
||||
const selected = session.selection.filter((id) => inAlbum.has(id)).map(encodeAssetId);
|
||||
|
||||
const validUntil = session.expiresOn
|
||||
? new Date(`${session.expiresOn}T12:00:00`).toLocaleDateString(t.dateLocale, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})
|
||||
: null;
|
||||
|
||||
const gridStyle = {
|
||||
'--grid-columns': config.grid.columns,
|
||||
...(config.gridGapExplicit ? { '--grid-gap': `${config.grid.gap}px` } : {}),
|
||||
'--grid-aspect-ratio': config.grid.aspectRatio,
|
||||
} as React.CSSProperties;
|
||||
|
||||
return (
|
||||
<AlbumDetailView
|
||||
album={album}
|
||||
images={images}
|
||||
layout={config.grid.layout}
|
||||
gridStyle={gridStyle}
|
||||
watermark={config.watermark}
|
||||
showExifPanel={hasExifPanelContent(config.exif)}
|
||||
showGear={config.exif.camera}
|
||||
proofSession={{
|
||||
token: session.token,
|
||||
selected,
|
||||
submitted: Boolean(session.submittedAt),
|
||||
download: session.download,
|
||||
downloadsRemaining: downloadsRemaining(session),
|
||||
}}
|
||||
intro={
|
||||
<div className="proof-session-intro">
|
||||
<p className="proof-session-intro__greeting">
|
||||
{t.proofSession.greeting(session.clientName)}
|
||||
</p>
|
||||
<p className="proof-session-intro__text">
|
||||
{session.submittedAt ? t.proofSession.locked : t.proofSession.intro}
|
||||
</p>
|
||||
{validUntil && (
|
||||
<p className="proof-session-intro__meta">{t.proofSession.validUntil(validUntil)}</p>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
return renderProof(token);
|
||||
}
|
||||
|
||||
163
app/proof/renderProof.tsx
Normal file
163
app/proof/renderProof.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
import type { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
|
||||
import { immich } from '@/lib/immich';
|
||||
import { getConfig, hasExifPanelContent } from '@/lib/config';
|
||||
import { encodeAssetId } from '@/lib/tokens';
|
||||
import { getServerDictionary } from '@/lib/i18n/server';
|
||||
import {
|
||||
downloadsRemaining,
|
||||
findSessionByToken,
|
||||
isExpired,
|
||||
} from '@/lib/proofSessions';
|
||||
|
||||
import { AlbumDetailView } from '../[...path]/AlbumDetailView';
|
||||
import { toPhotoItems } from '../[...path]/photoItems';
|
||||
|
||||
|
||||
/**
|
||||
* Generate metadata for a proofing session.
|
||||
*
|
||||
* This is shared by both:
|
||||
*
|
||||
* /proof/<token>
|
||||
* /c/<alias>
|
||||
*/
|
||||
export async function proofMetadata(token: string): Promise<Metadata> {
|
||||
const session = await findSessionByToken(token);
|
||||
const t = getServerDictionary();
|
||||
|
||||
return {
|
||||
title: !session
|
||||
? t.error.notFoundTitle
|
||||
: isExpired(session)
|
||||
? t.proofSession.expiredTitle
|
||||
: t.proofSession.greeting(session.clientName),
|
||||
|
||||
robots: {
|
||||
index: false,
|
||||
follow: false,
|
||||
},
|
||||
|
||||
// Do not leak the proof URL through the Referer header.
|
||||
referrer: 'no-referrer',
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Render an existing Folio proofing session from its real token.
|
||||
*
|
||||
* Both /proof/<token> and our friendly /c/<alias> route can call this,
|
||||
* which means there is only one copy of the actual gallery code.
|
||||
*/
|
||||
export async function renderProof(token: string) {
|
||||
const session = await findSessionByToken(token);
|
||||
|
||||
if (!session) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const t = getServerDictionary();
|
||||
|
||||
if (isExpired(session)) {
|
||||
return (
|
||||
<div className="empty-state">
|
||||
<h1 className="empty-state__title">
|
||||
{t.proofSession.expiredTitle}
|
||||
</h1>
|
||||
|
||||
<p className="empty-state__text">
|
||||
{t.proofSession.expiredText}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const album = await immich.getProofingAlbum(session.albumId);
|
||||
|
||||
if (!album) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const config = getConfig();
|
||||
|
||||
const images = toPhotoItems(
|
||||
album.assets,
|
||||
config.exif.onHover && config.exif.camera,
|
||||
config.exif.caption,
|
||||
);
|
||||
|
||||
/*
|
||||
* Only preserve selected photos that still exist in the Immich album.
|
||||
*
|
||||
* If a photo was selected by the client and is later removed from
|
||||
* the album, it should disappear from the saved selection too.
|
||||
*/
|
||||
const inAlbum = new Set(album.assets.map((asset) => asset.id));
|
||||
|
||||
const selected = session.selection
|
||||
.filter((id) => inAlbum.has(id))
|
||||
.map(encodeAssetId);
|
||||
|
||||
const validUntil = session.expiresOn
|
||||
? new Date(`${session.expiresOn}T12:00:00`).toLocaleDateString(
|
||||
t.dateLocale,
|
||||
{
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
},
|
||||
)
|
||||
: null;
|
||||
|
||||
const gridStyle = {
|
||||
'--grid-columns': config.grid.columns,
|
||||
|
||||
...(config.gridGapExplicit
|
||||
? {
|
||||
'--grid-gap': `${config.grid.gap}px`,
|
||||
}
|
||||
: {}),
|
||||
|
||||
'--grid-aspect-ratio': config.grid.aspectRatio,
|
||||
} as React.CSSProperties;
|
||||
|
||||
return (
|
||||
<AlbumDetailView
|
||||
album={album}
|
||||
images={images}
|
||||
layout={config.grid.layout}
|
||||
gridStyle={gridStyle}
|
||||
watermark={config.watermark}
|
||||
showExifPanel={hasExifPanelContent(config.exif)}
|
||||
showGear={config.exif.camera}
|
||||
proofSession={{
|
||||
token: session.token,
|
||||
selected,
|
||||
submitted: Boolean(session.submittedAt),
|
||||
download: session.download,
|
||||
downloadsRemaining: downloadsRemaining(session),
|
||||
}}
|
||||
intro={
|
||||
<div className="proof-session-intro">
|
||||
<p className="proof-session-intro__greeting">
|
||||
{t.proofSession.greeting(session.clientName)}
|
||||
</p>
|
||||
|
||||
<p className="proof-session-intro__text">
|
||||
{session.submittedAt
|
||||
? t.proofSession.locked
|
||||
: t.proofSession.intro}
|
||||
</p>
|
||||
|
||||
{validUntil && (
|
||||
<p className="proof-session-intro__meta">
|
||||
{t.proofSession.validUntil(validUntil)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user