Vous recevez la newsletter à l'adresse .
+ +``` + +It renders: + +```html +c•••@gmail.comcamille.durand@gmail.com +``` + +`dsMaskEmail($email)` returns the masked text alone: the first character of the local part, `•••`, +then `@` and the domain; anything that is not an address gives `•••`. + +## Tooltip — `ac-tooltip` + +Put the tooltip inside its host. The host gets `ac-tooltip-host` and, when it is not a control +already, `tabindex="0"` so that the keyboard and a tap on a touch screen can show it. + +```php + + 3 + Main cost, reserve cost in brackets + +``` + +| Class | Effect | +|---|---| +| `ac-tooltip-host` | `position: relative`; shows its `ac-tooltip` on hover (devices that can hover) and on focus (`:focus`, `:focus-within`). | +| `ac-tooltip` | Inverse bubble, small text on one line, centred above the host, with an arrow. Hidden otherwise. | +| `ac-tooltip--start` | Aligned on the host's start edge instead of centred (a host near the edge of a narrow box). | +| `ac-tooltip--below` | Under the host (a host at the top of a box that clips or scrolls, like a menu). | +| `ac-masked` | Dashed underline and a help cursor: says that there is more to see. Used with `ac-tooltip-host`. | + +## Accessibility + +- `role="tooltip"` on the bubble, `aria-describedby` from the host to it: screen readers read the + full value as the host's description. +- The host is focusable (`tabindex="0"`), so the tooltip shows on keyboard focus, and on touch + screens after a tap (no hover there). It hides when focus leaves. +- Contrast: `--ac-color-on-inverse` on `--ac-color-inverse` is ≥ 4.5:1 in both themes. + +## Frameworks + +- **Angular / React**: render the same markup; give each bubble a unique id for + `aria-describedby`. diff --git a/design-system/php/ui.php b/design-system/php/ui.php index ba9970fb..c6b6fe57 100644 --- a/design-system/php/ui.php +++ b/design-system/php/ui.php @@ -131,6 +131,29 @@ function dsResolveIcon(string $ref, ?array &$extraClasses = null): ?string { * The Altered glyph font (fak fa-collection…) is not an SVG icon: those references are * rendered as unchanged. Unknown names render nothing. */ +/** + * E-mail address with the local part hidden after its first character: "camille@gmail.com" → "c•••@gmail.com". + * Anything that is not an address becomes "•••". + */ +function dsMaskEmail(string $email): string { + $at = strrpos($email, '@'); + if ($at === false || $at === 0 || $at === strlen($email) - 1) return '•••'; + return mb_substr($email, 0, 1, 'UTF-8') . '•••' . substr($email, $at); +} + +/** + * Masked e-mail address (ac-masked) with the full address in a tooltip, shown on hover or focus: an address on screen + * must not be readable by whoever watches it (a stream, a video), only by the user who points at it. + * $tooltipClass: ac-tooltip variants ('ac-tooltip--start', 'ac-tooltip--below'). + */ +function ac_masked_email(string $email, string $tooltipClass = ''): string { + static $n = 0; + $id = 'ac-masked-' . (++$n); + $e = function (string $s): string { return htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); }; + return '' . $e(dsMaskEmail($email)) + . '' . $e($email) . ''; +} + function ac_icon(string $ref, string $class = '', ?string $label = null): string { if (preg_match('/(^|\s)(fak|fa-kit)(\s|$)/', $ref)) { return ''; diff --git a/includes/newsletter_sub.php b/includes/newsletter_sub.php index 173db96c..06265287 100644 --- a/includes/newsletter_sub.php +++ b/includes/newsletter_sub.php @@ -20,7 +20,9 @@ if (!csrfValid($_POST['csrf_token'] ?? '')) { flash('Invalid form token. Please try again.', 'error'); } else { - $nlEmail = trim($_POST['nl_email'] ?? ''); + // « Utiliser l'adresse de mon compte »: the address comes from the session, never from the page, so the page + // never has to show it. + $nlEmail = !empty($_POST['nl_use_account']) ? newsletterAccountEmail() : trim($_POST['nl_email'] ?? ''); if (!filter_var($nlEmail, FILTER_VALIDATE_EMAIL)) { flash($nlLang === 'fr' ? 'Veuillez saisir une adresse e-mail valide.' @@ -59,6 +61,14 @@ redirect(BASE_URL . '/'); } +/** E-mail address of the signed-in account (Keycloak or local), '' when signed out. */ +function newsletterAccountEmail(): string +{ + if (!empty($_SESSION['kc_logged_in'])) return (string)($_SESSION['kc_email'] ?? ''); + if (!empty($_SESSION['local_logged_in'])) return (string)($_SESSION['local_email'] ?? ''); + return ''; +} + function renderNewsletterBlock(): void { $txt = [ @@ -68,6 +78,7 @@ function renderNewsletterBlock(): void 'placeholder' => 'Your email address', 'btn' => 'Subscribe', 'privacy' => 'Your email is only used to send you news. No spam, unsubscribe anytime.', + 'use_account' => 'Use my account address', ], 'fr' => [ 'title' => 'Restez informé', @@ -75,15 +86,12 @@ function renderNewsletterBlock(): void 'placeholder' => 'Votre adresse e-mail', 'btn' => 'S\'abonner', 'privacy' => 'Votre e-mail est uniquement utilisé pour vous envoyer les actualités. Pas de spam, désinscription à tout moment.', + 'use_account' => 'Utiliser l\'adresse de mon compte', ], ][getUiLang()] ?? []; - $email = ''; - if (!empty($_SESSION['kc_logged_in'])) { - $email = $_SESSION['kc_email'] ?? ''; - } elseif (!empty($_SESSION['local_logged_in'])) { - $email = $_SESSION['local_email'] ?? ''; - } + // The field is never filled with the account's address: someone filming or streaming the homepage would show it. + $hasAccountEmail = filter_var(newsletterAccountEmail(), FILTER_VALIDATE_EMAIL) !== false; ?>diff --git a/pages/account.php b/pages/account.php index d37e60f5..40e18945 100644 --- a/pages/account.php +++ b/pages/account.php @@ -170,7 +170,7 @@
' . h($accountEmail) . '') : $txt['newsletter_off'] ?>
+' . ac_masked_email($accountEmail) . '') : $txt['newsletter_off'] ?>
Signed in as : point at the address, or focus it (ac_masked_email() renders span.ac-masked.ac-tooltip-host).
PHP ac_icon('name'), site JS acIcon('name'), Angular <ac-icon name="…">. All names: lucide.dev/icons.