Skip to content

Commit e383bc9

Browse files
sabbirhosen44sabbirhosen44
committed
feat: add use settings page
1 parent 0245491 commit e383bc9

File tree

3 files changed

+239
-1
lines changed

3 files changed

+239
-1
lines changed

‎src/App.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import PricingPage from "./pages/PricingPage";
2121
import SnippetDetailPage from "./pages/snippets/SnippetDetailPage";
2222
import SnippetsPage from "./pages/snippets/SnippetsPage";
2323
import TemplatesPage from "./pages/TemplatesPage";
24+
import SettingPage from "./pages/settings/SettingPage";
2425

2526
const router = createBrowserRouter([
2627
{
@@ -51,6 +52,10 @@ const router = createBrowserRouter([
5152
path: "/dashboard",
5253
element: <DashboardPage />,
5354
},
55+
{
56+
path: "/settings",
57+
element: <SettingPage />,
58+
},
5459
{
5560
path: "/admin",
5661
element: <AdminDashboardPage />,

‎src/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
--accent-foreground: 210 40% 98%;
4444
--destructive: 0 62.8% 30.6%;
4545
--destructive-foreground: 210 40% 98%;
46-
--border: 220 20% 22%; /* Light dark border */
46+
--border: 220 20% 26%; /* Light dark border */
4747
--input: 220 20% 22%; /* Light dark input */
4848
--ring: 224.3 76.3% 48%;
4949
}

‎src/pages/settings/SettingPage.tsx‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
import LoadingSnipper from "@/components/LoadingSnipper";
2+
import {
3+
AlertDialog,
4+
AlertDialogAction,
5+
AlertDialogCancel,
6+
AlertDialogContent,
7+
AlertDialogDescription,
8+
AlertDialogFooter,
9+
AlertDialogHeader,
10+
AlertDialogTitle,
11+
AlertDialogTrigger,
12+
} from "@/components/ui/alert-dialog";
13+
import { Button } from "@/components/ui/button";
14+
import {
15+
Card,
16+
CardContent,
17+
CardDescription,
18+
CardHeader,
19+
CardTitle,
20+
} from "@/components/ui/card";
21+
import { Input } from "@/components/ui/input";
22+
import { Label } from "@/components/ui/label";
23+
import { RootState } from "@/store";
24+
import { useState } from "react";
25+
import { FaRegTrashCan } from "react-icons/fa6";
26+
import { useSelector } from "react-redux";
27+
28+
const SettingPage = () => {
29+
const { user, isAuthenticated, isLoading } = useSelector(
30+
(state: RootState) => state.auth
31+
);
32+
const [profileForm, setProfileForm] = useState({
33+
name: user?.name || "",
34+
email: user?.email || "",
35+
});
36+
37+
const [passwordForm, setPasswordForm] = useState({
38+
currentPassword: "",
39+
newPassword: "",
40+
confirmPassword: "",
41+
});
42+
43+
const profileFormChangeHandler = (field: string, value: string) => {
44+
setProfileForm((prev) => ({ ...prev, [field]: value }));
45+
};
46+
const passwordFormChangeHandler = (field: string, value: string) => {
47+
setPasswordForm((prev) => ({ ...prev, [field]: value }));
48+
};
49+
50+
const saveChangesHandler = () => {};
51+
const updatePasswordHandler = () => {};
52+
53+
if (isLoading)
54+
return <LoadingSnipper>Loading user profile...</LoadingSnipper>;
55+
56+
return (
57+
<div className="container mx-auto py-8 px-4 max-w-4xl">
58+
<div className="flex flex-col mb-8">
59+
<h2 className="text-3xl font-bold mb-2">Account Settings</h2>
60+
<p className="text-muted-foreground">
61+
Manage your account settings and preferences
62+
</p>
63+
</div>
64+
<div className="space-y-6">
65+
<Card>
66+
<CardHeader>
67+
<CardTitle>Profile Information</CardTitle>
68+
<CardDescription>Update your personal information</CardDescription>
69+
</CardHeader>
70+
<CardContent className="space-y-6">
71+
<div className="flex items-center gap-8">
72+
<img
73+
src={
74+
"https://plus.unsplash.com/premium_photo-1689977927774-401b12d137d6?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
75+
}
76+
alt="profile picture"
77+
className="h-[100px] w-[100px] object-cover rounded-full border border-border"
78+
/>
79+
<div className="space-y-2">
80+
<Label htmlFor="picture">Change picture</Label>
81+
<Input
82+
type="file"
83+
id="picture"
84+
className="border border-border"
85+
/>
86+
</div>
87+
</div>
88+
<div className="grid sm:grid-cols-2 gap-4">
89+
<div className="space-y-2">
90+
<Label>Full Name</Label>
91+
<Input
92+
type="text"
93+
placeholder=""
94+
className=" border border-border"
95+
onChange={(e) =>
96+
profileFormChangeHandler("name", e.target.value)
97+
}
98+
/>
99+
</div>
100+
<div className="space-y-2">
101+
<Label>Email Address</Label>
102+
<Input
103+
type="email"
104+
placeholder=""
105+
className=" border border-border"
106+
onChange={(e) =>
107+
profileFormChangeHandler("password", e.target.value)
108+
}
109+
/>
110+
</div>
111+
</div>
112+
<Button onClick={saveChangesHandler}>Save Changes</Button>
113+
</CardContent>
114+
</Card>
115+
<Card>
116+
<CardHeader>
117+
<CardTitle>Account Information</CardTitle>
118+
<CardDescription>View your account details</CardDescription>
119+
</CardHeader>
120+
<CardContent className="space-y-6">
121+
<div className="grid sm:grid-cols-2 gap-4">
122+
<div>
123+
<Label>Account ID</Label>
124+
<p>6872857c7a65c45646e32e03</p>
125+
</div>
126+
<div>
127+
<Label>Account Type</Label>
128+
<p>user</p>
129+
</div>
130+
<div>
131+
<Label>Current Plan</Label>
132+
<p>Free</p>
133+
</div>
134+
<div>
135+
<Label>Email Verified</Label>
136+
<p>Verified</p>
137+
</div>
138+
</div>
139+
</CardContent>
140+
</Card>
141+
<Card>
142+
<CardHeader>
143+
<CardTitle>Password</CardTitle>
144+
<CardDescription>
145+
Update your password to keep your account secure
146+
</CardDescription>
147+
</CardHeader>
148+
<CardContent className="space-y-6">
149+
<div className="grid sm:grid-cols-2 gap-4">
150+
<div className="space-y-2">
151+
<Label>Current Password</Label>
152+
<Input
153+
type="password"
154+
className=" border border-border"
155+
onChange={(e) =>
156+
passwordFormChangeHandler("currentPassword", e.target.value)
157+
}
158+
/>
159+
</div>
160+
<div className="space-y-2">
161+
<Label>New Password</Label>
162+
<Input
163+
type="password"
164+
className=" border border-border"
165+
onChange={(e) =>
166+
passwordFormChangeHandler("newPassword", e.target.value)
167+
}
168+
/>
169+
</div>
170+
<div className="space-y-2">
171+
<Label>Confirm New Password</Label>
172+
<Input
173+
type="password"
174+
className=" border border-border"
175+
onChange={(e) =>
176+
passwordFormChangeHandler("confirmPassword", e.target.value)
177+
}
178+
/>
179+
</div>
180+
</div>
181+
<Button onClick={updatePasswordHandler}>Update Password</Button>
182+
</CardContent>
183+
</Card>
184+
<Card>
185+
<CardHeader>
186+
<CardTitle className="text-destructive font-bold">
187+
Danger Zone
188+
</CardTitle>
189+
<CardDescription>Irreversible account actions </CardDescription>
190+
</CardHeader>
191+
<CardContent className="space-y-6">
192+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
193+
<div>
194+
<h3 className="font-medium">Delete Account</h3>
195+
<p className="text-sm text-muted-foreground">
196+
Permanently delete your account and all associated data
197+
</p>
198+
</div>
199+
<AlertDialog>
200+
<AlertDialogTrigger>
201+
<Button variant="destructive">
202+
<FaRegTrashCan />
203+
Delete Account
204+
</Button>
205+
</AlertDialogTrigger>
206+
<AlertDialogContent>
207+
<AlertDialogHeader>
208+
<AlertDialogTitle>
209+
Are you absolutely sure?
210+
</AlertDialogTitle>
211+
<AlertDialogDescription>
212+
This action cannot be undone. This will permanently delete
213+
your account and remove all your data from our servers
214+
including projects, snippets, and templates.
215+
</AlertDialogDescription>
216+
</AlertDialogHeader>
217+
<AlertDialogFooter>
218+
<AlertDialogCancel>Cancel</AlertDialogCancel>
219+
<AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
220+
Delete Account
221+
</AlertDialogAction>
222+
</AlertDialogFooter>
223+
</AlertDialogContent>
224+
</AlertDialog>
225+
</div>
226+
</CardContent>
227+
</Card>
228+
</div>
229+
</div>
230+
);
231+
};
232+
233+
export default SettingPage;

0 commit comments

Comments
 (0)