web: PRO needs a proven address — email verification gates the studio
A signed-in account is served exactly like a guest until it opens the verification link: watermarked 2048px export, no saving, no PRO frames, GPS stamp or HDF. SMTP is declared in .env; with SMTP_HOST unset the link goes to the container log. Allowlisted admins count as verified.
This commit is contained in:
+121
-26
@@ -59,6 +59,12 @@ const FRAMES: { id: FrameId; label: MsgKey }[] = [
|
||||
{ id: 'wallframe-landscape', label: 'frame.wallLand' },
|
||||
];
|
||||
|
||||
// The printed frames are PRO, the plain export is not — the same split the
|
||||
// phone build draws (see src/utils/entitlement.ts there). Everything else the
|
||||
// gate owns lives where it is used: the GPS stamp in wmChips, the HDF effect in
|
||||
// paramDefs (its own `pro` flag), and the export tier in TIERS.
|
||||
const PRO_FRAMES: FrameId[] = ['classic-white', 'polaroid', 'wallframe', 'wallframe-landscape'];
|
||||
|
||||
// FREE draws the frame on the canvas and lets the user drag its corners, so
|
||||
// every ratio is offered here — no ratio is applied until APPLY.
|
||||
const CROPS: CropRatio[] = ['none', 'free', '1:1', '2:3', '3:2', '3:4', '4:3', '16:9'];
|
||||
@@ -329,6 +335,11 @@ export function Workspace() {
|
||||
const [exporting, setExporting] = useState(false);
|
||||
const [savingPhoto, setSavingPhoto] = useState(false);
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
// PRO is the old "signed in", and then some: the account has to have proven
|
||||
// the address it signed up with. Until it does, this build serves it exactly
|
||||
// like a guest — watermarked 2048px export, no saving, no PRO tools. An
|
||||
// allowlisted admin is trusted by construction and counts as verified.
|
||||
const pro = !!user?.verified;
|
||||
const [saved, setSaved] = useState<SavedRecipe[]>([]);
|
||||
// Bumped by RESET while CREATE is open: the form above the button listens for
|
||||
// it and drops back to its defaults.
|
||||
@@ -351,11 +362,30 @@ export function Workspace() {
|
||||
// null = closed. /app?auth=1 opens the studio's dialog straight on the sign-in
|
||||
// tab (sign-in is the default; ?auth=signup asks for the other one); the
|
||||
// landing page runs the same dialog in place instead of linking here.
|
||||
const [authMode, setAuthMode] = useState<'login' | 'signup' | null>(() => {
|
||||
// `verify` is the third face of the same dialog: the account exists but its
|
||||
// address is unproven, so the only thing left to do is open the letter.
|
||||
const [authMode, setAuthMode] = useState<'login' | 'signup' | 'verify' | null>(() => {
|
||||
const asked = new URLSearchParams(window.location.search).get('auth');
|
||||
return asked ? (asked === 'signup' ? 'signup' : 'login') : null;
|
||||
});
|
||||
|
||||
// What every PRO-only entry point calls instead of returning silently: a
|
||||
// guest is sent to the dialog for an account, an unverified account to the
|
||||
// same dialog for its letter.
|
||||
const promptPro = useCallback(() => setAuthMode(user ? 'verify' : 'login'), [user]);
|
||||
|
||||
// The banner's own button. The address already has one live link, so this
|
||||
// replaces it — the API caps how often, and answers either way.
|
||||
const [resent, setResent] = useState(false);
|
||||
const resendVerification = useCallback(async () => {
|
||||
try {
|
||||
await api.resendVerification();
|
||||
setResent(true);
|
||||
} catch (err) {
|
||||
setError(t('err.generic', { msg: String(err) }));
|
||||
}
|
||||
}, [t]);
|
||||
|
||||
const renderToken = useRef(0);
|
||||
// Which previewMax the bytes in previewBytes were made at, so the upgrade
|
||||
// effect does not redo the load-time 1600px copy.
|
||||
@@ -395,14 +425,16 @@ export function Workspace() {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) {
|
||||
// PRO, not merely signed in: those two listings are the API's own, and it
|
||||
// answers an unverified account with a 403 (see requirePro there).
|
||||
if (!pro) {
|
||||
setSaved([]);
|
||||
setMyPhotos([]);
|
||||
return;
|
||||
}
|
||||
api.listRecipes().then((r) => setSaved(r.recipes)).catch(() => setSaved([]));
|
||||
api.listMyPhotos().then((r) => setMyPhotos(r.photos)).catch(() => setMyPhotos([]));
|
||||
}, [user]);
|
||||
}, [pro]);
|
||||
|
||||
// --- preview render -------------------------------------------------------
|
||||
useEffect(() => {
|
||||
@@ -702,12 +734,12 @@ export function Workspace() {
|
||||
);
|
||||
|
||||
const saveRecipe = useCallback(() => {
|
||||
if (!user) {
|
||||
setAuthMode('login');
|
||||
if (!pro) {
|
||||
promptPro();
|
||||
return;
|
||||
}
|
||||
setNaming('recipe');
|
||||
}, [user]);
|
||||
}, [pro, promptPro]);
|
||||
|
||||
// A recipe name is only free while this account has not spent it. Checked on
|
||||
// the field rather than at the store: the list is already here, whole.
|
||||
@@ -734,8 +766,8 @@ export function Workspace() {
|
||||
// asked to sign in first, like every other write in the studio.
|
||||
const favoriteRecipe = useCallback(
|
||||
async (entry: Recipe) => {
|
||||
if (!user) {
|
||||
setAuthMode('login');
|
||||
if (!pro) {
|
||||
promptPro();
|
||||
return;
|
||||
}
|
||||
try {
|
||||
@@ -746,7 +778,7 @@ export function Workspace() {
|
||||
setError(t('err.generic', { msg: String(err) }));
|
||||
}
|
||||
},
|
||||
[user, t]
|
||||
[pro, promptPro, t]
|
||||
);
|
||||
|
||||
// The star reads the id the dragged chip carried back to its recipe.
|
||||
@@ -772,14 +804,14 @@ export function Workspace() {
|
||||
}, [favoriteRecipe, recipe]);
|
||||
|
||||
// CREATE tab: a new recipe is applied at once and listed under RECIPES. A
|
||||
// signed-in account also stores it; a guest's copy stays in `created`, which
|
||||
// is exactly what "forgotten when you leave" means.
|
||||
// PRO account also stores it; a guest's — or an unverified account's — copy
|
||||
// stays in `created`, which is exactly what "forgotten when you leave" means.
|
||||
const addCreatedRecipe = useCallback(
|
||||
async (draft: RecipeDraft) => {
|
||||
const entry: Recipe = { ...draft, id: `local-${Date.now()}`, isCustom: true };
|
||||
setCreated((list) => [entry, ...list]);
|
||||
applyRecipe(entry);
|
||||
if (!user) return;
|
||||
if (!pro) return;
|
||||
try {
|
||||
const stored = await api.createRecipe(entry.name, entry);
|
||||
setSaved((list) => [stored.recipe, ...list]);
|
||||
@@ -787,7 +819,7 @@ export function Workspace() {
|
||||
setError(t('err.generic', { msg: String(err) }));
|
||||
}
|
||||
},
|
||||
[user, applyRecipe, t]
|
||||
[pro, applyRecipe, t]
|
||||
);
|
||||
|
||||
// CREATE edits the photo live: each knob lands on the render as it is typed so
|
||||
@@ -798,11 +830,14 @@ export function Workspace() {
|
||||
}, []);
|
||||
|
||||
// The phone's encrypted .recipe envelope (`shared/utils/recipeShare` is the
|
||||
// app's own file, byte-identical). Signed in only — a guest's recipe is never
|
||||
// written to disk.
|
||||
// app's own file, byte-identical). PRO only — a guest's recipe, or an
|
||||
// unverified account's, is never written to disk.
|
||||
const exportRecipeFile = useCallback(
|
||||
(draft: RecipeDraft) => {
|
||||
if (!user) return;
|
||||
if (!pro) {
|
||||
promptPro();
|
||||
return;
|
||||
}
|
||||
const xml = exportRecipeXml({ ...draft, id: 'share' });
|
||||
download(
|
||||
new TextEncoder().encode(xml),
|
||||
@@ -810,7 +845,7 @@ export function Workspace() {
|
||||
'application/xml'
|
||||
);
|
||||
},
|
||||
[user]
|
||||
[pro, promptPro]
|
||||
);
|
||||
|
||||
// IMPORT is the other half of EXPORT: the phone's .recipe file, or one saved
|
||||
@@ -868,12 +903,28 @@ export function Workspace() {
|
||||
[recipe, frameId, cropEditing, useGeotag]
|
||||
);
|
||||
|
||||
// The look the stage is holding, judged against the PRO list. The chips keep
|
||||
// a guest from picking one, but a look can arrive without them: an imported
|
||||
// .recipe, or a photo saved before the gate existed. The FILE is where the
|
||||
// gate bites — the preview is free, exactly as it is on the phone.
|
||||
const proLookInUse = useCallback(
|
||||
() =>
|
||||
PRO_FRAMES.includes(frameId) ||
|
||||
useGeotag ||
|
||||
(recipe.adjustments.hdf ?? 0) > 0,
|
||||
[frameId, useGeotag, recipe.adjustments.hdf]
|
||||
);
|
||||
|
||||
const exportPhoto = useCallback(async () => {
|
||||
if (!engine || !source) return;
|
||||
if (!pro && proLookInUse()) {
|
||||
promptPro();
|
||||
return;
|
||||
}
|
||||
setExporting(true);
|
||||
setError(null);
|
||||
try {
|
||||
const tier = TIERS[user ? 'user' : 'guest'];
|
||||
const tier = TIERS[pro ? 'user' : 'guest'];
|
||||
const src = tier.maxExportDim ? await resizedJpeg(source.bytes, tier.maxExportDim, 0.95) : source.bytes;
|
||||
const out = await renderPhoto({
|
||||
source: src,
|
||||
@@ -924,15 +975,15 @@ export function Workspace() {
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
}, [engine, source, recipe, frameId, cropEditing, cropLive, cropRect, useGeotag, gps, gpsStyle, rotation, straighten, markOn, markText, markStyle, place, user, t, strip, photoSettings]);
|
||||
}, [engine, source, recipe, frameId, cropEditing, cropLive, cropRect, useGeotag, gps, gpsStyle, rotation, straighten, markOn, markText, markStyle, place, pro, promptPro, proLookInUse, t, strip, photoSettings]);
|
||||
|
||||
// SAVE PHOTO: the stage as it stands, uploaded to this account's own folder.
|
||||
// The upload is left clean (no burned strip) so the landing reel can draw its
|
||||
// own `.lp-shot` frame around it; the labels are stored alongside instead.
|
||||
// The 12-photo cap is the API's, mirrored here so the button can say no.
|
||||
const savePhotoToFolder = useCallback(async (photoName?: string) => {
|
||||
if (!user) {
|
||||
setAuthMode('login');
|
||||
if (!pro) {
|
||||
promptPro();
|
||||
return;
|
||||
}
|
||||
if (!engine || !source) {
|
||||
@@ -1008,7 +1059,7 @@ export function Workspace() {
|
||||
} finally {
|
||||
setSavingPhoto(false);
|
||||
}
|
||||
}, [user, engine, source, myPhotos, openPhotoId, recipe, frameId, cropEditing, cropLive, cropRect, useGeotag, gps, gpsStyle, rotation, straighten, markOn, markText, markStyle, strip, photoSettings, t]);
|
||||
}, [pro, promptPro, engine, source, myPhotos, openPhotoId, recipe, frameId, cropEditing, cropLive, cropRect, useGeotag, gps, gpsStyle, rotation, straighten, markOn, markText, markStyle, strip, photoSettings, t]);
|
||||
|
||||
// Reopen one of this account's saved frames: the bytes come back as a File
|
||||
// through the same door an upload uses, then the stored look goes on top.
|
||||
@@ -1134,15 +1185,18 @@ export function Workspace() {
|
||||
const paramChips = (defs: ContinuousParamDef[]): ChipDef[] =>
|
||||
defs.map((def) => {
|
||||
const value = def.get(recipe.adjustments);
|
||||
const locked = !!def.pro && !pro;
|
||||
return {
|
||||
key: def.key,
|
||||
label: def.label,
|
||||
value: def.display(value),
|
||||
active: openParam === def.key,
|
||||
amberValue: openParam !== def.key && value !== def.defaultValue,
|
||||
// The web build is the demo: HDF EFFECT is part of what it shows off,
|
||||
// so no knob is held back here. The PRO gate stays a phone-build rule.
|
||||
onClick: () => toggleParam(def.key),
|
||||
// The phone greys a PRO knob out; the web keeps it clickable and says
|
||||
// why instead, because the fix here is an action (prove the address)
|
||||
// rather than a purchase.
|
||||
pro: !!def.pro,
|
||||
onClick: locked ? promptPro : () => toggleParam(def.key),
|
||||
};
|
||||
});
|
||||
|
||||
@@ -1417,8 +1471,13 @@ export function Workspace() {
|
||||
key: 'gps',
|
||||
label: useGeotag ? 'GPS WATERMARK ON' : 'GPS WATERMARK OFF',
|
||||
active: useGeotag,
|
||||
pro: true,
|
||||
disabled: !gps && !(gpsManual.lat && gpsManual.lng),
|
||||
onClick: () => {
|
||||
if (!pro) {
|
||||
promptPro();
|
||||
return;
|
||||
}
|
||||
remember();
|
||||
setUseGeotag(!useGeotag);
|
||||
},
|
||||
@@ -1469,6 +1528,16 @@ export function Workspace() {
|
||||
},
|
||||
});
|
||||
|
||||
// Shown where an unverified account would otherwise just see an empty list.
|
||||
// The list is not empty because the account has nothing — it is shut until
|
||||
// the address is proven, and saying so is the whole point of the chip.
|
||||
const verifyChip = (): ChipDef => ({
|
||||
key: 'verify-now',
|
||||
label: t('pro.verifyChip'),
|
||||
pro: true,
|
||||
onClick: promptPro,
|
||||
});
|
||||
|
||||
const framesRow = (): ChipDef[] => [
|
||||
// NO FRAME is not a chip of its own: clicking the frame already on the
|
||||
// photo takes it off again, so the row carries one entry per frame.
|
||||
@@ -1476,7 +1545,12 @@ export function Workspace() {
|
||||
key: `fr:${frame.id}`,
|
||||
label: t(frame.label),
|
||||
active: frameId === frame.id,
|
||||
pro: PRO_FRAMES.includes(frame.id),
|
||||
onClick: () => {
|
||||
if (PRO_FRAMES.includes(frame.id) && !pro) {
|
||||
promptPro();
|
||||
return;
|
||||
}
|
||||
setOpenParam(null);
|
||||
setOpenGroup(null);
|
||||
remember();
|
||||
@@ -1545,6 +1619,7 @@ export function Workspace() {
|
||||
// IMPORT is a chip inside the RECIPES strip.
|
||||
];
|
||||
case 'favorited':
|
||||
if (user && !pro) return [verifyChip()];
|
||||
return saved.length === 0
|
||||
? [{ key: 'no-favorites', label: 'NO FAVORITES YET - TAP THE STAR ON A RECIPE', disabled: true, onClick: () => {} }]
|
||||
: saved.map((entry) => ({
|
||||
@@ -1564,6 +1639,7 @@ export function Workspace() {
|
||||
// the landing strip — the owner takes it off again with that switch, or
|
||||
// the curator with the admin slot.
|
||||
const rows: ChipDef[] = [];
|
||||
if (user && !pro) return [verifyChip()];
|
||||
if (myPhotos.length === 0) {
|
||||
rows.push({ key: 'no-photos', label: t('myp.empty'), disabled: true, onClick: () => {} });
|
||||
} else {
|
||||
@@ -1747,6 +1823,24 @@ export function Workspace() {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* A signed-in account whose address is unproven is served as a guest, so
|
||||
the studio says so once, at the top, instead of letting each locked
|
||||
chip explain it on its own. */}
|
||||
{user && !pro ? (
|
||||
<div className="verify-bar" role="status">
|
||||
<span>{t('pro.unverifiedBar', { email: user.email })}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="btn"
|
||||
data-key="verify-resend"
|
||||
disabled={resent}
|
||||
onClick={() => void resendVerification()}
|
||||
>
|
||||
{resent ? t('pro.resent') : t('pro.resend')}
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="workspace">
|
||||
<ToolRail tab={tab} onTab={setTab} onDropRecipe={favoriteById} />
|
||||
|
||||
@@ -1757,7 +1851,7 @@ export function Workspace() {
|
||||
<RecipeCreatePanel
|
||||
currentBase={recipe.baseFilter}
|
||||
current={recipe.adjustments}
|
||||
signedIn={!!user}
|
||||
signedIn={pro}
|
||||
resetToken={createReset}
|
||||
onPreview={previewCreatedRecipe}
|
||||
onSave={(draft) => void addCreatedRecipe(draft)}
|
||||
@@ -2041,6 +2135,7 @@ export function Workspace() {
|
||||
{authMode ? (
|
||||
<AuthModal
|
||||
initialMode={authMode}
|
||||
email={user?.email}
|
||||
onClose={() => setAuthMode(null)}
|
||||
onDone={async () => {
|
||||
setAuthMode(null);
|
||||
|
||||
Reference in New Issue
Block a user