Mathis/memegoat
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Activity

feat: improve accessibility, security & user interaction in notifications and setup

Browse Source 
- Replaced `div` with `button` elements in `NotificationHandler` for better semantics and accessibility.
- Added conditional QR Code reveal in 2FA setup with `blur` effect for enhanced security and user control.
- Enhanced messages layout for responsiveness on smaller screens with dynamic chat/sidebar toggling.
- Simplified legacy prop handling in `ShareDialog`.
This commit is contained in:
Mathis HERRIOT
2026-01-29 17:21:19 +01:00
parent 6398965f16
commit f9b202375f
4 changed files with 92 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/components/two-factor-setup.tsx
View File

@@ -29,6 +29,7 @@ export function TwoFactorSetup() {
const [secret, setSecret] = useState<string | null>(null);
const [otpValue, setOtpValue] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [isRevealed, setIsRevealed] = useState(false);
const handleSetup = async () => {
setIsLoading(true);
@@ -152,24 +153,59 @@ export function TwoFactorSetup() {
</CardHeader>
<CardContent className="flex flex-col items-center gap-6">
{qrCode && (
<div className="bg-white p-4 rounded-xl border-4 border-zinc-100">
<Image
src={qrCode}
alt="QR Code 2FA"
width={192}
height={192}
className="w-48 h-48"
unoptimized
/>
<div className="relative group">
<div
className={`bg-white p-4 rounded-xl border-4 border-zinc-100 transition-all duration-300 ${
!isRevealed ? "blur-md select-none" : ""
}`}
>
<Image
src={qrCode}
alt="QR Code 2FA"
width={192}
height={192}
className="w-48 h-48"
unoptimized
/>
</div>
{!isRevealed && (
<div className="absolute inset-0 flex items-center justify-center">
<Button
variant="secondary"
size="sm"
onClick={() => setIsRevealed(true)}
className="shadow-lg"
>
Afficher le QR Code
</Button>
</div>
)}
</div>
)}
<div className="w-full space-y-2">
<p className="text-sm font-medium text-center">
Ou entrez ce code manuellement :
</p>
<code className="block p-2 bg-muted text-center rounded text-xs font-mono break-all">
{secret}
</code>
<div className="relative group">
<code
className={`block p-2 bg-muted text-center rounded text-xs font-mono break-all transition-all duration-300 ${
!isRevealed ? "blur-[3px] select-none" : ""
}`}
>
{secret}
</code>
{!isRevealed && (
<div className="absolute inset-0 flex items-center justify-center">
<button
type="button"
onClick={() => setIsRevealed(true)}
className="text-[10px] font-bold uppercase tracking-wider text-primary hover:underline"
>
Afficher le code
</button>
</div>
)}
</div>
</div>
<div className="flex flex-col items-center gap-4 w-full border-t pt-6">
<p className="text-sm font-medium">