Skip to content

Commit 93c35b8

Browse files
bensohhbensohh
committed
Develop profile page components
1 parent 328d3a7 commit 93c35b8

File tree

2 files changed

+227
-0
lines changed

2 files changed

+227
-0
lines changed

‎apps/frontend/src/app/profile/page.tsx‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
"use client";
2+
import Header from "@/components/Header/header";
3+
import { Avatar, Button, Col, Divider, Form, Input, Layout, Row } from "antd";
4+
import { Content } from "antd/es/layout/layout";
5+
import "./styles.scss";
6+
import { EditOutlined, SaveOutlined } from "@ant-design/icons";
7+
import { useEffect, useState } from "react";
8+
9+
interface ProfilePageProps {}
10+
11+
const ProfilePage = (props: ProfilePageProps): JSX.Element => {
12+
const [form] = Form.useForm();
13+
const [isEditable, setIsEditable] = useState<boolean>(false);
14+
const [refresh, setRefresh] = useState<boolean>(false);
15+
16+
useEffect(() => {
17+
// TODO: Retrieve the user details via validate JWT token api
18+
19+
// TODO: Set initial form value with the retrieved value above
20+
form.setFieldsValue({
21+
username: "",
22+
password: "",
23+
email: "",
24+
});
25+
}, [refresh]);
26+
27+
return (
28+
<Layout className="layout">
29+
<Header selectedKey={undefined} />
30+
<Content className="content">
31+
<div className="content-card1">
32+
<div className="gradient-header"></div>
33+
<div className="profile-header">
34+
<div className="left-header">
35+
{/* TODO: Replace with the first initial of username */}
36+
<Avatar size={80} className="avatar">
37+
A
38+
</Avatar>
39+
<div className="name-container">
40+
{/* TODO: Set the value in field correctly within the useEffect above and this should work */}
41+
<div className="username">{form.getFieldValue("username")}</div>
42+
<div className="email">{form.getFieldValue("email")}</div>
43+
</div>
44+
</div>
45+
<div className="right-header">
46+
{isEditable && (
47+
<>
48+
<Button
49+
icon={<SaveOutlined />}
50+
type="primary"
51+
className="save-button"
52+
htmlType="submit"
53+
>
54+
Save
55+
</Button>
56+
<Button
57+
className="cancel-button"
58+
onClick={() => {
59+
setIsEditable(false);
60+
}}
61+
>
62+
Cancel
63+
</Button>
64+
</>
65+
)}
66+
{!isEditable && (
67+
<Button
68+
icon={<EditOutlined />}
69+
className="edit-button"
70+
onClick={() => setIsEditable(true)}
71+
>
72+
Edit
73+
</Button>
74+
)}
75+
</div>
76+
</div>
77+
<div className="profile-form">
78+
<Form
79+
form={form}
80+
onFinish={(values) => {
81+
// TODO: Make PATCH api request to update user details here
82+
83+
// TODO: On success show success notification message else display error notification
84+
85+
// Set editable to false
86+
setIsEditable(false);
87+
88+
// Refresh data
89+
setRefresh(!refresh);
90+
}}
91+
layout="vertical"
92+
disabled={!isEditable}
93+
>
94+
<Row gutter={16}>
95+
<Col span={12}>
96+
<Form.Item
97+
name="username"
98+
label="Username"
99+
rules={[
100+
{
101+
required: true,
102+
message: "Please enter valid username!",
103+
},
104+
]}
105+
>
106+
<Input name="username" />
107+
</Form.Item>
108+
</Col>
109+
<Col span={12}>
110+
<Form.Item
111+
name="email"
112+
label="Email"
113+
rules={[
114+
{
115+
required: true,
116+
message: "Please enter valid email!",
117+
},
118+
]}
119+
>
120+
<Input name="email" type="email" disabled />
121+
</Form.Item>
122+
</Col>
123+
</Row>
124+
<Row gutter={16}>
125+
<Col span={12}>
126+
<Form.Item
127+
name="password"
128+
label="Password"
129+
rules={[
130+
{
131+
required: true,
132+
message: "Please enter valid password!",
133+
},
134+
]}
135+
>
136+
<Input.Password name="password" type="password" />
137+
</Form.Item>
138+
</Col>
139+
</Row>
140+
</Form>
141+
</div>
142+
</div>
143+
</Content>
144+
</Layout>
145+
);
146+
};
147+
148+
export default ProfilePage;

‎apps/frontend/src/app/profile/styles.scss‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
.layout {
2+
background: white;
3+
}
4+
5+
.content {
6+
background: white !important;
7+
}
8+
9+
.content-card1 {
10+
position: relative;
11+
margin: 4rem 18rem;
12+
padding: 7rem 4rem 2rem;
13+
background-color: white;
14+
// min-height: 80vh;
15+
border-radius: 30px;
16+
box-shadow: 0px 10px 60px rgba(226, 236, 249, 0.5);
17+
}
18+
19+
.profile-header {
20+
position: relative;
21+
z-index: 2;
22+
display: flex;
23+
justify-content: space-between;
24+
}
25+
26+
.left-header {
27+
display: flex;
28+
}
29+
30+
.right-header {
31+
margin: auto 0;
32+
}
33+
34+
.avatar {
35+
font-size: 32px !important;
36+
background-color: rgb(189, 189, 189) !important;
37+
}
38+
39+
.name-container {
40+
margin: auto 2rem;
41+
}
42+
43+
.username {
44+
font-size: 24px;
45+
font-weight: 600;
46+
margin-bottom: 8px;
47+
}
48+
49+
.email {
50+
font-weight: 20px;
51+
font-weight: 500;
52+
color: rgb(171, 170, 170);
53+
margin-bottom: 12px;
54+
}
55+
.edit-button,
56+
.cancel-button {
57+
width: 80px;
58+
}
59+
60+
.save-button {
61+
margin-right: 8px;
62+
box-shadow: none !important;
63+
}
64+
65+
.profile-form {
66+
padding: 2rem 0;
67+
}
68+
69+
.gradient-header {
70+
position: absolute;
71+
top: 0;
72+
left: 0;
73+
width: 100%;
74+
height: 80px; /* Adjust this to control the gradient height */
75+
background: linear-gradient(to right, #e0afa0, #463f3a);
76+
z-index: 1; /* Ensure this is lower than the profile header */
77+
border-top-left-radius: 30px;
78+
border-top-right-radius: 30px;
79+
}

0 commit comments

Comments
 (0)