Preview
Full width desktop view
Code
auth-5.tsx
1"use client";
2
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5import { Label } from "@/components/ui/label";
6import {
7 Card,
8 CardContent,
9 CardDescription,
10 CardHeader,
11 CardTitle,
12} from "@/components/ui/card";
13import { ArrowLeft, Mail, CheckCircle } from "lucide-react";
14import { useState } from "react";
15
16export function LoginBlock5() {
17 const [emailSent, setEmailSent] = useState(false);
18 const [email, setEmail] = useState("");
19
20 const handleSubmit = (e: React.FormEvent) => {
21 e.preventDefault();
22 setEmailSent(true);
23 };
24
25 if (emailSent) {
26 return (
27 <section className="w-full min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/20 p-4">
28 <Card className="w-full max-w-md border-2 shadow-xl">
29 <CardHeader className="space-y-4 text-center">
30 <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center">
31 <CheckCircle className="h-8 w-8 text-green-600 dark:text-green-400" />
32 </div>
33 <div className="space-y-2">
34 <CardTitle className="text-2xl font-bold">
35 Check Your Email
36 </CardTitle>
37 <CardDescription className="text-muted-foreground">
38 We've sent a password reset link to your email address
39 </CardDescription>
40 </div>
41 </CardHeader>
42
43 <CardContent className="space-y-6">
44 <div className="text-center space-y-4">
45 <div className="p-4 bg-muted/50 rounded-lg">
46 <p className="text-sm text-muted-foreground mb-2">
47 We sent an email to:
48 </p>
49 <p className="font-medium">{email}</p>
50 </div>
51
52 <div className="text-sm text-muted-foreground space-y-2">
53 <p>Click the link in the email to reset your password.</p>
54 <p>If you don't see the email, check your spam folder.</p>
55 </div>
56 </div>
57
58 <div className="space-y-3">
59 <Button
60 variant="outline"
61 className="w-full"
62 onClick={() => setEmailSent(false)}
63 >
64 Try Different Email
65 </Button>
66
67 <Button variant="link" className="w-full">
68 Resend Email
69 </Button>
70 </div>
71
72 <div className="text-center">
73 <Button variant="ghost" className="gap-2">
74 <ArrowLeft className="h-4 w-4" />
75 Back to Sign In
76 </Button>
77 </div>
78 </CardContent>
79 </Card>
80 </section>
81 );
82 }
83
84 return (
85 <section className="w-full min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/20 p-4">
86 <Card className="w-full max-w-md border-2 shadow-xl">
87 <CardHeader className="space-y-4 text-center">
88 <div className="mx-auto w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center">
89 <Mail className="h-8 w-8 text-blue-600 dark:text-blue-400" />
90 </div>
91 <div className="space-y-2">
92 <CardTitle className="text-2xl font-bold">
93 Forgot Password?
94 </CardTitle>
95 <CardDescription className="text-muted-foreground">
96 No worries, we'll send you reset instructions
97 </CardDescription>
98 </div>
99 </CardHeader>
100
101 <CardContent className="space-y-6">
102 <form onSubmit={handleSubmit} className="space-y-4">
103 <div className="space-y-2">
104 <Label htmlFor="email">Email Address</Label>
105 <div className="relative">
106 <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
107 <Input
108 id="email"
109 type="email"
110 placeholder="Enter your email address"
111 className="pl-10"
112 value={email}
113 onChange={(e) => setEmail(e.target.value)}
114 required
115 />
116 </div>
117 </div>
118
119 <Button type="submit" className="w-full">
120 Send Reset Instructions
121 </Button>
122 </form>
123
124 <div className="text-center">
125 <Button variant="ghost" className="gap-2">
126 <ArrowLeft className="h-4 w-4" />
127 Back to Sign In
128 </Button>
129 </div>
130 </CardContent>
131 </Card>
132 </section>
133 );
134}
Dependencies
External Libraries
lucide-reactreact
Shadcn/UI Components
buttoncardinputlabel