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

50
frontend/src/components/notification-handler.tsx
View File

@@ -30,10 +30,9 @@ export function NotificationHandler() {
toast.custom(
(t) => (
<div
role="button"
tabIndex={0}
className="flex items-start gap-3 bg-white dark:bg-zinc-900 p-4 rounded-xl shadow-lg border border-zinc-200 dark:border-zinc-800 w-full max-w-sm cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors"
<button
type="button"
className="flex items-start gap-3 bg-white dark:bg-zinc-900 p-4 rounded-xl shadow-lg border border-zinc-200 dark:border-zinc-800 w-full max-w-sm cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors text-left"
onClick={() => {
toast.dismiss(t);
if (data.type === "message") {
@@ -42,16 +41,6 @@ export function NotificationHandler() {
router.push(`/meme/${data.contentId}`);
}
}}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
toast.dismiss(t);
if (data.type === "message") {
router.push("/messages");
} else if (data.contentId) {
router.push(`/meme/${data.contentId}`);
}
}
}}
>
<div className="bg-primary/10 p-2 rounded-full shrink-0">
{data.type === "comment" && (
@@ -71,15 +60,15 @@ export function NotificationHandler() {
</div>
<button
type="button"
className="text-muted-foreground hover:text-foreground p-1 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
onClick={(e) => {
e.stopPropagation();
toast.dismiss(t);
}}
className="text-muted-foreground hover:text-foreground"
>
<Bell className="h-3 w-3" />
</button>
</div>
</button>
),
{
duration: 5000,
@@ -91,20 +80,23 @@ export function NotificationHandler() {
socket.on("notification", handleNotification);
// Aussi pour les nouveaux messages (si on veut un toast global)
socket.on("new_message", (data: { message: any }) => {
if (window.location.pathname !== "/messages") {
toast(
`Nouveau message de @${data.message.sender?.username || "un membre"}`,
{
description: data.message.text.substring(0, 50),
action: {
label: "Voir",
onClick: () => router.push("/messages"),
socket.on(
"new_message",
(data: { message: { text: string; sender?: { username: string } } }) => {
if (window.location.pathname !== "/messages") {
toast(
`Nouveau message de @${data.message.sender?.username || "un membre"}`,
{
description: data.message.text.substring(0, 50),
action: {
label: "Voir",
onClick: () => router.push("/messages"),
},
},
},
);
}
});
);
}
},
);
return () => {
socket.off("notification");

3
frontend/src/components/share-dialog.tsx
View File

@@ -28,9 +28,10 @@ interface ShareDialogProps {
export function ShareDialog({
contentId,
contentTitle,
contentUrl: _unused, // Support legacy prop
open,
onOpenChange,
}: Omit<ShareDialogProps, "contentUrl">) {
}: ShareDialogProps) {
const [searchQuery, setSearchQuery] = React.useState("");
const [results, setResults] = React.useState<User[]>([]);
const [isLoading, setIsLoading] = React.useState(false);

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">