Insert email verification card
cgen-eaca7a347a2c46bf92a8f561a84f0e19
This commit is contained in:
Builder.io
parent
f35088540c
commit
d66f4622b4
1 changed files with 145 additions and 0 deletions
|
|
@ -331,6 +331,151 @@ export default function Welcome({
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
{/* Email Verification Reminder */}
|
||||||
|
<Card
|
||||||
|
className={`max-w-2xl mx-auto bg-background/40 backdrop-blur ${verificationBorderClass}`}
|
||||||
|
>
|
||||||
|
<CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div
|
||||||
|
className={`flex h-11 w-11 items-center justify-center rounded-full ${verificationIconBg}`}
|
||||||
|
>
|
||||||
|
<VerificationIcon className="h-5 w-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-base">
|
||||||
|
{isVerified ? "Email verified" : "Verify your email to continue"}
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className={verificationDescriptionClass}>
|
||||||
|
{isVerified
|
||||||
|
? `You're verified with ${emailAddress || "your email address"}.`
|
||||||
|
: `Confirm ${emailAddress || "your email"} so you can sign back in after onboarding.`}
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge className={verificationBadgeClass}>
|
||||||
|
{isVerified ? "Verified" : "Action required"}
|
||||||
|
</Badge>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3 text-sm">
|
||||||
|
{isVerified ? (
|
||||||
|
<p className="text-foreground/80">
|
||||||
|
You're good to go. Keep this email handy for account recovery and
|
||||||
|
notifications.
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p className="text-foreground/80">
|
||||||
|
Check your inbox for the AeThex verification email. You must
|
||||||
|
confirm it before you can sign in again.
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc space-y-1 pl-5 text-foreground/70">
|
||||||
|
<li>Look in your spam or promotions folder.</li>
|
||||||
|
<li>
|
||||||
|
Add
|
||||||
|
<span className="mx-1 font-mono text-xs text-foreground/80">
|
||||||
|
support@aethex.biz
|
||||||
|
</span>
|
||||||
|
to your safe sender list.
|
||||||
|
</li>
|
||||||
|
<li>Use the buttons below to resend or check your status.</li>
|
||||||
|
</ul>
|
||||||
|
<div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
className="border-border/50"
|
||||||
|
onClick={handleResendVerification}
|
||||||
|
disabled={isSendingVerification}
|
||||||
|
>
|
||||||
|
{isSendingVerification && (
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
)}
|
||||||
|
Resend verification email
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
className="bg-aethex-500/20 text-aethex-100 border border-aethex-500/40"
|
||||||
|
onClick={handleCheckVerification}
|
||||||
|
disabled={isCheckingVerification}
|
||||||
|
>
|
||||||
|
{isCheckingVerification && (
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
)}
|
||||||
|
I verified, check again
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{fallbackVerificationLink ? (
|
||||||
|
<div className="space-y-2 rounded border border-border/40 bg-background/60 p-3">
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Email delivery failed. Copy this link into your browser to
|
||||||
|
verify manually:
|
||||||
|
</p>
|
||||||
|
<p className="break-all rounded bg-background/80 px-3 py-2 font-mono text-[11px] text-foreground/90">
|
||||||
|
{fallbackVerificationLink}
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="border-aethex-400/40"
|
||||||
|
onClick={() =>
|
||||||
|
window.open(
|
||||||
|
fallbackVerificationLink,
|
||||||
|
"_blank",
|
||||||
|
"noopener",
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Open verification link
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
className="text-aethex-300 hover:text-aethex-200"
|
||||||
|
onClick={() => {
|
||||||
|
if (
|
||||||
|
typeof navigator !== "undefined" &&
|
||||||
|
navigator.clipboard?.writeText
|
||||||
|
) {
|
||||||
|
navigator.clipboard
|
||||||
|
.writeText(fallbackVerificationLink)
|
||||||
|
.then(() =>
|
||||||
|
toastInfo({
|
||||||
|
title: "Link copied",
|
||||||
|
description:
|
||||||
|
"Paste the link into your browser to verify.",
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
.catch(() =>
|
||||||
|
toastWarning({
|
||||||
|
title: "Copy failed",
|
||||||
|
description:
|
||||||
|
"Copy the link manually from the box above.",
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
toastWarning({
|
||||||
|
title: "Copy unavailable",
|
||||||
|
description:
|
||||||
|
"Copy the link manually from the box above.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Copy link
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
{/* Achievement Badge */}
|
{/* Achievement Badge */}
|
||||||
{achievement && (
|
{achievement && (
|
||||||
<Card className="max-w-2xl mx-auto border border-emerald-500/40 bg-emerald-500/10">
|
<Card className="max-w-2xl mx-auto border border-emerald-500/40 bg-emerald-500/10">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue