107 lines
3.9 KiB
TypeScript
107 lines
3.9 KiB
TypeScript
import { StepButton } from '@/components/onboarding/step-button';
|
|
import { StepHeader } from '@/components/onboarding/step-header';
|
|
import { __ } from '@/utils/i18n';
|
|
import { Eye, EyeOff, Lock, Server, Shield, User } from 'lucide-react';
|
|
|
|
interface StepEncryptionExplainedProps {
|
|
onContinue: () => void;
|
|
}
|
|
|
|
export function StepEncryptionExplained({
|
|
onContinue,
|
|
}: StepEncryptionExplainedProps) {
|
|
return (
|
|
<div className="flex animate-in flex-col items-center text-center duration-500 fade-in slide-in-from-bottom-4">
|
|
<StepHeader
|
|
icon={Shield}
|
|
iconContainerClassName="bg-gradient-to-br from-blue-500 to-indigo-600"
|
|
title={__('Your Data, Your Privacy')}
|
|
description={__(
|
|
"Whisper Money uses end-to-end encryption to protect your financial data. Here's how it works:",
|
|
)}
|
|
/>
|
|
|
|
<div className="mb-5 grid w-full max-w-xl gap-4 sm:mb-4">
|
|
<Item
|
|
title={__('Create a Password')}
|
|
description={__(
|
|
'Only you know this password. It never leaves your device.',
|
|
)}
|
|
icon={
|
|
<User className="size-4 text-emerald-600 dark:text-emerald-400" />
|
|
}
|
|
/>
|
|
|
|
<Item
|
|
title={__('Data is Encrypted')}
|
|
description={__(
|
|
'Your data is encrypted before it leaves your browser.',
|
|
)}
|
|
icon={
|
|
<Lock className="size-4 text-blue-600 dark:text-blue-400" />
|
|
}
|
|
/>
|
|
|
|
<Item
|
|
title={__("We Can't Read It")}
|
|
description={__(
|
|
"Even we can't access your data. It's truly private.",
|
|
)}
|
|
icon={
|
|
<Server className="size-4 text-violet-600 dark:text-violet-400" />
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-8 flex w-full max-w-xl flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-muted-foreground/20 p-4">
|
|
<div className="flex items-center gap-2">
|
|
<Eye className="h-5 w-5 text-muted-foreground" />
|
|
<span className="text-sm font-medium">
|
|
{__('You see:')}
|
|
</span>
|
|
<span className="font-mono text-emerald-600 dark:text-emerald-400">
|
|
{__('STARBUCKS@TEKKA PLC')}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<EyeOff className="h-5 w-5 text-muted-foreground" />
|
|
<span className="text-sm font-medium">{__('We see:')}</span>
|
|
<span className="font-mono text-muted-foreground">
|
|
{__('$KO!F6LMHU1W%TAEQFZMD9')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<StepButton
|
|
text={__('I Understand, Continue')}
|
|
onClick={onContinue}
|
|
data-testid="encryption-continue-button"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Item({
|
|
title,
|
|
description,
|
|
icon,
|
|
}: {
|
|
title: string;
|
|
description: string;
|
|
icon: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="flex w-full flex-col items-start gap-2 rounded-xl border bg-card p-3 sm:p-5">
|
|
<div className="flex flex-row items-center gap-2">
|
|
{icon}
|
|
<h3 className="font-semibold">{title}</h3>
|
|
</div>
|
|
<div className="text-left sm:text-center">
|
|
<p className="text-sm text-pretty text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|