feat: add close button to breach notice banner

also clarify in the notice
This commit is contained in:
trafficlunar 2026-05-13 17:24:15 +01:00
parent 579b6d855f
commit 15aa729e00
2 changed files with 33 additions and 13 deletions

View file

@ -23,6 +23,13 @@ export default function AdminBanner() {
const [message, setMessage] = useState<string | null>(null); const [message, setMessage] = useState<string | null>(null);
const [shouldShow, setShouldShow] = useState(false); const [shouldShow, setShouldShow] = useState(false);
const [showBreachNotice, setShowBreachNotice] = useState(() => {
if (Date.now() >= new Date("2026-05-20T00:00:00+01:00").getTime()) return false;
const closed = localStorage.getItem("closedBreachNotice");
return closed !== "true";
});
useEffect(() => { useEffect(() => {
fetch(`${import.meta.env.VITE_API_URL}/api/admin/banner`) fetch(`${import.meta.env.VITE_API_URL}/api/admin/banner`)
.then((res) => { .then((res) => {
@ -48,6 +55,14 @@ export default function AdminBanner() {
setShouldShow(false); setShouldShow(false);
}; };
const handleCloseBreachNotice = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
localStorage.setItem("closedBreachNotice", "true");
setShowBreachNotice(false);
};
return ( return (
<> <>
{shouldShow && message && ( {shouldShow && message && (
@ -64,6 +79,7 @@ export default function AdminBanner() {
)} )}
<RedirectBanner /> <RedirectBanner />
{showBreachNotice && (
<a <a
href="/breach-notice" href="/breach-notice"
className="relative w-full min-h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 pl-2 shadow-md flex justify-center items-center text-orange-900 text-nowrap overflow-x-auto font-semibold max-sm:justify-between" className="relative w-full min-h-10 bg-orange-300 border-y-2 border-y-orange-400 mt-1 pl-2 shadow-md flex justify-center items-center text-orange-900 text-nowrap overflow-x-auto font-semibold max-sm:justify-between"
@ -73,10 +89,11 @@ export default function AdminBanner() {
<span>A data breach has happened, click here for more info.</span> <span>A data breach has happened, click here for more info.</span>
</div> </div>
{/* <button onClick={handleClose} className="sm:absolute right-2 cursor-pointer p-1.5"> <button onClick={handleCloseBreachNotice} className="sm:absolute right-2 cursor-pointer p-1.5">
<Icon icon="humbleicons:times" className="text-2xl min-w-6" /> <Icon icon="humbleicons:times" className="text-2xl min-w-6" />
</button> */} </button>
</a> </a>
)}
</> </>
); );
} }

View file

@ -29,10 +29,13 @@ export default function BreachNoticePage() {
The only data that wouldn't normally be viewable is your email address (the same thing you would give to people to receive emails), everything else was The only data that wouldn't normally be viewable is your email address (the same thing you would give to people to receive emails), everything else was
publicly viewable (such as on the profile pages). The code that caused this to happen has already been fixed. publicly viewable (such as on the profile pages). The code that caused this to happen has already been fixed.
</p> </p>
<p> <p className="mb-2">
As far as I'm aware, no other information have been collected. The breach has been notified to the Information Commissioner's Office. Please take care As far as I'm aware, no other information have been collected. The breach has been notified to the Information Commissioner's Office. Please take care
when opening any suspicious emails. <strong>TomodachiShare does not send any emails.</strong> Please do not click on any suspicious links. when opening any suspicious emails. <strong>TomodachiShare does not send any emails.</strong> Please do not click on any suspicious links.
</p> </p>
<p>
<strong>Your Discord/Google/GitHub accounts are completely unaffected by this.</strong>
</p>
</div> </div>
); );
} }