70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { FiAlertCircle, FiMail } from "react-icons/fi";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { privateApi } from "@/api/privateClient";
|
|
|
|
export const BANNER_H = "40px";
|
|
|
|
export default function TopBanner() {
|
|
const { user, isLoading } = useAuth();
|
|
const [sending, setSending] = useState(false);
|
|
const [sent, setSent] = useState(false);
|
|
const [cooldown, setCooldown] = useState(0);
|
|
|
|
const show = !isLoading && !!user && user.email_verified === false;
|
|
|
|
useEffect(() => {
|
|
document.documentElement.style.setProperty("--top-banner-h", show ? BANNER_H : "0px");
|
|
}, [show]);
|
|
|
|
useEffect(() => {
|
|
if (cooldown <= 0) return;
|
|
const t = setTimeout(() => setCooldown((s) => s - 1), 1000);
|
|
return () => clearTimeout(t);
|
|
}, [cooldown]);
|
|
|
|
async function handleResend() {
|
|
setSending(true);
|
|
try {
|
|
await privateApi.post("/api/account/resend-verification/");
|
|
setSent(true);
|
|
} catch (err: any) {
|
|
const secs = err?.response?.data?.seconds_remaining;
|
|
if (secs) setCooldown(secs);
|
|
} finally {
|
|
setSending(false);
|
|
}
|
|
}
|
|
|
|
if (!show) return null;
|
|
|
|
return (
|
|
<div
|
|
role="alert"
|
|
aria-live="polite"
|
|
className="fixed top-0 left-0 right-0 z-[200] flex items-center justify-center gap-2.5 px-12 text-amber-200 text-[0.8rem]"
|
|
style={{
|
|
height: BANNER_H,
|
|
background: "color-mix(in hsl, #92400e, var(--c-background) 15%)",
|
|
borderBottom: "1px solid color-mix(in hsl, #f59e0b, transparent 55%)",
|
|
}}
|
|
>
|
|
<FiAlertCircle size={14} className="shrink-0 text-amber-400" />
|
|
<span>Tvůj e-mail ještě není ověřen.</span>
|
|
|
|
{sent ? (
|
|
<span className="text-emerald-300 font-semibold">E-mail odeslán!</span>
|
|
) : (
|
|
<button
|
|
onClick={handleResend}
|
|
disabled={sending || cooldown > 0}
|
|
className="inline-flex items-center gap-1.5 rounded-full border border-amber-400/55 bg-amber-400/25 px-2.5 py-0.5 text-[0.75rem] font-semibold text-amber-200 transition-opacity disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
<FiMail size={11} />
|
|
{sending ? "Odesílám…" : cooldown > 0 ? `Počkej ${cooldown}s` : "Odeslat znovu"}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|