pastilhas
bde59eb74e
The locale picker's labels are now AUTONYMS computed from Intl -- each language named in its own language, so "Português europeu" reads as Portuguese whichever locale the UI is in. That is the convention for a language picker and the useful behaviour: somebody who cannot read the current language still has to find theirs. CapabilityPage interpolated the capability KIND into six strings by lowercasing it in code. "skill" does not lowercase into a Portuguese noun, so kind is a parameter now. What is left is two strings, both deliberate: see the next commit message.
55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
import { useState } from 'react';
|
|
import { toast } from 'sonner';
|
|
import { KeyRound } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card } from '@/components/Card';
|
|
import { useAuth } from 'hooks/useAuth';
|
|
import { useTranslation } from '@/lib/i18n';
|
|
|
|
export const PasskeyGate = () => {
|
|
const { t } = useTranslation();
|
|
const { user, createPasskeyCredentials } = useAuth();
|
|
const [isRegistering, setIsRegistering] = useState(false);
|
|
|
|
const handleRegister = async () => {
|
|
if (!user || isRegistering) return;
|
|
|
|
setIsRegistering(true);
|
|
try {
|
|
await createPasskeyCredentials(user);
|
|
} catch (ex) {
|
|
const error = ex as { message?: string };
|
|
toast.error(error.message || 'Failed to register passkey. Please try again.');
|
|
} finally {
|
|
setIsRegistering(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center justify-center h-full px-4">
|
|
<Card className="w-full max-w-md p-8">
|
|
<div className="flex flex-col items-center text-center gap-4">
|
|
<div className="rounded-full bg-duck-teal/10 p-4">
|
|
<KeyRound className="h-8 w-8 text-duck-teal" />
|
|
</div>
|
|
|
|
<h2 className="text-2xl font-bold text-duck-dark">{t('passkeyGate.setUp')}</h2>
|
|
|
|
<p className="text-duck-dark/70">
|
|
Passkeys provide a secure, passwordless way to access your account. Each device or browser needs its own
|
|
passkey.
|
|
</p>
|
|
|
|
<Button
|
|
onClick={handleRegister}
|
|
disabled={isRegistering}
|
|
className="w-full h-11 mt-2 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
|
|
>
|
|
{isRegistering ? 'Registering...' : 'Register Passkey'}
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|