1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
"use client";
import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { useMutation } from "@tanstack/react-query";
import { Loader2, Mail } from "lucide-react";
import { useTRPC } from "@karakeep/shared-react/trpc";
import { validateRedirectUrl } from "@karakeep/shared/utils/redirectUrl";
export default function CheckEmailPage() {
const api = useTRPC();
const searchParams = useSearchParams();
const router = useRouter();
const [message, setMessage] = useState("");
const email = searchParams.get("email");
const redirectUrl =
validateRedirectUrl(searchParams.get("redirectUrl")) ?? "/";
const resendEmailMutation = useMutation(
api.users.resendVerificationEmail.mutationOptions({
onSuccess: () => {
setMessage(
"A new verification email has been sent to your email address.",
);
},
onError: (error) => {
setMessage(error.message || "Failed to resend verification email.");
},
}),
);
const handleResendEmail = () => {
if (email) {
resendEmailMutation.mutate({ email, redirectUrl });
}
};
const handleBackToSignIn = () => {
router.push("/signin");
};
if (!email) {
return (
<div className="flex min-h-screen items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
<Card className="w-full max-w-md">
<CardHeader className="text-center">
<CardTitle className="text-2xl font-bold">
Invalid Request
</CardTitle>
<CardDescription>
No email address provided. Please try signing up again.
</CardDescription>
</CardHeader>
<CardContent>
<Button onClick={handleBackToSignIn} className="w-full">
Back to Sign In
</Button>
</CardContent>
</Card>
</div>
);
}
return (
<div className="flex min-h-screen items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
<Card className="w-full max-w-md">
<CardHeader className="text-center">
<CardTitle className="text-2xl font-bold">Check Your Email</CardTitle>
<CardDescription>
We've sent a verification link to your email address
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center justify-center">
<Mail className="h-12 w-12 text-blue-600" />
</div>
<div className="space-y-2 text-center">
<p className="text-sm text-muted-foreground">
We've sent a verification email to:
</p>
<p className="font-medium text-foreground">{email}</p>
<p className="text-sm text-muted-foreground">
Click the link in the email to verify your account and complete
your registration.
</p>
</div>
{message && (
<Alert>
<AlertDescription className="text-center">
{message}
</AlertDescription>
</Alert>
)}
<div className="space-y-2">
<Button
onClick={handleResendEmail}
variant="outline"
className="w-full"
disabled={resendEmailMutation.isPending}
>
{resendEmailMutation.isPending ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Sending...
</>
) : (
"Resend Verification Email"
)}
</Button>
<Button
onClick={handleBackToSignIn}
variant="ghost"
className="w-full"
>
Back to Sign In
</Button>
</div>
</CardContent>
</Card>
</div>
);
}
|
