Skip to content

Commit f34be2f

Browse files
Gerome-ElassaadGerome-Elassaad
authored
Merge pull request Gerome-Elassaad#9 from Gerome-Elassaad/6-prompt-enhancement
created settings pages
2 parents c66fcac + 2a7a010 commit f34be2f

File tree

24 files changed

+1836
-65
lines changed

24 files changed

+1836
-65
lines changed

‎app/settings/account/page.tsx‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
'use client'
2+
3+
import { Button } from '@/components/ui/button'
4+
import { Input } from '@/components/ui/input'
5+
import { Label } from '@/components/ui/label'
6+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
7+
import { Switch } from '@/components/ui/switch'
8+
import { Separator } from '@/components/ui/separator'
9+
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
10+
import { AlertTriangle, Camera, Mail, Shield } from 'lucide-react'
11+
import { useState } from 'react'
12+
13+
export default function AccountSettings() {
14+
const [email, setEmail] = useState('[email protected]')
15+
const [currentPassword, setCurrentPassword] = useState('')
16+
const [newPassword, setNewPassword] = useState('')
17+
const [confirmPassword, setConfirmPassword] = useState('')
18+
const [twoFactorEnabled, setTwoFactorEnabled] = useState(false)
19+
const [emailNotifications, setEmailNotifications] = useState(true)
20+
21+
const handleSaveEmail = () => {
22+
console.log('Saving email:', email)
23+
}
24+
25+
const handleChangePassword = () => {
26+
console.log('Changing password...')
27+
}
28+
29+
const handleEnable2FA = () => {
30+
console.log('Enabling 2FA...')
31+
}
32+
33+
return (
34+
<div className="space-y-6">
35+
<div>
36+
<h2 className="text-lg font-medium">Account</h2>
37+
<p className="text-sm text-muted-foreground">
38+
Manage your account settings and security preferences.
39+
</p>
40+
</div>
41+
42+
<Card>
43+
<CardHeader>
44+
<CardTitle>Profile Picture</CardTitle>
45+
<CardDescription>
46+
Update your profile picture.
47+
</CardDescription>
48+
</CardHeader>
49+
<CardContent>
50+
<div className="flex items-center gap-4">
51+
<Avatar className="h-20 w-20">
52+
<AvatarImage src="https://avatar.vercel.sh/[email protected]" />
53+
<AvatarFallback>U</AvatarFallback>
54+
</Avatar>
55+
<div className="space-y-2">
56+
<Button variant="outline" size="sm">
57+
<Camera className="h-4 w-4 mr-2" />
58+
Change picture
59+
</Button>
60+
<p className="text-xs text-muted-foreground">
61+
JPG, PNG or GIF. Max size 2MB.
62+
</p>
63+
</div>
64+
</div>
65+
</CardContent>
66+
</Card>
67+
68+
<Card>
69+
<CardHeader>
70+
<CardTitle>Email Address</CardTitle>
71+
<CardDescription>
72+
Your email address is used for account authentication and notifications.
73+
</CardDescription>
74+
</CardHeader>
75+
<CardContent className="space-y-4">
76+
<div className="space-y-2">
77+
<Label htmlFor="email">Email</Label>
78+
<div className="flex gap-2">
79+
<Input
80+
id="email"
81+
type="email"
82+
value={email}
83+
onChange={(e) => setEmail(e.target.value)}
84+
className="flex-1"
85+
/>
86+
<Button onClick={handleSaveEmail}>Update</Button>
87+
</div>
88+
</div>
89+
90+
<div className="flex items-center gap-2 text-sm text-muted-foreground">
91+
<Mail className="h-4 w-4" />
92+
<span>Verification email will be sent to confirm changes</span>
93+
</div>
94+
</CardContent>
95+
</Card>
96+
97+
<Card>
98+
<CardHeader>
99+
<CardTitle>Password</CardTitle>
100+
<CardDescription>
101+
Change your account password. Choose a strong password for better security.
102+
</CardDescription>
103+
</CardHeader>
104+
<CardContent className="space-y-4">
105+
<div className="space-y-2">
106+
<Label htmlFor="currentPassword">Current password</Label>
107+
<Input
108+
id="currentPassword"
109+
type="password"
110+
value={currentPassword}
111+
onChange={(e) => setCurrentPassword(e.target.value)}
112+
/>
113+
</div>
114+
115+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
116+
<div className="space-y-2">
117+
<Label htmlFor="newPassword">New password</Label>
118+
<Input
119+
id="newPassword"
120+
type="password"
121+
value={newPassword}
122+
onChange={(e) => setNewPassword(e.target.value)}
123+
/>
124+
</div>
125+
126+
<div className="space-y-2">
127+
<Label htmlFor="confirmPassword">Confirm password</Label>
128+
<Input
129+
id="confirmPassword"
130+
type="password"
131+
value={confirmPassword}
132+
onChange={(e) => setConfirmPassword(e.target.value)}
133+
/>
134+
</div>
135+
</div>
136+
137+
<Button onClick={handleChangePassword}>Change password</Button>
138+
</CardContent>
139+
</Card>
140+
141+
<Card>
142+
<CardHeader>
143+
<CardTitle>Two-Factor Authentication</CardTitle>
144+
<CardDescription>
145+
Add an extra layer of security to your account.
146+
</CardDescription>
147+
</CardHeader>
148+
<CardContent className="space-y-4">
149+
<div className="flex items-center justify-between">
150+
<div className="flex items-center gap-3">
151+
<div className="rounded-lg bg-muted p-2">
152+
<Shield className="h-5 w-5" />
153+
</div>
154+
<div>
155+
<h4 className="font-medium">Authenticator App</h4>
156+
<p className="text-sm text-muted-foreground">
157+
{twoFactorEnabled ? 'Two-factor authentication is enabled' : 'Two-factor authentication is disabled'}
158+
</p>
159+
</div>
160+
</div>
161+
<div className="flex items-center gap-2">
162+
{!twoFactorEnabled && (
163+
<Button onClick={handleEnable2FA} size="sm">
164+
Enable
165+
</Button>
166+
)}
167+
<Switch
168+
checked={twoFactorEnabled}
169+
onCheckedChange={setTwoFactorEnabled}
170+
/>
171+
</div>
172+
</div>
173+
</CardContent>
174+
</Card>
175+
176+
<Card>
177+
<CardHeader>
178+
<CardTitle>Notifications</CardTitle>
179+
<CardDescription>
180+
Manage your notification preferences.
181+
</CardDescription>
182+
</CardHeader>
183+
<CardContent>
184+
<div className="flex items-center justify-between">
185+
<div className="space-y-1">
186+
<h4 className="font-medium">Email notifications</h4>
187+
<p className="text-sm text-muted-foreground">
188+
Receive emails about account activity and product updates
189+
</p>
190+
</div>
191+
<Switch
192+
checked={emailNotifications}
193+
onCheckedChange={setEmailNotifications}
194+
/>
195+
</div>
196+
</CardContent>
197+
</Card>
198+
199+
<Card>
200+
<CardHeader>
201+
<CardTitle className="flex items-center gap-2">
202+
<AlertTriangle className="h-5 w-5 text-destructive" />
203+
Danger Zone
204+
</CardTitle>
205+
<CardDescription>
206+
Irreversible actions that will affect your account.
207+
</CardDescription>
208+
</CardHeader>
209+
<CardContent className="space-y-4">
210+
<Separator />
211+
<div className="space-y-4">
212+
<div>
213+
<h4 className="font-medium text-destructive mb-2">Delete Account</h4>
214+
<p className="text-sm text-muted-foreground mb-4">
215+
Permanently delete your account and all associated data. This action cannot be undone.
216+
</p>
217+
<Button variant="destructive">
218+
Delete my account
219+
</Button>
220+
</div>
221+
</div>
222+
</CardContent>
223+
</Card>
224+
</div>
225+
)
226+
}

0 commit comments

Comments
 (0)