mirror of
https://github.com/hanzoai/sign.git
synced 2026-10-21 01:21:51 +00:00
zooqueen
f31a87bf93
State now reads through shape, weight and tone rather than hue: the active editor step and selected file carry a filled mark and heavier label, recipients are told apart by six neutral tones, and status icons lean on the clock/check/file glyphs they already draw. Red stays as the one accent, reserved for destructive and rejected. Drops the unreferenced --new-* ramps and the dawn/water scales, points the stock Tailwind ring at --ring, and desaturates the sign scale so the PDF certificate, audit log and email templates match the app.
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import { Plural, Trans } from '@lingui/react/macro';
|
|
|
|
import { Heading, Img, Section, Text } from '../components';
|
|
|
|
export type TemplateAccessAuth2FAProps = {
|
|
documentTitle: string;
|
|
code: string;
|
|
userEmail: string;
|
|
userName: string;
|
|
expiresInMinutes: number;
|
|
assetBaseUrl?: string;
|
|
};
|
|
|
|
export const TemplateAccessAuth2FA = ({
|
|
documentTitle,
|
|
code,
|
|
userName,
|
|
expiresInMinutes,
|
|
assetBaseUrl = 'http://localhost:3002',
|
|
}: TemplateAccessAuth2FAProps) => {
|
|
const getAssetUrl = (path: string) => {
|
|
return new URL(path, assetBaseUrl).toString();
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Img src={getAssetUrl('/static/document.png')} alt="Document" className="mx-auto h-12 w-12" />
|
|
|
|
<Section className="mt-8">
|
|
<Heading className="text-center text-lg font-semibold text-black">
|
|
<Trans>Verification Code Required</Trans>
|
|
</Heading>
|
|
|
|
<Text className="mt-2 text-center text-neutral-700">
|
|
<Trans>
|
|
Hi {userName}, you need to enter a verification code to complete the document "
|
|
{documentTitle}".
|
|
</Trans>
|
|
</Text>
|
|
|
|
<Section className="mt-6 rounded-lg bg-slate-50 p-6 text-center">
|
|
<Text className="mb-2 text-sm font-medium text-slate-600">
|
|
<Trans>Your verification code:</Trans>
|
|
</Text>
|
|
<Text className="text-2xl font-bold tracking-wider text-black">{code}</Text>
|
|
</Section>
|
|
|
|
<Text className="mt-4 text-center text-sm text-slate-600">
|
|
<Plural
|
|
value={expiresInMinutes}
|
|
one="This code will expire in # minute."
|
|
other="This code will expire in # minutes."
|
|
/>
|
|
</Text>
|
|
|
|
<Text className="mt-4 text-center text-sm text-slate-500">
|
|
<Trans>
|
|
If you didn't request this verification code, you can safely ignore this email.
|
|
</Trans>
|
|
</Text>
|
|
</Section>
|
|
</div>
|
|
);
|
|
};
|